/* ============================================================
   Хаб сезона на телефоне (≤768px): одна липкая строка под шапкой сайта —
   «4-й сезон ▾» (переключатель сезонов) | текстовые вкладки.
   Десктоп остаётся в season-hub.css; здесь только скрыт триггер строки.
   ============================================================ */
.sbar-switch { display: none; }

@media (max-width: 768px) {
    :root { --tabs-h: var(--space-7); }

    /* Обзор: крупный h1 и мета над строкой; кнопка «Сезоны» переехала в строку */
    .season-head { flex-direction: column; align-items: stretch; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-5); }
    .season-head__title { font-size: var(--fs-2xl); }
    .season-head__meta { margin-top: var(--space-3); }
    .season-head__pipe, .season-head__sep { display: none; }
    .season-head__name { display: block; }
    .season-head > .switcher { display: none; }
    /* Остальные вкладки: шапки нет, h1 остаётся для чтения экраном */
    .season-head--compact {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ---------- Строка: поверхность вкладок, при прилипании — продолжение шапки ---------- */
    .season-tabs { transition: background-color var(--dur) var(--ease-out); }
    .season-tabs.is-stuck {
        background: var(--header-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    body:has(.header--scrolled) .season-tabs.is-stuck { background: var(--header-bg-scrolled); }
    /* Шапка и строка читаются одной полосой: линия остаётся только под строкой */
    body:has(.season-tabs.is-stuck) .header { border-bottom-color: transparent; box-shadow: none; }

    /* base.css грузится после страничных стилей — нужна специфичность выше .container */
    .season-tabs .season-tabs__inner { padding-right: 0; }
    .season-tabs__title { display: none; }
    .season-tabs.is-stuck .stabs { transform: none; }

    /* ---------- Триггер «4-й сезон ▾» ---------- */
    .sbar-switch { display: flex; position: static; }
    .sbar-switch__btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        min-height: var(--tap-min);
        align-self: center;
        padding: 0 var(--space-2) 0 0;
        font-family: var(--font-display);
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--text);
        white-space: nowrap;
    }
    .sbar-switch__btn .switcher__chev { color: var(--text-muted); }
    .sbar-switch__btn[aria-expanded="true"] .switcher__chev { color: var(--accent); }
    /* Тонкий разделитель между сезоном и вкладками */
    .sbar-switch::after { content: ""; align-self: center; width: 1px; height: var(--space-5); margin-right: var(--space-1); background: var(--border); }
    .sbar-switch .switcher__panel {
        top: calc(100% + var(--space-2));
        left: var(--space-3);
        right: var(--space-3);
        width: auto;
        transform-origin: top left;
    }
    .switcher__item { min-height: var(--tap-min); }

    /* ---------- Текстовые вкладки ---------- */
    .stabs { flex: 1; min-width: 0; gap: 0; overscroll-behavior-x: contain; }
    .stab {
        flex: 1 0 auto;
        justify-content: center;
        min-height: calc(var(--space-7) - 1px);
        padding: 0 var(--space-1);
        font-size: var(--fs-sm);
        outline-offset: -2px;
    }
    .stab svg, .stab__n { display: none; }
    .stab::after { left: var(--space-1); right: var(--space-1); bottom: 0; }
    .stab:last-child { padding-right: var(--space-3); }
    .stab:last-child::after { right: var(--space-3); }

    /* Не влезли (узкие экраны) — список прокручивается, край с продолжением гаснет (season-hover.js) */
    .stabs.is-fade-r { mask-image: linear-gradient(to right, #000 calc(100% - var(--space-6)), transparent); }
    .stabs.is-fade-l { mask-image: linear-gradient(to left, #000 calc(100% - var(--space-6)), transparent); }
    .stabs.is-fade-l.is-fade-r { mask-image: linear-gradient(to right, transparent, #000 var(--space-6), #000 calc(100% - var(--space-6)), transparent); }
}

@media (max-width: 359px) {
    .stab { flex: none; padding: 0 var(--space-2); }
    .stab::after { left: var(--space-2); right: var(--space-2); }
}