/* =====================================================================
   Адаптивность: desktop → tablet → mobile

   Что важно помнить при правках (уже наступали):

   * правило, завязанное на ширину ЭКРАНА, не работает в узком контейнере —
     сайдбар 340px при широком окне остаётся широким экраном;
   * колонка грида `1fr` и элемент flex не сжимаются ниже min-content своего
     содержимого. Там, где внутри есть строка «в одну линию» (сортировки,
     поле поиска, таблица), нужен `minmax(0, 1fr)` или `min-width: 0`,
     иначе вся страница уезжает вправо и появляется горизонтальная прокрутка;
   * `flex-wrap: wrap` у колоночного flex-контейнера растягивает строку по
     самому широкому элементу — на мобильном это выносит блок за экран.
   ===================================================================== */

@media (max-width: 1180px) {
    .hero__inner { padding: 42px 38px; }
    .footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); }
    .footer__col:last-child { display: none; }
}

@media (max-width: 1024px) {
    .container { padding: 0 20px; }
    .catalog { grid-template-columns: minmax(0, 1fr); }
    /* Панель фильтров на весь экран: шапка и кнопки закреплены, прокручивается
       только форма между ними. Раньше всё лежало в одном прокручиваемом блоке
       с отрицательными отступами — заголовок «Жанры» уезжал под шапку, а ряд
       кнопок вставал на 40px выше низа экрана, и под ним выглядывал обрезанный
       чекбокс. Колоночный flex убирает эту арифметику. */
    .filters {
        position: fixed;
        inset: 0;
        /* Выше панели вкладок (140): иначе она перекрывала кнопки «Применить»
           и «Закрыть», закреплённые внизу панели фильтров */
        z-index: 150;
        border: none;
        border-radius: 0;
        overflow: hidden;
        display: none;
        flex-direction: column;
        padding: 0;
    }
    .filters.is-open { display: flex; }
    .filters-toggle { display: inline-flex; }

    /* Шапка с крестиком: без неё панель закрывалась только кнопкой
       в самом конце длинного списка жанров */
    .filters__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }
    .filters__head-title { font-size: 17px; font-weight: 600; }

    .filters form {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0; /* иначе flex-элемент не даёт форме прокручиваться */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 16px 0;
    }
    /* На весь экран список жанров прокручивается вместе с формой: вложенная
       прокрутка на 260px на телефоне ловит палец и не даёт листать панель */
    .filters__list { max-height: none; overflow: visible; }

    .filters__actions {
        position: sticky;
        bottom: 0;
        grid-template-columns: 1fr 1fr;
        margin: 18px -16px 0;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
    }
    /* Закрыть панель можно крестиком в шапке — третья кнопка только
       увеличивала закреплённый блок и съедала экран */
    .filters__actions .filters-toggle { display: none; }
    .download-wrap { grid-template-columns: minmax(0, 1fr); }
    .book-hero { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 22px; }
    .promos { grid-template-columns: minmax(0, 1fr); }
    .benefits__grid { grid-template-columns: repeat(2, 1fr); }
    .hero__inner { grid-template-columns: minmax(0, 1fr); }
    /* min-height: 260px нужен только рядом с текстом в две колонки: он держит
       высоту блока. Когда hero становится одноколоночным, полка выравнена
       по низу этой резервной высоты — и между статистикой и обложками
       повисает около сотни пустых пикселей. */
    .hero__shelf { justify-content: flex-start; margin-top: 10px; min-height: 0; }
    .mega { width: min(680px, 90vw); }
    .mega__grid { grid-template-columns: repeat(3, 1fr); }

    /* Сайдбар книги (форматы, автор, серия) уходит под основной текст */
    .book-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 860px) {
    :root { --header-h: 64px; }

    .header__burger { display: inline-flex; }
    .nav { display: none; }
    .header__bar { padding: 10px 0; }
    .header__inner { gap: 12px; }
    .logo__text { display: none; }
    .header__action-text { display: none; }
    .header__action { padding: 9px; }
    .search__submit { display: none; }
    .search { padding: 3px 8px 3px 14px; }

    .auth { grid-template-columns: minmax(0, 1fr); margin: 20px auto; }
    .auth__side { display: none; }
    .auth__form { padding: 30px 24px; }

    .book-hero { grid-template-columns: minmax(0, 1fr); }
    .book-hero__cover { max-width: 220px; margin: 0 auto; }
    .book-hero__aside { max-width: 340px; margin: 0 auto; width: 100%; }

    .meta-list__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }

    .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer__brand { grid-column: 1 / -1; }

    .cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }

    .two-cols,
    .two-cols--wide { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    .tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 140;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        background: var(--surface);
        border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 2px;
        border: none;
        background: none;
        font-family: inherit;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        min-width: 0;
    }
    .tabbar__item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tabbar__item.is-active { color: var(--brand-600); }
    .main { padding-bottom: 92px; }
    .to-top { bottom: 84px; right: 14px; }
    .toasts { right: 12px; left: 12px; bottom: 84px; }
    .toast { max-width: none; }
}

/* ------------------------------- Телефон ------------------------------- */
@media (max-width: 640px) {
    .container { padding: 0 16px; }

    /* Шапка в две строки: сверху навигация и вход, поиск — отдельной строкой
       во всю ширину. В одну строку поле поиска сжималось до 70px и было
       бесполезным, а кнопка «Войти» не помещалась на экран.
       Липкой шапка на телефоне не нужна: снизу есть постоянная панель вкладок,
       а две строки в прилипшем виде съедали бы четверть экрана. */
    .header { position: static; }
    .header__inner {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            "burger logo actions"
            "search search search";
        gap: 10px 12px;
        align-items: center;
    }
    .header__burger { grid-area: burger; }
    .logo { grid-area: logo; }
    .logo__text { display: inline; font-size: 16px; }
    .header__actions { grid-area: actions; margin-left: auto; }
    .search { grid-area: search; max-width: none; padding: 3px 6px 3px 14px; }
    .search__input { font-size: 16px; } /* меньше 16px — iOS зумит страницу при фокусе */
    .header__login { padding: 9px 14px; }

    .mobile-menu { width: min(320px, 88vw); }

    .hero { padding: 18px 0 0; }
    .hero__inner { padding: 30px 22px; border-radius: var(--r-lg); }
    .hero__stats { gap: 22px; flex-wrap: wrap; }
    .hero__book { width: 88px; }
    .hero__book:nth-child(2) { width: 106px; }

    .grid-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .grid-books--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scroller { grid-auto-columns: 150px; gap: 14px; }
    .tiles { grid-template-columns: 1fr 1fr; }
    /* Названия серий длинные («Cupcake. Бестселлеры БукТока. Стефани Арчер»):
       в колонке шириной в полэкрана они рассыпаются в столбик по одному слову
       и читаются только сверху вниз. Разворачиваем плитки в строки во всю
       ширину — текст снова идёт горизонтально, как чипы на странице тем.
       `--one` (серии на главной) правило `.tiles` выше сбивало в две колонки:
       модификатор задан в app.css, а этот файл подключается следом. */
    .tiles--rows,
    .tiles--one { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tiles--rows .tile,
    .tiles--one .tile { padding: 14px 16px; }

    /* Узкая плитка в две колонки: «Классическая литература» рвалась на слоги
       («Классическа/я»), а счётчик книг зависал по центру блока между строк.
       Переносим название по словам, а счётчик ставим под ним. Плитки во всю
       ширину (`--rows`, `--one`) остаются строкой «название — счётчик». */
    .tiles:not(.tiles--rows):not(.tiles--one) .tile {
        flex-direction: column;
        align-items: flex-start;
        /* иначе space-between из десктопного правила отбивает счётчик
           к низу плитки — в ряду с трёхстрочным названием он повисал один */
        justify-content: flex-start;
        gap: 4px;
        padding: 14px 16px;
    }
    .tile > * { overflow-wrap: break-word; }

    /* Карточки авторов — та же беда, что у серий, только хуже: рядом с
       кругляшом инициалов на имя остаётся меньше сотни пикселей, и
       «Александр Грибоедов» рассыпается по слогам в четыре строки.
       На телефоне список авторов идёт строками во всю ширину: слева
       инициалы, дальше имя, справа число книг. */
    .tiles--people { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tiles--people .person { padding: 10px 14px; gap: 12px; }
    .tiles--people .person__avatar { width: 42px; height: 42px; font-size: 13px; }
    .tiles--people .person > span:last-child {
        display: flex;
        flex: 1;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }
    /* Имя переносится по словам: разрыв «в любом месте» нужен был только
       в узкой колонке, во всю ширину он режет слова без причины */
    .tiles--people .person__name { overflow-wrap: break-word; }
    .tiles--people .person__meta { flex-shrink: 0; white-space: nowrap; }
    .benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .collections-grid { grid-template-columns: minmax(0, 1fr); }

    .row-card { flex-wrap: wrap; }
    .row-card__actions { width: 100%; }
    .row-card__actions .btn { flex: 1; }

    .panel { padding: 20px 18px; }
    .download-card { padding: 22px 18px; }
    .book-hero { padding: 18px; }

    /* Панель над каталогом. flex-wrap у колонки растягивал строку сортировок
       по её содержимому (628px) и уносил каталог за правый край. */
    .toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .toolbar > * { min-width: 0; }
    .toolbar__sorts {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .toolbar__sorts::-webkit-scrollbar { display: none; }
    .toolbar__sorts .chip { flex: 0 0 auto; white-space: nowrap; }

    /* Любой ряд «чипов» на телефоне переводится в горизонтальную прокрутку —
       иначе жанры и подкатегории занимают пол-экрана. */
    .subgenres__list { flex-wrap: wrap; }

    .pagination__page, .pagination__arrow { min-width: 38px; height: 38px; }
    .footer { padding: 40px 0 26px; }
    .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .footer__col:last-child { display: block; }

    /* Таблицы (форматы файлов, характеристики) не должны раздвигать страницу */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 0; }
}

@media (max-width: 420px) {
    .grid-books { gap: 18px 12px; }
    .card__title { font-size: 14px; }
    .hero__title { font-size: 27px; }
    .logo__text { display: none; }
    .tabbar__item { font-size: 9px; }
}

@media print {
    .header, .footer, .tabbar, .to-top, .benefits, .toasts { display: none !important; }
    body { background: #fff; }
}