/* ==========================================================================
   COMPONENTS · INSIGHT INDEX — the editorial "contents page" of the record's
   explainer writing. NOT a card-wall: a periodical's leaders/essays contents,
   set flat on the paper, hairline-ruled between entries, opened by a featured
   LEAD essay. Each entry is a theme kicker + a serif title (the link) + an
   editor's excerpt + a furniture byline with a mono date. A "browse by theme"
   rail above it indexes the set and, when a theme is thin, hands off honestly
   to the empty-state register rather than showing a broken grid.

   Composes .op-kicker, .op-byline, .op-chip, .op-empty. New component: the
   built .op-card carries a score badge + a hover-lift for scored COUNTRY
   issues; an editorial essay has no score and must read as a journal's essays
   page, not a product card. One concern, its own file, linked after offprint.css.
   ========================================================================== */

/* — The theme index rail — browse the curated set by theme — */
.op-insight-themes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.op-insight-themes__label {
  font-family: var(--font-furniture);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-inline-end: var(--space-2xs);
}

/* — The contents column — a comfortable single reading measure, never a grid — */
.op-insight-list {
  max-width: 46rem;
  margin-top: var(--space-lg);
}

/* — A single essay entry — */
.op-insight {
  display: block;
  padding-block: var(--space-lg);
  border-top: 1px solid var(--rule);
}
.op-insight__theme { margin: 0; }
.op-insight__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-2xs);
  text-wrap: balance;
}
.op-insight__title a { color: var(--text); text-decoration: none; }
.op-insight__title a:hover { color: var(--accent); }
.op-insight__excerpt {
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  max-width: var(--measure);
  text-wrap: pretty;
}
.op-insight .op-byline { margin-top: var(--space-sm); }

/* — The LEAD: this issue's marquee essay, set larger and held apart by a
     strong ledger rule. It sits at the head of the same list, so the theme
     filter treats it uniformly with the rest. — */
.op-insight--lead {
  border-top: 0;
  padding-top: 0;
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--rule-strong);
}
.op-insight--lead .op-insight__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-top: var(--space-sm);
}
.op-insight--lead .op-insight__excerpt {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--text);
}

/* — The honest thin-theme state — hidden until a theme with no essays is
     chosen; never a broken empty grid (composes .op-empty). — */
.op-insight-empty { display: none; margin-top: var(--space-lg); max-width: 46rem; }
.op-insight-empty.is-shown { display: block; }
.op-insight-empty .op-empty__body { max-width: 48ch; }

/* When a theme is filtered out, its entry is simply removed from the flow */
.op-insight[hidden] { display: none; }

/* — Mobile — the lead title eases down a touch; the list already folds to one
     readable column (no grid to collapse). — */
@media (max-width: 40rem) {
  .op-insight--lead { padding-bottom: var(--space-lg); }
  .op-insight { padding-block: var(--space-md); }
}