/* ==========================================================================
   DotnDot Insights page — sections that only this page uses.
   Loaded after site.css (post cards, covers) and inner.css (page hero, dark band).
   ========================================================================== */

/* ===== shared bits: date + reading time ===== */
.post-meta{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 "Inter Tight",sans-serif;color:var(--muted);white-space:nowrap}
.post-meta i{width:4px;height:4px;border-radius:50%;background:var(--red)}
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}

/* ===== 1. Featured: the latest article, large ===== */
#featured{padding-top:clamp(32px,3.4vw,50px)}
.feat-post{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:14px;
  border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:0 50px 90px -60px rgba(10,13,49,.5)}
.post-cover.big{width:100%;max-width:100%;margin:0;border-radius:22px}
.post-cover.big .pc-in{border-radius:19px}
.post-cover.big .pc-title{font-size:clamp(26px,3vw,42px)}
.post-cover.big .pc-logo{top:18px;right:18px;width:46px;height:46px}
.feat-post:hover .post-cover{animation-duration:2.4s;box-shadow:0 18px 40px -22px rgba(38,114,172,.7)}
.feat-post:hover .pc-title{transform:scale(1.04)}
.fp-body{padding:10px 26px 10px 0}
.fp-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fp-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--navy);color:#fff;
  font:600 11.5px/1 "Inter Tight",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.fp-badge .dnd i:first-child{background:#5FA2D6}
.fp-top .post-cat{align-self:center}
.fp-title{margin-top:18px;font:600 clamp(24px,2.4vw,34px)/1.22 Poppins,sans-serif;color:var(--navy);letter-spacing:-.01em}
.fp-title a{transition:color .3s}
.fp-title a:hover{color:var(--blue)}
.fp-body .post-meta{margin-top:14px}
.fp-ex{margin-top:14px;font:500 16px/1.7 "Inter Tight",sans-serif;color:var(--muted)}

/* ===== 2. All articles: topic chips, search, grid, load more ===== */
.ins-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:38px;padding:0 16px;border-radius:999px;background:#fff;border:1.5px solid var(--line);white-space:nowrap;
  font:600 13px/1 "Inter Tight",sans-serif;color:var(--navy);transition:background .3s,border-color .3s,color .3s}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ins-search{position:relative;display:flex;align-items:center;width:min(300px,100%)}
.ins-search .ic{position:absolute;left:15px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.ins-search input{width:100%;height:44px;padding:0 16px 0 42px;border-radius:999px;border:1.5px solid var(--line);background:#fff;outline:none;
  font:500 14px/1 "Inter Tight",sans-serif;color:var(--navy);transition:border-color .3s,box-shadow .3s}
.ins-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(38,114,172,.12)}
.ins-grid .post[hidden]{display:none}
.ins-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 20px;border:1.5px dashed var(--line);border-radius:22px;background:#fff;
  text-align:center;font:500 15px/1.5 "Inter Tight",sans-serif;color:var(--muted)}
.ins-empty[hidden],.ins-more-row[hidden]{display:none}
.ins-empty b{font:600 18px/1.3 Poppins,sans-serif;color:var(--navy)}

/* ===== 3. Topics: animated bar chart of articles per topic ===== */
.tp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,72px);align-items:center}
.tp-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tp-more a{padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font:600 12.5px/1 "Inter Tight",sans-serif;color:#DDE3F6;transition:background .3s,border-color .3s,color .3s}
.tp-more a:hover{background:var(--red);border-color:var(--red);color:#fff}
.tp-card{padding:24px 24px 18px;border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.tp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 8px 10px;font:600 15px/1.2 Poppins,sans-serif;color:#fff}
.tp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(95,162,214,.14);white-space:nowrap;
  font:600 11.5px/1 "Inter Tight",sans-serif;color:#8EC3EE}
.tp-chip i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(218,37,30,.25)}
.tp-row{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;align-items:center;gap:14px;padding:9px 8px;border-radius:12px;transition:background .3s}
.tp-row:hover{background:rgba(255,255,255,.05)}
.tp-name{font:600 13.5px/1.2 "Inter Tight",sans-serif;color:#C9D3E6;transition:color .3s}
.tp-row:hover .tp-name{color:#fff}
.tp-track{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.tp-bar{display:block;width:var(--w);height:100%;border-radius:999px;background:linear-gradient(90deg,#2672AC,#5FA2D6);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) var(--d,0s),filter .3s}
.tp-row:first-of-type .tp-bar{background:linear-gradient(90deg,#DA251E,#FF6A60)}
.tp-card.in .tp-bar{transform:none}
.tp-row:hover .tp-bar{filter:brightness(1.2)}
.tp-n{font:700 15px/1 Poppins,sans-serif;color:#fff;text-align:right;font-variant-numeric:tabular-nums}

/* ===== responsive ===== */
@media (max-width:1100px){
  .tp-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .feat-post{grid-template-columns:1fr;gap:22px}
  .fp-body{padding:0 12px 14px}
  .ins-search{width:100%}
}
@media (max-width:560px){
  .chips-row{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
  .chips-row::-webkit-scrollbar{display:none}
  .tp-card{padding:18px 12px 12px}
  .tp-row{grid-template-columns:104px minmax(0,1fr) 36px;gap:10px;padding:9px 6px}
  .tp-name{font-size:12.5px}
}