/* ── СЛОЙ 2: БАЗА ───────────────────────────────────────────────────────
   Глобальное поведение документа и правила, не привязанные к конкретному
   блоку: прокрутка, фокус, календарь-виджет, сброс галереи, общие
   переключатели для prefers-reduced-motion.

   Порядок слоёв и таблица точек перелома — в шапке tokens.css. */

/* ── Контейнер страницы ───────────────────────────────────────────────
   Ширина контентной колонки сайта — токен --shell-max (tokens.css). Тот же
   набор утилит (mx-auto w-full max-w-[1280px] px-5 md:px-8) стоял в разметке
   двадцать раз в четырнадцати шаблонах — менять ширину или поля приходилось
   обходом по всем файлам.

   Имя .shell, а не .container: .container занят замороженной сборкой, там
   это Tailwind-контейнер со своими максимумами на каждой точке перелома.

   Правило стоит первым среди наших намеренно: прежние утилиты лежали в
   @layer utilities сборки и проигрывали любому нашему безслойному правилу,
   так что всё написанное дальше по-прежнему перебивает контейнер. */
.shell {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Та же ширина без полей — для рамок героев, которые лежат внутри секции со
   своими px-5/md:px-8 (главная, «О компании», «Контакты», страницы ошибок).
   Раньше там стояла утилита max-w-[1280px] из замороженной сборки; утилиты
   на 1480 в ней нет, и ширина всё равно должна идти из одного токена. */
.frame-max {
    max-width: var(--shell-max);
}

@media (min-width: 768px) {
    .shell {
        padding-inline: 32px;
    }
}

/* Правила фронта, которых нет в готовом билде демо (main.css собран JIT-ом по
   их разметке, дописать в него утилиты мы не можем).

   Здесь только то, что нельзя выразить существующими классами. Всё остальное
   по-прежнему берётся из main.css — см. VerstkaClassesTest. */

/* Тач-скролл всего сайта.

   В демо-билде есть `html,body{overflow-x:hidden}` — от горизонтального
   переполнения. Но по спецификации, когда одна ось `hidden`, другая
   вычисляется в `auto`: html и body становятся контейнерами прокрутки, и на
   тач-экранах вертикальный скролл вьюпорта переставал работать вовсе (палец
   не прокручивал страницу). `clip` режет горизонтальное переполнение так же,
   но контейнер прокрутки не создаёт — вьюпорт скроллится нативно. site.css
   грузится после main.css, поэтому переопределяет его при равной
   специфичности. */
html,
body {
    overflow-x: clip;
}

/* Липкий сайдбар брони: sticky (lg:top-24 в разметке). Внутренний скролл
   (max-height + overflow-y) убран по просьбе автора (01.09) — блок компактный
   (форма + смета), в экран помещается; на очень низких вьюпортах низ уезжает
   вместе со страницей, что предпочтительнее внутренней полосы прокрутки. */

/* Подсветка «Минимальный срок» при выборе меньше нормы (задача автора B12):
   дату не вычёркиваем, а подсвечиваем подпись и сбрасываем «по» в JS. */
/* Кегль и цвет были утилитами text-xs text-fg-subtle в разметке
   (рефакторинг 13.09); правило компонента и так жило здесь. */
.min-nights-note {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    letter-spacing: 0;
    color: var(--fg-subtle);
    transition: color .15s ease;
}

.min-nights-note.is-warn { color: var(--danger, #dc2626); font-weight: 600; }

/* Поле под мобильным баром брони.

   Бар зафиксирован у нижней кромки и перекрывал последние элементы страницы:
   в подвале карточки объекта телефон и почта оказывались под ним, и нажать их
   на телефоне было нельзя (QA 28.08). Бар живёт только на карточке объекта и
   только ниже lg, поэтому и поле даём по тому же условию — :has проверяет, что
   бар на странице есть. */
@media (max-width: 1023px) {
    body:has([data-role="mobile-booking-bar"]) {
        /* 96px сам бар + запас: при 6.5rem последняя ссылка подвала
           («Политика конфиденциальности») всё ещё попадала под него. */
        padding-bottom: 128px;
    }
}

@keyframes district-pulse {
    0% { transform: scale(1); opacity: .45; }
    70% { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

.office-veil {
    background: linear-gradient(to right, rgba(19, 23, 27, .55) 0%, rgba(19, 23, 27, .25) 46%, rgba(19, 23, 27, 0) 72%);
}

.office-addr {
    left: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(19, 23, 27, .65);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.office-addr svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

/* На телефоне плашка не шире кадра: адрес длинный и переносится по ширине. */
.office-addr {
    right: 20px;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .office-addr {
        left: 32px;
        right: auto;
        bottom: 32px;
        padding: 16px 22px;
        font-size: 18px;
        /* Адрес двумя строками по переносу из базы (просьба автора 17.09):
           дом/этаж/комната и район/город. На телефоне перенос схлопывается в
           пробел, и строки ложатся по ширине плашки. */
        white-space: pre-line;
    }

    .office-addr svg {
        width: 26px;
        height: 26px;
    }
}

/* Растяжку списка каналов по высоте формы сняли (правка автора 04.09): каналов
   стало три, и делённая на три высота формы давала строки по 200px. Пустоту под
   списком закрывает плашка доступности, а раскладку секции целиком автор
   выбирает по мокапам. */

/* Медленное приближение кадров — слой .hero-zoom (и .hero-zoom--view для
   кадра ниже первого экрана), см. pages.css; с 18.09 класс не на <img>. */

@keyframes btn-shine {
    to {
        transform: translateX(320%) skewX(-12deg);
    }
}

/* Палитра переехала в tokens.css (рефакторинг 11.09) — там же порядок
   подключения файлов и таблица точек перелома. */

/* Тёмная тема: иконка переключения на светлую тему в шапке — белая
   (просьба автора 07.09); на светлой остаётся приглушённой, как соседи. */
[data-theme="dark"] [data-role="theme-toggle"] {
    color: #FFFFFF;
}

/* Шапка: текущая страница в меню — на подложке (правка автора 04.09, мокап
   «Меню 1»). Пункты теперь полным цветом текста, и цветом текущую не отличить;
   подложка та же, что на ховере. Своё правило, потому что в замороженном
   билде есть только hover:bg-surface-hover, без обычного bg-surface-hover. */
.nav-link.is-current {
    background: var(--surface-hover);
}

/* ── Текстовые ссылки со стрелкой: ховер-подложка (выбор автора 04.09, мокап
   «Ссылка 4») ─────────────────────────────────────────────────────────────
   За ссылкой проявляется мягкая подложка tint с отступами наружу — та же
   логика, что у пунктов меню в шапке; цвет уходит в ховер акцента, стрелка
   сдвигается на 3px. Отрицательные поля компенсируют паддинг, чтобы текст
   ссылки не сдвинулся с места относительно соседей. */
.lnk-pill {
    padding: 6px 10px;
    margin: -6px -10px;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
}

.lnk-pill .lnk-arrow {
    display: inline-block;
    transition: transform .25s cubic-bezier(.25, 1, .5, 1);
}

@media (hover: hover) {
    .lnk-pill:hover {
        background: var(--surface-hover);
        color: var(--accent-hover);
    }

    .lnk-pill:hover .lnk-arrow {
        transform: translateX(3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lnk-pill .lnk-arrow {
        transition: none;
    }
}

/* Обводка фокуса на полях: по клику не нужна, по клавиатуре нужна
   (правка автора 07.09; пример — даты в фильтре каталога).

   Сборка вёрстки задаёт единый фирменный фокус через :focus-visible, и для
   кнопок и ссылок этого хватает: Chrome не включает :focus-visible на клик
   мышью. А вот текстовым полям, датам и селектам браузеры включают его и на
   клик — при обычном заполнении формы поле обводилось синим, хотя человек и
   так видит, куда поставил курсор.

   Поэтому смотрим на способ ввода: site.js помечает <html> атрибутом
   data-pointer, пока человек работает мышью, и снимает метку на Tab и другие
   навигационные клавиши. Обводку гасим только под этой меткой — тот, кто
   ходит табом, видит фокус как раньше. Печать в поле метку не снимает, иначе
   рамка появлялась бы посреди набора текста. */
html[data-pointer] :where(input, select, textarea):focus-visible {
    outline: none;
}

/* minmax 130: на телефоне (контент карточки ~300px) плитки встают в два
   столбца, а не столбиком (правка автора 08.09); на десктопе как раньше. */
.obj-specs,
.obj-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Содержимое плиток по центру (правка автора 08.09): у характеристик
   иконка в одну строку с числом, подпись под ними; у правил подпись над
   значением. */
.obj-spec,
.obj-rule {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    text-align: center;
    padding: 14px 16px;
    border-radius: 12px;
    /* Светлее подложки tint (выбор автора 08.09, мокап «Вариант 5»): почти
       белый #F6F7F8 (65% фона страницы к поверхности) и волосяная рамка 6%
       текста, чтобы плитка не расплывалась на белой карточке. Через токены,
       поэтому на тёмной теме ложится сама. */
    background: color-mix(in srgb, var(--bg) 65%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}

/* Плитки правил без иконок (правка автора 08.09): одна колонка. */
.obj-rule {
    grid-template-columns: 1fr;
    column-gap: 0;
}

.obj-spec > svg,
.obj-rule > svg {
    grid-row: 1;
    grid-column: 1;
    width: 20px;
    height: 20px;
    color: var(--fg);
}

.obj-spec > b {
    grid-row: 1;
    grid-column: 2;
}

.obj-spec > span {
    grid-row: 2;
    grid-column: 1 / -1;
}

.obj-spec > b,
.obj-rule > dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
}

.obj-spec > span,
.obj-rule > dt {
    font-size: 13px;
    color: var(--fg-muted);
}

.obj-extras {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.obj-extra {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px 16px;
    align-items: center;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--fg);
}

.obj-extra + .obj-extra {
    border-top: 1px solid var(--border);
}

.obj-extra-name {
    min-width: 0;
}

.obj-tag {
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--tint);
    font-size: 12px;
    color: var(--fg-muted);
    white-space: nowrap;
}

.obj-extra-sum {
    min-width: 96px;
    text-align: right;
    font-weight: 600;
}

/* На узком экране метка уходит под название, сумма остаётся справа. */
@media (max-width: 479px) {
    .obj-extra {
        grid-template-columns: 1fr auto;
    }

    .obj-tag {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .obj-extra-sum {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
}

/* ── Кегли для широкой колонки (решения автора 18.09) ─────────────────
   Колонка стала 1480 вместо 1280, и прежние кегли на ней читались мельче.
   Подняты точечно, по таблице автора, — и ТОЛЬКО от 1280px: ниже колонка
   упирается во вьюпорт, телефон и планшет остаются как в main (уточнение
   автора 18.09). Шкала на десктопе: 12 примечания · 14 подписи · 16 текст и
   всё нажимаемое · 18 лиды и заголовки карточек; дробных кеглей нет.
   Блок стоит последним в файле нарочно: при равной специфичности побеждает
   он. */
@media (min-width: 1280px) {
    /* «Смотреть все объекты» 14→16. */
    .lnk-pill {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
    }

    /* Страница объекта: подписи плиток фактов и правил 13→14, доплаты 15→16. */
    .obj-spec > span,
    .obj-rule > dt {
        font-size: 14px;
    }

    .obj-extra {
        font-size: 16px;
    }
}