/*
 * article.css — reading experience for the article template (body.article).
 *
 * Loaded only on pages whose `template` page property is `article`
 * (see scripts.js). Styles the flowing DEFAULT CONTENT (paragraphs, headings,
 * lists, quotes, inline images) that EDS authors write as rich text — this is
 * the "article body". It is deliberately NOT a block: keeping body copy as
 * plain semantic HTML is best for accessibility AND for AI/LLM extraction.
 *
 * EXACT Figma type tokens (articles/desktop|mobile):
 *   body  = Open Sans 400  — BodyMed 18/28 (D) · 16/24 (M)
 *   quote = Hurme Regular 400 — QuoteLrg 36/108% (D) · QuoteSml 24/112% ls-2% (M)
 *   reading column width 776px; headings + links use the global design system.
 */

/* ---------- reading column ---------- */

/* Default sections (template-less fallback) use the reading column. */
body.article main > .section > div {
  max-width: var(--content-reading, 776px);
}

/* Sections nested in the two-column reading layout fill their column. */
body.article .article-layout-main > .section > div {
  max-width: none;
}

/* Full-width trailing blocks (related-links, important-information) span the
   page edge-to-edge; each block centres its own content within
   --content-max-width. `width: auto` undoes the global section min() cap so the
   band is genuinely full-bleed. */
body.article main > .section.full-width > div {
  width: auto;
  max-width: none;
  padding: 0;
}

/* The closing important-information block sits flush against the footer. */
body.article main > .section.full-width:has(.important-information) {
  margin: 0;
}

/* The leading breadcrumb band sits flush under the header, above the hero. */
body.article main > .section.full-width:has(.breadcrumb) {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tighten the gap above the trailing related-links block (half the default
   section margin so it sits closer to the article body). */
body.article main > .section.full-width:has(.related-links) {
  margin-top: 0;
  margin-bottom: 0;

}

body.article main > .section.full-width:has(.page-collection) {
  margin: 0;
}

/* ---------- two-column reading layout (template-article.js) ---------- */

/* The article sits on a grey page; the content card is white. */
body.article main {
  background: var(--amp-bg-grey, #f6f6f6);
}

body.article .article-layout {
  max-width: var(--content-max-width, 1248px);
  margin: 0 auto;
  padding: 0 var(--spacing-8);
}

/* Right-hand content card. On mobile this is the first card on the grey page;
   the 8px top margin is the grey breathing space under the breadcrumb (desktop
   resets it to 0 in the grid below). Mobile padding matches Figma node
   1921:96818 (pt 32 / px 12); bottom padding comes from the inner blocks.
   Horizontal padding follows the shared rule: 12px < 768, 36px >= 768. */
body.article .article-layout-main {
  margin-top: var(--spacing-8);
  padding-block: var(--spacing-32) 0;
  padding-inline: var(--spacing-12);
  background: var(--amp-bg, #fff);
  border-radius: var(--radius-card, 8px);
}

@media (width >= 768px) {
  body.article .article-layout-main {
    padding-inline: var(--spacing-36);
  }
}

body.article .article-layout-rail {
  margin-top: var(--spacing-24);
}

@media (width >= 1024px) {
  body.article .article-layout {
    display: grid;
    grid-template-columns: var(--article-rail-width, 312px) minmax(0, 1fr);
    column-gap: var(--space-2xl);
    align-items: stretch;

    /* Content panel caps at 1248 (UX-confirmed) and touches that edge:
       rail 312 + gap 48 + main 888 (776 inner). Below the cap the panel keeps a
       natural 32px side gutter; beyond it the extra space is just centring
       margin on the grey page. */
    box-sizing: border-box;
    width: min(var(--content-max-width), 100% - 64px);
    padding: var(--spacing-64) 0 var(--spacing-40);
  }

  body.article .article-layout-rail {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }

  body.article .article-layout-main {
    grid-column: 2;
    min-width: 0;
    margin-top: 0;
    padding: var(--spacing-56); /* uniform 56 on all sides at desktop */
  }
}

/* ---------- anchor nav inside the rail ("In this article") ---------- */

/* Undo the standalone sticky-bar collapse so the nav lays out inside the rail. */
body.article .article-layout-rail .section:has(> .anchor-nav-wrapper),
body.article .article-layout-rail .anchor-nav-wrapper {
  display: block;
}

body.article .article-layout-rail .section:has(> .anchor-nav-wrapper) {
  margin-top: var(--spacing-112);
}

body.article .article-layout-rail .anchor-nav.block {
  position: static;
  background: transparent;
  box-shadow: none;
}

body.article .article-layout-rail .anchor-nav nav {
  max-width: none;
}

/* The mobile dropdown chrome (closed bar + "select a section" heading) is hidden
 * in the rail, and the panel collapses so its <ul> lays out directly as cards. */
body.article .article-layout-rail .anchor-nav-toggle,
body.article .article-layout-rail .anchor-nav-panel-heading {
  display: none;
}

body.article .article-layout-rail .anchor-nav-panel {
  display: contents;
}

/* Static "On this page" label above the nav cards (visual only — the nav
 * keeps its accessible aria-label and crawlable links). Figma node 996:32365:
 * Hurme SemiBold 14 / lh ~20.7 / letter-spacing 0.21px (1.5%), 24px to list. */
body.article .article-layout-rail .anchor-nav nav::before {
  content: "On this page";
  display: block;
  margin-bottom: var(--spacing-24);
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--font-size-14);
  line-height: 1.48;
  letter-spacing: 0.015em;
  color: var(--amp-ink-blue, #001e41);
}

/* Vertical list of cards, one per heading. */
body.article .article-layout-rail .anchor-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: 0;
  border: 0;
}

/* Figma node 996:32365: each item is a plain white row, no border, no radius.
 * Hurme SemiBold 16/24, letter-spacing 0.08px (0.5%). Active = ultramarine
 * text only (no border treatment). */
body.article .article-layout-rail .anchor-nav-link {
  padding: var(--spacing-16);
  border: 0;
  border-radius: 0;
  background: var(--amp-bg, #fff);
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  letter-spacing: 0.08px;
  color: var(--amp-ink-blue, #001e41);
  text-decoration: none;
}

body.article .article-layout-rail .anchor-nav-link[aria-current="true"] {
  background: var(--amp-bg, #fff);
  color: var(--amp-ultramarine, #0018f0);
}

body.article .article-layout-rail .anchor-nav-link[aria-current="true"]::after {
  display: none;
}

/* Desktop: the "In this article" nav sticks while the author block and article
 * scroll past (the rail stretches to full height via align-items: stretch). */
@media (width >= 1024px) {
  body.article .article-layout-rail .section:has(> .anchor-nav-wrapper) {
    position: sticky;
    top: var(--article-rail-top, 24px);
  }
}

/* Mobile: the nav lives inside the content card (after the hero) as a sticky
 * dropdown. It spans the full width of the white card (negative side margin
 * cancels the card padding); its own internal padding keeps the text aligned
 * with the body copy. Pull it flush under the hero. */
@media (width < 1024px) {
  /* The anchor-nav owns its own top-border separator (Figma 1921:96819),
     so the hero just needs bottom breathing space, no divider line. */
  body.article .article-hero {
    /* padding-bottom: 24px; */
  }

  body.article .article-layout-main .anchor-nav.block {
    margin: 0 calc(var(--spacing-12) * -1);
  }

  /* Stuck + open share the same viewport-wide bleed: the sticky band spans
     screen-edge-to-screen-edge (Figma 1079:17355), and the open dropdown
     inherits that width. Pre-stick the bar stays within the white card (inset
     8px layout gutter + 12px card padding = 20px from the viewport edge). */
  body.article .article-layout-main .anchor-nav.block.is-stuck,
  body.article .article-layout-main .anchor-nav.block.is-open {
    margin-right: calc(var(--spacing-20) * -1);
    margin-left: calc(var(--spacing-20) * -1);
  }

  /* From 768px the card's hz padding jumps 12 → 36, so the bleed offsets grow
     to match (nav bleed = -36, sticky bleed = -(8 + 36) = -44 to reach the
     viewport edge past the outer 8px page gutter). */
  @media (width >= 768px) {
    body.article .article-layout-main .anchor-nav.block {
      margin: 0 calc(var(--spacing-36) * -1);
    }

    body.article .article-layout-main .anchor-nav.block.is-stuck,
    body.article .article-layout-main .anchor-nav.block.is-open {
      margin-right: calc((var(--spacing-8) + var(--spacing-36)) * -1);
      margin-left: calc((var(--spacing-8) + var(--spacing-36)) * -1);
    }
  }

  /* ---------- mobile header banner: author/share split into the hero ----------
     On mobile the desktop meta rail is dissolved into the hero. JS moves the
     date/reading into `.article-hero-meta` (pills at the top) and the avatar +
     name + share into `.article-hero-byline` (below the intro, above the
     image). See template-article.js decorateArticleMeta.

     The rail is hidden on mobile FROM FIRST PAINT (not only once JS adds
     `.article-rail-hidden`). The mobile design never shows the rail here — its
     content always moves into the hero — so leaving it visible only lets the
     tall desktop rail paint at the top of the page while the sidebar block
     decorates, then vanish when decorateArticleMeta runs post-loadSections.
     On a slow connection that is a multi-second wrong layout and a large CLS
     jump. Hiding it up front removes that shift; JS still *moves* (not clones)
     the nodes into the hero, and desktop restores the rail via the grid rules
     and `toDesktop()`. */
  body.article .article-layout-rail {
    display: none;
  }

  /* Date + reading-time pills: a space-between row below the breadcrumb. Figma
     1921:96818 puts the date on the LEFT and reading-time on the RIGHT, which
     reverses the desktop rail's `order` rule from sidebar.css. 48px gap to H1
     matches the heroSection container gap. */
  body.article .article-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    min-height: 26px; /* reserve the pill-row height (see article-hero.js slot) */
    margin-bottom: var(--spacing-48);
  }

  body.article .article-hero-meta .sidebar-date {
    order: 1;
  }

  body.article .article-hero-meta .sidebar-reading {
    order: 2;
  }

  body.article .article-hero-meta .sidebar-date,
  body.article .article-hero-meta .sidebar-reading {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-6);
    margin: 0;
    padding: var(--spacing-4) var(--spacing-12) var(--spacing-4) var(--spacing-8);
    border: 1px solid var(--amp-grey-d2, #d2d2d2);
    border-radius: 60px;
  }

  /* In the pill only the icon is shown — hide the "Last updated" label text. */
  body.article .article-hero-meta .sidebar-date-label {
    gap: 0;
  }

  body.article .article-hero-meta .sidebar-meta-text {
    display: none;
  }

  body.article .article-hero-meta .sidebar-date-value {
    font-family: var(--body-font-family);
    font-weight: 600;
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
    color: var(--amp-ink-blue, #001e41);
  }

  /* Author byline: avatar + name/role on the left, share icon pushed to the
     right. Figma 1921:96818 articles/sidebar/mobile: py 32 / gap 12 /
     items-start (avatar top-aligned with name). The intro's own 32px bottom
     margin gives the 32px top breathing space. */
  body.article .article-hero-byline {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-12);
    min-height: 64px; /* reserve avatar/byline height (see article-hero.js slot) */
    padding: var(--spacing-32) 0;
  }

  body.article .article-hero-byline .sidebar-avatar {
    flex: 0 0 40px;
  }

  body.article .article-hero-byline .sidebar-avatar,
  body.article .article-hero-byline .sidebar-avatar img {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  body.article .article-hero-byline .sidebar-avatar img {
    object-fit: cover;
  }

  body.article .article-hero-byline .sidebar-author {
    flex: 1 1 auto;
    margin: 0;
  }

  /* Name: Open Sans SemiBold 14 / lh 1.44 (Body/bodySmallBold), ink-blue. */
  body.article .article-hero-byline .sidebar-name {
    font-size: var(--font-size-14);
    line-height: 1.44;
  }

  /* Figma keeps the author role visible in the mobile byline (Open Sans
     Regular 14/22, text/secondary). */
  body.article .article-hero-byline .sidebar-role {
    display: block;
    margin: 0;
    font-family: var(--body-font-family);
    font-weight: 400;
    font-size: var(--font-size-14);
    line-height: var(--line-height-22);
    color: var(--amp-text, #313131);
  }

  /* The mobile byline (Figma 1921:96818) shows only avatar + name + role —
     the full Author CF biography is desktop-rail-only content. */
  body.article .article-hero-byline .sidebar-bio {
    display: none;
  }

  body.article .article-hero-byline .sidebar-share {
    flex: 0 0 auto;
  }

  /* Share collapses to a plain 36×36 icon button in the byline — no border,
     no fill (Figma articles/iconButtons). */
  body.article .article-hero-byline .sidebar-share-toggle {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--amp-ultramarine-deep, #001b99);
  }

  body.article .article-hero-byline .sidebar-share-toggle span {
    display: none;
  }

  /* The share popover becomes a full-width bottom sheet on mobile: it attaches
     to the bottom of the viewport with a dimmed scrim over the rest of the
     screen (Figma articles/sidebar/mobile-expanded). z-index sits above the
     sticky anchor-nav (bar 20 / fixed 900 / open panel 1000). */
  body.article .sidebar-share-scrim:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: block;
    background: rgb(0 0 0 / 40%);
  }

  body.article .article-hero-byline .sidebar-share-modal {
    position: fixed;
    inset: auto 0 0;
    z-index: 2001;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    overflow-y: auto;
    padding: var(--spacing-32) var(--spacing-16);
    border-radius: 0;
    box-shadow: 0 -2px 12px rgb(0 0 0 / 20%);
  }

  body.article .article-hero-byline .sidebar-share-heading {
    font-size: var(--font-size-22);
    line-height: var(--line-height-26);
  }

  body.article .article-hero-byline .sidebar-share-body {
    font-size: var(--font-size-16);
    line-height: var(--line-height-24);
  }
}

/* Shared share panel opened from the bottom feedback-and-share CTA. On desktop
   it is a dropdown anchored to that button (top/right set inline from the
   trigger), with no dimmer — per Figma. On mobile it stays the byline bottom
   sheet + dimmer handled above. */
@media (width >= 1024px) {
  body.article .sidebar-share-modal.is-anchored {
    position: fixed;
    left: auto;
    z-index: 2001;
  }
}

/* Article body-copy typography is intentionally scoped to the flowing DEFAULT
 * CONTENT only (`.default-content-wrapper`). Scoping it here stops these broad
 * element rules from bleeding into block chrome (sidebar meta, related-links,
 * important-information, anchor-nav) whose own component styles must win. */

/* ---------- body copy ---------- */
body.article main .default-content-wrapper p {
  padding: 0 0 var(--spacing-24);
  font-family: var(--body-font-family);
  font-weight: 400;
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  color: var(--amp-text, #313131);
  margin: 0;
}

/* ---------- lists ---------- */
body.article main .default-content-wrapper ul,
body.article main .default-content-wrapper ol {
  padding: 0 0 var(--spacing-16);
  padding-left: var(--spacing-24);
  font-family: var(--body-font-family);
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  color: var(--amp-text, #313131);
  margin: 0;
}

body.article main .default-content-wrapper ol {
  list-style-type: decimal;
}

body.article main .default-content-wrapper ol ol {
  list-style-type: lower-alpha;
}

body.article main .default-content-wrapper ol ol ol {
  list-style-type: lower-roman;
}

body.article main .default-content-wrapper li {
  margin-bottom: var(--spacing-8);
}

body.article main .default-content-wrapper li > :is(ul, ol) {
  margin-block: var(--spacing-8) 0;
  padding-bottom: 0;
}

body.article main .default-content-wrapper li::marker {
  color: inherit;
}

/* ---------- headings rhythm (sizes/colour come from the design system) ---------- */
body.article main .default-content-wrapper h2 {
  padding: var(--spacing-32) 0 var(--spacing-16);
  scroll-margin-top: var(--anchor-nav-offset, 72px);
  margin: 0;
}

body.article main .default-content-wrapper h3 {
  padding: var(--spacing-24) 0 var(--spacing-12);
  margin: 0;
}

body.article main .default-content-wrapper h4 {
  padding: var(--spacing-24) 0 var(--spacing-8);
  margin: 0;
}

/* ---------- block quote ---------- */
body.article main .default-content-wrapper blockquote {
  margin: var(--spacing-32) 0;
  padding: 0 0 0 var(--spacing-24);
  border-left: 2px solid var(--amp-ultramarine, #0018f0);
  font-family: var(--heading-font-family);
  font-weight: 400;
  font-size: var(--font-size-24);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--amp-ink-blue, #001e41);
}

/* ---------- inline figures ---------- */
body.article main .default-content-wrapper figure {
  margin: var(--spacing-32) 0;
}

body.article main .default-content-wrapper figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 8px);
}

body.article main .default-content-wrapper figcaption {
  margin-top: var(--spacing-8);
  font-family: var(--body-font-family);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--amp-text, #313131);
}

/* ---------- divider ---------- */
body.article main .default-content-wrapper hr {
  margin: var(--spacing-40) 0;
  border: 0;
  border-top: 1px solid var(--amp-border, #e2e2e2);
}

/* ---------- desktop ---------- */
@media (width >= 768px) {
  body.article main .default-content-wrapper p,
  body.article main .default-content-wrapper ul,
  body.article main .default-content-wrapper ol {
    font-size: var(--font-size-18);
    line-height: var(--line-height-28);
  }

  body.article main .default-content-wrapper h2 {
    padding: var(--spacing-32) 0 var(--spacing-16);
    margin: 0;
  }

  body.article main .default-content-wrapper > h2:first-of-type {
    margin-top: 0;
  }

  body.article main .default-content-wrapper h3 {
    padding: var(--spacing-32) 0 var(--spacing-12);
    margin: 0;
  }

  body.article main .default-content-wrapper blockquote {
    padding-left: var(--spacing-32);
    font-size: var(--font-size-36);
    line-height: 1.08;
  }
}