/* ═══════════════════════════════════════════════
   mobile-fix.css — Мобильные исправления Picturium
   Подключается ПОСЛЕ основных стилей, ДО dark-theme.css
   ═══════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. БУРГЕР-КНОПКА — делаем заметнее
   Проблема: линии тонкие и бледные, сливаются с фоном.
   Решение: фон-подложка, толще линии, контрастный цвет.
   ───────────────────────────────────────────── */

@media (max-width: 767px) {
  .header__burger {
    width: 44px;
    height: 44px;
    background: var(--bg-subtle);
    border-radius: 10px;
    transition:
      background 0.2s var(--ease),
      transform 0.15s var(--ease);
  }

  .header__burger:active {
    transform: scale(0.92);
  }

  .header__burger-line {
    width: 22px;
    height: 2.5px;
    background: var(--text);
    border-radius: 2px;
  }

  .header__burger.is-active .header__burger-line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .header__burger.is-active .header__burger-line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* Тёмная тема */
  html[data-theme="dark"] .header__burger {
    background: #2c2520;
  }
  html[data-theme="dark"] .header__burger:hover {
    background: #3a3330;
  }
  html[data-theme="dark"] .header__burger-line {
    background: #f5f1ed;
  }
}

/* ─────────────────────────────────────────────
   2. DRAWER — вынесен из <header> в HTML,
   чтобы backdrop-filter не ломал stacking context.
   Дополнительно: safe-area для iPhone c чёлкой.
   ───────────────────────────────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .drawer__panel {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

/* ─────────────────────────────────────────────
   3. ТУЛБАР — компактная мобильная раскладка
   Проблема: чипы, поиск и «Фильтры» разъезжались
   на 3 ряда с пустотой.
   Решение (best practice — Shopify, Airbnb):
     Ряд 1: [Чипы сортировки →скролл] [Фильтры]
     Ряд 2: [Поиск — вся ширина]
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
  .toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 12px;
  }

  /* Чипы: НЕ растягиваем, позволяем скролл */
  .toolbar__sort {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .toolbar__sort::-webkit-scrollbar {
    display: none;
  }

  /* Кнопка фильтра: на той же строке, прижата вправо */
  .toolbar__actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Поиск: отдельная строка, вся ширина */
  .g-search {
    order: 10;
    flex: 0 0 100%;
    margin: 0;
  }

  /* Чипы сортировки — чуть компактнее */
  .toolbar__sort .chip {
    padding: 7px 14px;
    font-size: 0.82rem;
  }

  /* Кнопка фильтра — только иконка, без текста */
  .toolbar__fbtn {
    font-size: 0; /* скрываем текст «Фильтры» */
    gap: 0;
    padding: 7px;
    width: 38px;
    height: 38px;
    justify-content: center;
    position: relative;
  }

  .toolbar__fbtn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* Бейдж с кол-вом фильтров — маленький кружок поверх иконки */
  .toolbar__fbtn .toolbar__badge {
    font-size: 0.6rem;
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
  }
}

/* ─────────────────────────────────────────────
   4. ПАНЕЛЬ ФИЛЬТРОВ — горизонтальная прокрутка
   Проблема: чипы типа/жанра обрезались («Спи...»).
   Решение: горизонтальный скролл чипов с edge-to-edge
   отступами (negative margin + padding).
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
  .fpanel__body {
    padding: 14px 16px;
    gap: 14px;
  }

  /* Все строки чипов — горизонтальный скролл */
  .fgroup__row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }

  .fgroup__row::-webkit-scrollbar {
    display: none;
  }

  /* Жанры — тоже горизонтальный скролл вместо wrap */
  .fgroup__row--wrap {
    flex-wrap: nowrap;
  }

  /* Чипы внутри фильтров — не сжимать */
  .fgroup__row .chip {
    flex-shrink: 0;
  }
}

/* ─────────────────────────────────────────────
   5. АКТИВНЫЕ ЧИПЫ ФИЛЬТРОВ — скролл
   ───────────────────────────────────────────── */

@media (max-width: 640px) {
  .active-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 10px 16px 4px;
  }

  .active-chips::-webkit-scrollbar {
    display: none;
  }

  .active-chips .achip {
    flex-shrink: 0;
  }
}

/* ─────────────────────────────────────────────
   6. ХЕДЕР — компактнее на мобилке
   ───────────────────────────────────────────── */

@media (max-width: 767px) {
  .header__inner {
    padding: 0 12px;
    gap: 10px;
  }

  .header__logo-text {
    font-size: 1.05rem;
  }

  /* Один spacer — убираем второй, чтобы
     элементы не разлетались */
  .header__spacer:last-of-type {
    display: none;
  }

  .theme-toggle {
    margin-left: 4px;
  }
}

@media (max-width: 374px) {
  .header__inner {
    padding: 0 8px;
    gap: 6px;
  }

  .header__logo-img {
    height: 26px;
  }

  .header__logo-text {
    font-size: 0.95rem;
  }
}

/* ─────────────────────────────────────────────
   7. ПОЛКА КНИГ (shelf-row) — edge-to-edge скролл
   ───────────────────────────────────────────── */

@media (max-width: 700px) {
  .bk-shelf {
    overflow: visible;
  }

  .shelf-row {
    margin: 0 -16px;
    padding: 0 16px 12px;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }

  .shelf-row::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 400px) {
  .shelf-row {
    margin: 0 -8px;
    padding: 0 8px 12px;
    scroll-padding-left: 8px;
  }
}

/* ─────────────────────────────────────────────
   8. ПАГИНАЦИЯ — не ломать на узких экранах
   ───────────────────────────────────────────── */

@media (max-width: 400px) {
  .pager {
    flex-wrap: wrap;
    gap: 6px;
    padding: 28px 0 20px;
  }

  .pager__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 0.82rem;
  }
}

/* ─────────────────────────────────────────────
   9. MASONRY — 2 колонки на маленьких экранах
   ───────────────────────────────────────────── */

@media (max-width: 374px) {
  .grid__sizer,
  .grid__item {
    width: calc((100vw - 28px - 10px) / 2);
  }
}

/* ─────────────────────────────────────────────
   10. ART-GRID (страница книги)
   ───────────────────────────────────────────── */

@media (max-width: 400px) {
  .art-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
  }
}

/* ─────────────────────────────────────────────
   11. ПРОФИЛЬ — двухколоночная сетка работ
   Проблема: .prof-gallery использует другой padding
   (24px десктоп / 16px мобилка) чем page-wrap,
   из-за чего формула ширины из site.css не даёт
   2 колонки. Пересчитываем под контейнер профиля.
   ───────────────────────────────────────────── */

/* Телефоны: гарантированно 2 колонки */
@media (max-width: 539px) {
  .prof-gallery .grid__sizer,
  .prof-gallery .grid__item {
    /* prof-gallery padding: 16px x 2 = 32px; gutter: 12px */
    width: calc((100vw - 32px - 12px) / 2);
  }
}

/* Планшет-портрет: тоже 2 колонки, карточки побольше */
@media (min-width: 540px) and (max-width: 767px) {
  .prof-gallery .grid__sizer,
  .prof-gallery .grid__item {
    /* prof-gallery padding: 16px x 2 = 32px; gutter: 14px */
    width: calc((100vw - 32px - 14px) / 2);
    max-width: 260px;
  }
}

/* Hero: компактнее на мобилке */
@media (max-width: 480px) {
  .prof-hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .prof-gallery {
    padding-bottom: 48px;
  }

  /* Статы: скролл вместо обрезки */
  .prof-stats {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }

  .prof-stats::-webkit-scrollbar {
    display: none;
  }

  .prof-stat {
    flex-shrink: 0;
    min-width: 64px;
  }
}