/* Декоративная полоса под хедером (mobile 5197:59202 / tablet 5192:51510 / desktop 5171:39212).
   Высота задаётся не жёстко, а паддингами вокруг кнопок. --divider-max-cols в медиа-запросах
   ниже — эталонное число колонок для брейкпоинта (2/3/6, как в макете) — задаёт МАКСИМАЛЬНУЮ
   ширину кнопки (--cat-btn-max-w = ширина одной из --divider-max-cols колонок при полной
   раскладке), а НЕ фактическое число кнопок. JS (js/script.js) выставляет --divider-cols =
   min(количество категорий, --divider-max-cols): колонок ровно столько, сколько категорий,
   но каждая не шире, чем была бы в полной сетке — поэтому 2 категории на десктопе не
   растягиваются на весь экран, а остаются той же ширины, что и при 6 колонках, и просто
   центрируются. Без JS (--divider-cols не задан) используется fallback = --divider-max-cols. */
.divider {
    --cat-btn-max-w: calc((100% - (var(--divider-max-cols) - 1) * var(--divider-gap-x)) / var(--divider-max-cols));
    display: grid;
    grid-template-columns: repeat(var(--divider-cols, var(--divider-max-cols)), minmax(0, var(--cat-btn-max-w)));
    align-items: center;
    justify-content: center;
    gap: var(--divider-gap-y) var(--divider-gap-x);
    width: 100%;
    max-width: var(--content-max-width);
    padding: var(--divider-pad-y) var(--divider-pad-x);
    margin-inline: auto;
    border-radius: var(--divider-radius);
    background: #292424;
    backdrop-filter: blur(9.05px);
    box-shadow: inset 0 0 7.7px 0 rgba(0, 0, 0, 0.37);
}

/* Брейкпоинты: 0 / 600 / 1280 (десктоп с 1280, в header.css с 1024), только по ширине (без orientation). */

/* mobile (реф. 390): полоса 380×70, кнопки 110×20 в 2 ряда по 3,
   отступы 13.2 / 11, зазоры 10 (между колонками) и 14.7 (между рядами) */
@media (min-width: 0px) {
    :root {
        --divider-max-cols: 2;
        --divider-wrapper-px: 6px;
        --divider-radius: clamp(13px, 5.13vw, 30px);
        --divider-pad-x: clamp(10px, 3.38vw, 20px);
        --divider-pad-y: clamp(7px, 2.82vw, 15px);
        --divider-gap-x: clamp(5px, 2.56vw, 15px);
        --divider-gap-y: clamp(6px, 3.77vw, 22px);
    }

    .divider-wrapper {
        padding: 0 var(--divider-wrapper-px) 16px;
    }
}

/* tablet (реф. 834): полоса 752×120, кнопки 200×36 в 2 ряда по 3,
   отступы 39.2 / 13.4, зазоры 70.9 и 14.8 */
@media (min-width: 600px) {
    :root {
        --divider-max-cols: 3;
        --divider-wrapper-px: clamp(20px, 7.19vw, 92px);
        --divider-radius: 20px;
        --divider-pad-x: clamp(29px, 4.7vw, 40px);
        --divider-pad-y: clamp(11px, 1.6vw, 14px);
        --divider-gap-x: clamp(30px, 8.5vw, 71px);
        --divider-gap-y: clamp(10px, 1.77vw, 15px);
    }

    .divider-wrapper {
        padding: 0 var(--divider-wrapper-px) 10px;
    }
}

/* desktop (реф. 2560): полоса 2354×95, кнопки 254.1×49.26 одним рядом из 6,
   отступы 236 / 16.3, зазор 83.3. Отступ и зазор интерполируются от 1280 к 2560
   (до 1280 не применяется), чтобы шесть кнопок гарантированно шли в один ряд. */
@media (min-width: 1280px) {
    :root {
        --divider-max-cols: 6;
        --divider-wrapper-px: clamp(20px, 4.02vw, 103px);
        --divider-radius: clamp(75px, 5.82vw, 149px);
        --divider-pad-x: clamp(30px, calc(16.09vw - 176px), 236px);
        --divider-pad-y: clamp(12px, 0.64vw, 16.3px);
        --divider-gap-x: clamp(24px, calc(4.63vw - 35px), 83px);
        --divider-gap-y: clamp(12px, calc(3.2vw - 29px), 53px);
    }

    .divider-wrapper {
        padding: 0 var(--divider-wrapper-px) 24px;
    }
}