/* =========================================================================
   layout.css — сквозные блоки страницы: шапка, меню, переключатель языка,
   футер, cookie-баннер, хлебные крошки и страницы каркаса.
   ========================================================================= */

/* ---------- Шапка -------------------------------------------------------- */

/* position: fixed — шапка остаётся на месте при прокрутке. Она выпадает из
   потока документа, поэтому сразу под ней в разметке лежит распорка
   .header-placeholder той же высоты. Тот же приём у эталона. */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--c-bg);
    transition: box-shadow 0.2s var(--ease);
}

/* Класс вешает site.js, когда страница прокручена: тень отделяет шапку от
   контента. Пока баннеров нет, шапка всегда белая; прозрачный режим поверх
   баннера появится на этапе 3. */
.header.is-scrolled {
    box-shadow: 0 1px 0 var(--c-border);
}

.header-placeholder {
    height: var(--header-h);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--header-h);
}

/* min-height — зона касания: картинка логотипа высотой 16px, а ссылка
   на главную должна ловить палец не хуже кнопки (WCAG 2.2, 2.5.8). */
.header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
}

.header__logo img {
    width: 112px;
}

@media (min-width: 768px) {
    .header__logo img { width: 142px; }
}

/* Меню: на телефоне выезжает панелью сверху, с 1080px — обычная строка. */
.header__nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: none;
    padding: 8px var(--gutter) 16px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}

.header__nav.is-open {
    display: block;
}

.header__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header__link {
    display: block;
    padding: 12px 0;
    font-size: var(--fs-nav);
    font-weight: 700;
    line-height: var(--lh-nav);
    color: var(--c-text);
}

/* aria-current="page" браузер отдаёт скринридеру, а мы заодно подчёркиваем
   текущий раздел визуально — одно состояние, два способа его увидеть. */
.header__link[aria-current] {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.header__addons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (min-width: 1080px) {
    .header__nav {
        position: static;
        display: block;
        padding: 0;
        border: 0;
        margin-left: 24px;
    }

    .header__list {
        flex-direction: row;
        gap: 24px;
    }

    .header__link {
        padding: 16px 0;
    }
}

/* ---------- Бургер ------------------------------------------------------- */

.burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
}

.burger__line {
    height: 2px;
    background: var(--c-text);
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.burger[aria-expanded="true"] .burger__line:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

/*
   С 1080px меню стоит в шапке строкой, бургер не нужен.

   Правило обязано идти ПОСЛЕ основного .burger выше. Медиазапрос не
   добавляет правилу веса: у обоих одинаковая специфичность, и побеждает то,
   что записано ниже. До этой правки «display: none» стоял в медиазапросе
   раньше по файлу, «display: flex» его перекрывал, и на компьютере бургер
   был виден: нажатие превращало полоски в крестик, а выпадать было нечему —
   меню и так открыто строкой (замечание владельца, 07.10).
*/
@media (min-width: 1080px) {
    .burger { display: none; }
}

/* ---------- Переключатель языка ------------------------------------------ */

/* position: relative на обёртке нужен, чтобы выпадающий список позиционировался
   относительно кнопки, а не всей страницы. */
.lang {
    position: relative;
}

.lang__button {
    padding: 8px 10px;
    font-size: var(--fs-nav);
    font-weight: 700;
    border-radius: 16px;
}

.lang__button:hover {
    background: var(--c-surface);
}

.lang__list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    padding: 8px 0;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* hidden — обычный HTML-атрибут: список скрыт, пока JS его не откроет.
   Работает и без JS, если браузер не выполнил скрипт. */
.lang__list[hidden] {
    display: none;
}

.lang__item {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
}

.lang__item:hover {
    background: var(--c-surface);
    text-decoration: none;
}

.lang__item.is-current {
    font-weight: 700;
}

/* ---------- Хлебные крошки ----------------------------------------------- */

.breadcrumbs {
    padding-block: 12px;
    font-size: 13px;
    color: var(--c-muted);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/*
   Зона касания не меньше 24px по высоте — критерий WCAG 2.2 «2.5.8». Замер
   на 375px: ссылки крошек были высотой 15px, в них промахивались пальцем.
   Текст не растёт, растёт только кликабельная зона за счёт padding;
   inline-block нужен, потому что у строчной ссылки вертикальный padding
   не раздвигает строку. Тот же приём ниже у ссылок футера.
*/
.breadcrumbs a {
    display: inline-block;
    padding-block: 4px;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--c-border);
}

/* ---------- Страницы каркаса --------------------------------------------- */

.hero-stub {
    padding-block: 48px;
    background: var(--c-surface);
}

.hero-stub__eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-brand);
}

.hero-stub__title {
    margin-top: 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-heading);
}

@media (min-width: 768px) {
    .hero-stub { padding-block: 80px; }
    .hero-stub__title { font-size: 40px; }
}

.tiles {
    padding-block: 40px;
}

/* auto-fit + minmax: браузер сам решает, сколько колонок влезает.
   Одно правило вместо трёх медиазапросов. */
.tiles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--grid-gap);
}

.tile__link {
    display: block;
    height: 100%;
    padding: 24px;
    background: var(--c-surface);
    border-radius: 8px;
    transition: transform 0.2s var(--ease);
}

.tile__link:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.tile__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-heading);
}

.tile__text {
    margin-top: 8px;
    color: var(--c-muted);
}

.tile__count {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--c-muted);
}

.category,
.content,
.error {
    padding-block: 24px 64px;
}

.content__body {
    max-width: 720px;   /* строка длиннее ~80 знаков читается заметно хуже */
    margin-top: 24px;
}

/*
   Ритм текста: любой блок после предыдущего — с отступом. Одно правило
   вместо пар «p + p», «h2 + p», «ul + p»: раньше абзац под заголовком
   раздела прилипал к нему вплотную (политика, проверка 07.10).
*/
.content__body > * + * {
    margin-top: 12px;
}

/* Длинный документ — политика конфиденциальности, условия использования.
   Тело приходит из базы готовой разметкой, поэтому стили вешаются на сами
   теги внутри .content__body, а не на классы: расставлять классы руками
   в редакторе админки сотрудник не будет. */

.content__body h2 {
    margin-top: 32px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-heading);
}

.content__body h3 {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-heading);
}

/* В base.css маркеры списков сняты для меню и сеток. В тексте страницы
   они нужны: без них пункты политики выглядели как сдвинутые абзацы. */
.content__body ul {
    list-style: disc;
}

.content__body ol {
    list-style: decimal;
}

.content__body ul,
.content__body ol {
    margin-top: 12px;
    /* Маркеры внутри отступа, а не за краем текста: иначе на телефоне они
       вылезают из контейнера. */
    padding-left: 24px;
}

.content__body li + li {
    margin-top: 8px;
}

.content__body a {
    color: var(--c-heading);
    text-decoration: underline;
}

/* Дата и номер редакции документа — служебная строка над текстом. */
.legal-meta {
    font-size: 14px;
    color: var(--c-muted);
}

/*
   Незаполненное место в юридическом тексте: наименование юридического лица,
   почта, телефон, хостинг-провайдер. Подсвечено намеренно ярко — такой текст
   нельзя выпустить в продакшен незамеченным, и лучше увидеть жёлтое пятно
   на своей же странице, чем узнать о пропуске от проверяющего.

   Когда пропуски заполнят, класс просто исчезнет из разметки вместе
   со скобками.
*/
.legal-blank {
    padding: 1px 6px;
    border-radius: 4px;
    background: #fff3bf;
    box-shadow: inset 0 0 0 1px #e8c547;
    font-weight: 600;
    color: #6b4e00;
}

.error__code {
    font-size: 64px;
    font-weight: 800;
    color: var(--c-border);
    line-height: 1;
}

.error__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block: 24px;
}

.error__links a {
    padding: 8px 16px;
    background: var(--c-surface);
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Футер -------------------------------------------------------- */

.footer {
    padding-block: 40px 24px;
    border-top: 1px solid var(--c-border);
    font-size: 14px;
}

.footer__disclaimer {
    color: var(--c-muted);
    font-size: 12px;
    line-height: 1.6;
}

.footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.footer__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--c-heading);
}

.footer__list {
    margin-top: 12px;
    display: grid;
    gap: 4px;
    color: var(--c-muted);
}

/* Зона касания ссылок футера — тот же приём, что у хлебных крошек:
   inline-block плюс вертикальный padding, текст остаётся прежним. Промежуток
   в списке уменьшен на те же 4px, чтобы футер не стал выше. */
.footer__list a,
.footer__social a,
.footer__legal-list a,
.footer__langs a {
    display: inline-block;
    padding-block: 4px;
}

.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.footer__legals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    color: var(--c-muted);
    font-size: 12px;
}

.footer__legal-list,
.footer__langs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer__langs .is-current {
    font-weight: 700;
    color: var(--c-heading);
}

/* ---------- Cookie-баннер ------------------------------------------------ */

.cookie {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-cookie);
    /* Полупрозрачная подложка с размытием — как у эталона. backdrop-filter
       поддерживают не все браузеры, поэтому под ним лежит плотный цвет. */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-border);
}

.cookie__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 12px;
}

.cookie__text {
    font-size: 13px;
    color: var(--c-text);
}

.cookie__link {
    margin-left: 6px;
    text-decoration: underline;
}

.cookie__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ---------- Поиск -------------------------------------------------------- */

/*
   Лупа в шапке. Квадрат 40×40 — та же зона нажатия, что у бургера; круглая
   подсветка при наведении — как у кнопки языка рядом.
*/
.header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--c-text);
}

.header__search:hover,
.header__search[aria-expanded="true"] {
    background: var(--c-surface);
}

/*
   Панель поиска лежит внутри шапки и позиционируется от неё: шапка
   position: fixed, поэтому top: 100% — это ровно под её нижним краем,
   где бы ни была прокрутка. Высота ограничена экраном, а содержимое
   прокручивается внутри — на телефоне с клавиатурой это важно.
   100dvh — высота экрана с учётом адресной строки мобильного браузера,
   100vh перед ней — запасной вариант для старых браузеров.
*/
.search-panel {
    position: absolute;
    inset: 100% 0 auto 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* Затемнение страницы под панелью. Внутри шапки z-index: -1 кладёт его
   под саму шапку, но над страницей: шапка и панель остаются яркими. */
.search-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.32);
}

/* hidden — обычный HTML-атрибут, но у элемента с заданным display он
   перестаёт прятать. Правило делает «скрыто» сильнее. */
.search-panel[hidden],
.search-backdrop[hidden],
.search-panel [hidden] {
    display: none;
}

/* Содержимое панели уже страницы: строка поиска на 1440px во всю ширину
   читается плохо, взгляд теряет начало и конец. */
.search-panel__inner {
    max-width: 960px;
    padding-block: 16px 28px;
}

/*
   Поле поиска — без рамки, с толстой линией снизу, как у эталона.
   Видимый фокус дают не обводкой поля, а цветом линии через :focus-within:
   строка целиком становится «активной».
*/
.search-panel__form {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid var(--c-border);
    transition: border-color 0.2s var(--ease);
}

.search-panel__form:focus-within {
    border-bottom-color: var(--c-heading);
}

.search-panel__icon {
    flex: 0 0 auto;
    color: var(--c-muted);
}

.search-panel__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: var(--c-text);
    font: inherit;
    font-size: 18px;
}

.search-panel__input:focus {
    outline: none;
}

/* Свой крестик очистки у type="search" в Chrome и Safari: у нас уже есть
   кнопка закрытия, второй крестик рядом путал бы. */
.search-panel__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-panel__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.search-panel__close:hover {
    background: var(--c-surface);
}

.search-panel__label {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.search-panel__empty {
    margin-top: 16px;
    font-size: 15px;
}

/* Подсказки — сетка: две колонки на телефоне, три с 768px. То же деление,
   что у блока «Популярное» эталона (col-xs-6 / col-xl-4). */
.search-panel__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .search-panel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .search-panel__input { font-size: 20px; }
}

.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px;
    border-radius: 8px;
}

.search-item:hover {
    background: var(--c-surface);
    text-decoration: none;
}

.search-item__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--c-surface);
}

/* contain, а не cover: товар на прозрачном фоне показываем целиком. */
.search-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-item__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-heading);
    overflow-wrap: anywhere;
}

.search-item__category {
    margin-top: 2px;
    font-size: 12px;
    color: var(--c-muted);
}

.search-panel__sections,
.search-page__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Разделы — «таблетки», как ссылки на категории на странице 404. */
.search-panel__sections a,
.search-page__sections a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 18px;
    background: var(--c-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-heading);
}

.search-panel__more {
    margin-top: 12px;
}

/* ---------- Страница результатов поиска ---------------------------------- */

.search-page {
    padding-block: 8px 64px;
}

.search-page__form {
    display: flex;
    gap: 8px;
    max-width: 640px;
    margin-top: 20px;
}

.search-page__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--c-border);
    border-radius: 22px;
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
    font-size: 16px;      /* меньше 16px — Safari на iOS приближает страницу */
}

.search-page__input:focus-visible {
    outline: 2px solid var(--c-heading);
    outline-offset: 1px;
    border-color: var(--c-heading);
}

.search-page__count {
    margin-top: 16px;
    font-size: 14px;
    color: var(--c-muted);
}

.search-page__empty {
    margin-top: 24px;
}

.search-page__empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--c-heading);
}

.search-page__heading {
    margin-top: 32px;
}

/* ---------- Страница контактов ------------------------------------------- */

/*
   Две колонки с 1080px: текст и контакты слева, форма справа. Правая
   колонка не шире 560px — поле ввода шире этого читается хуже, а пустое
   место отдаётся тексту. На узком экране — одна колонка, форма под
   контактами.
*/
.contact-layout {
    display: grid;
    gap: 0 56px;
    padding-bottom: 64px;
}

.contact-layout__main {
    padding-bottom: 0;
}

.contact-layout__form {
    padding-block: 32px 0;
}

@media (min-width: 1080px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
        align-items: start;
    }

    .contact-layout__form {
        padding-top: 24px;
    }
}

/* В правой колонке (с 1080px) форма занимает её ширину целиком. На
   планшете колонка одна, и форма шириной во весь экран (976px) читалась
   плохо — там остаётся обычное ограничение 640px. */
@media (min-width: 1080px) {
    .contact-layout__form .request__box {
        max-width: none;
    }
}

/* Карточка контактов филиала. */
.contacts-card {
    max-width: 560px;
    margin-top: 32px;
    padding: 24px;
    border-radius: 12px;
    background: var(--c-surface);
}

.contacts-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-heading);
}

.contacts-card__list {
    display: grid;
    gap: 16px;
    margin: 16px 0 0;
}

/* Подпись над значением на телефоне, слева от него — с 768px. */
.contacts-card__row {
    display: grid;
    gap: 2px 16px;
}

@media (min-width: 768px) {
    .contacts-card__row { grid-template-columns: 120px minmax(0, 1fr); }
}

.contacts-card dt {
    font-size: 13px;
    color: var(--c-muted);
}

.contacts-card dd {
    margin: 0;
    color: var(--c-text);
}

.contacts-card dd a,
.service-center__phone,
.service-centers__empty a {
    color: var(--c-heading);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contacts-card__map,
.service-center__map {
    display: inline-block;
    padding-block: 4px;
    font-size: 14px;
    color: var(--c-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contacts-card__map {
    margin-left: 8px;
}

.contacts-card__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.contacts-card__social a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--c-bg);
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Сервисные центры --------------------------------------------- */

.service-centers {
    margin-top: 40px;
}

.service-centers__empty {
    max-width: 720px;
    color: var(--c-muted);
}

/* auto-fill + minmax: столько колонок по 260px, сколько влезает, —
   одна на телефоне, две на планшете, три-четыре на компьютере. */
.service-centers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--grid-gap);
}

.service-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px;
    border-radius: 12px;
    background: var(--c-surface);
}

.service-center__city {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-heading);
}

.service-center__hours {
    font-size: 14px;
    color: var(--c-muted);
}