/* Insights section — reuses ZlipR's existing tokens (--paper, --ink, --muted, --blue, --lime,
   --line) and typefaces (Manrope headings, DM Sans body) from styles.css. Loaded only on
   /insights/ and /insights/<slug>/ pages. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- landing hero ---- */
.insights-hero { padding-bottom: 0; max-width: 820px; }
.insights-hero .hero-eyebrow { font: 600 17px/1.3 Manrope, sans-serif; letter-spacing: -.2px; color: var(--blue); margin: 0 0 14px; }
.insights-hero h1 { font-size: clamp(42px, 5.6vw, 64px); letter-spacing: -2.4px; }
.insights-hero .lead-statement { margin-top: 22px; }

/* ---- category filters ---- */
.insight-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.insight-filter { padding: 11px 22px; border: 1px solid var(--line); border-radius: 100px; font: 600 15px 'DM Sans', sans-serif; background: #fff; color: var(--ink); }
.insight-filter:hover { background: #f1f3ec; }
.insight-filter.is-active { background: var(--ink); color: white; border-color: var(--ink); }

/* ---- article grid ---- */
.insights-list { padding-top: 0; }
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.insight-card { border: 1px solid var(--line); border-radius: 28px; background: #fbfbf8; overflow: hidden; }
.insight-card[hidden] { display: none; }
.insight-card-link { display: flex; flex-direction: column; height: 100%; }
.insight-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef1e7; }
.insight-card-media img { width: 100%; height: 100%; object-fit: cover; }
.insight-card-body { display: flex; flex-direction: column; flex: 1; padding: 28px; }
.insight-card-body h3 { margin-top: 14px; font-size: 22px; letter-spacing: -.4px; }
.insight-card-body p { margin-top: 12px; font-size: 16px; flex: 1; }
.insight-card-meta { margin-top: 18px; font-size: 14px; color: var(--muted); }
.insight-chip { display: inline-flex; align-self: flex-start; padding: 7px 16px; border-radius: 100px; background: var(--lime); font: 700 13px Manrope, sans-serif; letter-spacing: .2px; color: var(--ink); }
.insight-empty { padding: 56px 32px; text-align: center; font-size: 18px; border: 1px dashed var(--line); border-radius: 24px; }
.insight-pagination { display: flex; justify-content: center; margin-top: 48px; }

/* ---- article page ---- */
.insight-article { max-width: 720px; }
.insight-article h1 { margin-top: 16px; font-size: clamp(36px, 4.8vw, 52px); letter-spacing: -2px; }
.insight-article .lead-statement { margin-top: 20px; }
.insight-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; font-size: 15px; color: var(--muted); }
.insight-byline span { font-weight: 600; color: var(--ink); }
.insight-byline time { font-variant-numeric: tabular-nums; }
.insight-featured-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; margin-top: 32px; }
.insight-toc { margin-top: 36px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 20px; background: #f1f3ec; }
.insight-toc-label { font: 700 14px Manrope, sans-serif; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.insight-toc ol { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.insight-toc a { font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.insight-toc a:hover, .insight-toc a:focus-visible { text-decoration-color: currentColor; }
.insight-body { margin-top: 40px; }
.insight-body h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.8px; margin-top: 48px; scroll-margin-top: 130px; }
.insight-body h3 { font-size: 22px; margin-top: 32px; scroll-margin-top: 130px; }
.insight-body p { margin-top: 18px; }
.insight-body p:first-of-type { margin-top: 0; }
.insight-body ul, .insight-body ol { margin: 18px 0 0; padding-left: 24px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.insight-body li + li { margin-top: 8px; }
.insight-body blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--blue); font: 600 22px/1.45 Manrope, sans-serif; letter-spacing: -.3px; color: var(--ink); }
.insight-body strong { color: var(--ink); }
.insight-solution-link { margin-top: 36px; font-size: 17px; }
.insight-article .hero-actions { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.insight-article .related-links { max-width: 720px; }

@media (max-width: 1100px) {
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card-body { padding: 24px; }
  .insight-toc { padding: 20px 22px; }
}
@media (max-width: 540px) {
  .insight-filters { gap: 8px; }
  .insight-filter { padding: 9px 16px; font-size: 14px; }
  .insight-featured-image { border-radius: 18px; }
}