/* ================================================================
   STORY Magazine G2 — Article Shell
   Phase 5 — Article Shell
   Implements: 02-ARTICLE.md, 07-TYPOGRAPHY.md, 08-SPACING-GRID.md
   ================================================================= */

/* ----------------------------------------------------------------
   Article Hero
   Source: 02-ARTICLE.md §Authored frames, §Type
   Desktop: 50/50 split, black panel + media
   Mobile: stacked, image first, ~986 total at 390
   ---------------------------------------------------------------- */

.story-article-hero-media {
  margin: 0;
  overflow: hidden;
}

.story-article-hero-media img,
.story-article-hero-media .story-editorial-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* SOURCE: 06-IMAGE-SYSTEM.md
     "Article hero: cover, split desktop, image-first stack tablet/mobile" */
}

.story-article-hero-media figcaption {
  padding: 8px 20px;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
  background: var(--color-bg);
}

/* ----------------------------------------------------------------
   Credits
   Flexible role/value pairs. Empty credits collapse.
   ---------------------------------------------------------------- */
.story-article-credits {
  padding-top: 48px;
  padding-bottom: 0;
}

.story-article-credit {
  margin: 0 0 8px;
  font: var(--font-weight-normal) 14px/20px var(--story-font);
}

.story-article-credit-role {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.story-article-credit-name {
  margin-left: 8px;
}

/* ----------------------------------------------------------------
   Article Body
   Source: 07-TYPOGRAPHY.md, 08-SPACING-GRID.md
   Body: 20/30/300 runtime
   Paragraph separation: 40px
   Reading width: 878/606/350
   ---------------------------------------------------------------- */
.story-article-body {
  padding-top: 50px;
  padding-bottom: 70px;
  /* SOURCE: 02-ARTICLE.md §Rhythm
     "Hero to introduction: 70 desktop, 50 tablet/mobile"
     PASS C: base 70px -> 50px — aligns hero->body gap to the
     proven EE72 article-intro ramp (TT26 §12: 50px base). */
}

.story-article-body p {
  margin: 0 0 40px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
  /* SOURCE: 07-TYPOGRAPHY.md
     "Article body runtime: 20/30/300"
     SOURCE: 08-SPACING-GRID.md
     "Paragraph separation: 40px" */
}

.story-article-body > p:first-child {
  font: var(--font-weight-light) 20px/30px var(--story-font);
  /* Lead paragraph same as body per runtime spec */
}

.story-article-body h2 {
  max-width: 100%;
  margin: 2.2em auto 0.7em;
  font: 700 24px/26px var(--story-font);
  /* SOURCE: 07-TYPOGRAPHY.md
     "Article H2: 24/26/300" */
}

.story-article-body h3 {
  max-width: 100%;
  margin: 2em auto 0.6em;
  font: var(--font-weight-light) 20px/24px var(--story-font);
}

.story-article-body ul,
.story-article-body ol {
  max-width: var(--story-reading-tablet);
  margin: 0 auto 40px;
  padding-left: 24px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

.story-article-body li {
  margin-bottom: 12px;
}

.story-article-body blockquote {
  max-width: 740px;
  margin: 96px auto;
  padding: 0 20px;
  font: var(--font-weight-medium) 32px/36px var(--story-font);
  text-align: center;
  /* SOURCE: 02-ARTICLE.md §Media and quote behavior
     "Pull quotes are centred, narrower than prose, 32/36/500" */
}

.story-article-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.story-article-body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 40px auto;
}

.story-article-body figure {
  margin: 40px auto;
}

.story-article-body figcaption {
  margin-top: 8px;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
}

.story-article-body .wp-block-embed {
  margin: 40px auto;
}

.story-article-body .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.story-article-body .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------
   Article End
   ---------------------------------------------------------------- */
.story-article-end {
  text-align: center;
  padding-bottom: 0;
}

.story-article-completion {
  font-size: 12px;
  color: var(--color-muted);
}

/* ----------------------------------------------------------------
   Related Stories (Discovery)
   Source: 02-ARTICLE.md §Discovery
   8 cards: 4x2 desktop, 2x4 tablet/mobile
   ---------------------------------------------------------------- */
.story-discovery {
  padding-block: 16px 64px;
}

.story-discovery h2 {
  text-align: center;
  margin: 0 0 48px;
  font: 700 24px/26px var(--story-font);
  /* SOURCE: 07-TYPOGRAPHY.md
     "Related/archive title: 24/26/300" */
}

 .story-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  /* SOURCE: 02-ARTICLE.md §Discovery
     "2×4 at tablet (384px), 2×4 at mobile (195px)" */
}

/* Tile: resting image only — the image IS the tile, no text over it, at
   every breakpoint. The editorial detail reveals via ONE model per
   breakpoint, never both:
   • Desktop (≥64rem): hover/focus (fine pointers) or the first tap of the
     two-step toggle switches the same fixed 4/5 tile to the white in-card
     panel — title on top, the featured image genuinely reduced and centered,
     excerpt underneath (approved EE72 discovery panel).
   • Mobile/tablet (<64rem): the tile stays image-only; the first tap checks
     the card's hidden toggle and reveals the PAIRED white grid cell
     (.story-discovery-detail) immediately below its card — title + excerpt
     only. The second tap navigates. Mirrors the approved category
     media/detail architecture (listing.css body.category article-card +
     explore.js): image tile and white editorial detail are separate grid
     cells, never text over the photograph, never a miniature hover panel. */
.story-discovery-grid .story-discovery-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-white);
}

.story-discovery-grid .story-discovery-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.story-discovery-grid .story-discovery-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transition: inset var(--duration-reveal) var(--ease-out);
}

.story-discovery-grid .story-discovery-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-discovery-grid .story-discovery-card__title {
  position: absolute;
  top: 8%;
  left: 16px;
  right: 16px;
  z-index: 0;
  margin: 0;
  text-align: center;
  font: var(--font-weight-medium) 14px/16px var(--story-font);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out);
  pointer-events: none;
  /* SOURCE: category detail tile title — 14/16/500 uppercase centered
     (listing.css .article-card__title-text family). */
}

.story-discovery-grid .story-discovery-card__excerpt {
  position: absolute;
  bottom: 6%;
  left: 16px;
  right: 16px;
  z-index: 0;
  margin: 0;
  text-align: center;
  font: var(--font-weight-normal) 14px/16px var(--story-font);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out);
  pointer-events: none;
  /* SOURCE: category detail tile excerpt — 14/16/400 uppercase centered
     (listing.css .article-card__excerpt family). */
}

/* Desktop only (≥64rem): the white panel is a composition change INSIDE
   the fixed 4/5 tile — the media box shrinks to a reduced centered
   portrait and the card's own white background becomes the panel around
   it. Below 64rem the tile must stay image-only: the editorial detail is
   a SEPARATE white grid cell (.story-discovery-detail). */
@media (min-width: 64rem) {
  .story-discovery-grid .story-discovery-card:hover .story-discovery-card__media,
  .story-discovery-grid .story-discovery-card:focus-within .story-discovery-card__media,
  .story-discovery-grid .story-discovery-card:has(.story-discovery-card__toggle:checked) .story-discovery-card__media {
    inset: 24% 26% 22% 26%;
  }

  .story-discovery-grid .story-discovery-card:hover .story-discovery-card__title,
  .story-discovery-grid .story-discovery-card:hover .story-discovery-card__excerpt,
  .story-discovery-grid .story-discovery-card:focus-within .story-discovery-card__title,
  .story-discovery-grid .story-discovery-card:focus-within .story-discovery-card__excerpt,
  .story-discovery-grid .story-discovery-card:has(.story-discovery-card__toggle:checked) .story-discovery-card__title,
  .story-discovery-grid .story-discovery-card:has(.story-discovery-card__toggle:checked) .story-discovery-card__excerpt {
    opacity: 1;
  }

  /* The white detail cell is the mobile/tablet reveal; hidden on desktop. */
  .story-discovery-detail {
    display: none;
  }
}

.story-discovery-grid .story-discovery-card__link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: -2px;
}

/* Coarse pointers: two-step tap (category's checkbox pattern). First tap
   checks the toggle and reveals the white panel; the toggle then hides
   itself (:checked → display:none) and hands the surface to the link so
   the second tap navigates. */
.story-discovery-grid .story-discovery-card__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.story-discovery-grid .story-discovery-card__toggle:checked {
  display: none;
}

/* Fine pointers: the toggle is redundant; hover/focus drive the state. */
@media (hover: hover) and (pointer: fine) {
  .story-discovery-grid .story-discovery-card__toggle {
    display: none;
  }
}

/* No-thumbnail posts: text-only tile (category "text-only" variant). The
   white panel is always on, title and excerpt centered, and the card is a
   plain single-tap link — never a zero-height gap in the grid. */
.story-discovery-grid .story-discovery-card--no-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
}

.story-discovery-grid .story-discovery-card--no-media .story-discovery-card__title,
.story-discovery-grid .story-discovery-card--no-media .story-discovery-card__excerpt {
  position: static;
  opacity: 1;
}

.story-discovery-grid .story-discovery-card--no-media .story-discovery-card__toggle {
  display: none;
}

/* Mobile/tablet (<64rem): activated editorial detail as a separate WHITE
   grid cell below its card — title + excerpt only, wrapped in the post
   link so the second tap navigates. The cell sits in the card's column,
   one row below (inline grid-row/grid-column from template-tags.php).
   One cell open at a time is enforced by discovery.js. */
.story-discovery-detail {
  display: none;
  background: var(--color-white);
  padding: 24px 20px;
}

.story-discovery-detail__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.story-discovery-detail__title {
  margin: 0 0 8px;
  text-align: center;
  font: var(--font-weight-medium) 14px/16px var(--story-font);
  text-transform: uppercase;
  color: var(--color-text);
  /* SOURCE: category detail tile title — 14/16/500 uppercase centered
     (listing.css .article-card__title-text family). */
}

.story-discovery-detail__excerpt {
  margin: 0;
  text-align: center;
  font: var(--font-weight-normal) 14px/16px var(--story-font);
  text-transform: uppercase;
  color: var(--color-text);
  /* SOURCE: category detail tile excerpt — 14/16/400 uppercase centered
     (listing.css .article-card__excerpt family). */
}

/* Toggle state leaks only below 64rem — desktop uses the in-card panel. */
@media (max-width: 63.999rem) {
  .story-discovery-item:has(.story-discovery-card__toggle:checked) + .story-discovery-detail {
    display: block;
  }
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */

/* EE74: mobile article-hero clearance below the absolute header.
   On singular posts .story-article--hero-dark makes .story-header
   absolute (top:0) over the hero, and the EE73 band compacts to 66px
   <80rem. The base 48px hero-copy padding would leave the category
   label starting inside that band (label top 48 vs band bottom 66 at
   390, measured) and the headline just 14px below the controls. Give
   the hero copy deliberate top clearance on mobile only; tablet (>=768)
   and desktop hero layouts stay untouched. */

/* EE75: single-article bottom category/nav strip — horizontal scroll mirror.
   Root cause: shell.css centers the primary-menu flex ul (justify-content:
   center) with no min-width:0 and no overflow-x:auto. Six category labels
   exceed the fixed bar's width, so flexbox splits the overflow evenly to
   BOTH sides: first label clipped left (x=-70 at 390), last label clipped
   right (x=445). The approved category-archive strip (listing.css body.category
   rules) already solves this with flex-start + overflow-x:auto + inline
   padding; mirror exactly, scoped to single posts only.
   EE77: the same primary-menu nav renders on the homepage (footer.php) with
   the identical defect (first item x=-70 / last x=445 at 390, measured on
   /). Extend the selectors to body.home — shared fixed-bar component, one
   rule source; body.single computed styles are unchanged by the addition. */
body.single .story-bottom-nav,
body.home .story-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
  height: var(--bottom-nav-height-mobile);
  transform: none;
  box-sizing: border-box;
}

body.single .story-bottom-nav > ul,
body.home .story-bottom-nav > ul {
  min-width: 0;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.single .story-bottom-nav > ul::-webkit-scrollbar,
body.home .story-bottom-nav > ul::-webkit-scrollbar {
  display: none;
}

body.single .story-bottom-nav a,
body.home .story-bottom-nav a {
  padding-block: 24px;
}

@media (min-width: 80rem) {
  body.single .story-bottom-nav,
  body.home .story-bottom-nav {
    display: none;
  }
}

/* Tablet: hero stacked, reading width 606px */
@media (min-width: 768px) {

  .story-article-body {
    padding-top: 60px;
    padding-bottom: 50px;
    /* SOURCE: 02-ARTICLE.md §Rhythm
       "Hero to introduction: 50 tablet/mobile"
       PASS C: tablet 50px -> 60px — EE72 article-intro ramp
       tier 2 (TT26 §12/§27: 60px @52.125rem) mapped to STORY 768px.
       Monotonic ramp now: 50 -> 60 -> 70 -> 80. */
  }
}

/* Small desktop: hero splits 50/50, reading width 796px */
@media (min-width: 1024px) {

  .story-article-hero-media img,
  .story-article-hero-media .story-editorial-video {
    height: 100%;
    min-height: 0;
  }

  .story-article-body {
    padding-top: 70px;
    /* SOURCE: 02-ARTICLE.md §Rhythm
       "Hero to introduction: 70 desktop"
       PASS C: matches EE72 article-intro ramp tier 3 (70px @1024). */
  }

}

/* Desktop: reading width 878px, discovery 4 columns */
@media (min-width: 1280px) {

  .story-article-body {
    padding-top: 80px;
    /* PASS C: desktop 70px -> 80px — EE72 article-intro ramp tier 4
       (TT26 §12/§27: 80px @80rem). Ramp complete: 50/60/70/80. */
  }

  .story-discovery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------------
   Dynamic Hero — optional adaptive article backdrop.
   Applied server-side ONLY when the Article Page Dynamic Hero switch is ON
   AND the featured image carries a stored approved mood. The exact palette
   arrives as inline custom properties on the hero element; these rules just
   route them. Background/text/links follow the mood foreground, which the
   palette contract keeps legible on every approved backdrop (white-on-dark
   and the light warm-stone with its dark foreground). Geometry, spacing and
   the EE74 mobile clearance are never touched; without the inline properties
   (feature OFF, missing image, or no stored mood) nothing here matches and
   the locked article hero is byte-identical.
   ---------------------------------------------------------------- */
.story-article--adaptive-hero .story-article-hero {
  background: var(--story-article-mood-bg, var(--color-black));
  color: var(--story-article-mood-fg, var(--color-text-inverted));
}

.story-article--adaptive-hero .story-article-hero-label a,
.story-article--adaptive-hero .story-article-hero-byline a {
  color: var(--story-article-mood-fg, var(--color-text-inverted));
}

/* ----------------------------------------------------------------
   Print
   ---------------------------------------------------------------- */

/* ================================================================
   R12 — Single-article media compatibility
   Preserve legacy/Classic Editor article image geometry by default.
   Wide/full-bleed media is opt-in only via WordPress alignment classes.
   This prevents historical figures, tables and embeds from being enlarged
   automatically while retaining responsive media on every viewport.
   ================================================================= */
body.single .story-article-body img,
body.single .story-article-body video,
body.single .story-article-body iframe {
  max-width: 100%;
}

/* Optional editorial breakout for content explicitly authored as wide. */
body.single .story-article-body > .alignwide,
body.single .story-article-body > figure.alignwide,
body.single .story-article-body > .wp-block-image.alignwide,
body.single .story-article-body > .wp-block-gallery.alignwide,
body.single .story-article-body > .wp-block-video.alignwide,
body.single .story-article-body > .wp-block-embed.alignwide {
  width: min(calc(100vw - 40px), var(--story-wide));
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

/* Full alignment is also explicit, never automatic. */
body.single .story-article-body > .alignfull,
body.single .story-article-body > figure.alignfull,
body.single .story-article-body > .wp-block-image.alignfull,
body.single .story-article-body > .wp-block-gallery.alignfull,
body.single .story-article-body > .wp-block-video.alignfull,
body.single .story-article-body > .wp-block-embed.alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  body.single .story-article-body > .alignwide,
  body.single .story-article-body > figure.alignwide,
  body.single .story-article-body > .wp-block-image.alignwide,
  body.single .story-article-body > .wp-block-gallery.alignwide,
  body.single .story-article-body > .wp-block-video.alignwide,
  body.single .story-article-body > .wp-block-embed.alignwide {
    width: min(calc(100vw - 64px), var(--story-wide));
  }
}


/* ================================================================
   R13 — Tighten article-to-discovery transition
   Removes the stacked 64px article-end + 96px discovery-top gap.
   Keeps a deliberate 32px breathing space before More From Story.
   ================================================================ */


/* ================================================================
   R14 — Clean article-to-discovery transition
   Article completion marker removed from single.php.
   Discovery begins after a compact 16px top breathing space.
   ================================================================ */

/* v1.1.65 — article opening group stays centred and visible.
   The black panel is half of the split hero; no bottom anchoring. */

/* 1.1.66 — article opening: one intrinsic-height, panel-bounded layout. */
.story-article-hero {display:grid;grid-template-columns:minmax(0,1fr);background:var(--color-black);color:var(--color-text-inverted);}
.story-article-hero-copy {display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:100px 24px 40px;text-align:center;}
.story-article-hero-label {margin:0 0 16px;font:500 13px/1.3 var(--story-font);text-transform:uppercase;letter-spacing:.05em;}
.story-article-hero-label a {color:inherit;text-decoration:none;}
.story-article-hero-copy h1 {width:100%;max-width:20ch;margin:0 0 24px;font:var(--font-article-hero-weight) 36px/39px var(--story-font);letter-spacing:var(--font-article-hero-tracking);text-wrap:balance;overflow-wrap:anywhere;}
.story-article-hero-byline {max-width:100%;margin:0;font:600 12px/1.5 var(--story-font);text-transform:uppercase;overflow-wrap:anywhere;}
.story-article-hero-byline a {color:inherit;text-decoration:underline;text-underline-offset:2px;}
/* At 125% equivalent zoom on a 320px phone, preserve the reference ratio
   while keeping the real long-title byline inside the 454px CSS viewport. */
@media (max-width:280px) and (max-height:480px) {
  .story-article-hero-copy h1 {font-size:clamp(34px,7.58svh,36px);line-height:1.0833333333;}
}
@media (min-width:768px) {
  .story-article-hero-copy h1 {font-size:40px;line-height:42px;}
}
@media (min-width:1024px) {
  .story-article-hero {grid-template-columns:repeat(2,minmax(0,1fr));min-height:100svh;align-items:stretch;}
  .story-article-hero-copy {padding:112px clamp(28px,3vw,72px) 40px;}
  /* The media fills its grid area without setting the copy's minimum height. */
  .story-article-hero-media {position:relative;min-height:0;}
  .story-article-hero-media img,.story-article-hero-media .story-editorial-video {position:absolute;inset:0;height:100%;min-height:0;}
  .story-article-hero-media:has(figcaption) {display:grid;grid-template-rows:minmax(0,1fr) auto;}
  .story-article-hero-media:has(figcaption) img,.story-article-hero-media:has(figcaption) .story-editorial-video {position:absolute;grid-row:1 / 2;grid-column:1 / 2;height:100%;min-height:0;}
  .story-article-hero-media figcaption {grid-row:2;position:relative;}
}
@media (min-width:1280px) {
  .story-article-hero-copy h1 {font-size:56px;line-height:56px;}
}
/* 1.1.69 — native editorial stage, matching the homepage pinned-copy model.
   The hero is the sticky boundary; the adjacent image supplies the scroll beat.
   Eligibility is content-aware; unenhanced/mobile/reduced-motion stays baseline. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
  .story-article-hero.is-editorial-scroll {
    position:relative;
    min-height:128svh;
  }
  .story-article-hero.is-editorial-scroll .story-article-hero-copy {
    position:sticky;
    top:0;
    align-self:start;
    min-height:100svh;
    height:auto;
  }
}
@media print {
  .story-article-hero {background:#fff;color:#000;min-height:0;}
  .story-article-hero-copy {padding:24px;}
}