/* ==========================================================================
   ПЛАНШЕТ СТОЙМЯ (768–1023 px, высокий экран)

   Что было. Самый неудачный размер сайта: раскладка оставалась «взрослой» —
   зал прилипал к экрану, колба и экран стояли слева, этикетка узкой колонкой
   справа. Но ширины на три предмета в ряд не хватало: колонка сжималась до
   180 px, и текст сыпался лесенкой по два слова в строке. Содержимое при
   этом не влезало в прилипающий экран — верх карточки уезжал под шапку,
   а отзыв обрезался на полуслове.

   Что стало. Планшет переведён на ленту — ту же, что на телефоне: зал не
   прилипает, витрина и этикетка идут друг под другом, страница обычным
   образом прокручивается. Это сделано в двух местах:
     · assets/css/museum.css — мобильный блок теперь ловит и планшет стоймя;
     · assets/js/motion.js — сцена с камерой включается от 1024 px, а на
       планшете стоймя работает лента.

   Здесь — только поправки на размер: планшет вдвое шире телефона, и то, что
   на телефоне впору, тут выглядит мелким.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

  body { --edge: 34px; --plan-h: 88px; }

  /* Шапка на планшете полноразмерная: телефонная в 52 px на широком экране
     выглядит обрезком, и ник в ней прячется зря — место есть. */
  .topbar { height: 60px; }
  .topbar__name { font-size: 12px; letter-spacing: .16em; }
  .topbar__name i { display: block; }
  .topbar__tg { padding: 11px 16px; font-size: 11px; }
  .topbar__tg span { display: inline; }

  .entrance { padding: calc(60px + 34px) var(--edge) 60px; }
  .entrance__title { font-size: clamp(46px, 8vw, 68px); }
  .entrance__lead { font-size: 17px; max-width: 60ch; }

  /* Зал-лента: воздуха между витринами больше, чем на телефоне. */
  .hall,
  .hall--single { padding: 60px 0 20px; }
  .hall__stage { gap: 34px; }
  .hall__cases { gap: 56px; }

  .hall__intro .hall__name { font-size: clamp(30px, 5.4vw, 42px); }
  .hall__intro .hall__text { font-size: 15px; max-width: 62ch; }

  /* Колба крупнее телефонной, но не во всю ширину: рядом с ней должно
     оставаться поле, иначе предмет читается как картинка на всю страницу. */
  .vitrine { width: min(42%, 260px); }

  /* Этикетка — обычный текст в колонке нормальной длины. 62 знака в строке:
     дальше глаз теряет начало следующей. */
  .label { max-width: 62ch; }
  .label__title { font-size: clamp(24px, 4vw, 32px); }
  .label__gist { font-size: 15.5px; line-height: 1.55; }
  .label__material { font-size: 12px; }
  .review__text { font-size: 14.5px; }
  .mynote__text { font-size: 15px; }

  /* Справочное бюро: на планшете помещаются две карточки в ряд. */
  .desk__grid { grid-template-columns: repeat(2, 1fr); }

  .workshop__cols { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .finale__grid { grid-template-columns: repeat(2, 1fr); }

  /* Кнопка связи снова со словом: на планшете места хватает, а один
     значок без подписи читается хуже. */
  .callme { width: auto; height: auto; padding: 13px 20px; font-size: 12px; letter-spacing: .14em; }
  .callme__icon { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   ПЛАН ЭТАЖА НА УЗКОМ ЭКРАНЕ
   Пункты делили ширину поровну, и на планшете от названия оставалась одна
   буква с многоточием: «D…», «V…», «B…». Толку от такого плана нет — по нему
   не понять, куда ведёт кнопка. Теперь пункты не сжимаются, а лента
   прокручивается пальцем вбок; вторая строка с числом работ убрана — на
   узком экране важнее имя.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .plan__list {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .plan__list::-webkit-scrollbar { display: none; }

  .plan__item {
    flex: 0 0 auto;
    min-width: 132px;
  }

  .plan__sub { display: none; }

  .plan__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}