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

   Подключается ПОСЛЕДНИМ на всех страницах. Здесь только то, что найдено
   измерением на живых страницах при ширине 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;
  }

  /* Консилиум: шесть кресел в два ряда по три */
  .cons-bench,
  .cons-seats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@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: minmax(0, 1fr) minmax(280px, 340px);
  }
  .hall .protocol {
    grid-column: 1 / -1;      /* протокол уходит вниз во всю ширину */
  }
  .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));
    }
  }
}