/* Insights index (/insights) and article template (/insights/[slug]). Filter chips come from work.css. */

/* ---------- Index grid: the newest article runs full width ---------- */
.insights-all { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .insights-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Two columns on desktop too while there are three articles: the featured one spans the row and the other two fill
   the next. Go back to three columns (repeat(3, ...) from 1024px) once there are four or more. */
.insight { display: flex; flex-direction: column; }
.insight .sf-card__media { aspect-ratio: 16 / 9; }
.insight .sf-card__title { margin-top: 10px; }
.insight .sf-card__text { margin-top: 10px; }
.insight--featured .sf-link-arrow { margin-top: 20px; }
@media (min-width: 768px) {
  .insight--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 0 40px; }
  .insight--featured .sf-card__media { align-self: stretch; width: calc(100% + var(--sf-space-24)); margin-block: calc(-1 * var(--sf-space-24)); margin-right: 0; border-radius: calc(var(--sf-radius-md) - 1px) 0 0 calc(var(--sf-radius-md) - 1px); aspect-ratio: 16 / 10; }
  .insight--featured .sf-card__title { font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); }
}
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(24px, 4vw, 40px); }
@media (min-width: 900px) { .newsletter { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 48px; } }
.newsletter__text { margin-top: 8px; color: var(--sf-fg-body); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter__form .sf-input { flex: 1 1 190px; min-width: 0; }

/* ---------- Article hero ---------- */
.article-hero .sf-container { position: relative; max-width: 960px; }
.article-hero__title { margin-top: 22px; max-width: 20ch; font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem); }
.article-hero__dek { margin-top: 20px; max-width: 58ch; }
.article-hero__meta { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: var(--sf-fs-small); }
.article-hero__meta > span:last-child { display: grid; }
.article-hero__meta > span:last-child > span { color: var(--sf-fg-muted); }

/* ---------- Article body: sticky contents on the left, a 68ch column of text ---------- */
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* A long contents list scrolls inside itself on short screens. The 4px padding (cancelled by the negative margin and
   the top offset) and the matching scroll padding keep the links' focus rings clear of the scroll clip. */
@media (min-width: 1024px) {
  .article__grid { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
  .article__toc { position: sticky; top: calc(var(--sf-header-height) + 28px); max-height: calc(100svh - var(--sf-header-height) - 56px); margin: -4px; padding: 4px; overflow-y: auto; scroll-padding-block: 4px; }
}
.toc { padding: 16px 18px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); background: var(--sf-bg-raised); }
.toc summary { font-size: var(--sf-fs-label); font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); cursor: pointer; }
.toc ol { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid transparent; color: var(--sf-fg-muted); font-size: var(--sf-fs-small); text-decoration: none; }
.toc a:hover { color: var(--sf-fg); }
.toc a[aria-current="true"] { border-left-color: var(--sf-fg-accent); color: var(--sf-fg); font-weight: var(--sf-fw-semibold); }
@media (min-width: 1024px) { .toc { padding: 0; border: 0; background: none; } .toc summary { pointer-events: none; list-style: none; } .toc summary::-webkit-details-marker { display: none; } }
/* Light theme: the contents box sits on the card shadow at rest. Print drops it. */
:root[data-theme="light"] .toc { box-shadow: var(--sf-shadow-1); }
@media print { :root[data-theme="light"] .toc { box-shadow: none; } }
.article__body { font-size: 1.125rem; line-height: 1.7; }
.article__body > * + * { margin-top: 1.1em; }
.article__body h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.2; font-weight: var(--sf-fw-bold); letter-spacing: -0.01em; scroll-margin-top: 24px; }
.article__body ul, .article__body ol { padding-left: 1.3em; }
.article__body li + li { margin-top: 0.5em; }
.article__lead { font-size: var(--sf-fs-body-lg); color: var(--sf-fg); }
.article__cover { aspect-ratio: 16 / 9; margin: 0 0 2em; overflow: hidden; border-radius: var(--sf-radius-md); }
.article__pull { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 2px solid; border-image: var(--sf-gradient-brand) 1; }
.article__pull p { font: italic 400 clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem)/1.2 var(--sf-font-serif); color: var(--sf-fg); }
/* The mid-article call to action: a Sarafi box with the gradient border (brand book p28). */
.article__cta { margin: 2em 0; padding: 24px; border: 1px solid transparent; border-radius: var(--sf-radius-md); background: linear-gradient(var(--sf-bg-raised), var(--sf-bg-raised)) padding-box, var(--sf-gradient-brand) border-box; font-size: 1rem; }
.article__cta-title { font-size: 1.25rem; font-weight: var(--sf-fw-bold); line-height: 1.3; }
.article__cta p + p { margin-top: 8px; color: var(--sf-fg-muted); }
.article__cta .sf-btn { margin-top: 18px; }
.author { display: flex; gap: 16px; margin-top: 3em !important; padding-top: 28px; border-top: 1px solid var(--sf-border); font-size: 1rem; line-height: 1.5; }
.author__photo { width: 56px; height: 56px; }
.author__name { font-weight: var(--sf-fw-bold); }
.author__role { font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.author__bio { margin-top: 10px; color: var(--sf-fg-body); }
.author .sf-link-arrow { margin-top: 12px; }
.related { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reading progress: a thin brand line along the top of an article or policy page, filled as the page is read.
   It needs scroll-driven animation; without it (or with reduced motion) there is simply no line. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body:has(.article__body)::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: calc(var(--sf-z-sticky) + 1); height: 3px; pointer-events: none;
      transform-origin: 0 50%; background: var(--sf-gradient-brand); animation: read-progress linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media print { body:has(.article__body)::before { display: none; } }