// =============================================================================
// HERO — full-bleed media (image OR video) with centred content block
// .hero               : 957px tall container with dark overlay
// .hero__media        : <img> or <video> — drop-in interchangeable by class
// .hero__content      : centred text block
// .hero__title        : 72px Playfair Display, white, -1.44px tracking
// .hero__subtitle     : 18px Inter, white
// =============================================================================
@import '../mixins';

.hero {
  position: relative;
  width: 100%;
  height: 957px;
  background-color: var(--color-ink); // fallback while media loads
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8.5rem; // 136px — hero frame pb (Figma web ref)
  overflow: hidden;

  // Dark overlay
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
  }

  @include respond-to('tablet') {
    height: 700px;
  }

  @include respond-to('desktop') {
    height: 957px;
  }
}

// The responsive Picture partial wraps .hero__media's <img> in a <picture>
// (browser default: display:contents, so it renders no box of its own).
// Despite that, this browser still gives it a phantom ~366px flex-basis
// inside .hero's flex column — a real, confirmed quirk (verified by
// removing the element outright, which closes exactly that gap), not
// something either child rule causes. It happened to be invisible with the
// main hero's bottom-anchored layout (flex-end packs the group flush
// against padding-bottom regardless of what phantom space sits above it,
// so the math cancels out) but silently pushed section-intro's top-anchored
// content down by the same amount. Making <picture> itself absolute — same
// as its child .hero__media — removes it from the flex flow entirely so it
// can no longer contribute any phantom size, for every .hero variant.
.hero>picture {
  display: block; // overrides the browser-default display:contents — without
  // this, position:absolute below has no box to apply to
  // and is silently ignored (display:contents removes the
  // box entirely; the two aren't independent)
  position: absolute;
  inset: 0;
}

// Hero media — styled by class (not tag) so <img> and <video> are drop-in
// interchangeable. TYPO3 note: <f:image>/<f:media> output keeps this class.
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0; // below the ::before overlay (z-index 1)
}

// ─── Section-intro variant — same structure, different media + copy ──────────
.hero--intro {
  // media supplied via .hero__media element in the markup

  // section-intro's own title text-box width (Figma 18347:2988). Unlike the
  // main hero's .hero__title below, section-intro still renders its heading
  // as a single text field with no editor-controlled line break, so it still
  // needs a width tuned to wrap its copy sensibly — one flat value at every
  // breakpoint, since section-intro's copy differs per instance rather than
  // being one known string.
  .hero__title {
    max-width: 507px;
  }

  // Content position (Figma 18347:2988, desktop/1440 frame): the title sits
  // a fixed 493px below the hero's own top (136px header-row clearance +
  // an explicit 357px gap in the design, confirmed by the frame's own math:
  // 136 + 357 + 328 (title+gap+widget block height) + 136 (bottom pb) = 957,
  // exactly this hero's height) — not bottom-anchored via the shared
  // .hero's justify-content:flex-end, which instead packs title+gap+widget
  // as one flush-bottom group and measured 190px lower (683px) than Figma.
  // Scoped to desktop only — this frame is the 1440px reference; mobile/
  // tablet keep the shared .hero's existing (already-established, untouched
  // here) flex-end behaviour.
  @include respond-to('desktop') {
    justify-content: flex-start;
    padding-top: 493px; // 136px header clearance + 357px Figma gap
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: stretch; // title/subtitle rects span the full 709px (Figma text boxes)
  gap: 1rem; // 16px — Figma: title → subtitle gap
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xl); // 72px
  font-weight: var(--fw-regular);
  line-height: var(--lh-display-2xl); // 90px
  letter-spacing: -0.02em; // -1.44px on 72px
  color: var(--color-white);
  margin: 0;
  // Line breaks are now editor-controlled: the template (page-header
  // frontend.html) renders `header` and the optional `header_line2` field as
  // two separate <span>s (display:block, below), so the heading breaks
  // wherever the editor splits the two fields rather than wherever a
  // width-constrained wrap happens to land. No max-width needed to force
  // that — previously this was a single text string and the max-width below
  // was tuned per breakpoint to force a 2-line wrap at an exact word break;
  // that's obsolete now that the break is explicit content structure.
  margin-inline: auto;

  span {
    display: block;
  }

  @include respond-to('tablet') {
    font-size: 3.5rem; // 56px
    line-height: 4.25rem;
  }

  @include respond-to('desktop') {
    font-size: var(--fs-display-2xl); // 72px
    line-height: var(--lh-display-2xl); // 90px
  }
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-lg); // 18px
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg); // 32px
  color: var(--color-white);
  margin: 0;
}

// Book-now CTA below the subline (below the laptop breakpoint only — see
// page-header/templates/frontend.html). .hero__content stretches its children
// to the full content width, which would leave this button full-bleed, so it
// sizes to its own label via align-self instead. Follows text-align: the
// default centre here, overridden per position variant below alongside
// .hero__title's own margin-inline switch.
.hero__book {
  align-self: center;
  flex-shrink: 0;
  // Slightly tighter than .btn's own 48px, so the extra row costs the
  // bottom-anchored hero stack as little vertical space as possible.
  height: 44px;
  display: inline-flex !important;
}

// Restore a visible keyboard focus ring for this button. _buttons.scss does
// declare one for every .btn, but the vendored Bootstrap (imported after it in
// main.scss) sets `.btn:focus-visible { outline: 0 }` at the same specificity
// and so wins on source order — leaving .btn with no focus indicator at all
// site-wide. That is pre-existing and deliberately not fixed globally here;
// compounding the two classes (0,3,0 against Bootstrap's 0,2,0) fixes it for
// this one button without !important. White, not the usual gold, because the
// ring sits on this button's own gold fill.
.btn.hero__book:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

// ─── Content position (page-header's header_position field) ─────────────────
// 2×3 grid: vertical (middle/bottom) × horizontal (left/center/right).
// .hero is a column flex — justify-content moves the block vertically (main
// axis), align-items moves it horizontally (cross axis). .hero__title's own
// margin-inline:auto (set above) additionally re-centers itself *within*
// .hero__content's stretched box, so left/right variants override that too.
.hero--pos-middle-left,
.hero--pos-middle-center,
.hero--pos-middle-right {
  justify-content: center;
}

.hero--pos-bottom-left,
.hero--pos-bottom-center,
.hero--pos-bottom-right {
  justify-content: flex-end;
}

.hero--pos-middle-left,
.hero--pos-bottom-left {
  align-items: flex-start;

  .hero__content {
    text-align: left;
  }

  .hero__title {
    margin-inline: 0;
  }

  .hero__book {
    align-self: flex-start;
  }
}

.hero--pos-middle-right,
.hero--pos-bottom-right {
  align-items: flex-end;

  .hero__content {
    text-align: right;
  }

  .hero__title {
    margin-inline: auto 0;
  }

  .hero__book {
    align-self: flex-end;
  }
}

// Mobile — v2: 375×749 frame, 48px title (display-lg), 16px subtitle
@media (max-width: 47.9375rem) {
  .hero {
    height: 749px;
    padding-inline: 1rem;
    padding-bottom: 5rem; // 80px — v2 mobile hero text pb-80
  }

  .hero__content {
    gap: 1.25rem; // 20px — mobile title→subtitle gap (up from 16px)
  }

  // Figma (node 18512:8990) exactly: 48px/60px/-0.96px. A previous "client
  // requirement" pass had shrunk this to 32px so the live copy ("Wake up to
  // the wild") would fit on one line at 375px, and stacked a further 28px
  // step below 359px on top of that — traded back out in favour of matching
  // Figma's actual mobile spec. No max-width needed to force a wrap here
  // either — see the base .hero__title rule above: the heading now breaks
  // wherever the editor splits header/header_line2, via the two <span>s.
  .hero__title {
    font-size: var(--fs-display-lg);  // 48px
    line-height: var(--lh-display-lg); // 60px
    letter-spacing: -0.02em;           // -0.96px at 48px
  }

  .hero__subtitle {
    font-size: var(--fs-base); // 16px
  }
}