/*
 * Блок «Книги Издательского дома «Хузур»» (24.08.2026, до 24.09.2026 назывался
 * «Магазин Хузур»; с 08.10.2026 стоит в ЛЕВОЙ колонке, не в правой, где
 * верстался изначально - huzurshop.html.twig). Виджет из состава этапа 3,
 * макета нет - сетка 2 колонки, обложка + название, без цены и без описания.
 *
 * 🛑 Локальный сброс обязателен: блок живёт и на страницах старой вёрстки,
 * где общий base.css не подключён (то же правило, что у остальных блоков).
 */

.it-shop,
.it-shop * {
    box-sizing: border-box;
}

.it-shop__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-shop__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-shop__item::before {
    content: none;
}

.it-shop__link {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    /* Обложка на всю ширину колонки (24.08.2026) смотрелась огромной после
       переезда блока в левую колонку 08.10.2026 - там колонка шире правой,
       под которую размер и подбирался (432px вместо 256-300px). Замечание
       Дмитрия 09.10.2026 - уменьшить. Потолок ширины вместо 100%, карточка
       по центру своей колонки грида. */
    max-width: 150px;
    margin: 0 auto;
    color: var(--c-text);
    text-decoration: none;
}

.it-shop__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    /* Белый, а не --c-sand-bg (тот был позаимствован у блока «Благородный
       Куръан» не по смыслу): часть обложек в каталоге магазина - обычные
       непрозрачные JPG на белом фоне, часть - вырезанные PNG с прозрачными
       полями. На белом фоне карточки оба вида смотрятся одинаково; на
       песочном прозрачные поля PNG давали заметную жёлтую рамку только
       у части книг (28.08.2026, вопрос Гузели). */
    background: var(--c-white);
}

.it-shop__title {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.3;
    /* Название книги режем до трёх строк - карточка узкая, длинные заголовки
       иначе растянули бы сетку неровно. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.it-shop__link:hover .it-shop__title {
    color: var(--c-accent);
}

/* Кнопка «Показать другие» - сброс до вида ссылки `.it-feed__action`, тот же
   класс задаёт цвет и кегль, здесь только снимаем стандартный вид кнопки. */
.it-shop__more {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* 10.10.2026, просьба Дмитрия: блок стоял вплотную к подписям карточек
   «Самое читаемое» над ним (на десктопе левая колонка идёт обычным потоком, а
   `gap` сетки между блоками колонки не действует). Отступ сверху - только на
   десктопе: на мобильной расстояние между блоками держит общий `gap`
   колонки (legacy-bridge.css), свой отступ сложился бы с ним. */
@media (min-width: 1000px) {
    .it-shop {
        margin-top: var(--sp-30);
    }

    /* 10.10.2026, просьба Заказчика (Гузель): блок можно сделать меньше.
       Четыре книги в ОДИН ряд вместо двух рядов по две - высота вдвое ниже.
       Число книг на «странице» держат в синхроне `PER_PAGE` в huzurshop.js
       и `hidden` в huzurshop.html.twig (4). */
    .it-shop__list {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-12);
    }

    .it-shop__link {
        max-width: 110px;
    }

    .it-shop__title {
        font-size: var(--fs-12);
    }
}

/* 10.10.2026, просьба Дмитрия: отступ под заголовком блока - 15px (общий у
   `.it-feed__head` - 7px). Тот же приём, что у `.it-rubrics`. */
.it-shop .it-feed__head {
    margin-bottom: var(--sp-15);
}