/* ================================================================
   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 {
  display: grid;
  background: var(--color-black);
  color: var(--color-text-inverted);
}

.story-article-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 20px;
  text-align: center;
}

.story-article-hero-label {
  margin: 0 0 16px;
  font: var(--font-weight-medium) 14px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.story-article-hero-label a {
  color: var(--color-text-inverted);
  text-decoration: none;
}

.story-article-hero-date {
  margin: 0 0 24px;
  font: var(--font-weight-medium) 13px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* SOURCE: 07-TYPOGRAPHY.md
     "Date: 13.3/16 uppercase"
     PASS C: weight 400 -> 500, opacity removed (full white)
     per EE72 article-hero date label — label-m font-medium,
     --color-sub-text: #FFFFFF (all 12 EE72 digests). Size stays 13/16
     to preserve STORY hierarchy under the 14/16 category label. */
}

.story-article-hero-copy h1 {
  max-width: 600px;
  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;
  /* SOURCE: 07-TYPOGRAPHY.md — enlarged per hero-H1 approval
     Mobile-first: 36/39 (+12.5% from 32/36), line-height ratio 1.083
     Tokens (--font-article-hero-size/leading) remain at 32/36 for
     test-fixture backward compatibility. */
}

.story-article-hero-standfirst {
  max-width: 600px;
  margin: 0 0 24px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
  opacity: 0.85;
  /* SOURCE: 07-TYPOGRAPHY.md
     "Article intro runtime: 32/36/500" — standfirst uses lighter weight */
}

.story-article-hero-byline {
  margin: 0;
  font: var(--font-weight-semibold) 14px/16px var(--story-font);
  text-transform: uppercase;
  /* SCOPED BYLINE POLISH: weight 600, presentation-only uppercase
     (stored author/date data unchanged). */
}

.story-article-hero-byline a {
  color: var(--color-text-inverted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.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: var(--story-reading-tablet);
  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: var(--story-reading-tablet);
  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: var(--font-weight-light) 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. */
@media (max-width: 767.98px) {
  .story-article--hero-dark .story-article-hero-copy {
    padding-top: 88px;
  }
}

/* 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-hero-copy {
    padding: 64px 40px;
  }

  .story-article-hero-copy h1 {
    font-size: 40px;
    line-height: 42px;
    /* Enlarged hero H1 — tablet: 40/42 (+25% from 32/36),
       line-height ratio 1.05. */
  }

  .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 {
    grid-template-columns: 1fr 1fr;
    min-height: clamp(620px, 72vh, 820px);
    /* SOURCE: 02-ARTICLE.md §Authored frames
       Desktop: two equal fields */
  }

  .story-article-hero-copy {
    padding: 64px 40px;
  }

  .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-hero-copy {
    padding: 64px 64px;
  }

  .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-article-hero-copy h1 {
    font-size: 56px;
    line-height: 56px;
    /* Enlarged hero H1 — desktop: 56/56 (+16.7% from 48/48),
       line-height ratio 1.0. */
  }

  .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
   ---------------------------------------------------------------- */
@media print {
  .story-article-hero {
    background: #fff;
    color: #000;
  }

  .story-article-hero-copy h1,
  .story-article-hero-label a,
  .story-article-hero-byline a {
    color: #000;
  }
}

/* ================================================================
   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.
   ================================================================ */