/* ─── Section surface variants ────────────────────────────────────────
   Formalize the previously-inline section backgrounds into modifiers:
     (light)              default .hzo-section — white (--bg-page)
     .hzo-section--pale   neutral pale gray (--bg-alt) — the standard alternator
     .hzo-section--tint   brand-tinted light surface (--brand-pale), dark text
     .hzo-section--dark   brand solid + white text (defined earlier in this file)
   Vertical rhythm comes from the base .hzo-section padding ladder.
   (Named --tint, NOT --brand: "--brand" would read as the solid brand color;
   this is a pale brand TINT. The solid brand surface is --dark.) */
.hzo-section--pale  { background: var(--bg-alt); }
.hzo-section--tint  { background: var(--brand-pale); }

/* Radial "glow" variant of the dark surface. Pair WITH --dark so all the
   white-text rules still apply: class="hzo-section hzo-section--dark
   hzo-section--dark-glow". Lightens toward a focal point above center and
   sinks toward --brand-deep at the edges — adds depth to CTA/stat bands
   without touching the color system (everything derives from the same
   --bg-dark-section the flat variant uses). */
.hzo-section--dark.hzo-section--dark-glow {
    background: radial-gradient(120% 90% at 50% 30%,
        color-mix(in srgb, var(--bg-dark-section) 82%, white) 0%,
        var(--bg-dark-section) 55%,
        color-mix(in srgb, var(--bg-dark-section) 60%, var(--brand-deep)) 100%);
}

/* Compact padding modifier — one step down from the base section ladder
   (lg / xl / 2xl vs the base xl / 2xl / 3xl). For low-height utility bands —
   trust strips, thin logo/rating rows, an eyebrow-only intro — that would
   look over-padded at full section rhythm. Replaces the inline
   `style="padding-top: var(--space-lg); padding-bottom: var(--space-lg)"`
   that trust-row.html and the homepage trust bar hand-roll today.

   Compound `.hzo-section.hzo-section--compact` (0,2,0) so it beats BOTH the
   base `.hzo-section` padding (0,1,0, declared in main.css which loads after
   this file) AND the section-adjacency padding-top rules earlier in this file
   (0,2,0) — those are declared before this point, so equal specificity resolves
   to compact by source order. Author intent (a deliberately tight band) wins
   over the automatic adjacency restore, which is what we want. */
.hzo-section.hzo-section--compact { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
@media (min-width: 768px) {
    .hzo-section.hzo-section--compact { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}
@media (min-width: 1250px) {
    .hzo-section.hzo-section--compact { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
}