/* =========================================================================
   catalog.css — всё, что относится к товарам: карточка, сетка карточек,
   полки серий, шапка категории, липкая панель серий, пустое состояние.

   Эти блоки нужны и главной, и странице категории, поэтому лежат отдельно
   от home.css.
   ========================================================================= */

/* ---------- 1. Сетка карточек -------------------------------------------- */

/*
   Одна сетка на все страницы. Числа колонок зашиты явно, а не через auto-fit,
   потому что здесь важно попасть ровно в 2 / 3 / 4 колонки на брейкпоинтах
   768 и 1080 — auto-fit подобрал бы их по ширине карточки и на промежуточных
   размерах давал бы то три, то четыре.

   gap: 8px — как у эталона.
*/
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

@media (min-width: 768px) {
    .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 2. Карточка товара ------------------------------------------- */

/*
   position: relative — опора для растянутой ссылки заголовка (см. ниже).
   display: flex + column — чтобы блок кнопок прижимался к низу карточки
   и ряд выглядел ровным независимо от длины названий.

   --card-bg приходит инлайном из базы: у эталона фон карточки тоже задаётся
   на самой карточке, а не в CSS. Если поле пустое, работает значение по
   умолчанию из var().
*/
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: var(--card-bg, var(--c-surface));
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Коробка картинки с фиксированным соотношением сторон. Место под изображение
   зарезервировано до его загрузки — страница не прыгает (метрика CLS). */
.card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.card__media-link {
    display: block;
    height: 100%;
}

/* object-fit: contain — товар должен помещаться целиком, а не обрезаться
   по краям, как это делает cover. Для фотографий товара на подложке
   это единственный правильный вариант. */
/* Поле 6% вокруг снимка: снимки цветов Huawei (list-*.png) нарезаны
   впритык, и телефон упирался в верх и низ рамки, а увеличение при
   наведении (1.03) срезало края корпуса (проверка 09.10). Процент поля
   считается от ширины рамки, так что запас растёт вместе с карточкой. */
.card__img {
    width: 100%;
    height: 100%;
    padding: 6%;
    object-fit: contain;
    transition: transform 0.4s var(--ease);
}

.card:hover .card__img {
    transform: scale(1.03);
}

/*
   Заглушка вместо фото (модель без картинки, 14.10). Знак HUAWEI рисуется
   маской: файл icon.svg задаёт только форму, а цвет — background. Так знак
   получается светло-серым, хотя в самом файле он красный, и второй файл
   с серым знаком не нужен. Размер — 28% рамки: заметно, но не кричит.
   Цвет — полупрозрачный чёрный, а не конкретный серый: на любом фоне
   карточки (--card-bg) знак выглядит как тень того же тона.
*/
.card__placeholder {
    display: block;
    height: 100%;
}

.card__placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28%;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.08);
    -webkit-mask: url("../img/icon.svg") center / contain no-repeat;
    mask: url("../img/icon.svg") center / contain no-repeat;
}

/*
   Карточка без своей страницы (14.10): кликабельна только кнопка заявки,
   поэтому без подъёма и увеличения картинки при наведении — они обещали бы
   переход, которого нет.
*/
.card--static:hover {
    transform: none;
    box-shadow: none;
}

.card--static:hover .card__img {
    transform: none;
}

/* Переход из подсказки поиска на карточку без страницы (#product-…):
   рамка показывает, какую из карточек искали. */
.card:target {
    outline: 2px solid var(--c-heading);
    outline-offset: 2px;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px;
    gap: 4px;
}

@media (min-width: 768px) {
    .card__body { padding: 16px; }
}

/*
   Слот бейджа занимает высоту, даже когда бейджа нет: иначе карточки в ряду
   разъезжались бы по вертикали — у одной есть «НОВИНКА», у соседней нет.
   Эталон решает это скриптом, который замеряет высоты; min-height дешевле
   и работает без JS.
*/
.card__badge {
    min-height: 18px;
    line-height: 18px;
}

.card__badge-text {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--c-heading);
    color: var(--c-inverse);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* По верху строки: при выравнивании по базовой линии inline-block
       добавлял под собой место для свисающих букв, слот бейджа вырастал
       на 2px, и название модели с «НОВИНКОЙ» стояло ниже соседних. */
    line-height: 18px;
    vertical-align: top;
}

.card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-heading);
}

@media (min-width: 768px) {
    .card__title { font-size: 17px; }
}

/*
   Приём «кликабельна вся карточка»: псевдоэлемент ссылки растягивается на
   всю карточку. В дереве доступности при этом остаётся одна нормальная
   ссылка с текстом — у эталона вместо этого пустая ссылка с aria-label,
   что работает хуже.
*/
.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card__link:hover {
    text-decoration: none;
}

.card__tagline {
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-muted);
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;   /* прижимает кнопки к низу карточки */
    padding-top: 12px;
}

/* «Подробнее» — это визуальное повторение ссылки заголовка, а не отдельная
   ссылка: клик по нему обрабатывает та же растянутая область. */
.card__more {
    padding-inline: 0;
    font-size: 13px;
    color: var(--c-heading);
}

.card:hover .card__more {
    text-decoration: underline;
}

/* Кнопка заявки должна оставаться кликабельной поверх растянутой ссылки —
   отсюда z-index больше, чем у псевдоэлемента. */
.card__request {
    position: relative;
    z-index: 2;
    min-height: 32px;
    padding: 4px 14px;
    font-size: 12px;
}

@media (min-width: 768px) {
    .card__request {
        min-height: 36px;
        font-size: 13px;
    }
}

/* ---------- 3. Шапка категории ------------------------------------------- */

.category-head {
    padding-block: 8px 24px;
}

.category-head__count {
    margin-top: 12px;
    font-size: 13px;
    color: var(--c-muted);
}

/*
   Баннер под шапкой категории. Над ним уже стоят крошки, заголовок,
   описание и счётчик — около 200px. Правило из home.css («не выше окна
   за вычетом шапки сайта») этого не учитывало: на мониторе владельца
   (окно 830px по высоте) и на ноутбуке 1366×768 заголовок баннера и кнопка
   оказывались ниже края окна (проверка 07.10). Вычитаем и шапку раздела.
   Соседний селектор «+» срабатывает только здесь: на главной баннер идёт
   первым, и его высота прежняя.
*/
.category-head + .banner {
    height: min(var(--banner-h), max(360px, calc(100svh - var(--header-h) - 200px)));
}

/* Баннер в пропорциях кадра (home.css, 09.10): тот же потолок высоты,
   только через переменную — высоту там задаёт aspect-ratio. */
.category-head + .banner[style*="--ar-d"] {
    --banner-max: max(360px, calc(100svh - var(--header-h) - 200px));
    height: auto;
}

/* ---------- 4. Липкая панель серий --------------------------------------- */

/*
   position: sticky прилипает не к окну, а к ближайшему прокручиваемому предку.
   top равен высоте шапки: панель встаёт ровно под ней, а не поверх.

   Панель горизонтально прокручиваемая: на телефоне четыре серии в строку
   не помещаются, а переносить их на вторую строку — значит прыгающая высота
   при залипании.
*/
.series-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
}

.series-nav__inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    /* Скрываем полосу прокрутки, но прокрутку оставляем: пальцем и колесом
       она работает, а лишней линии под панелью не появляется. */
    scrollbar-width: none;
    padding-block: 10px;
}

.series-nav__inner::-webkit-scrollbar {
    display: none;
}

.series-nav__item {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--c-surface);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--c-muted);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.series-nav__item:hover {
    text-decoration: none;
    color: var(--c-heading);
}

/* Класс вешает series-nav.js по мере прокрутки страницы. */
.series-nav__item.is-active {
    background: var(--c-heading);
    color: var(--c-inverse);
}

/* ---------- 5. Полки серий ----------------------------------------------- */

.shelves {
    padding-bottom: 64px;
}

/*
   Отступ под шапку и липкую панель при переходе по якорю полки задаёт
   scroll-padding-top у html (base.css): он же действует и на фокус с
   клавиатуры.
*/
.shelf {
    padding-top: 32px;
}

.shelf__head {
    margin-bottom: 16px;
}

.shelf__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-heading);
}

@media (min-width: 768px) {
    .shelf__title { font-size: 26px; }
}

.shelf__text {
    margin-top: 6px;
    font-size: 14px;
    color: var(--c-muted);
}

/* ---------- 6. Пустое состояние ------------------------------------------ */

.empty {
    padding-block: 48px;
}

.empty__box {
    max-width: 480px;
    margin-inline: auto;
    padding: 32px 24px;
    border: 1px dashed var(--c-border);
    border-radius: 12px;
    text-align: center;
    color: var(--c-muted);
}

.empty__icon {
    width: 48px;
    height: 48px;
    margin-inline: auto;
    color: var(--c-border);
}

.empty__title {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--c-heading);
}

.empty__text {
    margin-top: 8px;
    font-size: 14px;
}

.empty__action {
    margin-top: 20px;
}