/* ==========================================================================
   AntiSetki — каркас сайта
   Шапка, основное меню, мобильное меню, подвал и служебные элементы страниц.

   Все значения берутся из переменных `main.css`: цвет числом здесь не пишется.
   Содержание:
      1. Шапка и знак
      2. Основное меню
      3. Выпадающий список «Решения»
      4. Телефон и кнопка действия
      5. Бургер и мобильное меню
      6. Подвал
      7. Хлебные крошки
      8. Пагинация
      9. Аккордеон
     10. Модальное окно
     11. Лайтбокс галереи
     12. Сообщения об ошибке и успехе
     13. Секции блоков главной
     14. Шапка внутренней страницы
     15. Общие карточки списков: сетка и статья
     16. Поведение по брейкпоинтам

   Вёрстка отдельных разделов лежит рядом и подключается только там, где
   нужна: `pages-catalog.css` (каталог и карточка товара), `pages-blog.css`
   (лента, рубрика и статья), `pages-objects.css` (галерея объектов).
   ========================================================================== */

/* ==========================================================================
   1. Шапка и знак
   ========================================================================== */

/*
 * Шапка липкая на `position: sticky` — без JS. Скрипт `main.js` лишь вешает
 * класс `is-scrolled`, когда страница прокручена: фон становится плотным,
 * а нижняя граница — видимой. Пока страница не тронута, шапка лежит стеклом
 * поверх героя с фотографией.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-glass);
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition), border-color var(--transition);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header {
        -webkit-backdrop-filter: blur(var(--blur-glass));
        backdrop-filter: blur(var(--blur-glass));
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        background-color: var(--color-surface);
    }
}

.site-header.is-scrolled {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-height);
}

/* Знак и название: купол над домом рисуется акцентом, дом — цветом текста,
   название — прописными с акцентной буквой «Х», как в утверждённом логотипе. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    color: var(--color-text);
    text-decoration: none;
}

.brand__mark {
    flex-shrink: 0;
    color: var(--color-accent);
    transition: color var(--transition);
}

.brand__house {
    fill: currentColor;
    color: var(--color-text);
}

.brand__name {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* В шапке слова стоят столбиком: одной строкой название вытесняет из ряда
   телефон и кнопку замера. Кегль мельче, межбуквенное шире — так короткая
   строка не выглядит сдавленной. */
.brand__name--stacked {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.04em;
}

.brand__letter {
    color: var(--color-accent);
}

.brand:hover {
    color: var(--color-text);
}

.brand:hover .brand__mark {
    color: var(--color-accent-hover);
}

/* На узком десктопе шапке дороже место под меню: название чуть мельче. */
@media (max-width: 1279.98px) {
    .brand__name--stacked {
        font-size: 14px;
        line-height: 17px;
        letter-spacing: 0.02em;
    }
}

/* ==========================================================================
   2. Основное меню
   ========================================================================== */

.site-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-button);
    color: var(--color-muted);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition);
}

.site-nav__link:hover,
.site-nav__item:focus-within > .site-nav__link {
    background-color: var(--color-surface-raised);
    color: var(--color-text);
}

/* Открытый раздел — заливкой поверхности, без подчёркивания: черта под текстом
   читалась как ссылка, а заливка сразу показывает, где посетитель находится. */
.site-nav__link.is-current {
    background-color: var(--color-surface-raised);
    color: var(--color-text);
}

.site-nav__chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform var(--transition);
}

.site-nav__item--parent:hover .site-nav__chevron,
.site-nav__item--parent:focus-within .site-nav__chevron {
    transform: rotate(180deg);
}

/* ==========================================================================
   3. Выпадающий список «Решения»
   ========================================================================== */

/*
 * Обёртка прозрачная и с верхним отступом: это «мостик» между пунктом меню
 * и карточкой — указатель успевает дойти до списка, не закрывая его.
 * Раскрытие держится на `:hover` и `:focus-within`, поэтому клавиатура
 * работает без JS. `visibility` переключается без плавности — по ней анимации
 * нет, иначе скрытые ссылки оставались бы доступны для фокуса.
 */
.site-nav__drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    padding-top: var(--space-1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--duration);
}

.site-nav__item--parent:hover > .site-nav__drop,
.site-nav__item--parent:focus-within > .site-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.site-nav__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 248px;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-top-color: var(--color-glass-border);
    border-radius: var(--radius-card);
    /* Тень допустима: выпадающий список и модалка — единственные исключения. */
    box-shadow: var(--shadow-dropdown);
}

.site-nav__sublink {
    display: block;
    padding: 10px var(--space-2);
    border-radius: var(--radius-small);
    color: var(--color-muted);
    font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition);
}

.site-nav__sublink:hover {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.site-nav__sublink.is-current {
    color: var(--color-text);
    background-color: var(--color-surface);
}

/* ==========================================================================
   4. Телефон и кнопка действия
   ========================================================================== */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    margin-left: auto;
}

.site-header__phone {
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    text-decoration: none;
}

.site-header__phone-number {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color var(--transition);
}

.site-header__phone-note {
    font-size: var(--font-size-eyebrow);
    line-height: var(--line-height-eyebrow);
    color: var(--color-muted);
    white-space: nowrap;
}

.site-header__phone:hover .site-header__phone-number {
    color: var(--color-accent);
}

.site-header__cta {
    flex-shrink: 0;
}

/* ==========================================================================
   5. Бургер и мобильное меню
   ========================================================================== */

/*
 * Переключателем служит скрытый флажок перед шапкой: панель раскрывается
 * правилом `:checked ~ .site-menu`, поэтому меню работает без единой строки JS
 * и переключается с клавиатуры пробелом. Метка (`.burger`) кликабельна мышью
 * и пальцем, кольцо фокуса рисуется на ней — сам флажок скрыт с экрана.
 * Скрипт добавляет Escape, закрытие по клику снаружи и блокировку прокрутки.
 */
.burger {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border-radius: var(--radius-button);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.burger:hover {
    background-color: var(--color-surface-raised);
}

.burger__bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: background-color var(--transition);
}

.burger__bars::before,
.burger__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--transition);
}

.burger__bars::before {
    top: -7px;
}

.burger__bars::after {
    top: 7px;
}

.site-menu__checkbox:focus-visible ~ .site-header .burger {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Открытое меню: полоски складываются в крест, средняя гаснет. */
.site-menu__checkbox:checked ~ .site-header .burger {
    color: var(--color-accent);
}

.site-menu__checkbox:checked ~ .site-header .burger__bars {
    background-color: transparent;
}

.site-menu__checkbox:checked ~ .site-header .burger__bars::before {
    transform: translateY(7px) rotate(45deg);
}

.site-menu__checkbox:checked ~ .site-header .burger__bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

/*
 * Панель занимает экран под шапкой: телефон и знак остаются видимыми, как
 * требует ТЗ. Фон плотный — сквозь меню не должен просвечивать текст страницы.
 */
.site-menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-overlay);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition),
                visibility 0s linear var(--duration);
}

.site-menu__checkbox:checked ~ .site-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.site-menu__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 100%;
    padding-top: var(--space-2);
    padding-bottom: var(--space-6);
}

.site-menu__list,
.site-menu__sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu__item + .site-menu__item {
    border-top: 1px solid var(--color-border);
}

.site-menu__link {
    display: block;
    padding: 14px 0;
    color: var(--color-text);
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition);
}

.site-menu__link:hover,
.site-menu__sublink:hover {
    color: var(--color-accent);
}

.site-menu__link.is-current,
.site-menu__sublink.is-current {
    color: var(--color-accent);
}

/* Вложенные пункты «Решений» показаны сразу: их три, прятать нечего. */
.site-menu__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 var(--space-2) var(--space-2);
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border);
}

.site-menu__sublink {
    display: block;
    padding: 8px 0;
    color: var(--color-muted);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    text-decoration: none;
    transition: color var(--transition);
}

.site-menu__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

.site-menu__phone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-text);
    text-decoration: none;
}

.site-menu__phone-number {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.site-menu__phone-note {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    color: var(--color-muted);
}

/* Пока меню открыто, страница под ним не прокручивается. Класс ставит JS;
   без него меню всё равно открывается, просто фон остаётся подвижным. */
.is-menu-open,
.is-menu-open body {
    overflow: hidden;
}

/* ==========================================================================
   6. Подвал
   ========================================================================== */

.site-footer {
    margin-top: var(--section-space);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.site-footer__inner {
    padding-top: var(--space-8);
    padding-bottom: var(--space-4);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.7fr repeat(4, 1fr);
    gap: var(--space-6) var(--grid-gap);
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 42ch;
}

.site-footer__about {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: 20px;
}

.site-footer__social {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-muted);
    transition: color var(--transition), border-color var(--transition),
                background-color var(--transition);
}

.site-footer__social-link:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-glass-border-strong);
    color: var(--color-accent);
}

.site-footer__title {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__links,
.site-footer__contacts,
.site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__link {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 22px;
    text-decoration: none;
    transition: color var(--transition);
}

.site-footer__link:hover {
    color: var(--color-text);
}

.site-footer__phone {
    color: var(--color-text);
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition);
}

.site-footer__phone:hover {
    color: var(--color-accent);
}

.site-footer__note {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 22px;
}

.site-footer__cta {
    margin-top: var(--space-2);
}

/* Дисклеймер о пассивной защите обязателен: приглушённый, но читаемый. */
.site-footer__disclaimer {
    max-width: var(--measure);
    margin: var(--space-6) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: 20px;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.site-footer__copyright {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.site-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.site-footer__legal .site-footer__link {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* ==========================================================================
   7. Хлебные крошки
   ========================================================================== */

/*
 * Крошки стоят между шапкой и заголовком на всех внутренних страницах.
 * Разделитель рисуется псевдоэлементом, поэтому в разметке нет лишних символов
 * и скринридер читает только названия разделов.
 */
.breadcrumbs {
    padding-top: var(--space-3);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-caption);
    line-height: 22px;
    color: var(--color-muted);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--color-muted);
    border-right: 1px solid var(--color-muted);
    transform: rotate(45deg);
    opacity: 0.6;
}

.breadcrumbs__link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.breadcrumbs__link:hover {
    color: var(--color-text);
}

/* Текущая страница ссылкой не делается: она уже открыта. */
.breadcrumbs__current {
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   8. Пагинация
   ========================================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-8);
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-muted);
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition),
                border-color var(--transition);
}

.pagination__link:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-glass-border-strong);
    color: var(--color-text);
}

/* Открытая страница — единственная цифра с акцентом: это ориентир, не действие. */
.pagination__link.is-current {
    background-color: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-text);
    cursor: default;
}

.pagination__gap {
    min-width: 24px;
    color: var(--color-muted);
    text-align: center;
}

/* Стрелки «назад» и «вперёд» на краях списка гаснут вместо того, чтобы исчезать:
   ряд не прыгает по ширине при переходе на первую и последнюю страницу. */
.pagination__link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination__link svg {
    flex-shrink: 0;
}

/* ==========================================================================
   9. Аккордеон
   ========================================================================== */

/*
 * Аккордеон собран на <details>: он открывается и закрывается без JS, ищется
 * поиском по странице и печатается развёрнутым. Скрипт лишь схлопывает соседей
 * в группе с `data-accordion`.
 */
.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.accordion__item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    transition: background-color var(--transition), border-color var(--transition);
}

.accordion__item[open] {
    background-color: var(--color-surface-raised);
    border-color: var(--color-glass-border-strong);
}

.accordion__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.accordion__head::-webkit-details-marker {
    display: none;
}

.accordion__head:hover {
    color: var(--color-accent);
}

/* Знак «плюс»: две полоски, при раскрытии вертикальная гаснет и остаётся минус. */
.accordion__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    color: var(--color-accent);
}

.accordion__icon::before,
.accordion__icon::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 2px;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--transition), opacity var(--transition);
}

.accordion__icon::after {
    transform: rotate(90deg);
}

.accordion__item[open] .accordion__icon::after {
    transform: rotate(0deg);
    opacity: 0;
}

.accordion__body {
    padding: 0 var(--space-3) var(--space-3);
    color: var(--color-muted);
}

/* ==========================================================================
   10. Модальное окно
   ========================================================================== */

/*
 * Окно лежит на верхнем уровне <body> и до открытия помечено `hidden`: без JS
 * его в раскладке нет вовсе, а кнопки «Заказать замер» остаются обычными
 * ссылками на страницу контактов. Тень здесь допустима правилами оформления.
 */
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal);
    display: flex;
    /* Прижимаем к верху и центрируем автополями: у высокой формы на низком
       экране так остаётся доступным и верх окна, и кнопка отправки. */
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity var(--transition);
}

.modal.is-open {
    opacity: 1;
}

.modal__backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-overlay);
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top-color: var(--color-glass-border);
    border-radius: var(--radius-section);
    box-shadow: var(--shadow-modal);
    transform: translateY(8px);
    transition: transform var(--transition);
}

.modal.is-open .modal__dialog {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-button);
    color: var(--color-muted);
    transition: color var(--transition), background-color var(--transition);
}

.modal__close:hover {
    background-color: var(--color-surface-raised);
    color: var(--color-text);
}

.modal__head {
    max-width: 46ch;
    margin-bottom: var(--space-3);
    padding-right: var(--space-5);
}

.modal__head > * + * {
    margin-top: var(--space-1);
}

/* ==========================================================================
   11. Лайтбокс галереи
   ========================================================================== */

/*
 * Лайтбокс целиком создаётся скриптом: без JS ссылка ведёт на файл снимка,
 * и фотография всё равно открывается. Разметка живёт на верхнем уровне <body>.
 */
.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3) var(--space-4);
    background-color: var(--color-overlay-strong);
    opacity: 0;
    transition: opacity var(--transition);
}

.lightbox.is-open {
    opacity: 1;
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 100%;
    margin: 0;
}

.lightbox__image {
    max-height: 72vh;
    margin: 0 auto;
    border-radius: var(--radius-image);
    object-fit: contain;
}

.lightbox__caption {
    max-width: var(--measure);
    margin: 0 auto;
    color: var(--color-text);
    font-size: var(--font-size-caption);
    line-height: 20px;
    text-align: center;
}

.lightbox__counter {
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-glass-border-strong);
    color: var(--color-accent);
}

.lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
}

.lightbox__nav--prev {
    left: var(--space-2);
}

.lightbox__nav--next {
    right: var(--space-2);
}

/* Ссылка-миниатюра: увеличительное стекло проступает при наведении. */
.zoomable {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-image);
}

.zoomable img {
    width: 100%;
    transition: transform var(--transition);
}

.zoomable:hover img {
    transform: scale(1.03);
}

.zoomable::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-overlay);
    opacity: 0;
    transition: opacity var(--transition);
}

.zoomable:hover::after {
    opacity: 0.35;
}

/* ==========================================================================
   12. Сообщения об ошибке и успехе
   ========================================================================== */

/*
 * Одна и та же плашка работает в двух местах: внутри страницы (`.alert`)
 * и всплывающей стопкой в углу (`.alerts`), куда попадают одноразовые
 * сообщения сессии. Скрипт добавляет им автоскрытие и кнопку закрытия.
 */
.alerts {
    position: fixed;
    top: calc(var(--header-height) + var(--space-2));
    right: var(--gutter);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: min(380px, calc(100vw - var(--gutter) * 2));
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-card);
    color: var(--color-text);
    font-size: 15px;
    line-height: 22px;
}

.alerts .alert {
    background-color: var(--color-surface-raised);
    box-shadow: var(--shadow-dropdown);
    transition: opacity var(--transition), transform var(--transition);
}

.alerts .alert.is-hiding {
    opacity: 0;
    transform: translateX(var(--space-2));
}

.alert__icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert__title {
    font-weight: 600;
}

.alert__text {
    max-width: none;
    margin: 0;
    color: var(--color-muted);
}

.alert__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -2px -2px 0 0;
    border-radius: var(--radius-small);
    color: var(--color-muted);
    transition: color var(--transition), background-color var(--transition);
}

.alert__close:hover {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.alert--success {
    border-left-color: var(--color-success);
}

.alert--success .alert__icon {
    color: var(--color-success);
}

.alert--danger {
    border-left-color: var(--color-danger);
}

.alert--danger .alert__icon {
    color: var(--color-danger);
}

.alert--info {
    border-left-color: var(--color-accent);
}

.alert--info .alert__icon {
    color: var(--color-accent);
}

/* ==========================================================================
   13. Секции блоков главной
   Общая обёртка любого типа блока: вертикальные отступы, фон и шапка секции.
   Уникальная вёрстка типа живёт в его шаблоне templates/blocks/<тип>.php.
   ========================================================================== */

.block {
    position: relative;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}

/* «Компактный» режим блока — отступы на треть меньше (ТЗ, раздел оформления). */
.block--compact {
    padding-top: calc(var(--section-space) * 2 / 3);
    padding-bottom: calc(var(--section-space) * 2 / 3);
}

.block--bg-dark {
    background-color: var(--color-bg);
}

.block--bg-surface {
    background-color: var(--color-surface);
}

/* Фон-картинку блок задаёт сам через inline-стиль, здесь только затемнение:
   без него текст на светлых участках снимка не читается. */
.block--bg-image {
    background-color: var(--color-bg);
    background-position: center;
    background-size: cover;
}

.block--bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-photo-overlay);
}

.block--bg-image > * {
    position: relative;
}

/* Приглушённый серый рассчитан на ровную поверхность: поверх дневного снимка
   он тонет в кадре, а делать затемнение плотнее — значит снова превращать
   фотографию в серое пятно. Поэтому подписи самой секции (не карточек, у них
   своя подложка) внутри фотосекции идут основным цветом текста. */
.block--bg-image .block__subtitle,
.block--bg-image .block-hero__note,
.block--bg-image .block-steps__text,
.block--bg-image .block-steps__note,
.block--bg-image .block-features__note {
    color: var(--color-text);
}

/* Две соседние секции с одинаковым фоном разделяются линией, иначе они
   сливаются в одно полотно. */
.block--bg-surface + .block--bg-surface,
.block--bg-dark + .block--bg-dark {
    border-top: 1px solid var(--color-border);
}

.block__head {
    max-width: var(--measure);
}

.block__title {
    margin: 0;
}

/* Лид печатают не только блоки: свои шапки есть у каталога, блога, статьи,
   карточки сетки, галереи и контактов, и там абзац не попадает внутрь
   `.block__head` с его ограничением ширины. Предел стоит на самом абзаце —
   иначе на широком экране лид растягивался во всю ширину своей колонки
   и строка выходила за норму в 72 символа. */
.block__subtitle {
    max-width: var(--measure);
    color: var(--color-muted);
}

/* Герой: колонка текста и стеклянная карточка заявки справа. Секция выше
   обычной — это первый экран, ему нужен воздух под липкой шапкой. */
.block--hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.block-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-8);
    align-items: center;
}

.block-hero__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.block-hero__content {
    max-width: var(--measure);
}

.block-hero__notes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.block-hero__note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.block-hero__note svg {
    flex: none;
    color: var(--color-accent);
}

.block-hero__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.block-hero__form-title {
    margin: 0;
}

/* Полоса цифр: значения акцентом табличными цифрами. */
.block-stats__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Линии между счётчиками рисуются левой границей: у первого в ряду её нет,
   поэтому полоса не начинается и не заканчивается чертой. Правило зависит
   от числа колонок, а оно меняется по брейкпоинтам — см. раздел 15. */
.block-stats__list--divided .block-stats__item {
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border);
}

.block-stats__list--divided.grid--4 .block-stats__item:nth-child(4n + 1),
.block-stats__list--divided.grid--3 .block-stats__item:nth-child(3n + 1),
.block-stats__list--divided.grid--2 .block-stats__item:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
}

.block-stats__value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--color-accent);
    font-size: var(--font-size-counter);
    line-height: var(--line-height-counter);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.block-stats__unit {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: 600;
}

.block-stats__label {
    margin: var(--space-1) 0 0;
    font-weight: 500;
}

.block-stats__note {
    margin: 4px 0 0;
    color: var(--color-muted);
}

/* Текстовая секция: колонка текста и картинка сбоку. */
.block-text__split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.block-text__split--reverse .block-text__figure {
    order: -1;
}

.block-text__body--narrow {
    max-width: var(--measure);
}

.block-text__highlights {
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-text__figure,
.post-cover {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.block-text__figure img,
.post-cover img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-image);
    border: 1px solid var(--color-border);
}

.block-text__figure figcaption,
.post-cover figcaption {
    color: var(--color-muted);
}

/* Карточка тянется на всю ячейку сетки: в ряду они одной высоты, а подвал
   с ценой и строка «Подробнее» встают на одну линию. Карточка товара живёт
   в разделе 15 — её разметку делят каталог и подборка главной. */
.block-solutions__list > li {
    display: flex;
}

.block-solutions__card {
    width: 100%;
}

/* Решения: строка перехода внизу карточки, стрелка подаётся при наведении. */
.block-solutions__more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: auto 0 0;
    padding-top: var(--space-1);
    color: var(--color-accent);
    font-weight: 500;
}

.block-solutions__more svg {
    flex: none;
    transition: transform var(--transition);
}

.card--link:hover .block-solutions__more svg {
    transform: translateX(4px);
}

/* Карточки со значками: заголовок мельче, чем в карточке товара — в сетке 2×3
   иначе получается лестница из крупных строк. */
.block-features__item {
    gap: var(--space-2);
}

.block-features__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

.block-features__note {
    max-width: var(--measure);
    color: var(--color-muted);
}

/*
 * Шаги работы. Число колонок приходит из шаблона переменной --steps: столько же,
 * сколько шагов, но не больше пяти. Пунктирная линия между шагами живёт
 * на псевдоэлементе следующего шага и уходит влево, в промежуток сетки.
 * Шаг в первой колонке нарисовал бы её слева от списка — там её отрезает
 * overflow, поэтому шестой и следующие шаги переносятся без хвоста линии.
 */
.block-steps__list {
    --steps-gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
    gap: var(--space-5) var(--steps-gap);
    list-style: none;
    counter-reset: none;
}

.block-steps__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.block-steps__item + .block-steps__item::before {
    content: "";
    position: absolute;
    top: calc(var(--space-6) / 2);
    right: 100%;
    width: var(--steps-gap);
    border-top: 1px dashed var(--color-border);
}

.block-steps__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
}

/* Кружок шага: номер табличными цифрами либо значок, если номера выключены. */
.block-steps__number {
    display: grid;
    place-content: center;
    flex: none;
    width: var(--space-6);
    height: var(--space-6);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    font-size: var(--font-size-h4);
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.block-steps__icon {
    display: inline-flex;
    color: var(--color-muted);
}

.block-steps__title {
    margin: 0;
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

.block-steps__text {
    margin: 0;
    color: var(--color-muted);
}

.block-steps__duration {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: auto 0 0;
    padding-top: var(--space-1);
    color: var(--color-accent);
}

.block-steps__duration svg {
    flex: none;
}

.block-steps__note {
    max-width: var(--measure);
    color: var(--color-muted);
}

/*
 * Мозаика объектов. Ряд — шесть плиток на восьми колонках: первая и последняя
 * шире вдвое. Ровная раскладка идёт обычными классами .grid--3 / .grid--4,
 * поэтому базовое правило только снимает маркеры списка.
 */
.block-gallery__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-gallery__list--mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.block-gallery__list--mosaic .block-gallery__item:nth-child(6n + 1),
.block-gallery__list--mosaic .block-gallery__item:nth-child(6n) {
    grid-column: span 2;
}

.block-gallery__item {
    display: flex;
}

.block-gallery__tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-image);
}

.block-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Объект без обложки: та же ячеистая подложка, что у карточки товара. */
.block-gallery__tile--empty {
    background-color: var(--color-surface);
    background-image:
        repeating-linear-gradient(0deg, var(--color-border) 0 1px, transparent 1px 16px),
        repeating-linear-gradient(90deg, var(--color-border) 0 1px, transparent 1px 16px);
}

/* Подпись лежит поверх затемнения .zoomable::after, иначе при наведении
   название тонет в общей заливке. */
.block-gallery__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4) var(--space-2) var(--space-2);
    /* Съёмка дневная: под именем объекта может оказаться и небо, и светлая
       стена, поэтому подложка подписи идёт от плотного к прозрачному
       в три остановки, а не одной полупрозрачной заливкой. */
    background-image: linear-gradient(
        to top,
        var(--color-overlay-strong),
        var(--color-overlay) 45%,
        transparent
    );
    color: var(--color-text);
}

.block-gallery__title {
    font-weight: 600;
}

/* Город, площадь и срок под названием — тот же светлый цвет: серый на снимке
   не читается, а подложка подписи и без того тёмная. */
.block-gallery__meta {
    color: var(--color-text);
    opacity: 0.82;
}

/* Отзывы: подпись автора прижата к низу карточки автополем — в ряду
   фотографии и имена встают на одну линию при разной длине текста. */
.block-reviews__list > li {
    display: flex;
}

.block-reviews__card {
    width: 100%;
    margin: 0;
}

.block-reviews__rating {
    display: flex;
    gap: 4px;
    margin: 0;
    color: var(--color-accent);
}

.block-reviews__star--off {
    color: var(--color-border);
}

.block-reviews__text {
    margin: 0;
    padding: 0;
    border: 0;
}

.block-reviews__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: auto 0 0;
    padding-top: var(--space-1);
}

.block-reviews__photo,
.post-author__photo {
    flex: none;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.block-reviews__photo--letter,
.post-author__photo {
    display: grid;
    place-content: center;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-accent);
    font-size: var(--font-size-h4);
    font-weight: 600;
}

.block-reviews__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.block-reviews__name,
.post-author__name {
    font-weight: 600;
}

.block-reviews__meta {
    color: var(--color-muted);
}

/*
 * Вопросы и ответы: аккордеон и карточка «не нашли ответ» рядом. Без карточки
 * список остаётся узким — строка ответа не должна тянуться на весь контейнер.
 */
.block-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 336px);
    gap: var(--grid-gap);
    align-items: start;
}

.block-faq__layout--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 880px;
}

/* Вопрос — настоящий заголовок внутри <summary>: разметка остаётся осмысленной,
   а размер и начертание берутся от шапки аккордеона. */
.block-faq__question {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.block-faq__aside-title {
    margin: 0;
}

/* Карточку статьи блок «Статьи блога» рисует общей разметкой `.post-card`
   вместе с лентой блога — её стили лежат в разделе 17. */

/* Финальная плашка: крупная стеклянная карточка во всю ширину контейнера.
   Призыв сверху, форма в одну строку под ним — так полям хватает ширины. */
.block-cta__grid {
    display: grid;
    gap: var(--space-4);
}

/* Форма выключена: остаются призыв и кнопки, и они встают в один ряд. */
.block-cta__grid--compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: var(--space-5);
    align-items: center;
}

.block-cta__phone-line a {
    color: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.block-cta__note {
    max-width: var(--measure);
}

/* Сравнительная таблица: строки — объекты, столбцы — характеристики.
   Скругление и границу держит обёртка: у таблицы со схлопнутыми границами
   радиус не работает. Ниже 768px раскладка меняется на карточки (раздел 15). */
.block-compare__wrap {
    overflow-x: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.block-compare__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.block-compare__table th,
.block-compare__table td {
    padding: var(--space-2);
    vertical-align: top;
}

.block-compare__table thead th {
    background-color: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.block-compare__hint {
    display: block;
    margin-top: 4px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

.block-compare__table tbody tr + tr th,
.block-compare__table tbody tr + tr td {
    border-top: 1px solid var(--color-border);
}

/* Значения переносятся по словам: заказчик вправе написать в ячейке
   «Фасадные анкеры, работа промышленных альпинистов», и такая строка
   не должна выталкивать соседние столбцы за край таблицы. */
.block-compare__table tbody td {
    font-variant-numeric: tabular-nums;
    hyphens: none;
}

.block-compare__name {
    min-width: 200px;
    font-weight: 600;
}

.block-compare__name a {
    color: var(--color-text);
    text-decoration: none;
}

.block-compare__name a:hover {
    color: var(--color-accent);
}

.block-compare__note {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-weight: 400;
}

/* Отмеченная строка: акцент здесь — подложка ячеек, а не фон секции. */
.block-compare__row--accent th,
.block-compare__row--accent td {
    background-color: var(--color-accent-soft);
}

.block-compare__row--accent .block-compare__name,
.block-compare__row--accent .block-compare__name a {
    color: var(--color-accent);
}

.block-compare__caption {
    max-width: var(--measure);
}

/* ==========================================================================
   14. Шапка внутренней страницы
   Хлебные крошки, H1 раздела и вводный абзац. Своей вёрстки у секции почти
   нет: она пользуется классами блоков, поэтому заголовок раздела и заголовок
   секции выглядят одинаково. Отличается только верхний отступ — над H1
   уже стоят крошки, и полный отступ секции оторвал бы его от них.
   ========================================================================== */

.page-head {
    padding-top: var(--space-5);
}

/* ==========================================================================
   15. Общие карточки списков: сетка и статья
   Разметка карточек живёт в partials/product-card.php и post-card.php,
   а печатают их и внутренние страницы, и блоки главной. Поэтому правила
   остаются в общем файле, а вёрстка самих разделов вынесена в
   assets/css/pages-catalog.css и pages-blog.css.
   ========================================================================== */

/* Карточка товара: одна разметка на каталог и подборку главной. */
.product-list > li {
    display: flex;
}

.product-card {
    width: 100%;
}

.product-card__category {
    color: var(--color-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* Заголовок карточки мельче обычного .card__title: в ряду из трёх-четырёх
   названий крупный кегль даёт лестницу из разной высоты строк. */
.product-card__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

/* Описание обрезается по трём строкам, иначе карточки в ряду разъезжаются
   по высоте из-за разной длины текста. */
.product-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.product-card__specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.product-card__spec {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.product-card__spec-label {
    color: var(--color-muted);
}

.product-card__price--ask {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: 500;
    color: var(--color-muted);
}

.product-card__more {
    color: var(--color-accent);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* Карточка статьи: одна разметка на ленту, рубрику и блок главной.
   Подпись «Читать статью» прижата к низу — заголовки разной длины
   не разъезжают ряд. */
.post-list > li {
    display: flex;
}

.post-card {
    width: 100%;
}

.post-card__category {
    color: var(--color-accent);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.post-card__meta,
.post-meta {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* Рубрика и дата стоят подряд: без сжатия между ними полный шаг карточки,
   и они читаются как две разные строки, а не как одна подпись. */
.post-card__category + .post-card__meta {
    margin-top: calc(var(--space-2) * -1 + 4px);
}

.post-card__title {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

.post-card__lead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.post-card__more {
    color: var(--color-accent);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

/* ==========================================================================
   16. Поведение по брейкпоинтам
   Правила разделов, вынесенных в отдельные файлы, переехали туда вместе
   со своими медиазапросами: искать их здесь незачем.
   ========================================================================== */

@media (max-width: 1280px) {
    .site-header__inner {
        gap: var(--space-3);
    }

    .site-header__actions {
        gap: var(--space-2);
    }

    .site-header__phone-note {
        display: none;
    }
}

/* Колонка со знаком перестаёт помещаться в один ряд со ссылками: она уходит
   наверх во всю ширину, а четыре оставшиеся колонки делят строку поровну. */
@media (max-width: 1120px) {
    .site-footer__top {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5) var(--grid-gap);
    }

    .site-footer__brand {
        grid-column: 1 / -1;
        max-width: var(--measure);
    }
}

/*
 * Ниже 1024px горизонтальное меню не помещается: его заменяют бургер
 * и панель на весь экран. Телефон и кнопка замера остаются в шапке.
 */
@media (max-width: 1024px) {
    /* Карточка заявки перестаёт помещаться рядом с заголовком: она уходит
       под текст и растягивается во всю ширину колонки. */
    .block--hero {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .block-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .block-hero__content {
        max-width: none;
    }

    /* Форма встала под текстом: во всю ширину контейнера поля выглядели бы
       полосами через весь экран, поэтому карточка остаётся узкой. */
    .block-hero__form {
        max-width: 480px;
    }

    /* Сетка счётчиков стала двухколоночной — разделители пересчитываются
       под новое число колонок. */
    .block-stats__list--divided.grid--4 .block-stats__item,
    .block-stats__list--divided.grid--3 .block-stats__item {
        padding-left: var(--space-3);
        border-left: 1px solid var(--color-border);
    }

    .block-stats__list--divided.grid--4 .block-stats__item:nth-child(2n + 1),
    .block-stats__list--divided.grid--3 .block-stats__item:nth-child(2n + 1) {
        padding-left: 0;
        border-left: 0;
    }

    /* Текст и картинка перестают помещаться рядом: картинка уходит под текст,
       порядок «картинка слева» на узком экране теряет смысл. */
    .block-text__split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .block-text__split--reverse .block-text__figure {
        order: 0;
    }

    /* Пять шагов в ряд перестают читаться: список встаёт в столбик,
       а пунктир из горизонтального становится вертикальным — он идёт
       от кружка предыдущего шага к кружку следующего. */
    .block-steps__list {
        --steps-gap: var(--space-4);
        grid-template-columns: minmax(0, 1fr);
        gap: var(--steps-gap);
    }

    .block-steps__item + .block-steps__item::before {
        top: auto;
        right: auto;
        bottom: 100%;
        left: calc(var(--space-6) / 2);
        width: 0;
        height: var(--steps-gap);
        border-top: 0;
        border-left: 1px dashed var(--color-border);
    }

    /* Восемь колонок мозаики на планшете дают полоски вместо снимков:
       ряд ужимается вдвое, широкие плитки занимают всю строку. */
    .block-gallery__list--mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Сравнительная таблица держится таблицей до 768px включительно, а на
       планшете в портретной ориентации ей не хватало 20-40 пикселей и
       появлялась горизонтальная прокрутка. Поджимаем боковые поля ячеек:
       пять столбцов возвращают в строку 80px — этого хватает всем трём
       таблицам сайта. */
    .block-compare__table th,
    .block-compare__table td {
        padding: var(--space-2) var(--space-1);
    }

    /* Карточка «не нашли ответ» уходит под вопросы: рядом ей остаётся
       полоса в треть экрана, и текст в ней ломается по два слова. */
    .block-faq__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Кнопки перестают помещаться справа от призыва и уходят под него. */
    .block-cta__grid--compact {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
        align-items: start;
    }

    .site-nav {
        display: none;
    }

    .burger {
        display: inline-flex;
    }

    .site-menu {
        display: block;
    }

}

@media (max-width: 767.98px) {
    /* Счётчики встали в столбик: вертикальные линии сменяются горизонтальными,
       иначе полоса разъезжается на четыре одинокие черты слева. Номер колонки
       в селекторе нужен, чтобы перебить правила двухколоночной раскладки. */
    .block-stats__list--divided.grid--4 .block-stats__item,
    .block-stats__list--divided.grid--3 .block-stats__item,
    .block-stats__list--divided.grid--2 .block-stats__item {
        padding: var(--space-2) 0 0;
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }

    .block-stats__list--divided.grid--4 .block-stats__item:first-child,
    .block-stats__list--divided.grid--3 .block-stats__item:first-child,
    .block-stats__list--divided.grid--2 .block-stats__item:first-child {
        padding-top: 0;
        border-top: 0;
    }

    /* Мозаика окончательно становится столбиком. Сброс grid-column обязателен:
       без него широкая плитка тянулась бы на две колонки, и рядом появлялась
       бы вторая, неявная — снимки съезжали бы за край экрана. */
    .block-gallery__list--mosaic {
        grid-template-columns: minmax(0, 1fr);
    }

    .block-gallery__list--mosaic .block-gallery__item:nth-child(6n + 1),
    .block-gallery__list--mosaic .block-gallery__item:nth-child(6n) {
        grid-column: auto;
    }

    /* Сравнительная таблица перестраивается в карточки: строка становится
       карточкой, заголовок столбца печатается псевдоэлементом из `data-label`.
       Горизонтальная прокрутка таблицы на телефоне не годится — в неё
       не попадает половина данных, и о ней никто не догадывается. */
    .block-compare__wrap {
        overflow-x: visible;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .block-compare__table,
    .block-compare__table tbody,
    .block-compare__table tr,
    .block-compare__table th,
    .block-compare__table td {
        display: block;
    }

    .block-compare__table thead {
        display: none;
    }

    .block-compare__table tbody tr {
        padding: var(--space-2);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
    }

    .block-compare__table tbody tr + tr {
        margin-top: var(--space-2);
    }

    .block-compare__table tbody tr th,
    .block-compare__table tbody tr td {
        padding: var(--space-1) 0;
    }

    /* Разделители строк таблицы больше не нужны: строки разошлись карточками. */
    .block-compare__table tbody tr + tr th,
    .block-compare__table tbody tr + tr td {
        border-top: 0;
    }

    .block-compare__name {
        min-width: 0;
        padding-top: 0;
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-h4);
        line-height: var(--line-height-h4);
    }

    .block-compare__table tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
        white-space: normal;
        text-align: right;
    }

    .block-compare__table tbody tr td + td {
        border-top: 1px dashed var(--color-border);
    }

    .block-compare__table tbody td::before {
        content: attr(data-label);
        flex: none;
        max-width: 50%;
        color: var(--color-muted);
        font-variant-numeric: normal;
        text-align: left;
    }

    /* Отмеченная строка красится целиком: подложка отдельных ячеек внутри
       карточки давала бы полосы с зазорами по краям. */
    .block-compare__table tbody tr.block-compare__row--accent {
        background-color: var(--color-accent-soft);
        border-color: var(--color-accent);
    }

    .block-compare__row--accent th,
    .block-compare__row--accent td {
        background-color: transparent;
    }

    .site-header__cta {
        height: 40px;
        padding: 0 var(--space-2);
        font-size: 14px;
    }

    .site-footer__inner {
        padding-top: var(--space-6);
    }

    .site-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4) var(--grid-gap);
    }

    .modal {
        padding: var(--space-2);
    }

    .modal__dialog {
        padding: var(--space-3);
    }

    .lightbox {
        padding: var(--space-6) var(--space-2) var(--space-8);
    }

    /* На узком экране стрелки не влезают по бокам снимка: они переезжают
       вниз, к счётчику, и остаются в зоне большого пальца. */
    .lightbox__nav {
        top: auto;
        bottom: var(--space-2);
        width: 44px;
        height: 44px;
    }

    .lightbox__nav--prev {
        left: calc(50% - 64px);
    }

    .lightbox__nav--next {
        right: calc(50% - 64px);
    }

    .lightbox__image {
        max-height: 62vh;
    }

    .alerts {
        top: auto;
        right: var(--gutter);
        bottom: var(--space-2);
        left: var(--gutter);
        width: auto;
    }

}

/* На узком экране в строке остаётся знак и телефон: кнопку замера
   подхватывает мобильное меню, где она идёт во всю ширину. */
/* Ниже 480px в строку шапки должны уместиться знак, телефон и бургер:
   кнопка замера уходит в меню, остальное ужимается по шрифту и отступам. */
@media (max-width: 480px) {
    /* Название логотипа длинное: на 360px оно ужимается вместе со знаком,
       иначе телефон и бургер выдавливаются из строки. */
    .brand__name--stacked {
        font-size: 12px;
        line-height: 15px;
        letter-spacing: 0.02em;
    }

    .brand__mark {
        width: 40px;
        height: 21px;
    }

    .site-header__inner,
    .site-header__actions {
        gap: var(--space-1);
    }

    .site-header__phone-number {
        font-size: 14px;
    }

    .site-header__cta {
        display: none;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Длинный ряд страниц на 360px не помещается: кнопки ужимаются,
       лишние номера убирает сам список — сервер отдаёт окно из пяти. */
    .pagination__link {
        min-width: 40px;
        height: 40px;
        padding: 0 var(--space-1);
    }

    .accordion__head {
        padding: var(--space-2);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
    }

    .accordion__body {
        padding: 0 var(--space-2) var(--space-2);
    }
}