/* Витрина: зал просмотра.
 *
 * Раскладка сознательно повторяет привычный видеосервис: слева то, что
 * смотришь, справа очередь остальных, под видео — название, метки времени и
 * описание. Этой раскладке не нужно учиться: человек уже знает, что щелчок
 * справа откроет ролик слева.
 */
.hall { padding: 26px 0 40px }
.hall-grid { display: grid; grid-template-columns: minmax(0, 1fr) 402px; gap: 24px; align-items: start }

/* Под видео — как в видеосервисе: название, строка с данными, метки времени,
   действия, описание. Порядок привычный, читается без усилий. */
.v-headrow { display: flex; align-items: flex-start; gap: 18px; margin-top: 16px }
.v-headrow .btn-touch { flex: none }
/* Длинное название сжимаем до двух строк, целиком показывает подсказка:
   иначе заголовок выдавливает кнопку за край. */
.v-title { flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 700 clamp(19px, 2.2vw, 25px)/1.28 var(--display); letter-spacing: -.02em; margin: 0 }
.v-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  color: var(--muted); font: 500 14px/1 var(--sans) }
.v-meta i { font-style: normal; font-family: var(--mono); font-size: 13px }
.v-meta i::before { content: "·"; margin-right: 10px; color: var(--line) }

/* Метки времени: мелко, в строку, как оглавление под роликом */
.v-chapters { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px }
.v-chapters[hidden] { display: none }
.v-chapters button { background: rgba(140,210,205,.07); border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer; font: 500 12.5px/1 var(--sans); padding: 7px 10px }
.v-chapters button:hover { color: var(--ink); border-color: var(--line) }
.v-chapters button.on { background: var(--accent-dim); color: var(--ink) }
.v-chapters b { font-family: var(--mono); font-weight: 600; color: var(--accent); margin-right: 7px }

.v-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line) }
.btn-plain { background: none; border: 0; color: var(--muted); cursor: pointer;
  font: 600 14px/1 var(--sans); padding: 12px 6px; text-decoration: none }
.btn-plain:hover { color: var(--ink) }

/* ── Описание: то, ради чего страницу читают поисковики и ИИ-ответчики ──── */
.about-box { margin-top: 20px; max-width: 780px }
.about[hidden] { display: none }
.about-lead { color: var(--ink); line-height: 1.65; font-size: 16px }
.about h2 { font: 700 15px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 12px }
.about-pains { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px }
.about-pains li { position: relative; padding-left: 20px; color: var(--muted); line-height: 1.55 }
.about-pains li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent) }
.about-tech { display: flex; flex-wrap: wrap; gap: 8px }
.about-tech span { background: var(--surf); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 11px; font: 500 13px/1 var(--sans); color: var(--ink) }
.about p { color: var(--muted); line-height: 1.6 }
.about-also { margin-top: 12px }
.about-also b { color: var(--ink); font-weight: 650 }
.about-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px }

/* ── Очередь справа: ростом с видео, со своей прокруткой ────────────────── */
.q-head { display: flex; align-items: baseline; gap: 8px; font: 700 13px/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px }
.q-head span { font-family: var(--mono); color: var(--accent); letter-spacing: 0 }
.q-wrap { position: relative }
.q-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(0,209,193,.45) rgba(140,210,205,.06) }
/* Полосу оставляем видимой и заметной: она сама по себе говорит, что список
   длиннее экрана. Скрытая полоса выглядит аккуратнее, но человек не понимает,
   что дальше что-то есть. */
.q-list::-webkit-scrollbar { width: 10px }
.q-list::-webkit-scrollbar-track { background: rgba(140,210,205,.06); border-radius: 99px }
.q-list::-webkit-scrollbar-thumb { background: rgba(0,209,193,.45); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box }
.q-list::-webkit-scrollbar-thumb:hover { background: rgba(0,209,193,.7); background-clip: padding-box }

/* Внизу — затухание и подпись: сразу видно, что список продолжается. Как
   докрутили до конца, подсказка уходит. */
.q-wrap::after { content: ""; position: absolute; left: 0; right: 8px; bottom: 0; height: 84px;
  pointer-events: none; opacity: 1; transition: opacity .2s var(--ease);
  background: linear-gradient(transparent, var(--bg) 82%) }
.q-wrap.end::after { opacity: 0 }
.q-more { opacity: 1; position: absolute; left: 0; right: 8px; bottom: 10px; text-align: center; pointer-events: none;
  font: 600 12.5px/1 var(--sans); color: var(--accent); letter-spacing: .02em;
  transition: opacity .2s var(--ease) }
.q-wrap.end .q-more { opacity: 0 }

.q-item { display: flex; gap: 11px; align-items: flex-start; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 12px; padding: 6px; color: var(--ink); font-family: var(--sans) }
.q-item:hover { background: rgba(140,210,205,.06) }
.q-item.on { background: var(--accent-dim) }
.q-shot { position: relative; flex: none; width: 168px; height: 94px; border-radius: 10px; overflow: hidden; background: #000 }
.q-shot img { width: 100%; height: 100%; object-fit: cover }
.q-shot i { position: absolute; right: 5px; bottom: 5px; background: rgba(4,10,9,.86); color: #fff;
  font: 600 11.5px/1 var(--mono); padding: 3px 5px; border-radius: 5px; font-style: normal }
.q-cap { min-width: 0; padding-top: 2px }
.q-cap b { font-size: 14.5px; line-height: 1.32; font-weight: 650;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.q-cap i { display: block; margin-top: 5px; color: var(--muted); font: 500 13px/1.3 var(--sans); font-style: normal }

/* ── Подбор по задаче ───────────────────────────────────────────────────── */
.ask { padding: 44px 0 54px; border-top: 1px solid var(--line) }
.ask h2 { font: 800 clamp(24px, 3.4vw, 38px)/1.1 var(--display); letter-spacing: -.03em }
.ask .lead { max-width: 620px; margin-top: 12px }
.ask-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px; margin-top: 26px }
.ask-item { display: block; text-align: left; cursor: pointer;
  background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  color: var(--ink); font-family: var(--sans);
  transition: border-color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease) }
.ask-item:hover { border-color: rgba(0,209,193,.5); background: rgba(0,209,193,.05); transform: translateY(-2px) }
/* Сначала — что это за система: одна боль без сути читается как загадка. */
.ask-what { display: block; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em }
.ask-pain { display: block; margin-top: 7px; color: var(--muted); font-size: 13.5px; line-height: 1.4 }

/* ── Телефон: видео сверху, очередь под ним столбиком ───────────────────── */
@media (max-width: 1000px) {
  .hall-grid { grid-template-columns: 1fr; gap: 22px }
  .q-list { max-height: none !important; overflow: visible }
  .q-wrap::after, .q-more { display: none }
  .q-shot { width: 142px; height: 80px }
}
@media (max-width: 700px) {
  /* на узком экране кнопка уходит под заголовок — иначе он сжимается в
     несколько слов и теряет смысл */
  .v-headrow { flex-direction: column; gap: 12px; align-items: stretch }
  .v-title { -webkit-line-clamp: 3 }
}
@media (max-width: 620px) {
  .ask-grid { grid-template-columns: 1fr; gap: 10px }
  /* видео прижимаем к краям экрана — как в приложении */
  .hall .wrap { padding-left: 0; padding-right: 0 }
  .hall-main > :not(.stage) { padding: 0 16px }
  .hall-side { padding: 0 16px }
  .stage { border-radius: 0; border-left: 0; border-right: 0 }
  .q-item { padding: 6px 0 }
  .q-shot { width: 132px; height: 74px }
}

/* ── Описание на телефоне: свёрнуто до нескольких строк ─────────────────
   Текст про систему занимает несколько экранов, а человек чаще всего хочет
   просто выбрать другой ролик — и вынужден пролистывать всё. Показываем
   начало и кнопку; на широком экране сворачивать нечего, там список сбоку. */
.about-box.fold { max-height: 190px; overflow: hidden; position: relative }
.about-box.fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  pointer-events: none; background: linear-gradient(transparent, var(--bg) 88%) }
.about-box.fold.open { max-height: none }
.about-box.fold.open::after { display: none }
.about-more { display: block; width: 100%; margin-top: 12px; cursor: pointer;
  background: rgba(140,210,205,.08); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font: 600 14px/1 var(--sans); padding: 13px }
.about-more:hover { border-color: rgba(0,209,193,.45) }
.about-more[hidden] { display: none }
@media (max-width: 620px) { .about-more { margin: 12px 16px 0; width: calc(100% - 32px) } }

/* ── Список кейсов ссылками ─────────────────────────────────────────────
   Зал строится скриптом, поэтому раньше на страницы кейсов не вело ни одной
   ссылки: поисковик до них просто не доходил. Заодно это удобный способ
   увидеть весь набор разом, не листая очередь. */
.case-list { list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px }
.case-list a { display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surf);
  transition: border-color .18s var(--ease), transform .18s var(--ease) }
.case-list a:hover { border-color: rgba(0,209,193,.45); transform: translateY(-1px) }
.case-list b { color: var(--ink); font: 600 15px/1.35 var(--sans) }
.case-list span { color: var(--muted); font-size: 13px }
.about-more-link { margin-top: 16px }
.about-more-link a { color: var(--accent); font-weight: 600; text-decoration: none }
.about-more-link a:hover { text-decoration: underline }