/* Адаптив: планшет и телефон, артборд docs/redesign/canvas/body_Narrow.html.
   Владелец — блок G. Подключается последним (base.html), поэтому может
   переопределять любой селектор из base.css/components.css/sections/*.css —
   ни один из тех файлов ради адаптива не трогаем.

   Брейкпоинты: ≤1024px — планшет (эталон 820), ≤600px — телефон (эталон 390).
   Общий приём: узкие экраны прячут второстепенную колонку целиком и достают
   её обратно шторкой (position:fixed/absolute поверх макета) — разметка та
   же, что на десктопе, меняются только правила показа.

   У панели «Просмотр» свой, более широкий порог — 1200 px (view.css §1.7):
   ей нужно больше места, чем каталогу. Отделка панели под палец живёт в
   блоке @media (max-width: 1200px) ниже. */

/* ---------------------------------------------------------------------
   Шторка дерева рубрик (подложка + сама панель): планшет накладывает её
   слева, телефон поднимает снизу (см. блоки ниже). Правая колонка гаджетов
   каталога, у которой была такая же шторка, удалена итерацией 2 вместе
   с `#catalog-side-pane` — её работу взяла панель «Просмотр».
--------------------------------------------------------------------- */
.side-shutter-backdrop { display: none; }

/* Кнопка «Рубрики»: существует только у планшета/телефона. */
.rubric-shutter-open { display: none; }
.rubric-shutter-close { display: none; }

@media (max-width: 1024px) {

  /* ---- Рабочая зона чуть плотнее ---- */
  #work { gap: 8px; padding: 8px; }
  .sec { gap: 8px; }
  #rail { width: 56px; padding: 6px 0; }
  .rail-item { width: 44px; height: 46px; font-size: 9px; }

  /* ---- Шапка: всю середину отдаём поиску (артборд «Планшет · 820 px»).
     Пилюли индексации там нет вовсе — она дублируется в разделе «Каналы»;
     знак и правый блок ужимаются по содержимому, подпись знака и подсказка
     «/» уходят: клавиатуры на планшете нет. */
  #status-bar { display: none; }
  .tb-brand { width: auto; }
  .tb-brand .tb-name { display: none; }
  .tb-right { width: auto; }
  .tb-kbd { display: none; }
  /* В шапке планшета от аккаунта остаётся аватар (артборд) — имя занимало бы
     до 100 px той самой середины, ради которой всё и ужимается. */
  .acct-btn .acct-name { display: none; }
  #topbar { gap: 10px; }

  /* =====================================================================
     Раздел «Каталог»: рейка + список; рубрики и гаджеты — шторки поверх.
  ===================================================================== */
  #sec-catalog { position: relative; }
  #catalog-results-pane { position: relative; }

  .rubric-shutter-open {
    display: inline-flex; align-self: flex-start;
    margin: 8px 0 0 8px; flex: none;
  }

  /* Дерево рубрик — шторка слева, поверх списка результатов. */
  #catalog-rubric-pane { display: none; }
  #catalog-rubric-pane.is-open {
    display: flex;
    position: absolute; left: 8px; top: 8px; bottom: 8px;
    width: 300px; max-width: calc(100% - 16px);
    z-index: 46; box-shadow: var(--sh3);
  }
  #catalog-rubric-pane .rubric-shutter-close { display: inline-flex; }
  #catalog-rubric-pane.is-open ~ .side-shutter-backdrop[data-rubric-close] {
    display: block;
    position: absolute; inset: 0; z-index: 45;
    background: var(--overlay); border-radius: inherit;
  }

  /* =====================================================================
     Раздел «YouTube»: список подписок сжимается, сетка ленты — не 4 колонки.
  ===================================================================== */
  .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yt-hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* =====================================================================
     Каталожная сетка карточек рубрики — по 2 в ряд вместо 3.
  ===================================================================== */
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* =====================================================================
     Модалки чуть теснее, но ещё не во весь экран — только сужаем поля.
  ===================================================================== */
  .overlay { padding: 12px; }
  .modal-player { width: 100%; height: 100%; }
  .modal-signin { width: 100%; }
}

@media (max-width: 600px) {

  /* ---- Шапка: поиск переезжает на вторую строку на всю ширину ---- */
  #topbar {
    height: auto; flex-wrap: wrap; row-gap: 8px;
    padding: 8px 10px;
  }
  .tb-brand { width: auto; flex: 1 1 auto; min-width: 0; }
  /* На телефоне поиск уехал на свою строку — место под название знака есть
     (артборд «Телефон · 390 px»), в отличие от планшета. */
  .tb-brand .tb-name { display: block; }
  .tb-right { width: auto; flex: none; }
  .tb-mid { order: 3; flex-basis: 100%; }
  .tb-search { width: 100%; }

  /* ---- Рейка разделов уезжает вниз, той же разметкой (_rail.html) ---- */
  #work { flex-direction: column-reverse; padding: 0; gap: 0; }
  .sec { padding: 8px; gap: 8px; }
  #rail {
    width: 100%; height: 60px; flex: none;
    flex-direction: row; justify-content: space-around; align-items: stretch;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    border-radius: 0; border-width: 1px 0 0; box-shadow: none;
  }
  .rail-item { flex: 1; width: auto; height: auto; border-radius: 8px; }

  /* ---- Раздел «Каналы»: список сверху узкой полосой, ролики снизу ---- */
  #sec-channels { flex-direction: column; }
  #sec-channels > .w340 { width: 100%; height: 190px; flex: none; }

  /* ---- Раздел «YouTube»: список подписок прячем, лента — в 2 колонки ---- */
  .yt-subs { display: none; }
  .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yt-hero-features { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .row-meta .video-title { max-width: 46vw; }

  /* ---- Каталог: шторка рубрик поднимается снизу, а не сбоку ---- */
  #catalog-rubric-pane.is-open {
    left: 0; right: 0; bottom: 0; top: 14%;
    width: auto; max-width: none;
    border-radius: 16px 16px 0 0;
  }
  .cat-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  /* ---- Модалки — во весь экран ---- */
  .overlay { padding: 0; }
  .modal { border-radius: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
  .modal-player, .modal-signin { width: 100%; height: 100%; }
  /* Три шага живут в 34px-строке заголовка окна (youtube.css) — на телефоне
     подписи не помещаются рядом, поэтому остаются только значки-кружки. */
  .signin-step { flex: none; padding: 3px 6px; }
  .signin-step-text { display: none; }

  /* =====================================================================
     Панель «Просмотр» на телефоне (§1.7, артборд «Телефон · шторка
     раскрыта/свёрнута») — тот же узел, что и на планшете (шторка задана в
     view.css, max-width: 1200px), но раскладка внутри столбцом, а не
     строкой: кадр 16:9 от полной ширины плюс карточка и список рядом в
     306 px шторки на планшете не влезли бы совсем.

     Свёрнутая полоска (58 px) встаёт НАД нижней рейкой разделов (60 px,
     см. #rail выше) — иначе рейка окажется под шторкой и разделы станут
     недостижимы, пока играет видео. Раскрытая шторка, наоборот, накрывает
     рейку целиком, как на артборде: в этом состоянии переключаться между
     разделами незачем, а место важнее списка гаджетов. */
  /* По умолчанию шторка стоит НАД рейкой (тот же уступ, что и у свёрнутой
     полоски) — это годится и для свёрнутого состояния, и для пустого
     («Выбери гаджет — он заиграет здесь»), которое иначе занимало бы 40 %
     высоты бессмысленной плашкой поверх рейки и результатов под ней. Полный
     разворот (видео правда играет и шторка не свёрнута) — исключение: там
     она законно накрывает рейку целиком, как на артборде. */
  #view-pane:not(.is-theater) { bottom: 60px; }
  #view-pane[data-state="playing"]:not(.is-collapsed):not(.is-theater) {
    bottom: 0; height: 78%;
  }
  #view-pane:not(.is-theater) .view-body {
    flex-direction: column; flex-wrap: nowrap;
  }
  #view-pane:not(.is-theater) #view-stage { width: auto; }
  #view-pane:not(.is-theater) #view-card { flex: none; }

  /* Средняя колонка на телефоне прокручивается целиком, вместе с шапкой
     запроса и подсказкой, а не только списком. Раскрытая шторка «Просмотра»
     оставляет от колонки полосу около 165 px, и при собственной прокрутке
     одного лишь списка в неё не влезала даже одна строка: шапка и подсказка
     съедали её всю, а §1.7 требует, чтобы кликнутая строка осталась на виду.
     Прокрутившись обратно, шапку видно снова — ничего не спрятано. */
  #videos-pane-content.pane-body.col { overflow-y: auto; }
  #videos-pane-content .feed-list { overflow: visible; flex: none; }
  /* Шторка на телефоне занимает 78 % рабочей зоны, а не 40 %, как на
     планшете, — и места под ней нужно ровно столько же. */
  :root { --view-shutter-room: 80vh; }
}

/* ---------------------------------------------------------------------
   Палец вместо мыши (§1.7). Порог — 1200 px, тот же, на котором панель
   «Просмотр» перестаёт быть колонкой и становится шторкой (view.css):
   раз панель уже под палец, то и цели в ней должны быть под палец —
   и на планшете 900–1200, и на телефоне. Раньше 44 px появлялись только
   с 600 px, и вся полоса планшета оставалась мышиной (находка 7 ревью).
--------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Кнопки панели: шапка, карточка товара, шапка списка гаджетов.
     Кнопки подвала (качество / «На сервер» / «На диск») специально
     оставлены как есть — на артборде они 32 px и в раскрытой шторке. */
  #view-pane .view-head .btn,
  #view-pane .view-items-head .btn,
  #view-pane .view-card-actions .btn { height: 44px; }
  #view-pane .view-head .btn-i,
  #view-pane .view-items-head .btn-i,
  #view-pane .view-card-actions .btn-i { width: 44px; }

  /* Строки любых списков, по которым кликают: гаджеты панели, результаты
     поиска, ролики канала. Высота задаётся минимумом — строки с превью
     и так выше. */
  .list-row { min-height: 44px; }

  /* Место, куда прокрутить кликнутую строку из-под шторки (§1.7). Без
     нижнего отступа последняя строка списка физически не может подняться
     выше шторки: прокручивать некуда, сколько ни считай. Отступ равен
     высоте шторки и живёт ровно столько, сколько она раскрыта. */
  #work:has(#view-pane[data-state="playing"]:not(.is-collapsed):not(.is-theater))
    #videos-pane-content .feed-list,
  #work:has(#view-pane[data-state="playing"]:not(.is-collapsed):not(.is-theater))
    #videos-pane-content .cat-grid { padding-bottom: var(--view-shutter-room, 45vh); }
}

/* ---------------------------------------------------------------------
   Ничего не должно выезжать за пределы вьюпорта: подстраховка для контента,
   который приходит фрагментами htmx и не проверялся под каждую ширину.
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #work, .sec, .pane, .pane-body { max-width: 100%; }
}