/* ---- Article page (Media Hub) — banner + featured image ----
   First pass only: opening banner and the featured image beneath it. Body,
   related articles, CTA and footer content are added in a later pass. */

/* ---- Banner — .panel variant with no image/video ----
   Reuses .panel's centered text layout (panel.css), but not .panel--short's
   80svh/.panel's own 100svh viewport-height sizing — min-height is reset to
   0 so the section sizes to its content instead. Solid sand background
   (the split treatment lives behind the featured image below, not here).
   --color-accent is this same sand tone, so the category label can't use it
   against the sand background (it would disappear) and takes plain ink
   instead. */
.panel--article {
  min-height: 0;
  background-color: var(--color-sand);
  color: var(--color-ink);
}

/* .panel__content's own padding (panel.css) is sized for a full-height
   hero: padding-top is exactly --header-height (no extra clearance below
   the nav) and padding-bottom is a large vh value meant for a viewport-tall
   panel. Both are overridden here now that this banner is content-sized —
   padding-top gets genuine breathing room below the header, padding-bottom
   drops to a small fixed gap above the featured image. */
.panel--article .panel__content {
  padding-top: calc(var(--header-height) + var(--space-24));
  padding-bottom: var(--space-16);
}

@media (min-width: 1024px) {
  .panel--article .panel__content {
    padding-top: calc(var(--header-height) + var(--space-24));
    padding-bottom: var(--space-16);
  }
}

/* Category and date share one color — a single restrained metadata line,
   not two competing tones. inline-flex + a small gap (rather than literal
   spaces around the separator) keeps the two close together without a
   wide, loose-looking gap. justify-content: center is required here — as a
   grid item (grid-column: 1 / -1) this stretches to the full row width by
   default, and a flex container ignores the text-align: center it would
   otherwise inherit, so without this the icons/text hug the left edge
   instead of centering. */
.article-hero__meta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.article-hero__title {
  grid-column: 1 / -1;
  margin-top: 0;
}

@media (min-width: 1024px) {
  .article-hero__title {
    grid-column: 3 / span 8;
  }
}

/* ---- Standfirst — sits below the featured image (its own section, not
   inside the banner), serif face, left-aligned, same 8-col width as the
   article text sections below (a direct grid-column on the shared .grid,
   not a nested grid, so its edge lines up exactly with them and with the
   gallery rows). Typography is the plain .heading-h3 utility class (applied
   in markup) — this file only adds the grid placement and color, since the
   type values (font/weight/responsive size step/line-height) are exactly
   .heading-h3's own, verified property-for-property, not just visually
   similar. */
.article-hero__subheading {
  grid-column: 1 / -1;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .article-hero__subheading {
    grid-column: 3 / span 8;
  }
}

/* ---- Featured image — full-width 16:9, directly beneath the banner ----
   The section itself carries the sand/paper split (top half sand, bottom
   half standard page background) behind the image — top/bottom padding
   keeps a visible strip of each color above and below the photo. */
.article-featured-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  background: linear-gradient(to bottom, var(--color-sand) 50%, var(--color-bg) 50%);
}

@media (min-width: 1024px) {
  .article-featured-section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-24);
  }
}

.article-featured-image {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Standard article text section — side-heading layout ----
   Uses the shared .split-content-section component (split-content-section.css)
   for spacing, grid placement and typography — see that file. */

/* ---- Share + next-article row ---- */
.article-share-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  border-top: 1px solid var(--color-sand);
  padding-top: var(--space-8);
}

@media (min-width: 1024px) {
  .article-share-row {
    padding-top: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .article-share-row {
    grid-column: 3 / span 8;
  }
}

.article-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.article-share__label {
  font-family: var(--font-body);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.article-share__icons {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.article-share__icon {
  display: inline-flex;
  color: var(--color-ink);
  transition: color var(--duration-base) var(--ease-standard);
}

.article-share__icon svg {
  width: 18px;
  height: 18px;
}

.article-share__icon:hover,
.article-share__icon:focus-visible {
  color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .article-share__icon {
    transition: none;
  }
}

/* ---- Credits line — small Story/Styling/Photography attribution, sits
   directly under the featured image for image-led articles that carry
   photographer/stylist credit (most articles don't need this; only add the
   markup where it applies). Plain .caption sizing, no new type scale. */
.article-credits {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  text-align: center;
}

@media (min-width: 1024px) {
  .article-credits {
    grid-column: 3 / span 8;
  }
}

/* ---- Full-screen editorial pullout — reusable static full-viewport panel
   for image-led journal articles (first used on the Great Indoors article).
   Reuses .panel's own 100svh + object-fit:cover full-bleed layout (panel.css)
   unchanged — this is deliberately NOT part of a panel-sequence: no GSAP
   crossfade, no data-panel-* hooks, same plain "full-bleed, no scroll
   animation beyond parallax" pattern already documented for .next-project in
   project-detail.css. Text position is one of three modifiers rather than
   one-off styling per image — see the "Build direction" note in the source
   handoff: pick whichever position matches each photo's own negative space
   instead of defaulting every panel to the hero's bottom-center treatment. */
.panel--pullout .panel__bg::after {
  /* No default dark gradient — legibility comes from placing the text over
     each photo's own natural negative space (open sky, a dark window, a
     shaded floor), not a generic scrim. See .panel--pullout-dark below for
     the one case (light sky) that needs a text-color swap instead of an
     overlay. */
  content: none;
}

.panel--pullout .panel__content {
  padding-top: calc(var(--header-height) + var(--space-10));
  padding-bottom: var(--space-10);
  text-align: left;
}

.panel__pullout-text {
  max-width: 22rem;
  color: var(--color-paper);
}

@media (min-width: 768px) {
  .panel__pullout-text {
    max-width: 26rem;
  }
}

/* Position modifiers — override the base .panel's bottom-anchored,
   centered-text default (panel.css) only where a photo calls for it. */
.panel--pullout-top-center,
.panel--pullout-top-left {
  align-items: flex-start;
}

.panel--pullout-top-center .panel__content {
  text-align: center;
}

.panel--pullout-top-center .panel__pullout-text {
  margin-inline: auto;
}

/* .panel--pullout-bottom-left needs no override — align-items: flex-end and
   text-align: left are already the base .panel/.panel--pullout defaults. */

/* Dark-text variant — for a pullout sitting over light photography (e.g.
   open sky) where white text would fail contrast. Swapping the text color
   keeps the photo untouched rather than adding an overlay to fix it. */
.panel--pullout-dark .panel__pullout-text {
  color: var(--color-ink);
}