/*
 * Editorial Tabs — STRUCTURAL styles only.
 *
 * This file ships the minimum needed for the tabs to *function and lay out* as tabs
 * (horizontal nav strip; only the active panel visible) with no external CSS. It does
 * NOT set colors, fonts, borders, backgrounds, or spacing — the site stylesheet owns
 * all visual design and can override everything here (selectors are single-class /
 * low-specificity on purpose). The active tab carries `.is-active` and aria-selected
 * for the site to style; this file deliberately gives it no visual treatment.
 */

/* Nav: a single-row horizontal strip of tab buttons that scrolls horizontally when
   it is wider than the container (mobile / many tabs). It never wraps to a second row. */
.editorial-tabs__nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items keep their natural width (no shrink), so the row overflows -> the nav scrolls
   instead of squashing the tabs. */
.editorial-tabs__nav-item {
    margin: 0;
    flex: 0 0 auto;
}

/* The tab control is a native <button>; pointer affordance + single-line label are
   structural (a wrapped label would break the scroll strip). */
.editorial-tabs__tab {
    cursor: pointer;
    white-space: nowrap;
}

/* The core tab behaviour: only the active panel is shown. */
.editorial-tabs__panel {
    display: none;
}

.editorial-tabs__panel.is-active {
    display: block;
}