/**
 * Homepage hero — PDF p.1.
 */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-paper-on-dark);
}

/* Mobile: fill the initial viewport together with the Announcement Bar,
   rather than a flat vh guess. The header itself is NOT subtracted here —
   on the homepage it's position:absolute and overlays the hero (see
   header.php/navigation.css), it never adds real document-flow height of
   its own, so subtracting it too would leave a gap under the hero that
   doesn't exist. The Announcement Bar DOES sit in real flow directly above
   the hero, so it's the only thing that needs subtracting — using the same
   `--announcement-height-actual` custom property the header's own
   resize/pageshow listener already keeps current (see header.php), so this
   stays correct through rotation, the dynamic toolbar, and text wrapping to
   two lines, with no separate JS needed here.
   `svh` (not `dvh`) deliberately — a fixed calculation against the small/
   stable viewport means this never resizes as the mobile browser's chrome
   shows/hides during scroll, so there's no layout jump. Desktop keeps its
   own flat 92vh unchanged (client-approved, not part of this fix). */
@media (max-width: 900px) {
  .hero {
    min-height: calc(100svh - var(--announcement-height-actual, var(--announcement-height)));
  }
}

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

.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Mobile crop is much narrower relative to the video's landscape aspect
   ratio than desktop's — tested independently per client instruction not to
   assume one object-position works for both. Center keeps the whisk/drip
   subject in frame at all 4 mobile breakpoints without cutting it off. */
@media (max-width: 900px) {
  .hero__video,
  .hero__poster {
    object-position: center 45%;
  }
}

/* Color-only safety net, sits behind the image layer — only visible if
   hero-bg-dev.jpg (or a client-set video/poster) somehow fails to load. */
.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(122, 74, 42, 0.55), transparent 60%),
    radial-gradient(100% 80% at 20% 85%, rgba(90, 50, 30, 0.45), transparent 65%),
    linear-gradient(180deg, #241a14 0%, #17110d 55%, #0f0b08 100%);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Center-weighted dim so the logo/CTA column reads clearly over a busier
     photo than the original blurred bokeh reference — plus the same top/bottom
     falloff so the nav and page-bottom edge stay legible too. */
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(10, 7, 5, 0.55), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.22) 40%, rgba(0, 0, 0, 0.5) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--container-padding) var(--space-8);
}

/* Real extracted vector mark — see haven_logo_markup() / MISSING-ASSETS.md.
   Same SVG as the header logo, just sized much larger here via CSS, exactly
   as it's meant to be: one asset, no hard-coded per-placement size. */
.hero__logo {
  --logo-hero-height: clamp(64px, 9vw, 130px);
  color: var(--color-paper-on-dark);
}
.hero__logo svg {
  display: block;
  height: var(--logo-hero-height);
  width: auto;
}

.hero__tagline {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-1);
  color: var(--color-paper-on-dark-soft);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-on-dark);
}

.hero__cta {
  margin-top: var(--space-5);
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  transition: background var(--transition-fast);
}
.hero__cta:hover,
.hero__cta:focus-visible {
  background: color-mix(in srgb, var(--color-cherry-temp) 85%, black);
}