/* ============================================================================
   STAGE 3 — INSIGHTS
   Page styles for insights.php (the index) and insight.php (an article).
   Composed only from tokens.css; cards, tags, prose and buttons come from
   components.css and are extended here, never restated.
   The placeholder state of insights.php does not load this file.
   ========================================================================= */

/* Hidden from sight, still read aloud — page counts, "Page 2", "More in …" */
.ins-sr{
  position:absolute!important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap;
}

/* ================================================================== INDEX */

.ins-hero{
  padding-top:calc(var(--header-h) + var(--space-9));
  padding-bottom:var(--space-7);
}
.ins-hero__title{ margin-top:var(--space-5); }
.ins-hero__lead{ margin-top:var(--space-6); }
.ins-hero__aside{ align-self:end; }
.ins-hero__aside p{ max-width:44ch; }

/* --- Category filter: pills, the active one filled ---------------------- */
.ins-filter{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:var(--border) solid var(--line);
}
.ins-filter__list{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.ins-filter__link{
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:44px;
  padding:var(--space-2) var(--space-4);
  border:var(--border) solid var(--line-strong);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-muted);
  transition:color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.ins-filter__link:hover{ color:var(--accent); border-color:var(--accent); }
.ins-filter__link[aria-current="page"],
.ins-filter__link[aria-current="page"]:hover{
  background:var(--text); border-color:var(--text); color:var(--bg);
}
.ins-filter__n{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono); font-variant-numeric:tabular-nums;
  color:var(--text-faint);
}
.ins-filter__link[aria-current="page"] .ins-filter__n{ color:inherit; opacity:.7; }

/* --- Section heads (the archive, "More insights") ----------------------- */
.ins-index__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--space-3) var(--space-5);
  margin-bottom:var(--space-6);
  padding-top:var(--space-5);
  border-top:var(--border) solid var(--line);
}
.ins-index__title{ font-size:var(--fs-h3); }
.ins-feature + .ins-index__head{ margin-top:var(--space-9); }

.ins-nothing{
  padding-block:var(--space-7);
  border-top:var(--border) solid var(--line);
}
.ins-nothing__back{ margin-top:var(--space-4); }

/* --- Featured piece ------------------------------------------------------ */
/* .card supplies surface, hairline and hover; this turns it into a spread:
   the picture on the left, the argument on the right. */
.ins-feature{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--space-7);
  align-items:center;
  padding:var(--space-6);
}
.ins-feature--text{
  grid-template-columns:minmax(0,1fr);
  padding:var(--space-8) var(--space-7);
}
.ins-feature__media{
  aspect-ratio:3 / 2;
  overflow:hidden;
  border-radius:var(--radius-media);
  background:var(--bg);
}
.ins-feature__body{ display:flex; flex-direction:column; gap:var(--space-4); }
/* Beside a picture the text column is narrow, so the title steps down a size;
   without one it has the full width and takes the larger face. */
.ins-feature__title{
  font-size:var(--fs-h3);
  line-height:var(--lh-heading);
  max-width:24ch;
}
.ins-feature--text .ins-feature__title{
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  max-width:28ch;
}
.ins-feature__excerpt{ max-width:52ch; }
.ins-feature .ins-go{ margin-top:var(--space-3); }

@media (max-width:900px){
  .ins-feature,
  .ins-feature--text{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-5);
    padding:var(--space-5);
  }
}

/* --- Editorial cards ----------------------------------------------------- */
.ins-grid{ row-gap:var(--space-6); }
.ins-grid > li{ display:flex; }
.ins-card{ flex:1; }

/* The picture bleeds to the card's edges, above the meta row. */
.ins-card__media{
  margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-bottom:var(--border) solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--bg);
}
/* Half-width cards (used to square off the last row) take a shallower crop;
   on tablets they span the full row, so shallower still. On phones every
   card is one column and the standard crop returns. */
.ins-grid > .col-span-6 .ins-card__media{ aspect-ratio:2 / 1; }
@media (max-width:1024px) and (min-width:641px){
  .ins-grid > .col-span-6 .ins-card__media{ aspect-ratio:3 / 1; }
}
@media (max-width:640px){
  .ins-grid > .col-span-6 .ins-card__media{ aspect-ratio:16 / 10; }
}

.ins-card__media img,
.ins-feature__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--dur-3) var(--ease);
}
.ins-card:hover .ins-card__media img,
.ins-feature:hover .ins-feature__media img{ transform:scale(1.02); }

.ins-card__excerpt{ font-size:var(--fs-sm); }
.ins-flag{ color:var(--accent); }

/* "Read" affordance — decorative; the title link carries the name. */
.ins-go{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); font-weight:var(--fw-semi);
  color:var(--text-muted);
  transition:color var(--dur-1) var(--ease);
}
.card--link:hover .ins-go{ color:var(--accent); }
.card--link:hover .ins-go .btn__arrow{ transform:translateX(4px); }

/* The whole card is the link (components.css stretches the title link over
   it), so where :has() exists the focus ring goes round the card rather
   than round the title text alone. */
@supports selector(:has(*)){
  .ins-card:has(.card__title a:focus-visible),
  .ins-feature:has(.card__title a:focus-visible){
    outline:2px solid var(--focus);
    outline-offset:3px;
  }
  .ins-card .card__title a:focus-visible,
  .ins-feature .card__title a:focus-visible{ outline:none; }
}

/* --- Pagination ---------------------------------------------------------- */
.ins-pager{
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:var(--border) solid var(--line);
}
.ins-pager__list{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.ins-pager__list > li:first-child{ margin-right:auto; }
.ins-pager__list > li:last-child{ margin-left:auto; }

.ins-pager__num,
.ins-pager__step{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-width:44px; min-height:44px;
  padding:0 var(--space-3);
  border:var(--border) solid var(--line);
  border-radius:var(--radius);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono); font-variant-numeric:tabular-nums;
  color:var(--text-muted);
  transition:color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.ins-pager__step{
  padding:0 var(--space-4);
  font-family:var(--font-body); font-size:var(--fs-sm);
  font-weight:var(--fw-semi); letter-spacing:var(--ls-body);
}
a.ins-pager__num:hover,
a.ins-pager__step:hover{ color:var(--accent); border-color:var(--accent); }
.ins-pager__num[aria-current="page"],
.ins-pager__num[aria-current="page"]:hover{
  background:var(--text); border-color:var(--text); color:var(--bg);
}
.ins-pager__step[aria-disabled="true"]{ opacity:.45; }
.ins-pager__gap{ padding:0 var(--space-2); color:var(--text-faint); }

.ins-pager__step .btn__arrow{ transition:transform var(--dur-2) var(--ease); }
.ins-pager__step--prev .btn__arrow{ transform:scaleX(-1); }
a.ins-pager__step:hover .btn__arrow{ transform:translateX(4px); }
a.ins-pager__step--prev:hover .btn__arrow{ transform:scaleX(-1) translateX(4px); }

/* ================================================================ ARTICLE */

.ins-article{ padding-top:calc(var(--header-h) + var(--space-9)); }

/* Breadcrumb: Insights › Category */
.ins-crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--text-faint);
}
.ins-crumbs li + li::before{
  content:"›";
  content:"›" / "";
  margin-right:var(--space-2);
}
.ins-crumbs a{ color:var(--text-muted); transition:color var(--dur-1) var(--ease); }
.ins-crumbs a:hover{ color:var(--accent); }

.ins-article__title{ margin-top:var(--space-5); max-width:24ch; }

/* By-line: author · date · reading time · category */
.ins-byline{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2) var(--space-3);
  margin-top:var(--space-5);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono); text-transform:uppercase;
  color:var(--text-faint);
}
.ins-byline > * + *::before{
  content:"·";
  content:"·" / "";
  margin-right:var(--space-3);
  color:var(--line-strong);
}
.ins-byline a{ color:var(--accent); }
.ins-byline a:hover{ text-decoration:underline; text-underline-offset:3px; }

.ins-article__lead{ margin-top:var(--space-6); }

/* The picture runs wider than the text column, as in a printed feature. */
.ins-article__figure{ margin-top:var(--space-8); }
.ins-article__figure img{
  width:100%;
  border:var(--border) solid var(--line);
  border-radius:var(--radius-media);
  background:var(--bg-raised);
}

.ins-article__body{ margin-top:var(--space-8); }

.ins-tags{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-3) var(--space-4);
  margin-top:var(--space-8);
  padding-top:var(--space-5);
  border-top:var(--border) solid var(--line);
}
.ins-tags__label{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--text-faint);
}
.ins-tags__list{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

.ins-article__back{ margin-top:var(--space-7); }

/* --- More insights ------------------------------------------------------- */
.ins-more{ background:var(--white); }
.ins-more .ins-index__head{ padding-top:0; border-top:0; margin-bottom:var(--space-7); }

/* --- Closing call to action --------------------------------------------- */
.ins-cta__title{ margin-top:var(--space-5); font-size:var(--fs-h1); }
.ins-cta__lead{ margin-top:var(--space-5); }
.ins-cta__action{ margin-top:var(--space-7); }