/* site-2.css — общие дополнения ко всем страницам.

   Подключается после atp3-138.css. Цвета и шрифты — переменные :root
   из atp3.css, поэтому новые элементы выглядят частью того же сайта.
   Номер в имени меняется при каждой правке: хостинг кэширует CSS
   на неделю, и под старым именем браузер показал бы старые стили.

   1. Кнопка звонка в мобильной шапке
   2. Нижняя панель связи на телефоне
   3. Ссылки на технику в подвале
   4. Мелочи: список в одну колонку, таблица моделей
   5. Переход между страницами
   6. Окно с формой заявки
   7. Свёрнутый блок с кнопкой «Показать» */

/* ── 1. Кнопка звонка в мобильной шапке ─────────────────────────
   На телефоне в шапке был только бургер: номер находился у нижнего
   края первого экрана, следующий — через пять тысяч пикселей. */
.hdr-mob { display: flex; align-items: center; gap: .375rem; }
.hdr-call {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 9999px;
}
.hdr-call svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) {
    .hdr-mob { display: none; }
}

/* ── 2. Нижняя панель связи ─────────────────────────────────────
   Только на телефоне и планшете: позвонить, написать в MAX, оставить
   заявку — одним касанием с любого места страницы. */
.mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: .5rem;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    background: var(--ink);
    box-shadow: 0 -8px 24px -12px rgba(var(--shadow-rgb), .5);
}
.mbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.875rem;
    border-radius: var(--r-md);
    font-weight: 700;
    font-size: .875rem;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
}
.mbar a:active { transform: translateY(1px); }
.mbar a:focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; }
.mbar svg { width: 1.125rem; height: 1.125rem; flex: none; }
.mbar .mbar-call {
    background: linear-gradient(155deg, var(--o-400) 0, var(--o-btn) 55%, var(--o-600) 100%);
}
/* Место под панель: подвал и кнопка «наверх» не уходят под неё */
@media (max-width: 1023px) {
    body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
    #to-top { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
    .mbar { display: none; }
}
@media print {
    .mbar, .hdr-call { display: none; }
}

/* ── 3. Ссылки на технику в подвале ───────────────────────────── */
.ft-tech {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .875rem;
    line-height: 1.5;
}
.ft-tech b { color: #fff; font-weight: 700; }
.ft-tech a { color: inherit; text-decoration: none; padding: .25rem 0; }
.ft-tech a:hover { color: #fff; }

/* ── 4. Мелочи ───────────────────────────────────────────────── */
/* Список с галочками в одну колонку — внутри половины .sp-split */
.sp-checks.sp-checks--1 { grid-template-columns: minmax(0, 1fr); }
.sp-checks b { color: var(--text-strong); font-weight: 700; }

/* Таблица моделей: масса не переносится, на телефоне таблица прокручивается */
.sp-table--models td:nth-child(3) { white-space: nowrap; }

/* Таблицы моделей на телефоне: строка складывается в карточку, у каждой
   ячейки — подпись из data-label. Четыре колонки в 375 px не помещаются. */
@media (max-width: 640px) {
    .sp-table.sp-table--stack thead { display: none; }
    .sp-table.sp-table--stack,
    .sp-table.sp-table--stack tbody,
    .sp-table.sp-table--stack tr,
    .sp-table.sp-table--stack td { display: block; width: 100%; }
    .sp-table.sp-table--stack tr { padding: .875rem 0; border-bottom: 1px solid var(--line-2); }
    .sp-table.sp-table--stack tr:first-child { padding-top: 0; }
    .sp-table.sp-table--stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
    .sp-table.sp-table--stack td { padding: .125rem 0; border: 0; white-space: normal; }
    .sp-table.sp-table--stack td + td { padding-left: 0; }
    .sp-table.sp-table--stack td::before {
        content: attr(data-label) ": ";
        font-size: .8125rem;
        font-weight: 600;
        color: var(--text-mut);
    }
    .sp-table.sp-table--stack td:first-child { margin-bottom: .25rem; font-size: 1rem; }
    .sp-table.sp-table--stack td:first-child::before { content: none; }
}

/* ── 5. Переход между страницами ─────────────────────────────
   Встроенный в браузер View Transitions API для обычных переходов по
   ссылкам: старая страница коротко уходит вверх и гаснет, новая
   проявляется снизу. Без JavaScript и без задержки загрузки.
   Шапка и нижняя панель в анимации не участвуют: на всех страницах они
   одинаковые и остаются на месте, а оранжевая «таблетка» в меню
   доезжает до нового раздела своей анимацией (boot.js + atp3.css).
   Работает в Chrome, Edge, Яндекс Браузере, Opera и Safari 18.2+;
   остальные браузеры переходят как обычно. */
@view-transition { navigation: auto; }

#site-header { view-transition-name: site-header; }
.mbar { view-transition-name: site-mbar; }

::view-transition-group(site-header),
::view-transition-group(site-mbar),
::view-transition-new(site-header),
::view-transition-new(site-mbar) { animation: none; }
::view-transition-old(site-header),
::view-transition-old(site-mbar) { display: none; }

::view-transition-old(root) { animation: atp3-page-out .16s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: atp3-page-in .42s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes atp3-page-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes atp3-page-in {
    from { opacity: 0; transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── 6. Окно с формой заявки ─────────────────────────────────
   Форма живёт в окне (.svc-modal из atp3.css) на всех страницах,
   кроме главной. Место справа под кнопку «Закрыть». */
.lead-modal-body .form-head { padding-right: 2.75rem; }

/* ── 7. Свёрнутый блок с кнопкой «Показать» ──────────────────
   Карточки видов техники на главной. Класс is-ready ставит fold-1.js,
   и только с ним блок сворачивается: если скрипт не загрузился, блок
   просто открыт. Высота анимируется через grid-template-rows
   0fr → 1fr, поэтому знать её заранее не нужно. */
.fold-btn .fold-chev {
    width: 1rem;
    height: 1rem;
    flex: none;
    transition: transform .35s var(--ease);
}
.fold-btn[aria-expanded="true"] .fold-chev { transform: rotate(180deg); }

.fold.is-ready {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows .45s var(--ease), opacity .25s ease, visibility 0s linear .45s;
}
.fold.is-ready.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .5s var(--ease), opacity .4s ease .1s, visibility 0s;
}
.fold.is-ready > .fold-inner { min-height: 0; overflow: hidden; }
/* Рамка фокуса у крайних карточек не обрезается краем блока */
@supports (overflow-clip-margin: 1px) {
    .fold.is-ready > .fold-inner { overflow: clip; overflow-clip-margin: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fold.is-ready,
    .fold.is-ready.is-open,
    .fold-btn .fold-chev { transition: none; }
}