/* Page hero — block: acf/page-hero. Image hero for interior pages (no form). */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 60vh, 34rem);
  padding-block: var(--section-pad);
  overflow: hidden;
  color: var(--color-on-primary);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero__bg:not(img) { background: var(--color-navy); }
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--color-navy) 5%, rgba(10, 27, 47, 0.45) 45%, rgba(10, 27, 47, 0.15) 100%);
}
.page-hero__inner { position: relative; z-index: 2; width: 100%; }
.page-hero__badge { margin-bottom: var(--stack-md); }
.page-hero__title { color: var(--color-white); margin-bottom: var(--stack-md); max-width: 18ch; }
.page-hero__sub { color: rgba(255, 255, 255, 0.9); max-width: 46rem; margin-bottom: var(--stack-lg); }

/* Stats stack on phones so long values (e.g. phone numbers) stay on one line;
   they sit side by side from 640px up. */
.page-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stack-md);
  max-width: 30rem;
}
.page-hero__stat {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--stack-md);
}
.page-hero__stat-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: 1; color: var(--color-appolo-blue); }
/* Phone-number stats render as tel: links (#e56f62a3) — keep the stat look. */
.page-hero__stat-value a { color: inherit; text-decoration: none; }
.page-hero__stat-value a:hover { text-decoration: underline; }
/* Phone numbers must not break at the hyphen: keep them one line and let the
   size flex down instead so "(607) 729-5847" fits the stat card. */
.page-hero__stat-value--phone { display: block; white-space: nowrap; font-size: clamp(1.375rem, 2.9vw, 1.875rem); }
.page-hero__stat-label { display: block; }

/* A phone stat is a call BUTTON: the entire card is the tap target.
   (Keeps the base .page-hero__stat glass card; hover flips its border gold.) */
.page-hero__stat--call {
  display: block;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.page-hero__stat--call:hover,
.page-hero__stat--call:focus-visible {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.page-hero__stat-label {
  margin-top: 0.35rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-on-surface-variant);
}

.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--stack-md); margin-top: var(--stack-lg); }

/* Ghost button — white outline for use on dark imagery (also reused by cta-band). */
.btn--ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: var(--color-white); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.18); }

@media (min-width: 640px) {
  .page-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .page-hero__stats { max-width: 34rem; }
}

/* Compact promo band (#b8ddec13) — the same block used mid-page instead of as a
   page header. Shorter, and the stats run on ONE line: the default 2-up grid
   wraps a third stat onto its own row, which is what made this feel tall.
   Higher specificity than the rules above, so source order doesn't matter. */
.page-hero--compact {
  min-height: 0;
  align-items: center;
}

/* The band is a promo sitting between other sections, so it must never share a
   surface with its neighbours. On /heating/ it sat directly above the navy
   testimonials section — same #0a1b2f, touching — and the two merged into one
   slab with the band's own padding reading as dead space. Brand blue keeps it
   a distinct object next to both navy and the light --surface-alt sections. */
.page-hero--compact .page-hero__bg:not(img) { background: var(--color-appolo-blue); }

/* The scrim exists to darken a photo for legibility. With no image there is
   nothing to darken and its navy gradient just muddies the blue, so drop it —
   the :not(img) + sibling match means this only applies when no image is set. */
.page-hero--compact .page-hero__bg:not(img) + .page-hero__scrim { display: none; }
.page-hero--compact .page-hero__title { margin-bottom: var(--stack-sm); max-width: 20ch; }
.page-hero--compact .page-hero__sub { margin-bottom: 0; max-width: 42ch; }
.page-hero--compact .page-hero__badge { margin-bottom: var(--stack-sm); }
.page-hero--compact .page-hero__actions { margin-top: var(--stack-md); }
.page-hero--compact .page-hero__stats {
  grid-template-columns: 1fr;
  gap: var(--stack-sm);
  max-width: 100%;
}
.page-hero--compact .page-hero__stat { padding: var(--stack-sm) var(--stack-md); }

/* The default stat card is frosted glass (90% white + blur) — it reads as
   glass only over a photo. The compact band usually has no background image,
   where that same treatment renders as a plain white box on navy. Outline the
   cards instead and let the value carry the brand gold. */
/* Darken rather than lighten. A translucent-WHITE fill raises the card surface
   toward the text colour and drops gold to 3.04:1 and the label to 4.43:1 —
   under the 4.5 floor. Tinting down instead puts the card at #00507f: gold
   4.75:1, label 6.67:1. It also reads better, the chips sitting in the surface
   rather than floating on it. */
.page-hero--compact .page-hero__stat {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-hero--compact .page-hero__stat-value { color: var(--color-gold); }
/* 0.85 rather than 0.75: the label is small text, and on the blue surface 0.75
   lands just under the 4.5:1 contrast floor. */
.page-hero--compact .page-hero__stat-label { color: rgba(255, 255, 255, 0.85); }

/* Below the two-column breakpoint everything stacks, which puts the CTA
   directly above the first stat card with nothing between them. */
.page-hero--compact .page-hero__body { margin-bottom: var(--stack-lg); }

@media (min-width: 640px) {
  .page-hero--compact .page-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two columns from tablet up: copy + CTA left, stats right. Without this the
   content stops about two-thirds across and leaves a dead strip of navy. */
@media (min-width: 900px) {
  .page-hero--compact .page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    column-gap: var(--section-pad);
    align-items: center;
  }
  .page-hero--compact .page-hero__stats { align-self: center; }
  /* Columns are side by side here, so the stacking gap would be dead space. */
  .page-hero--compact .page-hero__body { margin-bottom: 0; }
}