/* ===================== HERO (universal) v1.2 ===================== */
/* Global fallbacks (can be overridden by page/variant variables) */
:root{
  --hero-max-vh: 60vh;              /* generic fallback cap in viewport height  */
  --hero-max-px: 520px;             /* generic fallback cap in pixels           */
  --hero-pad: clamp(1rem, 3vw, 2rem);
  --hero-ovl-start: rgba(0,0,0,.35);
  --hero-ovl-end:   rgba(0,0,0,.65);
  --hero-text-max:  70ch;
}

/* --------------------- Base container --------------------- */
/* Make the default hero a touch taller across the site */
.hero{
  /* Site-wide default height cap (universal) */
  --hero-max-vh: 64vh;
  --hero-max-px: 560px;

  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: .75rem;
}

/* --------------------- Media (BEM + legacy) --------------------- */
.hero__media,
.hero .hero-media{ /* legacy alias */
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Cap visible height for consistency */
  max-height: min(var(--hero-max-vh), var(--hero-max-px));
}

/* --------------------- Overlay (BEM + legacy) --------------------- */
.hero__overlay,
.hero .hero-overlay{ /* legacy alias */
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--hero-ovl-start), var(--hero-ovl-end));
  pointer-events: none;
}

/* --------------------- Inner (BEM + legacy) --------------------- */
.hero__inner,
.hero .hero-inner{ /* legacy alias */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centered by default */
  align-items: center;
  text-align: center;
  padding: var(--hero-pad);
}

/* --------------------- Size variants --------------------- */
/* Use these on the .hero element when a page needs a different height */
.hero--short { --hero-max-vh: 52vh; --hero-max-px: 460px; }
.hero--std   { --hero-max-vh: 64vh; --hero-max-px: 560px; } /* explicit standard */
.hero--tall  { --hero-max-vh: 70vh; --hero-max-px: 640px; }

/* Legacy mapping: treat .hero-fyi as standard */
.hero.hero-fyi { --hero-max-vh: 64vh; --hero-max-px: 560px; }

/* Mobile tweak: shorten slightly on small screens */
@media (max-width: 640px){
  .hero,
  .hero--std,
  .hero--short,
  .hero--tall { --hero-max-vh: 56vh; }
}

/* --------------------- Alignment modifiers (optional) --------------------- */
.hero--top    .hero__inner,
.hero--top    .hero-inner    { justify-content: flex-start; }
.hero--bottom .hero__inner,
.hero--bottom .hero-inner    { justify-content: flex-end; padding-bottom: clamp(1.25rem, 4vw, 3rem); }

/* --------------------- Absolute <picture> support (legacy pages) --------------------- */
/* If a page absolutely positions <picture>, add .hero--abs to the container */
.hero--abs picture { position: absolute; inset: 0; }
.hero--abs .hero__media,
.hero--abs .hero-media { width: 100%; height: 100%; object-fit: cover; }
/* Absolute layout needs explicit container height */
.hero--abs { height: min(var(--hero-max-vh), var(--hero-max-px)); }

/* --------------------- Text styles (scoped to hero only) --------------------- */
.hero .eyebrow{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.85rem;
  opacity:.9;
}

.hero .hero-title{
  font-size: clamp(1.8rem, 6vw, 3rem);
  line-height: 1.05;
  margin:.25rem 0;
  max-width: var(--hero-text-max);
}

.hero .hero-sub,
.hero .subtitle{
  max-width: var(--hero-text-max);
  margin:.25rem auto 0;
  color: var(--muted, rgba(255,255,255,.85));
}

.hero .hero-cta,
.hero .cta{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:.6rem;
}

.hero .hero-badges{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  list-style:none;
  margin:.75rem 0 0;
  padding:0;
  justify-content:center;
}

.hero .hero-badges li{
  font-size:.85rem;
  border:1px solid var(--border, rgba(255,255,255,.18));
  border-radius:999px;
  padding:.25rem .55rem;
  color: var(--muted, rgba(255,255,255,.85));
  background: rgba(0,0,0,.25);
}

/* Links inside hero */
.hero .cta a{ text-decoration: underline; text-underline-offset: 2px; }
/*NEW 09-14-2025*/
/* === Fix: prevent hero from sitting under the scrollbar === */
/* Prefer 100svw (small viewport width) when supported; fall back to 100% */
:root { --hero-safe-vw: 100%; }
@supports (width: 1svw) {
  :root { --hero-safe-vw: 100svw; }
}

/* Force every media layer in the hero to use the safe width */
.hero,
.hero__stage,
.hero__inner,
.hero__overlay,
.hero__media,
.hero > img,
.hero picture,
.hero picture > img,
.hero video {
  width: var(--hero-safe-vw) !important;
  max-width: var(--hero-safe-vw) !important;
}

/* Defensive: no accidental horizontal overflow from the hero */
.hero { overflow-x: hidden; }
/*NEW 09-14-2025*/
/* =============================
   Mobile polish for price-2 hero
   ============================= */

/* Safe viewport width so hero doesn’t bleed under the scrollbar */
:root { --hero-safe-vw: 100%; }
@supports (width: 1svw) {
  :root { --hero-safe-vw: 100svw; }
}
.hero,
.hero__stage,
.hero__inner,
.hero__overlay,
.hero__media,
.hero > img,
.hero picture,
.hero picture > img,
.hero video {
  width: var(--hero-safe-vw) !important;
  max-width: var(--hero-safe-vw) !important;
}

/* Default focus var; let pages override with inline style="--hero-focus-y: NN%;" */
.hero { --hero-focus-y: 50%; }
.hero .hero__media { object-position: center var(--hero-focus-y); }

/* Make overlay a touch stronger for text legibility on busy images */
@media (max-width: 640px) {
  .hero .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.42) 45%,
      rgba(0,0,0,.68) 100%
    );
  }
}

/* Compact mobile layout (opt-in via .hero--mobile-compact on the header) */
.hero--mobile-compact {
  /* sensible mobile height cap */
  --hero-min-h: clamp(260px, 60vh, 520px);
}
@media (max-width: 640px) {
  .hero--mobile-compact {
    margin-bottom: .85rem; /* pull content up slightly vs default */
  }
  .hero--mobile-compact .hero__media {
    height: var(--hero-min-h);
    max-height: var(--hero-min-h);
    object-fit: cover;
  }
  .hero--mobile-compact .hero__inner {
    padding: 1.1rem .9rem 1.2rem;
    text-align: center;
  }
  .hero--mobile-compact .hero-title {
    font-size: clamp(1.25rem, 4.6vw + .55rem, 1.65rem);
    line-height: 1.22;
    letter-spacing: -.01em;
    margin: .15rem 0 .25rem 0;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
  }
  .hero--mobile-compact .hero-sub {
    font-size: clamp(.95rem, 3vw + .35rem, 1.05rem);
    line-height: 1.35;
    max-width: 70ch;
    margin: .25rem auto 0;
  }
  .hero--mobile-compact .hero-cta {
    margin-top: .55rem;
    gap: .5rem;
  }
}

/* If you cannot edit the markup to add class or style:
   Uncomment this block to target the price page specifically by body class. */
/*
@media (max-width: 640px) {
  body.page-fyi .hero {
    margin-bottom: .85rem;
    --hero-focus-y: 35%;
  }
  body.page-fyi .hero .hero__media {
    height: clamp(260px, 60vh, 520px);
    max-height: clamp(260px, 60vh, 520px);
    object-fit: cover;
  }
  body.page-fyi .hero .hero-title {
    font-size: clamp(1.25rem, 4.6vw + .55rem, 1.65rem);
    line-height: 1.22;
  }
  body.page-fyi .hero .hero-sub {
    font-size: clamp(.95rem, 3vw + .35rem, 1.05rem);
    line-height: 1.35;
  }
}
*/