/* page-header — @tokens: --page-header-max-width

   The lightweight title band at the top of an interior page, sitting directly
   below the site nav (a services / about / legal page…). NOT the marketing hero
   (`.hzo-hero` is the top-of-homepage composition with actions + media); this is
   the quieter "you are here" header: eyebrow + h1 + one supporting line, with an
   optional breadcrumb slot. Full-bleed band — the root OWNS the vertical padding
   and the optional tint, and wraps a `.hzo-container` for the horizontal gutter.
   Primitive: CSS-only, not interactive (carries no control, so no focus/disabled
   idioms — a breadcrumb dropped in the slot styles + focuses itself).

   Token-only: the band padding reads --space-3xl, the tint reads --bg-alt, and
   the type reads the shared L1 --fs-* ladder + semantic inks so a dark archetype
   re-themes it from :root. The subtitle's readability measure has no semantic
   token, so it's a component token with a literal fallback (the icon-button.css
   dial pattern). */
.hzo-page-header {
    padding-block: var(--space-3xl);
    background: transparent;
}

/* Tinted variant — pale alt surface to separate the header from white content. */
.hzo-page-header--alt {
    background: var(--bg-alt);
}

/* Small tracked label above the title. Mirrors the .hzo-eyebrow look (uppercase,
   tracked, small) but scoped to this block so it never borrows another class. */
.hzo-page-header__eyebrow {
    display: inline-block;
    font-size: var(--fs-100);
    font-weight: var(--fw-600);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--brand-text);
    margin: 0 0 var(--space-sm);
}

/* The page h1 — large heading ink. Sizes from the L1 ladder rather than a fixed
   px so it re-scales with the type system; tight leading for a display line. */
.hzo-page-header__title {
    font-family: var(--font-heading);
    font-size: var(--fs-700);
    font-weight: var(--fw-700);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    margin: 0;
}

/* One supporting line — muted, capped to a readable measure. */
.hzo-page-header__subtitle {
    max-width: var(--page-header-max-width, 60ch);
    font-size: var(--fs-300);
    line-height: var(--lh-normal);
    color: var(--text-muted);
    margin: var(--space-md) 0 0;
}

/* Breadcrumb slot — spacing only. The breadcrumb component styles + focuses
   itself; this just seats it above the eyebrow with rhythm. */
.hzo-page-header__breadcrumb {
    margin: 0 0 var(--space-md);
}

/* Center-aligned variant — also centers the capped subtitle measure. */
.hzo-page-header--center {
    text-align: center;
}
.hzo-page-header--center .hzo-page-header__subtitle {
    margin-inline: auto;
}