/* ============================================================================================
   Экраны телефона (этап 2б, решение владельца 22.10.2026): на телефоне сайт работает как приложение — короткие экраны, без длинной
   прокрутки; на компьютере остаётся длинная главная. Подключается последним из стилей темы (после ds-dark.css).
   Граница телефона — 720 px включительно, как в каркасе (ds-shell.css) и конфигураторе.
   Только переменные токенов (псевдонимы style.css, --wp--preset--*, --wp--custom--*): без цветовых литералов, без принудительных
   приоритетов, без внешних адресов. Тёмная тема работает сама: цвета — токены, текст на тёмной плашке и на фото — --on-slab.
   ============================================================================================ */

/* ---------- 1. Показ по ширине: короткий экран — телефону, длинная страница — компьютеру ---------- */
@media (max-width: 720px) {
  body .ag-desktop-only { display: none; }
}
@media (min-width: 721px) {
  body .ag-phone-only { display: none; }
}

/* ---------- 2. Короткий первый экран телефона (inc/phone-home.php) ---------- */
.ag-phone-home { display: flex; flex-direction: column; }

/* Фото объекта на всю ширину, текст поверх с затемнением снизу вверх (токен hero-scrim). Без фото — тёмная плашка. */
.ag-phone-hero { align-items: flex-end; background: var(--slab); box-sizing: border-box; color: var(--on-slab); display: flex; isolation: isolate; min-height: var(--hero-h); overflow: hidden; position: relative; }
.ag-phone-hero-img { display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; z-index: 0; }
.ag-phone-hero::after { background: linear-gradient(to top, var(--hero-scrim) 35%, transparent); content: ""; inset: 0; position: absolute; z-index: 1; }
.ag-phone-hero-copy { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-10); padding: 72px var(--sp-20) var(--sp-20); position: relative; width: 100%; z-index: 2; }
.ag-phone-hero-copy > * { margin-block: 0; }
.ag-phone-home .ag-phone-title { color: var(--on-slab); font-family: var(--font-numeric); font-size: 27px; font-weight: 700; letter-spacing: 0; line-height: 30px; margin: 0; text-wrap: balance; }

/* Цена, плашка, кнопки и строки доверия: компоненты ds-components.css (блок цены, тёмная плашка, строка доверия) в узкой колонке. */
.ag-phone-offer { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-20) var(--ds-gutter) var(--sp-8); }
.ag-phone-offer > * { margin-block: 0; }
.ag-phone-offer .is-style-ag-price .ag-price-note { font-size: 13px; line-height: 18px; }
.ag-phone-actions { display: flex; flex-direction: column; gap: var(--sp-10); margin: 0; }
.ag-phone-actions .wp-block-button { margin: 0; width: 100%; }
.ag-phone-actions .wp-block-button__link { box-sizing: border-box; display: flex; justify-content: center; min-height: var(--btn-l); text-align: center; width: 100%; }
.ag-phone-actions .is-style-avtogates-outline .wp-block-button__link { min-height: var(--btn-m); }

/* «Как работаем»: пять шагов одной строкой, без раскрытия; плотнее, чем полный компонент шагов. */
.ag-phone-steps { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16) var(--ds-gutter) var(--sp-24); }
.ag-phone-section-title { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 22px; margin: 0; }
.ag-phone-steps .is-style-ag-steps > li { padding-bottom: var(--sp-8); }
.ag-phone-steps .is-style-ag-steps > li:last-child { padding-bottom: 0; }
.ag-phone-steps .is-style-ag-steps > li:not(:last-child)::after { top: 28px; }

/* ---------- 3. Панель действий и кнопки первого экрана ---------- */
/* Пока кнопки короткого первого экрана на виду, ActionBar скрыт (признак ставит assets/js/bars.js), TabBar остаётся. */
html[data-ag-hero-visible="true"] body { --ag-action-now: 0px; }
html[data-ag-hero-visible="true"] body .mobile-cta.ag-actionbar { display: none; }

/* ---------- 4. Плавные переходы между страницами на телефоне ---------- */
/* Межстраничный переход (View Transitions): страницы сменяются без белой вспышки. Шапка и нижнее меню имеют постоянные имена,
   поэтому остаются на месте и не мигают. Браузеры без поддержки правило пропускают. */
@media (max-width: 720px) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: ag-header; }
  .ag-tabbar { view-transition-name: ag-tabbar; }
}
/* Тот, кто просил меньше движения, получает обычный переход без анимации. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- 5. Экраны-страницы «Расчёт», «Цены», «Работы», «Заявка» (шаблон page-screen, inc/screens.php) ---------- */
/* Заголовок экрана: в ширину плашек разделов. На компьютере экраны — обычные страницы с теми же разделами, что у главной. */
.ag-screen-main .ag-screen-title {
  box-sizing: border-box; color: var(--ink); font-family: var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 28px;
  margin: var(--sp-16) auto var(--sp-4); max-width: calc(var(--avtg-content-inner) + 2 * var(--ds-pad)); width: calc(100% - 2 * var(--ds-gutter));
}

/* «Работы»: карточка компактная — фото, место и название со ссылкой на страницу работы; описание, факты и «Смотреть объект» скрыты
   (те же данные открываются на странице работы и в просмотре фото). */
.ag-screen-works :is(.case-description, .case-facts, .case-detail-link) { display: none; }

/* «Заявка»: шаги, политика и реквизиты вместо подвала (на телефоне подвал на экранах скрыт, см. раздел 6). Реквизиты — блок avtogates-ds/requisites,
   его подвальные цвета здесь не действуют, поэтому текст задан токенами страницы. */
.ag-screen-legal { box-sizing: border-box; color: var(--ink-muted); display: flex; flex-direction: column; font-size: 12px; gap: var(--sp-8); line-height: 18px; margin: var(--sp-12) auto var(--sp-24); max-width: calc(var(--avtg-content-inner) + 2 * var(--ds-pad)); width: calc(100% - 2 * var(--ds-gutter)); }
.ag-screen-legal p { margin: 0; }
.ag-screen-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ag-screen-legal .footer-requisites { border-top: 1px solid var(--line); color: var(--ink-muted); padding-top: var(--sp-12); }
.ag-screen-legal .footer-requisites > * { margin-block: 0; }
.ag-screen-legal .footer-requisites > * + * { margin-block-start: var(--sp-4); }

/* ---------- 6. Подвал на коротких экранах телефона ---------- */
/* Главная, посадочная «Откатные ворота» и четыре экрана (класс ag-app-screen ставит inc/screens.php) работают как приложение: подвала нет, контакты,
   политика и реквизиты лежат в самом экране «Заявка». На страницах услуг, памятках, работах и политике подвал остаётся; на компьютере — везде. */
@media (max-width: 720px) {
  body.ag-app-screen footer.wp-block-template-part { display: none; }
}

/* ---------- 7. Нижнее меню на экранах «Расчёт» и «Заявка» ---------- */
/* Общее правило каркаса прячет TabBar, пока на экране калькулятор или форма: на этих экранах они занимают весь экран, и меню приложения
   пропало бы совсем. Здесь меню остаётся; прячется оно по-прежнему, когда открыто меню сайта или в поле ввода фокус (на телефоне открыта клавиатура). */
@media (max-width: 720px) {
  html:is([data-avtogates-configurator-visible="true"], [data-ag-form-visible="true"]) body.ag-screen:not(:has(:is(input, select, textarea):focus, .wp-block-navigation__responsive-container.is-menu-open)) { --ag-tabbar-now: var(--tabbar-h); }
  html:is([data-avtogates-configurator-visible="true"], [data-ag-form-visible="true"]) body.ag-screen:not(:has(:is(input, select, textarea):focus, .wp-block-navigation__responsive-container.is-menu-open)) .ag-tabbar { display: grid; }
  /* Вид ds калькулятора (плагин 0.8.0) читает --avtogates-configurator-bottom-offset: на сколько поднять липкую панель результата над низом экрана.
     На экране «Расчёт» меню остаётся видимым (правило выше), поэтому панель встаёт над ним: высота меню с безопасной зоной, как у самого меню.
     Когда меню скрыто (в поле ввода фокус, открыто меню сайта) или экран не app-экран (там меню прячется, пока виден калькулятор), отступ остаётся 0.
     На компьютере (шире 720 px) правила нет: значение по умолчанию плагина — 0. */
  body.ag-screen:not(:has(:is(input, select, textarea):focus, .wp-block-navigation__responsive-container.is-menu-open)) .avtogates-configurator { --avtogates-configurator-bottom-offset: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Компьютер (0.9.0): ширина сетки ---------- */
@media (min-width: 721px) {
  /* Как плашки разделов (style.css, раздел 7): ширина сетки contentSize. */
  .ag-screen-main .ag-screen-title { max-width: var(--wp--style--global--content-size, 1200px); }
}