/* ================================================================
   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-normal) 13px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  /* SOURCE: 07-TYPOGRAPHY.md
     "Date: 13.3/16 uppercase" */
}

.story-article-hero-copy h1 {
  max-width: 600px;
  margin: 0 0 24px;
  font: var(--font-article-hero-weight) var(--font-article-hero-size)/var(--font-article-hero-leading) var(--story-font);
  letter-spacing: var(--font-article-hero-tracking);
  /* SOURCE: 07-TYPOGRAPHY.md
     "Article H1 runtime: 32/36/300"
     LOCKED per ARTICLE HERO FONT decision */
}

.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-medium) 14px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* SOURCE: 07-TYPOGRAPHY.md
     "Byline: 13.8/16 Medium uppercase" */
}

.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 {
  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: 70px;
  padding-bottom: 70px;
  /* SOURCE: 02-ARTICLE.md §Rhythm
     "Hero to introduction: 70 desktop, 50 tablet/mobile" */
}

.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);
  margin: 2.2em auto 0.7em;
  font: var(--font-weight-light) 24px/26px var(--story-font);
  /* SOURCE: 07-TYPOGRAPHY.md
     "Article H2: 24/26/300" */
}

.story-article-body h3 {
  max-width: var(--story-reading);
  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);
  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: 64px;
}

.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: 96px 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)" */
}

.story-discovery-grid .story-card {
  display: grid;
}

.story-discovery-grid .story-card-media {
  display: block;
  overflow: hidden;
}

.story-discovery-grid .story-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  aspect-ratio: 4 / 5;
}

.story-discovery-grid .story-card-copy {
  padding: 24px 20px;
  background: var(--color-white);
}

 .story-discovery-grid .story-card-title {
  margin: 0;
  font: var(--font-weight-medium) 18px/22px var(--story-font);
  /* SOURCE: 07-TYPOGRAPHY.md
     "Story title: 18/22/500" */
}

.story-discovery-grid .story-card-title a {
  color: var(--color-text);
  text-decoration: none;
}

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

/* Tablet: hero stacked, reading width 606px */
@media (min-width: 768px) {
  .story-article-hero-copy {
    padding: 64px 40px;
  }

  .story-article-body {
    padding-top: 50px;
    padding-bottom: 50px;
    /* SOURCE: 02-ARTICLE.md §Rhythm
       "Hero to introduction: 50 tablet/mobile" */
  }
}

/* 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 {
    height: 100%;
    min-height: 0;
  }

  .story-article-body {
    padding-top: 70px;
    /* SOURCE: 02-ARTICLE.md §Rhythm
       "Hero to introduction: 70 desktop" */
  }

}

/* Desktop: reading width 878px, discovery 4 columns */
@media (min-width: 1280px) {
  .story-article-hero-copy {
    padding: 64px 64px;
  }

  .story-article-hero-copy h1 {
    font-size: 48px;
    line-height: 48px;
    /* SOURCE: 07-TYPOGRAPHY.md
       "Article H1 Figma 1440: 47.6/48"
       Applied at 1280+ for large-desktop consistency */
  }

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

/* ----------------------------------------------------------------
   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;
  }
}