/* ==========================================================================
 * insights.css — the Insights section (/insights/ and each article).
 * Loaded only by src/layouts/Site.astro, after tokens.css and site.css.
 * Tokens only; no hard-coded colours. Panels and buttons are square, to match
 * the rest of the site. The fallbacks in var(..., x) are only a safety net.
 * ========================================================================== */

/* Every block sits inside .rail; its text-heavy content is held to --content-max. */
.insight-wrap { max-width: var(--content-max, 1160px); margin-inline: auto; }

/* Date · reading time. Plain sans, deliberately not the bracket label. */
.insight-meta {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}
/* Each piece of a byline stays whole; lines break only at the " · " separators
   (aria-hidden), which is why those are left to wrap normally. */
.insight-meta > :not([aria-hidden]) { white-space: nowrap; }
.insight-meta time { white-space: nowrap; }

/* ---- List page: header --------------------------------------------------- */
.insights-head {
  background: var(--surface-1, var(--paper)); /* same band as the article head */
  padding-block: var(--block-pad-y) 48px;
  padding-inline: clamp(24px, 5vw, 64px);
  /* its bottom edge is a full-bleed dashed seam (site.css, `.insights-head::after`) */
}
.insights-head .kicker { margin-bottom: 20px; }
.insights-head__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  max-width: 21ch;
  margin: 0 0 24px;
}
.insights-head__lead {
  max-width: 62ch;
  font-size: var(--fs-lead);
  color: var(--ink-2);
  margin: 0;
}

/* ---- List page: cards ---------------------------------------------------- */
.insights-list { padding: 40px clamp(24px, 5vw, 64px) var(--block-pad-y); }
.insight-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 40px;
}
@media (min-width: 700px)  { .insight-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .insight-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.insight-card {
  position: relative;            /* the title link stretches over the whole card */
  display: flex;
  flex-direction: column;
  padding-block: 28px 44px;
  border-top: 1px solid var(--line-pill);
}
.insight-card__index {
  display: block;
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-faint);       /* decorative numeral, aria-hidden */
  margin-bottom: 24px;
}
.insight-card__topic { margin: 0 0 12px; }
.insight-card__title {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: var(--fw-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.insight-card__title a { color: var(--ink-strong); text-decoration: none; }
.insight-card__title a::after { content: ""; position: absolute; inset: 0; }
.insight-card__title a:focus-visible { outline: none; }
.insight-card:has(.insight-card__title a:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.insight-card:hover .insight-card__title a { color: var(--accent-ink); }
.insight-card__summary {
  color: var(--ink-2);
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-card__meta { margin-top: auto; padding-bottom: 14px; }
.insight-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-strong);
  transition: color var(--dur-fast, 150ms) var(--ease-out, ease-out);
}
.insight-card__more svg { transition: transform var(--dur-fast, 150ms) var(--ease-out, ease-out); }
.insight-card:hover .insight-card__more { color: var(--accent-ink); }
.insight-card:hover .insight-card__more svg { transform: translateX(3px); }

.insights-empty {
  margin-top: 40px;
  max-width: 560px;
  padding: 28px;
  background: var(--surface-1, var(--paper));
  border: 1px solid var(--line);
}
.insights-empty p { color: var(--ink-2); margin: 0 0 20px; }
.insights-empty .insights-empty__title { font-size: var(--fs-h3); color: var(--ink-strong); margin-bottom: 8px; }

.insights-more { padding-top: 24px; border-top: 1px solid var(--line-pill); }

/* ---- Article: head band ---------------------------------------------------- */
.insight-head {
  background: var(--surface-1, var(--paper));
  /* its bottom edge is a full-bleed dashed seam (site.css, `.insight-head::after`) */
  padding-block: 40px 56px;
  padding-inline: clamp(24px, 5vw, 64px);
}
.insight-head__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 36px;
}
.insight-head__back:hover { color: var(--accent-ink); }
.insight-head__topic { margin: 0 0 16px; }
.insight-head__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: 1.06;
  max-width: 22ch;
  margin: 0 0 28px;
}

/* ---- Article: contents list + reading column --------------------------------- */
.insight-layout {
  padding-block: 48px var(--block-pad-y);
  padding-inline: clamp(24px, 5vw, 64px);
}
.insight-layout__grid { display: block; }
.insight-main { min-width: 0; max-width: var(--read-max, 720px); margin-inline: auto; }

/* "In this article". One <details>: open in the HTML (so it reads with no script),
   collapsed on phones by a few lines of script, held open from 1024px. */
.insight-toc { margin-bottom: 40px; border: 1px solid var(--line-pill); background: var(--surface-1, var(--paper)); }
.insight-toc summary {
  cursor: pointer;
  padding: 14px 18px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.insight-toc summary::-webkit-details-marker { display: none; }
.insight-toc summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast, 150ms) var(--ease-out, ease-out);
}
.insight-toc[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.insight-toc summary .kicker { margin: 0; }
.insight-toc nav { padding: 0 18px 18px; }
.insight-toc ol { list-style: none; margin: 0; padding: 0; }
.insight-toc li + li { margin-top: 4px; }
.insight-toc a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 1px solid var(--line-pill);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
}
.insight-toc a:hover { color: var(--accent-ink); border-left-color: var(--accent-ink); }

@media (min-width: 1024px) {
  .insight-layout__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, var(--read-max, 720px));
    column-gap: 56px;
    justify-content: start;   /* the list lines up with the head band's left edge */
    align-items: start;
  }
  .insight-toc {
    position: sticky;
    top: calc(var(--header-h, 72px) + 24px);
    max-height: calc(100vh - var(--header-h, 72px) - 48px);
    overflow-y: auto;
    margin: 0;
    border: 0;
    background: none;
  }
  .insight-toc summary { padding: 0 0 14px; cursor: default; pointer-events: none; }
  .insight-toc summary::after { display: none; }
  .insight-toc nav { padding: 0; }
  .insight-main { margin-inline: 0; }
}
@media (min-width: 1240px) {
  .insight-layout__grid { grid-template-columns: 260px minmax(0, var(--read-max, 720px)); column-gap: 100px; }
}

/* ---- Article: featured image, short answer --------------------------------- */
.insight-figure { margin: 0 0 40px; }
.insight-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.short-answer {
  background: var(--btn-dark, var(--ink-strong));
  color: var(--btn-dark-ink, var(--canvas));
  padding: 28px 32px 32px;
  margin: 0 0 48px;
}
.short-answer .kicker { color: var(--accent); margin: 0 0 14px; }   /* 5.1:1 on the dark box */
.short-answer__text {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  max-width: none;
  margin: 0;
}

/* ---- Article body (Portable Text) ------------------------------------------- */
.prose { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.insight-section { min-width: 0; }
.insight-section + .insight-section { margin-top: 3em; }
.insight-section > * + *, .faq__a > * + * { margin-top: 1.1em; }
.prose p { max-width: none; margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: calc(var(--header-h, 72px) + 24px); }
.prose h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink-strong);
  margin: 0 0 0.7em;
  text-wrap: balance;
}
.prose h3 { font-size: 1.1875rem; font-weight: var(--fw-medium); color: var(--ink-strong); margin: 1.8em 0 0; }
.prose h3 + * { margin-top: 0.5em; }
.prose h4 { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--ink-strong); margin: 1.4em 0 0; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 0; }
.prose li + li { margin-top: 0.5em; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-ink-hover); }
.prose strong { color: var(--ink); font-weight: var(--fw-medium); }

/* The key line. */
.prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  color: var(--ink-strong);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.prose blockquote p { color: inherit; }
.prose blockquote p + p { margin-top: 0.8em; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
}
.prose pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--surface-1, var(--paper));
  border: 1px solid var(--line);
  padding: 16px;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.prose img, .prose figure img { display: block; max-width: 100%; height: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 8px; }
/* A wide table scrolls inside itself rather than widening the page on phones. */
.prose table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }

/* FAQ: every question and answer is visible; nothing is folded away. */
.faq { margin-top: 1.4em; }
.faq__item { padding-block: 22px; border-top: 1px solid var(--line-pill); }
.faq__item:last-child { border-bottom: 1px solid var(--line-pill); }
.prose .faq__q { font-size: 1.1875rem; margin: 0 0 0.5em; }
.prose .faq__q + .faq__a { margin-top: 0; }

/* Sources: smaller, in a block of its own. */
.insight-section--sources {
  background: var(--surface-1, var(--paper));
  border: 1px solid var(--line);
  padding: 24px 28px 28px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.prose .insight-section--sources h2 { font-size: 1.125rem; font-weight: var(--fw-medium); margin: 0 0 0.8em; }
.insight-section--sources li { overflow-wrap: anywhere; }
.insight-section--sources li + li { margin-top: 0.7em; }
.insight-section--sources strong { color: inherit; }

/* ---- Article: author box ------------------------------------------------------ */
.author-box {
  margin-top: 56px;
  padding: 24px 28px 28px;
  background: var(--surface-1, var(--paper));
  border: 1px solid var(--line);
}
.author-box .kicker { margin: 0 0 12px; }
.author-box__name { font-size: 1.25rem; font-weight: var(--fw-medium); margin: 0 0 8px; }
.author-box p.author-box__name a { color: var(--ink-strong); text-decoration: none; }   /* beats the generic p-link colour in site.css */
.author-box p.author-box__name a:hover { color: var(--accent-ink); }
.author-box__bio { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }
.author-box__bio a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Article: "Put the thinking to work" ---------------------------------------- */
.insight-cta {
  /* top edge: full-bleed dashed seam (site.css); the 1px border row it draws in stays transparent */
  border-top: 1px solid transparent;
  padding-block: 56px 64px;
  padding-inline: clamp(24px, 5vw, 64px);
}
.insight-cta__title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  margin: 0 0 32px;
}
.insight-cta__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 760px) { .insight-cta__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.insight-cta__card {
  background: var(--surface-1, var(--paper));
  border: 1px solid var(--line);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.insight-cta__card h3 { font-size: 1.25rem; font-weight: var(--fw-medium); margin: 0 0 8px; }
.insight-cta__card p { color: var(--ink-2); margin: 0 0 24px; }
.insight-cta__card .btn {
  margin-top: auto;
  height: auto;
  min-height: 44px;
  padding-block: 11px;
  white-space: normal;
  text-align: center;
}

.insight-back {
  border-top: 1px solid transparent;   /* dashed seam draws here (site.css) */
  padding: 28px clamp(24px, 5vw, 64px);
}
.insight-back .text-link { gap: 6px; }