/* 02 · Hero — spec §4 "02 · Hero". */
@layer components {
  .hero {
    position: relative;
    isolation: isolate; /* new stacking context so z-index:1 below reliably sits above the media layer */
    display: flex;
    align-items: center; /* vertically centres the text column — the mockup's 42px-from-top offset is "slightly high" per spec, not the intent */
    min-height: clamp(520px, 62vh, 640px);
    overflow: hidden;
    background-color: var(--ink-950);
    color: var(--text-on-dark);
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ink-950) 0 34%, transparent 62%);
  }

  .hero__image {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, not cover: the hero's height is capped to a clamp() range
       independent of viewport width, so on a wide-but-short window `cover`
       had to crop the image's top and bottom to fill the box completely.
       `contain` scales the image down to fit the box's height instead —
       never cropped, right-anchored so it still sits against the text
       column the same way. Whatever space that leaves on the left just
       shows through to .hero's own ink-950 background, which the gradient
       below was already darkening that area to match anyway. Mobile
       overrides back to cover (see its media query) — spec wants a
       full-bleed 4:3 crop there, a different composition entirely. */
    object-fit: contain;
    object-position: right center;
  }

  .hero > .site-container {
    position: relative;
    z-index: 1;
  }

  .hero__content {
    max-width: 540px;
  }

  .hero__script {
    margin: 0 0 14px;
  }

  .hero__title {
    margin: 0 0 36px;
  }

  .hero__lead {
    margin: 0 0 24px;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }

  /* Tablet: image stays a background layer, but the gradient covers more of
     it (~60%, spec) since there's less text-column room to protect. */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .hero__media::after {
      background: linear-gradient(90deg, var(--ink-950) 0 32%, transparent 60%);
    }
  }

  /* Mobile: stack — text first (left-aligned), then the image full-bleed
     below at 4:3. The image is no longer a text backdrop, so it drops the
     gradient and the absolute overlap; flex `order` puts it second even
     though it's first in the markup (it needs to precede the text in the DOM
     for `fetchpriority="high"` to read naturally, so layout order carries
     the visual stacking instead of source order). */
  @media (max-width: 767.98px) {
    .hero {
      flex-direction: column;
      align-items: stretch;
      min-height: auto;
    }

    .hero > .site-container {
      order: 1;
      padding-inline: 24px; /* spec's explicit mobile value, overriding the shared --gutter token for this section only */
      padding-block: var(--space-7) var(--space-6);
    }

    .hero__content {
      max-width: none;
    }

    .hero__media {
      order: 2;
      position: static;
      aspect-ratio: 4 / 3;
    }

    .hero__media::after {
      content: none;
    }

    .hero__image {
      object-fit: cover; /* full-bleed 4:3 crop here, unlike desktop/tablet's contain above */
      object-position: 70% center;
    }

    .hero__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .hero__actions .btn {
      width: 100%;
    }
  }
}