/* ==========================================================================
   Homepage hero — full-bleed character art with live HTML text overlay.
   Built on tokens.css. Two art directions (spec §0/§4):
     • Desktop (≥48rem): horizontal art, person on the RIGHT → text left-aligned.
     • Mobile  (<48rem): vertical art — only the heading overlays the top night-sky
       band; the lede + CTA sit BELOW the image on the plain page background, so
       nothing readable ever lands on the person.
   No text is burned into the art; all wording is here.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
}

/* The image layer */
.hero__img,
.hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__img img {
  object-fit: cover;
  object-position: 50% 35%; /* mobile: fills height, keep centre */
}

/* Legibility scrim (mobile: darken top heading zone + bottom CTA zone) */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(11, 10, 9, 0.72) 0%, rgba(11, 10, 9, 0) 34%),
    linear-gradient(0deg, rgba(11, 10, 9, 0.80) 0%, rgba(11, 10, 9, 0) 32%);
  pointer-events: none;
}

/* Content overlay */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 92svh;
  min-height: 92vh; /* fallback for older browsers */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* mobile: heading top, CTA bottom */
  padding-block: var(--space-7) var(--space-8);
  gap: var(--space-6);
}

.hero__text { max-width: 34rem; }
.hero h1 {
  font-size: clamp(var(--fs-2xl), 8vw, var(--fs-4xl));
  line-height: 1.08;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.hero__lede {
  color: var(--color-text);
  font-size: var(--fs-lg);
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.hero__body { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.hero__cta { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.hero__note { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---------- Desktop: horizontal art, text block left & vertically centred --- */
@media (min-width: 48rem) {
  .hero__img img { object-position: 68% 22%; } /* keep person (right) + face (top) */
  /* Left-to-right scrim so the left text is legible and the person stays clear */
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(11, 10, 9, 0.82) 0%, rgba(11, 10, 9, 0.45) 34%, rgba(11, 10, 9, 0) 62%),
      linear-gradient(0deg, rgba(11, 10, 9, 0.35) 0%, rgba(11, 10, 9, 0) 22%);
  }
  .hero__content {
    min-height: min(90vh, 820px);
    justify-content: center; /* desktop: vertically centred block */
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
}

/* ---------- Mobile: heading over the top band; body below on plain bg ------- */
@media (max-width: 47.99rem) {
  .hero { display: block; }

  /* Image becomes a fixed top band (not a full-bleed fill).
     display:block is required — <picture> is inline by default, so height is
     ignored without it (base makes it block only via position:absolute). */
  .hero__img { position: relative; display: block; height: 70vh; height: 70svh; }
  /* Scrim darkens only the band's top, for heading legibility. */
  .hero__scrim {
    inset: 0 0 auto 0;
    height: 70vh; height: 70svh;
    background: linear-gradient(180deg, rgba(11, 10, 9, 0.80) 0%, rgba(11, 10, 9, 0.15) 42%, rgba(11, 10, 9, 0) 62%);
  }

  /* Static so the heading can anchor to .hero; body flows below the band. */
  .hero__content { position: static; display: block; min-height: 0; padding-block: 0; }

  /* Heading only, overlaid on the top sky. */
  .hero__text {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    max-width: none;
    padding: var(--space-6) var(--space-5) 0;
  }

  /* Lede + CTA below the image, on the plain page background. */
  .hero__body { padding-block: var(--space-6) var(--space-8); gap: var(--space-4); }
  .hero__lede {
    color: var(--color-text-muted);
    text-shadow: none;
    font-size: var(--fs-base);
    max-width: none;
  }
  .hero__cta { align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__note { text-align: center; }
}

/* Small phones: give the body a bit more room by shortening the band. */
@media (max-width: 26rem) {
  .hero__img,
  .hero__scrim { height: 64vh; height: 64svh; }
}