/* Мобильные правки к макету.
 *
 * Держится отдельным файлом сознательно: тело страницы приходит из экспорта
 * дизайн-канваса и перезаписывается целиком при каждой новой версии макета.
 * Правки, вписанные внутрь, умирали бы при следующей присылке.
 *
 * Разметка макета собрана на инлайновых style-атрибутах, а их специфичность
 * выше любого селектора в таблице стилей — отсюда !important и атрибутные
 * селекторы. Это не небрежность, а единственный способ не трогать разметку.
 * Уйдут инлайновые стили — уйдёт и !important.
 */

@media (max-width: 760px) {

  /* 1. Горизонтальный скролл.
     Hero — грид из двух колонок с минимумами 320px и 300px: 620px + gap при
     экране 390. Страница уезжала вбок на 287px. Складываем в одну колонку. */
  [style*="minmax(320px,1fr) minmax(300px,0.9fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* overflow-x: hidden здесь сознательно НЕ ставим: он спрятал бы следующую
     такую поломку вместо того, чтобы дать её увидеть. Проверено замером —
     после правки выше боковой прокрутки нет. */

  /* 2. Тач-цели. В макете ссылки по 20-22px — палец в них не попадает,
     общепринятый минимум 44px. Растим не шрифт, а зону нажатия. */
  .masthead a,
  a[href^="tel:"],
  a[href^="#"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Поля формы записи — туда целятся пальцем так же, как в ссылки. */
  .input, input, select, textarea { min-height: 44px !important; }

  /* 3. Шапка. Логотип, шесть пунктов меню и кнопка встык съедали пол-экрана
     до первого содержательного блока. Меню — в строку с прокруткой,
     логотип во всю ширину над ним. */
  .masthead { gap: 4px 16px !important; padding: 14px 0 !important; }
  .masthead .brand { max-width: none !important; margin-right: 0 !important; flex: 1 0 100%; }

  /* 4. Подписи «Было / Стало» — 11px мелко для телефона. */
  span[style*="font-size:11px"] { font-size: 12px !important; }
}

/* Совсем узкие экраны (iPhone SE и подобные). */
@media (max-width: 400px) {
  .masthead { column-gap: 12px !important; }
}