/* ==========================================================================
   pagehero.css

   .la-pagehero — the one hero component for interior pages.

   Why this exists
   ---------------
   Every interior page had built its own hero out of inline styles. Fifteen of
   them happened to converge on identical values, which looked like a shared
   component but wasn't one — nothing held them together, so they could drift
   apart again on any edit. This is that component, made real.

   The height problem it fixes
   ---------------------------
   The old hero image panel was `aspect-ratio:4/5` with no height cap. At a
   1280px viewport the two-column grid gives each column ~580px, so a 4/5 box
   renders 725px tall and the whole hero lands around 917px — taller than the
   viewport on most laptops, before you scroll to a single word of content.

   Padding was never the culprit. It contributed 192px of that 917. The image
   contributed 725. So the fix is the ratio and the cap (4/3, max 420px), and
   the tighter padding below is a smaller, secondary correction.

   Deliberately tighter than a content section. Content sections on these pages
   run clamp(56px,7vw,104px); the hero runs clamp(32px,4vw,56px). A hero that
   is roomier than the content beneath it reads as a page that hasn't started.

   Load AFTER design-system.css and site.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Band and grid
   -------------------------------------------------------------------------- */

.la-pagehero {
  position: relative;
  overflow: hidden;
  background: var(--cream, #F5EFE4);
}

/* Espresso variant, used by the treatment pages. */
.la-pagehero--onDark {
  background: var(--bg-band-dark, #252019);
}

/* Light heroes carry the hairline the old inline markup had. */
.la-pagehero:not(.la-pagehero--onDark) {
  border-bottom: 1px solid var(--champagne, #E4D3C8);
}

/* The soft gold/blush wash behind the copy. Decorative only. */
.la-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(80% 100% at 82% 14%, rgba(var(--glow-rgb), 0.28), rgba(var(--glow-rgb), 0) 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(var(--glow-warm-rgb), 0.34), rgba(var(--glow-warm-rgb), 0) 50%);
}

/* The blush glow has to drop back on espresso or it turns milky. */
.la-pagehero--onDark::before {
  background-image:
    radial-gradient(80% 100% at 82% 14%, rgba(var(--glow-rgb), 0.28), rgba(var(--glow-rgb), 0) 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(var(--glow-warm-rgb), 0.10), rgba(var(--glow-warm-rgb), 0) 50%);
}

.la-pagehero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) 28px;
}

/* Two columns only when there is an image. Copy gets the wider share — a
   subhead that wraps mid-phrase is worse than a slightly narrower panel. */
.la-pagehero--split .la-pagehero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* Text-only heroes keep the same padding on purpose. Matching padding reads as
   intentional; different padding reads as unfinished. They do get the narrower
   measure the old text-only pages used. */
.la-pagehero:not(.la-pagehero--split) .la-pagehero__inner {
  max-width: 1000px;
}


/* --------------------------------------------------------------------------
   Copy column

   At most three rows above the actions: breadcrumb, H1, one-line subhead.
   Anything else (layer badge, results link, spec pills, a second intro
   paragraph) belongs in the first content section, not here.
   -------------------------------------------------------------------------- */

.la-pagehero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep, #7A5C3E);
  text-decoration: none;
}

.la-pagehero--onDark .la-pagehero__breadcrumb {
  color: var(--gold-leaf, #C9A24B);
}

.la-pagehero__breadcrumb:hover,
.la-pagehero__breadcrumb:focus-visible {
  color: var(--gold-antique, #A17C3A);
}

.la-pagehero__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--espresso, #252019);
}

.la-pagehero--onDark .la-pagehero__title {
  color: var(--porcelain, #FBF8F2);
}

/* One line. If it needs two sentences, the second one is content, not a hero. */
.la-pagehero__subhead {
  margin: 20px 0 0;
  max-width: 26em;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  color: var(--gold-deep, #7A5C3E);
}

.la-pagehero--onDark .la-pagehero__subhead {
  color: var(--gold-leaf, #C9A24B);
}

/* Buttons stay inline-styled for now — they are identical site-wide and
   converting them is a separate job from fixing hero geometry. This row only
   owns the spacing and wrapping. */
.la-pagehero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}


/* --------------------------------------------------------------------------
   Image panel

   A panel, not a band. The cap is what actually shortens the page: without a
   max-height the panel grows with the column and there is no ceiling.

   It also fixes a resolution problem. The treatment photography tops out
   around 1344×896, which is marginal stretched across a full-bleed hero but
   comfortable in a panel that never renders wider than ~560px.
   -------------------------------------------------------------------------- */

.la-pagehero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(var(--glow-rgb), 0.32);
  border-radius: var(--radius-lg, 14px);
  background-color: var(--bg-band-deep, #1C1813);
  background-image:
    radial-gradient(120% 120% at 30% 18%, rgba(var(--glow-rgb), 0.32), rgba(var(--glow-rgb), 0) 58%),
    radial-gradient(100% 100% at 90% 100%, rgba(var(--glow-warm-rgb), 0.14), rgba(var(--glow-warm-rgb), 0) 50%);
}

.la-pagehero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */

.la-pagehero a:focus-visible {
  outline: 2px solid var(--gold-leaf, #C9A24B);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Responsive

   Below 860px the panel stacks under the copy. It also goes wider and shorter
   (16/9) — a portrait-ish panel at full phone width would push the first
   content section off-screen again, which is the problem this file exists to
   solve.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .la-pagehero--split .la-pagehero__inner {
    grid-template-columns: 1fr;
  }

  .la-pagehero__media {
    aspect-ratio: 16 / 9;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .la-pagehero__actions {
    margin-top: 26px;
  }

  /* Full-width buttons stack better than two half-width pills that wrap
     unevenly. */
  .la-pagehero__actions > a {
    flex: 1 1 100%;
    justify-content: center;
  }
}