/* Адаптивная (мобильная) вёрстка — глобальные правила и фиксы.
   Подключается ГЛОБАЛЬНО последним (после core.css/main.css) через inc/dosie-assets.php.
   Методика — скил landing-design/references/responsive.md (2026-07-17).
   Переопределения через свои селекторы (не через Tailwind-классы в разметке —
   Tailwind-purge не собирает новые классы, гоча field-notes). */

/* ============ 1. OVERFLOW-GUARD (самый частый мобильный баг) ============ */
/* Медиа не распирают контейнер; длинные слова/pre/таблицы могут сжиматься. */
img, video, iframe, svg, canvas, object, embed { max-width: 100%; height: auto; }
pre { max-width: 100%; overflow-x: auto; }
/* Флекс/грид-элементы по умолчанию min-width:auto — не дают контенту сжаться.
   Точечно на контентных флексах ДС (не глобально на всех *, чтобы не сломать раскладки). */
.dosie .prose *, .dosie .foot > *, .dosie .ph__meta > * { min-width: 0; }
/* Страховка от переполнения корпусом текста в контенте статьи. */
.dosie .prose { overflow-wrap: break-word; }

/* ============ 2. SAFE-AREA (чёлка / home-indicator iPhone) ============ */
/* Требует viewport-fit=cover в meta (header-dosie.php). */
@supports (padding: env(safe-area-inset-bottom)) {
  /* Липкая шапка-капсула не заезжает под чёлку в ландшафте/на вырезах. */
  .dosie .hd { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  /* Нижние фиксированные элементы (cookie-баннер, будущие sticky-CTA) — над home-indicator. */
  .cookie-banner, .vz-sticky-bottom { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ============ 3. TOUCH-ЦЕЛИ ============ */
/* Hover-эффекты — только там, где есть настоящий hover (не тач). */
@media (hover: none) {
  .dosie .hd__menu a, .dosie .pill, .dosie .hd__cta { transition: none; }
}

/* Десктопный дефолт верхней секции футера (был inline в footer-dosie.php). */
.dosie .ft-sec-cta { padding-top: 64px; padding-bottom: 40px; }
/* Сетка меню/контактов футера (был inline repeat(4,1fr) в footer-dosie.php). */
.dosie .ft-cols { padding: 0 0 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* ============ 4. МОБИЛЬНОЕ МЕНЮ-ШТОРКА (дефект с видео: пол-экрана, без бэкдропа) ============ */
/* Разметка inc/mobile-menu.php задаёт w-1/2 + h-[100vh] Tailwind'ом — переопределяем.
   Ширину до почти-полной, высоту на dvh, воздух пунктам, тап-цели ≥44px. */
@media (max-width: 991px) {
  .mobile-menu {
    width: min(86vw, 360px) !important;   /* было w-1/2 — пол-экрана */
    height: 100dvh !important;             /* было 100vh — вылезало под адресную строку */
    box-shadow: -18px 0 44px rgba(11, 25, 59, .22);  /* отделяет шторку от страницы */
    padding-top: 84px;   /* sticky-шапка (z-90) перекрывает верх шторки (z-30) — «Главная» пряталась под ней */
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Тёмный бэкдроп за шторкой (страница под ней не «просвечивает» голой).
     Появляется вместе с открытой шторкой через сестринский селектор состояния Alpine. */
  .mobile-menu::before {
    content: ""; position: fixed; inset: 0; right: min(86vw, 360px);
    background: rgba(11, 25, 59, .5); opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .mobile-menu.translate-x-0::before { opacity: 1; }
  /* Пункты меню: воздух + тап-цель ≥44px.
     🚨 Глобальный reset .dosie *{padding:0} (core.css:20) съедает Tailwind p-8/pr-16
     на nav — отступ задаём явно специфичным селектором (аудит 2026-07-17). */
  .dosie .main-mobile-navigation, .main-mobile-navigation {
    padding: 8px 24px 24px 28px;
  }
  .main-mobile-navigation .menu { list-style: none; padding-left: 0; }
  .main-mobile-navigation .menu a {
    display: block; padding: 11px 0; font-size: 17px; line-height: 1.4;
    min-height: 44px;
  }
}

/* ============ 5. СПИСКИ: маркеры не липнут к правому краю ============ */
/* На узком экране у контента должен быть горизонтальный воздух от краёв. */
@media (max-width: 600px) {
  .dosie .wrap { padding-left: 20px; padding-right: 20px; }
  /* prose уже центрован max-width:760, но на узком добавим гарантированный отступ. */
  .dosie .prose { padding-left: 2px; padding-right: 2px; }

  /* ---- Компактный подвал (аудит 2026-07-17: футер 1044px высоты; вертикаль
     верхней секции задавалась inline в footer-dosie.php — вынесена в класс) ---- */
  .dosie .ft-sec-cta { padding-top: 36px; padding-bottom: 24px; }
  .dosie footer .fin, .dosie .ft .fin { padding-top: 44px; padding-bottom: 44px; }
  .dosie .ft__menu { gap: 6px; }
  .dosie .ft__legal { padding-top: 14px; }
  /* Меню/контакты футера в 2 колонки (было 1 — стопка длинная, правая половина пустая;
     юзер 2026-07-17). 4 блока → 2×2, компактнее вдвое. */
  .dosie .ft-cols { grid-template-columns: 1fr 1fr; gap: 14px 20px; padding-bottom: 24px; }

  /* ---- Кегль h1 статей/страниц на узком экране: не рвать заголовок на 4 строки ---- */
  .dosie .ph h1.disp { font-size: clamp(24px, 7.2vw, 32px); line-height: 1.12; }
}

/* ============ 6. ЛИПКИЙ ПОД-НАВ ПО РАЗДЕЛАМ СТАТЬИ (дефект: крайний пункт обрезан) ============ */
/* Если в теме есть горизонтальный таб-бар оглавления — дать скролл + не обрезать. */
.dosie .toc-sticky, .dosie .article-subnav {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;   /* Firefox */
}
.dosie .toc-sticky::-webkit-scrollbar, .dosie .article-subnav::-webkit-scrollbar { display: none; }
.dosie .toc-sticky > *, .dosie .article-subnav > * { flex: 0 0 auto; scroll-snap-align: start; }

/* ============ 7. ТАБЛИЦЫ → КАРТОЧКИ на узком экране (перекладка) ============ */
/* JS (dosie-reveal.js) вешает .is-cards на .tblwrap, если таблица ШИРОКАЯ (3+ колонок
   и не влезает), и проставляет data-label каждой td из thead. Тогда на узком экране
   строка = карточка, подпись колонки слева. Узкие таблицы остаются обычными (тень-скролл). */
@media (max-width: 600px) {
  .dosie .prose .tblwrap.is-cards { overflow-x: visible; }
  .dosie .prose .tblwrap.is-cards::before,
  .dosie .prose .tblwrap.is-cards::after { display: none; }  /* тень-скролл не нужна */
  .dosie .prose .tblwrap.is-cards table { display: block; background: transparent; box-shadow: none; border-radius: 0; }
  .dosie .prose .tblwrap.is-cards thead { position: absolute; left: -9999px; }  /* шапку прячем */
  .dosie .prose .tblwrap.is-cards tbody { display: block; }
  .dosie .prose .tblwrap.is-cards tr {
    display: block; margin: 0 0 16px; background: #fff;
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    box-shadow: 0 3px 0 var(--line), 0 12px 26px rgba(23, 42, 85, .07);
  }
  .dosie .prose .tblwrap.is-cards td {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 11px 14px; border-top: 1px solid var(--line); text-align: left;
  }
  .dosie .prose .tblwrap.is-cards tr td:first-child {
    border-top: none; background: var(--navy); color: #fff; font-weight: 700; text-align: left;
  }
  .dosie .prose .tblwrap.is-cards td::before {
    content: attr(data-label); font-weight: 700; color: var(--navy);
    text-align: left; flex: 0 0 42%; /* подпись колонки из thead */
  }
  /* у первой ячейки (обычно «название строки») подпись не нужна — она и так заголовок карточки */
  .dosie .prose .tblwrap.is-cards tr td:first-child::before { content: ""; }
}