/*
 * Home-page hero (DESIGN.md § "Homepage" / design reference 5a).
 *
 * Phone (base): .hero__frame is a real flex box whose height is set by the headline block, so
 * the horizontal cover photo keeps a ~1:1 crop instead of being stretched to the viewport.
 * The headline (orange 56×3 rule → H1 → intro) and the photo-credit line sit inside it; the
 * white calculator card follows as a sibling and is pulled up so its top overlaps the photo's
 * lower edge, the rest extending onto white below.
 *
 * Desktop (>=768px): .hero__frame becomes display:contents, so .hero__media / .hero__scrim /
 * .hero__credit resolve their absolute positioning against .hero__cover and the photo fills the
 * viewport, with the headline + calculator column centred in it.
 */
.hero {
  /* Break out of .page's padding to sit full-bleed. */
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) var(--space-6);
}

.hero__cover {
  position: relative;
  padding: 0 var(--space-4);
  color: var(--color-on-dark);
}

.hero__inner {
  /* Shared by .hero__credit (margin-bottom) and .hero__calculator (negative margin-top) below —
     they're siblings, so the pull-up amount lives here on their common ancestor. */
  --hero-calc-pull: 52px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The photo box. Full-bleed past .hero__cover's side padding; its own padding insets the
   headline block. min-height keeps a floor even when the copy is short — 112vw ≈ a square-ish
   crop of the landscape photo. */
.hero__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 calc(var(--space-4) * -1);
  /* Top padding clears the transparent header and gives the headline breathing room off it;
     the extra room comes out of the middle gap (.hero__credit's auto top margin), not the
     photo's bottom, so the calculator card's position (and the frame's min-height floor below)
     stay put as this grows — 92px is chosen to leave a few px of that gap even at 360px, the
     narrowest width this is tested at (that auto-margin gap is only ~11px there to begin with,
     so there isn't much more room to push this without the frame overflowing its floor and
     dragging the card down with it). */
  padding: 92px var(--space-4) 12px;
  /* Landscape photo cropped by width, never by viewport height. Kept short so the calculator —
     and its longest ("partly eligible") result state — clears the viewport without scrolling. */
  min-height: min(108vw, 430px);
}

.hero__media,
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.hero__media--placeholder {
  background: var(--color-primary-dark);
}

/* Keeps the heading/intro legible over the photo. A light dip in the middle looks fine with a
   short headline but exposes it over open sky once the intro wraps; the floor stays >=0.58
   across the 0–75% band so it's dark enough wherever the copy ends up. */
.hero__scrim {
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.58) 25%,
    rgba(10, 10, 10, 0.65) 55%,
    rgba(10, 10, 10, 0.88) 100%
  );
}

/* Per-photo override (see homeHeroPhotos.json's needsDarkerScrim) for bright/high-key shots. */
.hero__scrim--dark {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.78) 0%,
    rgba(10, 10, 10, 0.68) 25%,
    rgba(10, 10, 10, 0.75) 55%,
    rgba(10, 10, 10, 0.92) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 600px;
  text-align: left;
}

/* Orange 56×3 rule above the headline (DESIGN.md § Recurring parts). */
.hero__rule {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent-rule);
}

/* 3-layer shadow paired with .hero__scrim for legibility over whichever photo is live. */
.hero__heading,
.hero__intro {
  margin: 0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 5px rgba(0, 0, 0, 0.85),
    0 4px 18px rgba(0, 0, 0, 0.7);
}

.hero__heading {
  font-size: clamp(1.85rem, 1.15rem + 2.9vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-on-dark);
}

.hero__heading-line {
  display: block;
  text-wrap: balance;
}

.hero__intro {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

/* KOGL Type1 attribution (see hero.njk). Phone: in flow at the foot of the photo, above the
   overlapping calculator. Desktop: absolute, photo bottom-right. */
.hero__credit {
  position: relative;
  z-index: 2;
  /* auto-top pushes it to the bottom of .hero__frame's flex column (its only sibling is
     .hero__content); bottom margin matches .hero__calculator's pull-up below so the line clears
     the opaque card instead of sitting underneath it. */
  margin: auto 0 var(--hero-calc-pull);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* Calculator wrapper — pulled up so the card's top sits on the photo, the rest on white below.
   The pull is large on phone so the card (and its longest result state) fits the viewport. */
.hero__calculator {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--hero-calc-pull));
}

/* Foot-of-photo scroll cue — desktop only (see the media block: the phone photo is a short crop
   with the map right below it, so the nudge is redundant there). */
.hero__scroll-cue {
  display: none;
}

/* Desktop-only spacer between .hero__inner and .hero__scroll-cue — see the media block. */
.hero__spacer {
  display: none;
}

@media (min-width: 768px) {
  .hero__cover {
    /* Desktop: the cover photo fills the viewport. .hero__spacer--top/--bottom (below) straddle
       .hero__inner; see those rules for how they split viewport slack. min-height keeps the photo
       full-viewport-tall. */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  /* Both spacers share the grow behaviour by default; each modifier below sets only its own
     floor. Neither can be a ::before/::after on .hero__cover — those can't land *between* three
     specific children the way these need to. */
  .hero__spacer {
    display: block;
    flex: 1 1 0;
  }

  /* Pure-CSS vertical centring with no layout work in JS. The calculator wrapper below always
     reserves the longest result state's height, so the headline + card block has one constant
     height whatever the card shows (empty, short or long caption) and before/after the form is
     revealed. Constant block => constant centre => the headline never moves and .hero__cover
     never outgrows 100svh (the photo never rescales). The floors are the flex-basis (flex-shrink
     0): --top clears .site-header (floats over the hero, ~65px) + ~28px before the orange rule;
     --bottom keeps the card clear of the scroll cue. Slack above both floors splits evenly. */
  .hero__spacer--top {
    flex: 1 0 93px;
  }

  .hero__spacer--bottom {
    flex: 1 0 24px;
  }

  /* Frame contributes no box — media/scrim/credit resolve against .hero__cover (full-bleed),
     and .hero__content / .hero__calculator become the flex children of .hero__inner as before. */
  .hero__frame {
    display: contents;
  }

  .hero__inner {
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .hero__content {
    gap: 16px;
  }

  .hero__credit {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-2);
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
  }

  /* 345px = the card's height with the longest caption (calculator.js CAPTIONS.nonCapitalOnly,
     under ₩1M) at its 520px max-width; re-measure if that copy or the card width changes. */
  .hero__calculator {
    margin-top: 40px;
    min-height: 345px;
  }

  /* Normal in-flow element (not position:absolute) so it can't overlap the card above it whatever
     the card's own height turns out to be — .hero__spacer above is what pushes it down to the
     photo's bottom when there's room. position:relative + z-index:2 (matching .hero__content)
     still has to be here despite not being position:absolute: an in-flow static element paints
     *before* .hero__scrim's own positioned z-index:1 layer, so without this the scrim painted
     directly over the cue's text and hid it completely — z-index only has an effect on a
     positioned element. */
  .hero__scroll-cue {
    position: relative;
    z-index: 2;
    display: block;
    padding-bottom: var(--space-4);
    /* Without this the flex column runs the cue's own box flush to the viewport's bottom edge
       (.hero__spacer--bottom absorbs all remaining space, so the cue never gets a real gap below
       it) — right where .hero__credit sits (position:absolute; bottom: var(--space-2)), crowding
       the two lines together at short viewports. This margin is real reserved flex space (unlike
       the padding above, which is inside the box), so it lifts the cue clear of the credit line
       instead. */
    margin-bottom: 16px;
    text-align: center;
    color: var(--color-on-dark);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.7);
  }

  /* Explicit white here: base.css's global a:hover would otherwise turn this dark green,
     unreadable over the photo it sits on. */
  .hero__scroll-cue:hover,
  .hero__scroll-cue:focus-visible {
    color: var(--color-on-dark);
    text-decoration: underline;
  }
}