/* ============================================================
   INSIGHTS INDEX — `/insights`
   Page-specific layout for the Browse Mode insights index. Reuses
   the `.eyebrow` primitive from main.css for both the filter chips
   and the per-row pillar pill; sector-matched chips set
   `data-sector` so the active state inherits the matching sector
   accent colour token.

   Task #546 layout: a Featured grid sits above the filter chips
   in repeating rows of 3-then-2 cards (mirrors the /work featured
   rhythm). Beneath the chips, the typographic article list lists
   every published insight, one row per article.
   ============================================================ */

.screen--insights { display: none; }
/* Reserve --footer-h at the bottom so the final card row never tucks
   under the persistent .footer-bar strip (Task #488 Phase 1). */
.screen--insights.active {
  display: block;
  padding-bottom: var(--footer-h, 40px);
}

.insights-scroll {
  height: calc(100vh - var(--nav-h, 56px));
  overflow-y: auto;
  background: var(--ink);
  color: var(--text);
}

.insights-index {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 48px 80px;
}

/* ── Hero ────────────────────────────────────────────────────── */
.insights-hero { margin-bottom: 56px; }
/* Editorial-page hero headlines use Playfair weight 300 (the serif
   token), not the display weight 900. Display 900 is reserved for
   case-study client names, metric numbers, and section numerals.
   Mirrors the /about and /ai-ops hero treatment. */
.insights-hero__headline {
  font-family: var(--serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-headline);
  margin: 0 0 24px;
  max-width: var(--measure-meta);
  color: var(--white);
}
.insights-hero__headline em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--be-yellow);
}
/* Sublede renders in DM Sans per the v1.1 typography roles — prose
   body copy ("long-form articles..." sentence) sits in sans; serif
   is reserved for the headline above. Task #550. */
.insights-hero__sublede {
  font-family: var(--sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sublede);
  line-height: var(--lh-base);
  color: var(--text-mute);
  max-width: var(--measure-lede);
  margin: 0;
}

/* ── Featured grid (above the filter chips) ──────────────────
   Repeating rows of 3-then-2 cards (task #546). Each row is its
   own grid so the rhythm is preserved regardless of how many
   featured items exist. Tablets collapse to 2-up, mobile to 1-up
   — matching the /work featured breakpoints. */
.insights-featured {
  margin: 0 0 48px;
}
.insights-featured[hidden] { display: none; }
.insights-featured__eyebrow { margin-bottom: 18px; }
.insights-featured__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.insights-featured__row {
  display: grid;
  gap: 20px;
}
.insights-featured__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insights-featured__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .insights-featured__rows { gap: 18px; }
  .insights-featured__row { gap: 18px; }
  .insights-featured__row--3,
  .insights-featured__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .insights-featured__rows { gap: 16px; }
  .insights-featured__row { gap: 16px; }
  .insights-featured__row--3,
  .insights-featured__row--2 { grid-template-columns: 1fr; }
}

/* ── Filter chip row ─────────────────────────────────────────── */
.insights-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-line);
}

.insights-chip {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-mute);
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-full);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.insights-chip:hover:not(.is-active) {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--text);
}
.insights-chip:focus-visible {
  outline: 2px solid var(--be-yellow);
  outline-offset: 2px;
}
/* Insight-only pillars: neutral active state per task #430. */
.insights-chip.is-active {
  background: var(--ink-2);
  color: var(--text);
  border-color: var(--ink-line);
}

/* Sector-matched pillars carry data-sector so hover + active states
   inherit the matching sector accent token (mirrors the /work
   filter chip treatment in proof.css). */
.insights-chip[data-sector="hospitality"] {
  color: var(--sec-hospitality);
  border-color: color-mix(in srgb, var(--sec-hospitality) 35%, transparent);
}
.insights-chip[data-sector="retail"] {
  color: var(--sec-retail);
  border-color: color-mix(in srgb, var(--sec-retail) 35%, transparent);
}
.insights-chip[data-sector="finance"] {
  color: var(--sec-finance-light, var(--sec-finance));
  border-color: color-mix(in srgb, var(--sec-finance) 40%, transparent);
}
.insights-chip[data-sector="technology"] {
  color: var(--sec-technology);
  border-color: color-mix(in srgb, var(--sec-technology) 35%, transparent);
}
/* Public-sector + media render with the neutral chip treatment
   (task #497) — same colours as the base .insights-chip rule. */
.insights-chip[data-sector="public-sector"],
.insights-chip[data-sector="media"] {
  color: var(--text);
  border-color: var(--ink-line);
}
.insights-chip[data-sector="hospitality"].is-active {
  background: color-mix(in srgb, var(--sec-hospitality) 18%, transparent);
  color: var(--sec-hospitality);
  border-color: var(--sec-hospitality);
}
.insights-chip[data-sector="retail"].is-active {
  background: color-mix(in srgb, var(--sec-retail) 18%, transparent);
  color: var(--sec-retail);
  border-color: var(--sec-retail);
}
.insights-chip[data-sector="finance"].is-active {
  background: color-mix(in srgb, var(--sec-finance) 22%, transparent);
  color: var(--sec-finance-light, var(--sec-finance));
  border-color: var(--sec-finance);
}
.insights-chip[data-sector="technology"].is-active {
  background: color-mix(in srgb, var(--sec-technology) 18%, transparent);
  color: var(--sec-technology);
  border-color: var(--sec-technology);
}
.insights-chip[data-sector="public-sector"].is-active,
.insights-chip[data-sector="media"].is-active {
  background: var(--ink-2);
  color: var(--text);
  border-color: var(--ink-line);
}

/* ── Article list (typographic, restored) ────────────────────
   One row per article, single column at every breakpoint. Mirrors
   the pre-#534 layout (task #546). */
.insights-list {
  display: flex;
  flex-direction: column;
}
.insights-row {
  display: block;
  padding: 32px 0;
  border-bottom: 1px solid var(--ink-line);
  text-decoration: none;
  color: inherit;
  transition: color 0.18s ease;
}
.insights-row:first-child { padding-top: 8px; }
.insights-row:hover .insights-row__title,
.insights-row:focus-visible .insights-row__title { color: var(--be-yellow); }
.insights-row:focus-visible {
  outline: 2px solid var(--be-yellow);
  outline-offset: 4px;
}

.insights-row__pillar {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--text-faint);
}
.insights-row__pillar[data-sector="hospitality"] { color: var(--sec-hospitality); }
.insights-row__pillar[data-sector="retail"]      { color: var(--sec-retail); }
.insights-row__pillar[data-sector="finance"]     { color: var(--sec-finance-light, var(--sec-finance)); }
.insights-row__pillar[data-sector="technology"]  { color: var(--sec-technology); }

.insights-row__title {
  font-family: var(--display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sublede);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--text);
  margin: 0 0 10px;
  transition: color 0.18s ease;
}
.insights-row__deck {
  font-family: var(--display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text-mute);
  margin: 0 0 14px;
  max-width: 62ch;
}
.insights-row__meta {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-faint);
}
.insights-row__meta span { opacity: 0.5; }

/* ── Empty state ─────────────────────────────────────────────── */
.insights-empty {
  padding: 64px 0;
  text-align: center;
}
.insights-empty__body {
  font-family: var(--display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  color: var(--text-mute);
  margin: 0 0 16px;
}
.insights-empty__reset {
  background: transparent;
  border: none;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--be-yellow);
  cursor: pointer;
  padding: 6px 0;
}
.insights-empty__reset:hover { text-decoration: underline; }
.insights-empty__reset:focus-visible {
  outline: 2px solid var(--be-yellow);
  outline-offset: 4px;
}

/* ── Element entry ───────────────────────────────────────────── */
.insights-be-entry {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--ink-line);
}

@media (max-width: 768px) {
  .insights-index { padding: 56px 20px 64px; }
  .insights-hero { margin-bottom: 40px; }
  .insights-featured { margin-bottom: 32px; }
  .insights-filters { margin-bottom: 32px; padding-bottom: 20px; }
  .insights-row { padding: 24px 0; }
  .insights-row__title { font-size: var(--fs-h3); }
}

/* ── Featured cards ──────────────────────────────────────────
   Dark insight-card chrome reused in the Featured grid. Featured-
   ness is communicated by position and the 3-2 rhythm, NOT by
   colour — so we deliberately drop the previous yellow tint and
   "Featured" flag (task #546). */
.insights-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 56px;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.02);
  color: var(--paper);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  min-height: 240px;
}
.insights-card:hover { border-color: var(--paper); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.insights-card:focus-visible {
  outline: 2px solid var(--be-yellow);
  outline-offset: 3px;
}
.insights-card__meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: auto;
}
.insights-card__meta span { opacity: 0.5; }
.insights-card__pillar { color: var(--paper); opacity: 0.85; }
.insights-card__pillar[data-sector="hospitality"] { color: var(--sec-hospitality); opacity: 1; }
.insights-card__pillar[data-sector="retail"]      { color: var(--sec-retail); opacity: 1; }
.insights-card__pillar[data-sector="finance"]     { color: var(--sec-finance-light, var(--sec-finance)); opacity: 1; }
.insights-card__pillar[data-sector="technology"]  { color: var(--sec-technology); opacity: 1; }
/* Featured-card titles: Playfair 22px weight 400 with 2-line clamp so
   long titles truncate gracefully rather than overflow the card.
   Task #488 Phase 3. */
.insights-card__title {
  font-family: var(--serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sublede);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  margin: 0;
  color: var(--paper);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insights-card__deck {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--paper);
  opacity: 0.72;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insights-card__arrow {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-size: var(--fs-h3);
  opacity: 0.5;
  transition: transform 160ms ease, opacity 160ms ease;
}
.insights-card:hover .insights-card__arrow { transform: translateX(4px); opacity: 1; }

/* Load-more affordance for the article list. Same chrome as /work. */
.insights-more {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}
.insights-more[hidden] { display: none; }
.insights-more__btn {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 12px 22px;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.insights-more__btn:hover { border-color: var(--paper); background: rgba(255,255,255,0.04); }
.insights-more__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.insights-more__remaining { opacity: 0.6; margin-left: 6px; }