/* feature-tabs — @tokens: --feature-tabs-gap, --feature-tabs-media-radius

   A tabbed feature showcase. The TAB UI is the existing .hzo-tabs (its list,
   tabs, panels + the main.js roving-focus wiring, reused verbatim — this file
   adds NO tab styling and re-themes nothing). All this component contributes is
   the layout INSIDE each panel: a two-column feature — media on one side, copy
   (heading + text + CTA) on the other. It composes .hzo-tabs + .hzo-btn; it only
   arranges them.

   No focus/disabled idioms here — the focusable parts (tabs, CTA) belong to
   .hzo-tabs / .hzo-btn and carry their own a11y. Token-only: the two-column gap +
   the media radius have no single semantic role that fits, so they are component
   tokens with a literal-token fallback (the icon-button.css dial pattern). */

/* Two-column panel layout — media | body, stacked on mobile, side-by-side above
   the breakpoint (min-width, mirroring .hzo-feature / .hzo-hero--split). Applied
   inside each .hzo-tabs__panel; .hzo-tabs owns the panel's top padding + hidden. */
.hzo-feature-tabs__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--feature-tabs-gap, var(--space-xl));
    align-items: center;
}
@media (min-width: 1024px) {
    .hzo-feature-tabs__panel {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
    }
}

/* Media side — image fills the column at panel radius (matches .hzo-feature__media). */
.hzo-feature-tabs__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--feature-tabs-media-radius, var(--radius-panel));
}

/* Body side — heading + text + CTA stack. Reset first/last margins so the copy
   aligns flush with the media top; the heading / body / .hzo-btn classes carry
   all type + control styling. */
.hzo-feature-tabs__body > :first-child { margin-top: 0; }
.hzo-feature-tabs__body > :last-child { margin-bottom: 0; }

/* Modifier — media on the opposite side on desktop (alternating rhythm across
   panels). Below the breakpoint the source order (media first) is kept. */
@media (min-width: 1024px) {
    .hzo-feature-tabs__panel--media-last .hzo-feature-tabs__media { order: 2; }
}