/* ============================================================
   Insights hub — page-scoped styles (body.page-insights only).
   Loaded ONLY by insights/index.html, after styles.css. Reuses the
   landing design tokens and the .pcard / .eyebrow / .btn / .wrap /
   .cta-row components; adds only hub-specific layout. Every selector is
   gated on .page-insights, so nothing here can affect the landing page
   or any other page. No global element or .card rules.
   ============================================================ */

body.page-insights{background:var(--ink);color:var(--on-ink)}

/* --- 1. Compact hero --- */
.page-insights .ins-hero{padding:clamp(26px,3.6vw,48px) 0 clamp(18px,2.2vw,28px)}
.page-insights .ins-hero .eyebrow{color:var(--accent-bright)}
.page-insights .ins-h1{font-family:var(--serif);max-width:20em;margin:10px 0 0;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem);line-height:1.08;letter-spacing:-.01em;color:var(--on-ink)}
.page-insights .ins-lede{max-width:62ch;margin:clamp(12px,1.6vw,18px) 0 0;font-family:var(--sans);
  color:var(--on-ink-muted);line-height:1.6;font-size:clamp(1rem,.96rem + .3vw,1.12rem)}

/* --- 2. Topic navigation — lighter than the capability cards --- */
.page-insights .ins-topics{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(18px,2.4vw,26px) 0 0}
.page-insights .ins-topic{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-ink-muted);padding:7px 13px;border:1px solid rgba(237,241,244,.16);
  border-radius:999px;background:transparent;cursor:pointer;text-decoration:none;line-height:1;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.page-insights .ins-topic:hover{color:var(--on-ink);border-color:rgba(98,214,190,.5)}
.page-insights .ins-topic:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
.page-insights .ins-topic.is-selected{color:var(--ink);background:var(--accent-bright);
  border-color:var(--accent-bright);font-weight:600}

/* --- Section rhythm --- */
.page-insights .ins-section{padding:clamp(26px,3.4vw,44px) 0 0}
.page-insights .ins-sec-label{margin:0 0 var(--s3);color:var(--accent-bright)}

/* --- 3. Featured insight — one wide card (reuses .pcard) --- */
.page-insights .ins-featured{padding:clamp(20px,2.6vw,32px)}
.page-insights .ins-featured .pcard-title{font-size:clamp(1.15rem,1rem + .6vw,1.5rem)}
.page-insights .ins-featured .pcard-desc{font-size:1rem;max-width:72ch}

/* Shared "Read the insight" affordance */
.page-insights .ins-more{display:inline-block;margin-top:14px;font-family:var(--sans);font-weight:600;
  font-size:.92rem;color:var(--accent-bright)}
.page-insights .pcard:hover .ins-more{text-decoration:underline}

/* --- 4. Existing-insights grid: 3 / 2 / 1 columns --- */
.page-insights .ins-grid{grid-template-columns:1fr}
@media (min-width:640px){.page-insights .ins-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.page-insights .ins-grid{grid-template-columns:1fr 1fr 1fr}}
.page-insights .ins-grid .pcard{display:flex;flex-direction:column}
.page-insights .ins-grid .pcard-desc{flex:1 1 auto}

/* Optional method tags */
.page-insights .ins-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.page-insights .ins-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-ink-muted);border:1px solid rgba(237,241,244,.14);border-radius:6px;padding:3px 7px;line-height:1.4}

/* Empty-topic state (shown by the filter script when a topic has no articles) */
.page-insights .ins-empty{margin:var(--s3) 0 0;color:var(--on-ink-muted);font-family:var(--sans);font-size:.95rem}

/* --- 5. Closing CTA --- */
.page-insights .ins-cta{margin-top:clamp(30px,3.6vw,48px);padding:clamp(30px,4vw,52px) 0 clamp(40px,5vw,72px);
  border-top:1px solid rgba(237,241,244,.10)}
.page-insights .ins-cta-head{font-family:var(--serif);max-width:22em;margin:0;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);line-height:1.14;letter-spacing:-.01em;color:var(--on-ink)}
.page-insights .ins-cta-copy{max-width:60ch;margin:12px 0 0;color:var(--on-ink-muted);font-family:var(--sans);line-height:1.6}
.page-insights .ins-cta .cta-row{margin-top:20px}