/* contact-split — @tokens: --contact-split-gap, --contact-split-info-gap

   A two-column contact SECTION: business info / NAP (name-address-phone, hours,
   social) on one side, a form or a map on the other. Full-bleed section that
   OWNS its vertical rhythm (padding via .hzo-section) and holds a .hzo-container.
   A composition, not a control — it only LAYS OUT existing components (reuse
   .hzo-definition-list for the NAP, .hzo-btn in the form, .hzo-map for the map
   side); it never restyles them, so it carries no focus/disabled idioms itself —
   the inner form fields and .hzo-map bring their own a11y.

   Token-only: the two-column gap + the info-stack rhythm have no single semantic
   role that fits, so they are component tokens with a space-scale literal fallback
   (the icon-button.css dial pattern). Everything else reads an L1/L2 token. */

/* The 2-col grid. Info | form on desktop; stacks to one column below the
   breakpoint (max-width query — the QA-ladder direction the standard prefers). */
.hzo-contact-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--contact-split-gap, var(--space-3xl));
    align-items: start;
}
@media (max-width: 768px) {
    .hzo-contact-split__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

/* Info column — heading + NAP + hours + social stacked with a shared rhythm.
   Holds plain markup or a reused .hzo-definition-list; adds no type styling of
   its own (the heading / eyebrow / definition-list classes carry that). */
.hzo-contact-split__info {
    display: flex;
    flex-direction: column;
    gap: var(--contact-split-info-gap, var(--space-lg));
}

/* Form / map column — a bare layout slot. The inner form fields and .hzo-map
   style themselves; this only holds them. First/last child margins collapse so
   the slot's contents align flush with the info column top. */
.hzo-contact-split__form > :first-child { margin-top: 0; }
.hzo-contact-split__form > :last-child { margin-bottom: 0; }

/* Modifier — swap the column order so the form/map leads on desktop. Only flips
   above the stack breakpoint; on mobile the source order (info first) is kept. */
@media (min-width: 769px) {
    .hzo-contact-split--form-first .hzo-contact-split__info { order: 2; }
    .hzo-contact-split--form-first .hzo-contact-split__form { order: 1; }
}