/* ============================================================
   Переключатель PT/ES — стили.
   Подключается в index.html после main.css.
   Данные ES: concerts-es.json. Логика: script.js.
   ============================================================ */

/* Sticky-плашка с переключателем. Белый фон во всю ширину wrapper'а
   (wrapper без горизонтального padding, поэтому плашка просто на всю
   ширину), липнет к верху экрана при скролле. Переключатель выровнен
   по правому краю. */
.country-toggle-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    /* 4px до списка снизу — как гэп между всеми карточками. Без
       border-radius: карточки без скруглений. */
    margin: -4px 0 4px;
    padding: 8px 12px;
    /* Плоская в исходном положении; тень включается при залипании
       (класс .is-stuck ставит JS через IntersectionObserver). */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 4px 12px -6px rgba(0, 0, 0, 0);
    transition: box-shadow 0.18s ease;
}

/* Залипшее состояние: тонкая разделительная линия + мягкое
   рассеивание вниз, отделяющее плашку от уезжающего контента. */
.country-toggle-bar.is-stuck {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px -6px rgba(0, 0, 0, 0.12);
}

/* Невидимый маркер над плашкой — за ним следит IntersectionObserver. */
.toggle-bar-sentinel {
    height: 0;
}

/* Левая часть плашки — «Show past concerts» активной страны.
   Кнопка использует общий стиль .toggle-past (наш кегль). */
.past-slot {
    display: flex;
    align-items: center;
}

.past-slot-pane[hidden] {
    display: none;
}

/* Сегментный переключатель Portugal / Spain.
   Пилюля на сером фоне (#f7f7f7, как у карточек), внутри — скользящий
   белый индикатор (.thumb), который JS ставит под активную кнопку. */
.country-toggle {
    position: relative;
    display: inline-flex;
    background: #f7f7f7;
    border-radius: 7px;
    padding: 2px;
    /* На случай отключённого JS: показываем активную кнопку фоном */
    isolation: isolate;
}

/* Белый «ползунок» под активной кнопкой. Позицию/ширину задаёт JS. */
.country-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 0;
    bottom: 2px;
    width: 0; /* стартовое; реальное проставит JS */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, width 0.25s ease;
    z-index: -1;
}

.country-toggle-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: #b3b3b3;
    font-family: inherit;
    font-size: 13px;
    line-height: 16px;
    padding: 4px 12px;
    border-radius: 5px;
    transition: color 0.2s ease;
}

.country-toggle-btn.active {
    color: #000;
}

@media (hover: hover) {
    .country-toggle-btn:not(.active):hover {
        color: #000;
    }
}

/* «Окно», в котором ездят два списка.
   - overflow-x:hidden прячет соседнюю страну за горизонтальным краем;
   - overflow-y:hidden обрезает по высоте более длинную (неактивную)
     панель, чтобы её хвост не торчал снизу;
   - высоту задаёт JS по активной панели (плавно через transition).
   Без горизонтального padding — карточки месяцев во всю ширину (360px),
   как и остальные блоки. Карточки концертов с их margin:0 -4px лежат
   внутри .month-group (padding 16px), до края вьюпорта не доходят, так
   что overflow им скругления не режет.
   (Если когда-нибудь вернуть плоский список без .month-group — вернуть
   сюда padding: 0 4px, иначе overflow обрежет скругления карточек.) */
.country-viewport {
    overflow: hidden;
    height: 0; /* стартовое; реальное значение проставит JS */
    transition: height 0.3s ease;
}

/* Трек: ширину НЕ фиксируем — её задаёт сумма двух панелей + gap.
   align-items:flex-start — панели НЕ растягиваются друг под друга по
   высоте, у каждой своя естественная высота.
   gap:20px — зазор между странами, чтобы при слайде хвост соседней
   панели не подглядывал из-за края окна.
   Сдвиг для ES задаёт JS в пикселях (ширина окна + gap) — так нет
   неоднозначности с тем, от чего считаются проценты в translateX. */
.country-track {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease;
}

/* Каждая страна — ровно ширина видимой области вьюпорта.
   flex:0 0 100% — не сжимается и не растягивается. */
.country-pane {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
}

/* Неактивная панель не должна перехватывать клики из-под активной */
.country-pane[aria-hidden="true"] {
    pointer-events: none;
}

/* Лейбл «<date> in PT» — наследует вид .last-in-pt («since …»).
   Отдельный класс оставлен как точка кастомизации, если понадобится
   отличать его от «since …». */