/* ============================================================
   ВИЗАРТЪ — ревизия мобильной вёрстки

   Подключается ПОСЛЕДНИМ на всех страницах. Здесь только то, что найдено
   измерением на живых страницах при ширине 375 и 768, а не «на всякий случай»:
   каждое правило снимает конкретный замер.
   ============================================================ */

/* ------------------------------------------------------------------
   1. Горизонтальное переполнение

   Замер: /auction/{id} при 375 px давал scrollWidth 422 — страница ездила
   вбок на 47 px. Виновник — .podium__beam, декоративный луч шириной 439 px,
   намеренно нарисованный шире подиума и сдвинутый трансформом. У .podium
   переполнение не обрезалось, и луч растягивал документ.

   Лечим обрезкой у самого виновника, а не `overflow-x: hidden` на body:
   глобальное скрытие ломает position: sticky и прячет будущие огрехи вместо
   того, чтобы их показывать. overflow-x: clip не создаёт скролл-контейнер,
   поэтому вертикальная липкость внутри продолжает работать.
   ------------------------------------------------------------------ */

.podium,
.hall,
.hero,
.medallion-nav,
.category,
.nocturne,
.protocol {
  overflow-x: clip;
}

/* Декоративные лучи и блики нигде не должны участвовать в раскладке */
.podium__beam,
.hero__bg,
.hall__beam,
[class$="__beam"],
[class$="__glow"],
[class$="__shine"] {
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Длинные русские слова в узкой колонке рвут сетку: разрешаем перенос */
  .card__title,
  .lot__title,
  .podium__title,
  .passport__value,
  .entry__lot,
  .journal-card__title,
  .cons-seat__duty {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Таблицы и протоколы шире экрана — прокручиваем их внутри себя,
     а не всю страницу */
  .ledger table,
  .keeper table,
  .protocol__body,
  .cons-protocol table,
  .evidence table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------------
   2. Тач-мишени

   Замер на /lot/{id}: найдены мишени 13×13, 13×17, 60×24, 72×24, полосы
   высотой 29–30 px. Норма для пальца — 44 px.
   ------------------------------------------------------------------ */

@media (pointer: coarse) {
  /* Мишень наращиваем настоящей высотой, а не невидимым псевдоэлементом:
     псевдоэлемент нажимается, но его не видно в измерениях, а значит
     следующий разработчик решит, что мишень мелкая, и снова полезет чинить. */
  .link-quiet,
  .cons-sheet__toggle,
  .pf-footer__row a,
  .pf-footer a,
  .footer__links a,
  .thumbs__item,
  .pf-user__item,
  .tab,
  .chip,
  .filter-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Ссылки подвала стоят плотным рядом — разводим их, чтобы палец
     не попадал в соседнюю */
  .pf-footer__row,
  .footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    row-gap: 2px;
  }

  .cons-sheet__toggle {
    justify-content: space-between;
    width: 100%;
  }

  /* Свиток фильтров: пункты 22–26 px — палец промахивается мимо строки */
  .scroll-select__option,
  .scroll-select li,
  .select-scroll__item,
  .filters__option,
  [role="option"],
  [role="menuitem"] {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 4px;
  }

  /* Кнопки и ссылки в панелях — минимальная высота напрямую */
  .topbar__nav a,
  .cabinet__nav a,
  .keeper__tabs button,
  .pager a,
  .pager button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Сургучные печати-кнопки — главное действие, мельчить нельзя */
  .wax-seal,
  .seal-button,
  .btn-gold {
    min-height: 52px;
  }
}

/* ------------------------------------------------------------------
   3. Размер текста

   Замер: .ev__stamp--empty давал 8,5 px, ряд подписей — 11 px. На телефоне
   ниже 11 px текст нечитаем, а подписи под печатями несут смысл
   («Не установлено»), поэтому их поднимаем в первую очередь.
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .ev__stamp,
  .ev__stamp--empty {
    font-size: 12px;
    letter-spacing: .03em;
  }

  .hall-medallion__count,
  .medallion-link__count,
  .pf-user__dot,
  .ambience-toggle__action,
  .passport__seal-caption,
  .entry__auto,
  .card__meta,
  .journal-card__meta {
    font-size: 12px;
  }

  /* Основной текст статей на телефоне крупнее: читают с руки */
  .article__body,
  .lot__description,
  .about__text {
    font-size: 17px;
    line-height: 1.7;
  }
}

/* ------------------------------------------------------------------
   4. Раскладка на узком экране
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  /* Аукционный зал: подиум сверху, конторка следом, протокол — последним.
     На телефоне важнее всего видеть предмет и кнопку ставки. */
  .hall {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    padding-right: 12px;
  }
  .hall .podium   { order: 1; }
  .hall .counter,
  .hall .desk     { order: 2; }
  .hall .protocol { order: 3; }

  /* Свеча не должна занимать пол-экрана */
  .candle,
  .candle-svg {
    max-height: 180px;
  }

  /* Витрина лота — одна колонна, панель цены липнет к низу */
  .lot__layout,
  .lot-grid {
    grid-template-columns: 1fr;
  }

  /* Медальоны залов: три в ряд вместо горизонтальной прокрутки */
  .medallion-nav__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 10px;
  }
  .medallion-link__disc {
    width: 84px;
    height: 84px;
  }
  .medallion-link__label {
    font-size: 13px;
    text-align: center;
  }

  /* Раскладку кресел консилиума держит consilium.css:1451 и :1506 —
     кресла лежат абсолютно внутри .cons-table, сеткой их не строят.
     Правило про .cons-bench/.cons-seats било мимо: таких классов в
     разметке нет (data-cons-bench — это атрибут чекбокса), удалено. */
}

@media (max-width: 420px) {
  /* Совсем узкие экраны: витрины в одну колонну, без сжатия картинок */
  .category__grid,
  .journal__grid,
  .favorites__grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   5. Планшет: 768 px — самая частая ошибка «ни то ни сё»
   ------------------------------------------------------------------ */

@media (min-width: 761px) and (max-width: 1024px) {
  /* Правило `.hall { grid-template-columns: 1fr minmax(280px,340px) }` снято.
     Оно меняло только колонки, не трогая grid-template-areas, а auction.css:968
     ниже 1180 px уже раскладывает зал одной колонной: 'podium' 'desk' 'protocol'.
     Замер при 885 px: cols = "468px 340px" при areas в одну колонну — подиум и
     конторка 468 px в строке 838 px, вторая колонка 340 px пустая, теряется
     370 px (44 % ширины). Полоса поломки 761–1024 px целиком.
     На кабинетных страницах .hall — display: block, правило там было мертво. */
  .category__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------
   6. Безопасная зона на телефонах с вырезом
   ------------------------------------------------------------------ */

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 760px) {
    .lot__sticky,
    .desk--sticky,
    .hall .desk {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
  }
}

/* ------------------------------------------------------------------
   7. Скрытая кнопка отправки формы

   Форма без submit-кнопки не отправляется по Enter — браузер просто ничего
   не делает. Раньше вход был доступен только через сургучную печать, и
   посетитель, нажавший Enter, оставался за дверью.
   ------------------------------------------------------------------ */

.hidden-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* ------------------------------------------------------------------
   8. Шапка витрины на телефоне

   Замер при 390 px: вензель занимал 301 px и не сжимался (flex: 0 0 auto из
   harmony.css), поэтому за правый край уехали навигация (401), БУРГЕР (395) и
   переключатель музыки (447). На главной с телефона не было ни меню, ни звука.

   Вензель обязан уступать: он узнаётся и по медальону, а бургер и звук —
   единственные органы управления на узком экране.
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .topbar {
    gap: 8px;
    padding-inline: 12px;
  }

  /* Запрет переноса — только для шапки витрины. У кабинетной шапки
     (.topbar--cab) анфилада живёт отдельной второй строкой
     (harmony.css:151, order:3 + width:100%), и nowrap её душил: при 390 px
     свиток навигации давал clientWidth 162 при scrollWidth 288 — «Торги»
     [386.6..429] и «Кабинет» [447..506.4] уезжали и за край свитка (380),
     и за край экрана (390); имя галереи ужималось с 74 до 5 px. */
  .topbar:not(.topbar--cab) {
    flex-wrap: nowrap;
  }

  /* Вензель сжимается и при нужде подрезает надпись многоточием */
  .topbar__brand {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  /* Настоящее имя класса — .topbar__name; .topbar__brand-name в разметке
     нет ни на одной из 14 страниц, правило било мимо. */
  .topbar__name,
  .topbar__brand span:not([class*="medallion"]):not([class*="disc"]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    letter-spacing: .1em;
  }
  .topbar__brand img,
  .topbar__brand [class*="medallion"] {
    flex: 0 0 auto;
  }

  /* Органы управления не сжимаются никогда */
  .topbar__burger,
  .ambience-toggle,
  .pf-user {
    flex: 0 0 auto;
  }
}

@media (max-width: 420px) {
  /* На совсем узких экранах имя галереи уступает место кнопкам целиком */
  .topbar__name { font-size: 15px; }
  .topbar { gap: 6px; padding-inline: 10px; }
}

/* ------------------------------------------------------------------
   9. Мерцание анимаций на iPhone

   На iOS Safari анимация свойства filter (drop-shadow у пламени свечи,
   свечение медальонов) пересобирает слой на каждом кадре — картинка дрожит и
   подмигивает. Лечение: свечение выносится в отдельный слой-псевдоэлемент и
   анимируется opacity, которую композитор умеет крутить без перерисовки.
   Сами анимируемые элементы поднимаются в свой слой через translateZ(0).
   ------------------------------------------------------------------ */

@supports (-webkit-touch-callout: none) {
  /* Только Safari на iOS */

  .ambience-toggle.is-on .ambience-toggle__fire {
    /* Тень пламени перестаёт быть анимируемой: рисуем её один раз */
    animation: ambience-flicker-ios 2.6s ease-in-out infinite;
    will-change: opacity;
    transform: translateZ(0);
  }

  @keyframes ambience-flicker-ios {
    0%, 100% { opacity: 1; }
    25%      { opacity: .86; }
    50%      { opacity: 1; }
    75%      { opacity: .93; }
  }

  /* Медальоны, печати и свеча: слой фиксируется, тень не анимируется */
  .medallion-link__disc,
  .wax-seal,
  .seal-button,
  .candle__flame,
  .stamp {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* 3D-наклон карточек на телефоне не нужен (курсора нет), а слой под
     perspective заставляет Safari перерисовывать всю сетку при прокрутке */
  .card,
  .card__frame,
  .showcase .card {
    transform: none !important;
    perspective: none;
  }

  /* Кракелюр поверх фона — статичная текстура, но с ним слой пересобирается
     при каждой прокрутке; закрепляем его отдельным слоем */
  .craquelure-overlay,
  .vignette {
    transform: translateZ(0);
    will-change: auto;
  }
}