/* =================================================================
   Shared page hero (index, buy, sell, lending, reverse-mortgage)
   Markup: .hero-wrap > section.hero + section.hero-text-block

   Desktop (≥1100px): white text on a navy gradient over the photo;
                      the gradient clears by ~2/3 width so the photo shows.
   Tablet + mobile (<1100px): photo on top (uncovered), cream text block below.

   Each page sets, in its own inline <style>:
     .hero { background-image: … }  (+ medium/mobile variants in media queries)
     --hero-ratio         photo width / height, e.g. 1.5 for 3:2 (desktop + tablet)
     --hero-ratio-mobile  mobile photo width / height
     --hero-scrim         optional: a different gradient (e.g. to keep a face clear)
   ================================================================= */

/* Metric-matched fallback for the hero headline: Georgia is ~25% wider than
   Source Serif 4, so until the web font arrived the headline wrapped to an
   extra line and everything below jumped when it swapped in (layout shift). */
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia"); font-weight: 400 500; font-style: normal; size-adjust: 80%; }
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 700; font-style: normal; size-adjust: 80%; }
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 400 500; font-style: italic; size-adjust: 80%; }
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia Bold Italic"), local("Georgia-BoldItalic"); font-weight: 600 700; font-style: italic; size-adjust: 80%; }
.hero-text-block h1 { font-family: "Source Serif 4", "Source Serif Fallback", Georgia, serif; }

/* ---------- shared photo styling ---------- */
.hero-wrap .hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #d8d4cb;
  position: relative;
  overflow: hidden;
}
.hero-wrap .hero::before,
.hero-wrap .hero::after { display: none; }
.hero-wrap .hero__inner {
  display: block;
  padding: 0;
  grid-template-columns: none;
}
.hero-wrap .hero__content,
.hero-wrap .hero__visual { display: none !important; }

/* ============== DESKTOP (1100px+): text on a gradient over the photo ==============
   Photo and text share one grid cell, so the hero grows if the text is ever
   taller than the photo (short laptops) instead of text spilling out of it. */
@media (min-width: 1100px) {
  .hero-wrap {
    position: relative;
    display: grid;
  }
  .hero-wrap > .hero,
  .hero-wrap > .hero-text-block { grid-area: 1 / 1; }

  .hero-wrap .hero {
    padding: 0;
    width: 100%;
    min-height: min(calc(100vw / var(--hero-ratio, 1.7794)), 78vh);
  }
  .hero-wrap .hero::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--hero-scrim, linear-gradient(90deg,
      rgba(11, 31, 53, 0.88) 0%,
      rgba(11, 31, 53, 0.80) 40%,
      rgba(11, 31, 53, 0.50) 56%,
      rgba(11, 31, 53, 0) 72%));
  }

  .hero-wrap .hero-text-block {
    position: relative;
    z-index: 3;
    /* Anchored to the top (not centered) so the web-font swap only pushes
       content down instead of moving the whole block (layout shift). */
    align-self: start;
    justify-self: start;
    width: 100%;
    max-width: calc(560px + clamp(1.5rem, 8vw, 9rem));
    padding: clamp(2.5rem, 11vh, 7.5rem) 1.5rem 2.5rem clamp(1.5rem, 8vw, 9rem);
    background: none;
    border: 0;
    box-shadow: none;
  }
  .hero-wrap .hero-text-block__inner {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .hero-wrap .hero-text-block .eyebrow-pill {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
  }
  .hero-wrap .hero-text-block h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  .hero-wrap .hero-text-block h1 em { color: #EDC57A; }
  .hero-wrap .hero-text-block .lead {
    color: #F3F5F8;
    font-size: 1.125rem;
    max-width: 34rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  .hero-wrap .hero-text-block .btn--outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
    background: transparent;
  }
  .hero-wrap .hero-text-block .btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
  }
  .hero-wrap .hero-text-block .btn:focus-visible {
    outline: 3px solid #EDC57A;
    outline-offset: 3px;
  }
}

/* ============== TABLET (721–1099px): stacked like mobile ==============
   Overlaying text here would cover most of the photo. */
@media (min-width: 721px) and (max-width: 1099px) {
  .hero-wrap .hero {
    padding: 0;
    min-height: 0;
    height: min(calc(100vw / var(--hero-ratio, 1.7794)), 380px);  /* cap so the message isn't pushed far down */
  }
  .hero-wrap .hero-text-block {
    background: #faf6ee;
    padding: 2rem 0 1.75rem 0;
    border-bottom: 1px solid rgba(15, 42, 71, 0.08);
  }
  .hero-wrap .hero-text-block__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
  }
}

/* ============== MOBILE (≤720px): stacked ============== */
@media (max-width: 720px) {
  .hero-wrap .hero {
    padding: 0;
    min-height: 0;
    aspect-ratio: var(--hero-ratio-mobile, 1.7817);
  }
  .hero-wrap .hero-text-block {
    background: #faf6ee;
    padding: 1.75rem 0 1.5rem 0;
    border-bottom: 1px solid rgba(15, 42, 71, 0.08);
  }
  .hero-wrap .hero-text-block__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }
}

/* Stacked layouts (<1100px): the headline accent sits on cream, where the
   brand gold (#E0B560) is only ~1.8:1. Use a deeper gold (4.3:1). */
@media (max-width: 1099px) {
  .hero-wrap .hero-text-block h1 em { color: #9A6B1F; }
  .hero-wrap .hero-text-block .lead { font-size: 1.0625rem; }
}

/* ---------- shared text styling (all layouts) ---------- */
.hero-text-block .eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(15, 42, 71, 0.06);
  border: 1px solid rgba(15, 42, 71, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a2a;
  margin-bottom: 1rem;
}
.hero-text-block h1 {
  color: #0F2A47;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.85rem 0;
}
.hero-text-block .lead {
  color: #2c3e57;
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
}
.hero-text-block .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero-text-block .btn--outline-light {
  color: #0F2A47;
  border-color: rgba(15, 42, 71, 0.4);
  background: transparent;
}
.hero-text-block .btn--outline-light:hover {
  background: rgba(15, 42, 71, 0.06);
  border-color: #0F2A47;
}