/*
 * PageBlocks - разметочный слой каталога блоков.
 *
 * Здесь только то, без чего блок на чужой теме выглядит сломанным: ширина
 * контента, вертикальный ритм секций и набор токенов, которыми блок меряет
 * отступы и цвета. Шрифты, кнопки и типографику файл не трогает - их даёт тема,
 * и переопределять их значило бы драться с ней на каждой странице.
 *
 * Токены объявлены на обёртке .pb-page, а НЕ на :root. На :root тема сайта и
 * компонент пишут в одно и то же место, и то, как выглядит страница, начинает
 * решать порядок подключения файлов. На обёртке тема переопределяет токен тем
 * же селектором - осознанно:
 *
 *     .pb-page { --pb-content-max: 1100px; --pb-section-gap: 4rem; }
 *
 * И это правило победит независимо от порядка подключения: весь файл лежит в
 * @layer pageblocks, а неслоёные правила темы сильнее любого слоя. Поэтому
 * переопределять токены можно из своего css, не правя файлы компонента -
 * обновление их перезапишет, тему не тронет.
 *
 * Цвета по умолчанию выведены из currentColor: блок наследует цвет текста темы
 * вместо того, чтобы приносить свою палитру.
 */

@layer pageblocks {
    .pb-page {
        --pb-content-max: 1200px;
        --pb-content-narrow: 48rem;
        --pb-content-wide: 1600px;

        /* Расстояние между соседними секциями. Разложено половинами в
           padding самой секции, а не в margin между ними: так у секции с
           фоном есть внутренние поля, а фоны соседей смыкаются встык. */
        --pb-section-gap: 5rem;

        /* Боковые поля: отступ контента от края экрана на узких экранах. */
        --pb-gutter: 1.25rem;

        /* Шаг внутри секции - между колонками, карточками, строками. */
        --pb-gap: 1.5rem;

        --pb-radius: 0.5rem;
        --pb-accent: currentColor;
        --pb-muted: color-mix(in srgb, currentColor 65%, transparent);
        --pb-surface: color-mix(in srgb, currentColor 5%, transparent);
        --pb-border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    }

    .pb-section {
        padding-block: calc(var(--pb-section-gap) / 2);
    }

    .pb-section__inner {
        max-width: var(--pb-content-max);
        margin-inline: auto;
        padding-inline: var(--pb-gutter);
    }

    .pb-section--narrow .pb-section__inner {
        max-width: var(--pb-content-narrow);
    }

    .pb-section--wide .pb-section__inner {
        max-width: var(--pb-content-wide);
    }

    /* Секция во всю ширину: фон и так тянется от края до края, а здесь от края
       до края идёт и содержимое - карта, слайдер, большая картинка. */
    .pb-section--bleed .pb-section__inner {
        max-width: none;
        padding-inline: 0;
    }

    /* Секция без вертикального ритма: когда соседние блоки должны сомкнуться. */
    .pb-section--flush {
        padding-block: 0;
    }

    /* Первый и последний потомок секции не выносят свои margin наружу - иначе
       заголовок с margin темы съедает padding секции и ритм плывёт. :where()
       оставляет правилу нулевую специфичность, чтобы стили блока его перебили
       обычным селектором. */
    :where(.pb-section__inner) > :where(:first-child) {
        margin-block-start: 0;
    }

    :where(.pb-section__inner) > :where(:last-child) {
        margin-block-end: 0;
    }

    @media (max-width: 48rem) {
        .pb-page {
            --pb-section-gap: 3rem;
            --pb-gap: 1rem;
        }
    }
}