/* «Против часовой» — мобильный слой поверх дизайна «История часовых моделей».
   Дизайн свёрстан инлайн-стилями без брейкпоинтов; этот файл добавляет их
   поверх, не трогая сами страницы. Подключается тегом
   <link rel="stylesheet" href="/mobile.css"> (вставляет scripts/inject_mobile_css.py;
   после каждого нового экспорта из дизайн-проекта скрипт запускается снова).

   Каждый селектор в двух написаниях: в статике страниц стили без пробела
   («font-size:74px»), после гидрации React пересериализует их с пробелом
   («font-size: 74px»). Оба варианта обязательны. */

/* — До гидрации (пока не загрузился support.js + React с unpkg) статика лежит
     внутри <x-dc>; после гидрации рантайм заменяет её на #dc-root. Прячем в
     статике оверлей лайтбокса: иначе до загрузки JS страница накрыта тёмным
     слоем с плейсхолдерами {{ lightboxCaption }}. На медленном мобильном
     канале это выглядело как «сайт не открывается». — */
x-dc [style*="position:fixed"],
x-dc [style*="position: fixed"] { display: none !important; }

@media (max-width: 720px) {

  /* — Многоколоночные сетки складываются в одну колонку — */
  [style*="grid-template-columns:7fr 5fr"],
  [style*="grid-template-columns: 7fr 5fr"],
  [style*="grid-template-columns:5fr 6fr"],
  [style*="grid-template-columns: 5fr 6fr"],
  [style*="grid-template-columns:6fr 5fr"],
  [style*="grid-template-columns: 6fr 5fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Служебная сетка «иконка + текст» остаётся двухколоночной */
  [style*="grid-template-columns:76px 1fr"],
  [style*="grid-template-columns: 76px 1fr"] {
    grid-template-columns: 76px 1fr !important;
    gap: 16px !important;
  }

  /* — Типографика — */
  [style*="font-size:76px"], [style*="font-size: 76px"] { font-size: 42px !important; }
  [style*="font-size:74px"], [style*="font-size: 74px"] { font-size: 38px !important; line-height: 1.08 !important; }
  [style*="font-size:58px"], [style*="font-size: 58px"] { font-size: 32px !important; }
  [style*="font-size:54px"], [style*="font-size: 54px"] { font-size: 30px !important; }
  [style*="font-size:46px"], [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 28px !important; }

  /* — Слайды широких галерей не шире экрана — */
  [style*="flex:0 0 380px"], [style*="flex: 0 0 380px"] { flex-basis: min(380px, 84vw) !important; }
  [style*="flex:0 0 340px"], [style*="flex: 0 0 340px"] { flex-basis: min(340px, 84vw) !important; }

  /* — Навигация на главной: переносим по строкам, ужимаем зазор — */
  nav[style*="gap:44px"], nav[style*="gap: 44px"] {
    flex-wrap: wrap !important;
    gap: 10px 22px !important;
    padding: 12px 8px !important;
  }

  /* — Верхняя строка и футер: разрешаем перенос — */
  [style*="justify-content:space-between"],
  [style*="justify-content: space-between"] {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* — Крупные отступы секций ужимаем — */
  [style*="padding:48px 24px 56px"], [style*="padding: 48px 24px 56px"],
  [style*="padding:56px 24px 24px"], [style*="padding: 56px 24px 24px"] {
    padding: 32px 20px 24px !important;
  }
  [style*="padding:44px 24px 0"], [style*="padding: 44px 24px 0"] { padding: 28px 20px 0 !important; }

  /* — Герои статей: высота от контента, не 100vh с гигантским фото — */
  [style*="min-height:100vh"], [style*="min-height: 100vh"] { min-height: 70vh !important; }

  /* — Страховка от горизонтального скролла — */
  html, body { overflow-x: hidden; }
  img { max-width: 100%; }

  /* — Рубрика «В поисках следующих часов»: короткая форма на мобильном — */
  .rub-full { display: none !important; }
  .rub-short { display: inline !important; }
}

/* — 18.09.2026: липкая шапка компактнее, широкая figure и «Читать далее» в одну колонку — */
@media (max-width: 720px) {
  [style*="position:sticky"] > div[style*="padding:12px 24px"],
  [style*="position: sticky"] > div[style*="padding: 12px 24px"] { padding: 8px 16px !important; }
  figure[data-wide] { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 960px) {
  figure[data-wide] { margin-left: 0 !important; margin-right: 0 !important; }
}