/* ─── Section Intro Header (.hzo-section-intro) ─────────────────────────────
   W-090 — the standardized opener for every marketing section: eyebrow,
   semantically-correct heading (level decoupled from visual size), a
   measure-capped paragraph, and an optional actions row (0–2 buttons, an APG
   tablist, or a filter-chip group). Composes existing primitives (button/tag
   tokens, .hzo-reveal, divider tokens) and owns only the layout + a11y
   scaffolding.

   GATING: always-load (the shortcode un-gates). The common eyebrow+heading+text
   case is pure CSS — zero runtime effect (section-intro.js only does work when a
   filter group or a tablist is present, plus a delegated tel: mirror).

   Tokens only: --space-* (rhythm), --border / --border-* (divider + chip border),
   --brand* / --accent-text (chip + eyebrow ink), --radius-* (chip pill),
   --fs-h1..h3 (visual size ladder), --dur-* / --ease-* (chip/tab transitions),
   --font-heading / --font-body. No hardcoded hex, no bare z-index (the intro is
   flow content — it claims none), px only for the hairline border + icon sizing. */

.hzo-section-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    margin: 0;
}

/* ── Uniform bottom spacing (opener → the content it introduces) ───────────── */
.hzo-section-intro--space-sm { margin-block-end: var(--space-lg); }
.hzo-section-intro--space-md { margin-block-end: var(--space-xl); }
.hzo-section-intro--space-lg { margin-block-end: var(--space-2xl); }

/* ── Hairline divider (shared --border token; padding matches the spacing) ── */
.hzo-section-intro--rule-top,
.hzo-section-intro--rule-both { border-block-start: 1px solid var(--border); padding-block-start: var(--space-lg); }
.hzo-section-intro--rule-bottom,
.hzo-section-intro--rule-both { border-block-end: 1px solid var(--border); padding-block-end: var(--space-lg); }

/* ── Alignment (left default; center for hero-style openers) ──────────────── */
.hzo-section-intro--align-center {
    align-items: center;
    text-align: center;
}
.hzo-section-intro--align-center .hzo-section-intro__text { margin-inline: auto; }

/* ── Eyebrow — ALWAYS a <p> (never a heading; can't pollute the outline) ──── */
.hzo-section-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.3;
}
/* text: uppercase kicker on accent ink (mirrors the shared .hzo-eyebrow look). */
.hzo-section-intro__eyebrow--text,
.hzo-section-intro__eyebrow--icon {
    font-size: var(--eyebrow-size, 15px);
    font-weight: var(--fw-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking, 0.7px);
    color: var(--accent-text);
}
/* tag: a quiet bordered chip. pill: a filled brand-pale pill. Both are static
   (a <p>, not interactive) — sentence-cased kicker inside a token. */
.hzo-section-intro__eyebrow--tag,
.hzo-section-intro__eyebrow--pill {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.2;
    letter-spacing: var(--tracking-wide, 0.05em);
    text-transform: uppercase;
    border-radius: var(--radius-pill, var(--radius-full));
}
.hzo-section-intro__eyebrow--tag {
    color: var(--brand-text);
    background: var(--bg-alt);
    border: 1px solid var(--border);
}
.hzo-section-intro__eyebrow--pill {
    color: var(--brand-text);
    background: var(--brand-pale);
    border: 1px solid transparent;
}
.hzo-section-intro__eyebrow-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}

/* ── Heading — semantic <h2>/<h3>, VISUAL size from the root modifier. ──────
   text-wrap:balance for a tidy multi-line headline; the id (for anchors/TOC)
   lives on this element, not the wrapper. */
.hzo-section-intro__heading {
    margin: 0;
    font-family: var(--font-heading);
    line-height: 1.15;
    text-wrap: balance;
    color: var(--h2-color, var(--text-heading));
}
.hzo-section-intro--size-sm .hzo-section-intro__heading {
    font-size: calc(var(--fs-h3) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1));
    font-weight: var(--font-weight-heading, var(--h3-weight, 600));
}
.hzo-section-intro--size-md .hzo-section-intro__heading {
    font-size: calc(var(--fs-h2) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1));
    font-weight: var(--font-weight-heading, var(--h2-weight, 700));
}
.hzo-section-intro--size-lg .hzo-section-intro__heading {
    font-size: calc(var(--fs-h1) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1));
    font-weight: var(--font-weight-heading, var(--h1-weight, 700));
}

/* ── Supporting text — measure-capped for readability (~45–75ch). ─────────── */
.hzo-section-intro__text {
    margin: 0;
    max-inline-size: var(--hzo-intro-measure, 60ch);
    color: var(--text-body);
    font-size: var(--fs-body);
    line-height: var(--body-line-height, 1.6);
}

/* ── Actions row (buttons | tabs | filters) ───────────────────────────────── */
.hzo-section-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    margin-block-start: var(--space-xs);
}
.hzo-section-intro--align-center .hzo-section-intro__actions { justify-content: center; }
.hzo-section-intro__tabs-root { align-self: stretch; }
.hzo-section-intro--align-center .hzo-section-intro__tabs-root .hzo-section-intro__actions--tabs { justify-content: center; }

/* Tabs/filters can overflow a narrow container — scroll horizontally rather than
   wrap into a ragged block; the group keeps its role/aria intact. */
.hzo-section-intro__actions--tabs,
.hzo-section-intro__actions--filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hzo-section-intro__actions--tabs::-webkit-scrollbar,
.hzo-section-intro__actions--filters::-webkit-scrollbar { display: none; }

/* ── Chip (shared by filter toggle-buttons AND tabs) ─────────────────────────
   A real <button> with text; selected state is carried by aria-pressed / .is-active
   (attribute, never :hover — G50). ≥44px comfort target (≥24 floor). */
.hzo-section-intro__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-body);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill, var(--radius-full));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-1) var(--ease-standard),
                border-color var(--dur-1) var(--ease-standard),
                color var(--dur-1) var(--ease-standard);
}
.hzo-section-intro__chip:hover {
    background: var(--brand-pale);
    border-color: var(--brand);
    color: var(--brand-text);
}
.hzo-section-intro__chip:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.hzo-section-intro__chip:active { transform: translateY(1px); }

/* Selected filter chip (aria-pressed) + selected tab (aria-selected / .is-active)
   — state by attribute, not hover. */
.hzo-section-intro__chip.is-active,
.hzo-section-intro__chip[aria-pressed="true"],
.hzo-section-intro__chip[aria-selected="true"] {
    background: var(--brand-pale);
    border-color: var(--brand);
    color: var(--brand-text);
    font-weight: var(--fw-semibold, 600);
}

/* A filter group whose target selector matched nothing on the page — JS marks the
   whole group disabled rather than shipping a dead control (G11). */
.hzo-section-intro__actions--filters[aria-disabled="true"] .hzo-section-intro__chip {
    opacity: var(--opacity-disabled, 0.5);
    pointer-events: none;
}

/* ── Buttons row — composes the shared .hzo-btn primitive; no extra chrome. ── */
.hzo-section-intro__actions--buttons { gap: var(--space-md); }

/* ── Reduced motion — kill chip/tab transitions (state changes stay instant;
   PRESERVE-5). The reveal hook, when used, is owned/killed by main.js. ─────── */
@media (prefers-reduced-motion: reduce) {
    .hzo-section-intro__chip { transition: none; }
}

/* ── Forced colors — the selected chip must not signal via background alone
   (stripped in High Contrast): add a system-color border so aria-pressed /
   aria-selected keeps a visible correlate; focus resolves to a real outline. ── */
@media (forced-colors: active) {
    .hzo-section-intro__chip.is-active,
    .hzo-section-intro__chip[aria-pressed="true"],
    .hzo-section-intro__chip[aria-selected="true"] {
        border-color: Highlight;
        outline: 1px solid Highlight;
    }
    .hzo-section-intro__chip:focus-visible { outline: 2px solid ButtonText; }
}

/* ── Print — openers are LCP-visible, so force-reveal if the reveal hook left the
   header at opacity:0 (G13), and hide the non-functional actions row. ───────── */
@media print {
    .hzo-section-intro.hzo-reveal,
    .hzo-section-intro.hzo-reveal--init {
        opacity: 1 !important;
        transform: none !important;
    }
    .hzo-section-intro__actions--tabs,
    .hzo-section-intro__actions--filters { display: none; }
}