/* News article (template article.php). Not a block: lives here because the layout
   auto-loads this folder. V0.1 News Article 62:2662. */

/* ---- Hero: 700 tall, 100 top / 75 bottom, pill → 80 → Ovo 80 headline, 20% black wash.
   Per article (Panel, review N3): --hero-shade sets the wash's strength, --hero-blur blurs
   the image (its box grows by the blur so the soft edges stay off screen). */
.article-hero {
  position: relative; overflow: clip; isolation: isolate; /* clip, not hidden: hidden would make this the scroll container for view() */
  display: flex; min-height: 700px;
}
.article-hero__bg { position: absolute; inset: 0; z-index: -1; }
.article-hero__bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0); opacity: var(--hero-shade, 0.2); }
/* Black-text heroes: a white wash from the left keeps the headline legible on busy light images. */
.article-hero.theme-light .article-hero__bg::after { background: linear-gradient(90deg, rgb(255 255 255), rgb(255 255 255 / 0.42) 65%, rgb(255 255 255 / 0)); opacity: var(--hero-shade, 0.72); }
.article-hero__settle,
.article-hero__media { position: absolute; inset: 0; }
.article-hero__media > img { width: 100%; height: 100%; object-fit: cover; }
.article-hero[style*="--hero-blur"] .article-hero__media { inset: calc(var(--hero-blur) * -2); filter: blur(var(--hero-blur)); }
.article-hero__inner { padding-top: 100px; padding-bottom: 75px; }
.article-hero__headline { margin-top: var(--space-80); max-width: 15em; line-height: 1.05; letter-spacing: -0.04em; }
.article-hero .tag--eyebrow { border-width: 1.5px; }
:where([data-input="mouse"], .no-js) .article-hero .tag--eyebrow:hover { background: var(--ink-primary); color: var(--surface-page); border-color: var(--ink-primary); }
.article-hero.theme-light .tag--eyebrow { color: var(--ink-primary); }

/* Same settle + drift as the image hero (keyframes in media-hero.css). */
.article-hero__settle { animation: media-hero-settle 2.8s var(--ease-out) both; }
@supports (animation-timeline: view()) {
  .article-hero__bg { animation: media-hero-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}

/* ---- Date + share row: inset to x150 (content inset 100), 60 above and below. */
.article-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding-block: 60px; }
.article-meta, .article-foot { padding-inline: calc(var(--gutter) + 100px); }

.share { display: flex; align-items: center; gap: 18px; }
.share__icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.share__icon svg { width: 22px; height: auto; max-height: 24px; }
:where([data-input="mouse"], .no-js) .share__icon:hover { transform: translateY(-2px); opacity: 0.6; }
.share__text { color: var(--ink-muted); transition: color var(--dur-fast); }
.share__icon + .share__text { padding-left: 18px; border-left: 1px solid var(--border-default); }
:where([data-input="mouse"], .no-js) .share__text:hover, .share__text.is-done { color: var(--ink-primary); }

/* ---- Body: the reading column is centred here (x250, 780 wide), not the site's x450. */
.article-body {
  --col-offset: 202px;
  --col-text: 780px;
  --media-pair-inset: 100px;
}
/* V0.1: article modules sit 60 apart top and bottom (120 between). */
.article-body > .pad-sm,
.article-body > .pad-md { padding-block: var(--space-64); }

/* ---- Foot: "Tags" label, 32 below it the pills; share repeats on the right. */
.article-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-40); flex-wrap: wrap; padding-top: 60px; padding-bottom: var(--space-120); }
.article-foot__tags, .article-foot__share { display: flex; flex-direction: column; gap: var(--space-32); }
.article-foot__share { align-items: flex-end; }
.article-foot .tag { padding-inline: 18px; } /* V0.1 pill padding */

@media (max-width: 1023px) {
  .article-body { --col-offset: 0px; --media-pair-inset: 0px; }
  .article-meta, .article-foot { padding-inline: var(--gutter); }
}

/* Mobile: the hero stacks — pill and headline on the page's own ground, the image below
   it, full bleed. At phone width a headline over the picture always lands on something
   (a logo, a face), so text and image no longer overlap; the wash and blur, which only
   existed to keep the headline legible, drop away. The article's white/black text choice
   is for over-the-image, so the hero takes the page's light roles back here. */
.article { --page-ground: var(--surface-page); --page-ink: var(--ink-primary); --page-ink-muted: var(--ink-muted); --page-border: var(--border-strong); }

@media (max-width: 767px) {
  .article-hero {
    --surface-page: var(--page-ground); --ink-primary: var(--page-ink); --ink-muted: var(--page-ink-muted); --border-strong: var(--page-border);
    flex-direction: column; min-height: 0;
  }
  .article-hero__bg { position: relative; inset: auto; z-index: 0; order: 1; aspect-ratio: 4 / 3; overflow: clip; animation: none; }
  .article-hero__bg::after { content: none; }
  .article-hero[style*="--hero-blur"] .article-hero__media { inset: 0; filter: none; }
  .article-hero__inner { padding-top: var(--space-48); padding-bottom: var(--space-32); }
  .article-hero__headline { margin-top: var(--space-32); text-wrap: balance; }
  .article-meta { flex-direction: column; align-items: flex-start; gap: var(--space-16); padding-block: var(--space-24) var(--space-32); }
  .article-foot { flex-direction: column; align-items: flex-start; padding-top: var(--space-32); }
  .article-foot__tags, .article-foot__share { gap: var(--space-16); }
  .article-foot__share { align-items: flex-start; }
  .share { flex-wrap: wrap; }
  /* 44px tap targets; negative margins keep the icons' visual spacing. */
  .share__icon { width: 44px; height: 44px; margin: -10px; }
  /* 2px more between icons, so neighbouring targets don't overlap: centres 44 apart (SHARE-1, 10-22). */
  .share__icon + .share__icon { margin-left: -8px; }
  .share__text { position: relative; }
  .share__text::after { content: ""; position: absolute; inset: -15px -8px; }
  /* Pills: the hit area grows to 44 tall around the drawn pill. A long label wraps
     inside it instead of clipping, so overflow can stay visible for the ::after. */
  .article-foot .tags { row-gap: var(--space-12); }
  .article-foot .tag, .article-hero .tag--eyebrow { position: relative; overflow: visible; white-space: normal; height: auto; min-height: 22px; }
  .article-hero .tag--eyebrow { min-height: 30px; }
  .article-foot .tag::after, .article-hero .tag--eyebrow::after { content: ""; position: absolute; inset: -12px -4px; }
  .article-hero .tag--eyebrow::after { inset-block: -8px; }
}