/* =========================================================================
   home.css — блоки главной: стек баннеров, «Другие модели» с табами,
   промо-плитки.
   ========================================================================= */

/* ---------- 1. Баннеры --------------------------------------------------- */

/*
   Стек, а не карусель. Ключевая правка к постановке: на эталоне девять
   баннеров выложены вертикально друг под другом — без swiper, буллетов,
   стрелок и автопрокрутки (analysis/02-homepage.md).

   Между баннерами оставляем зазор: у эталона они впритык, но при разных
   картинках это читается как один бесконечный блок.
*/
.banners {
    display: grid;
    gap: 8px;
}

/*
   Баннер — коробка фиксированной высоты, внутри картинка на всю площадь
   и текст поверх неё. Высота — свойство самого баннера, а не блока:
   у эталона флагманы получают 720px, остальные 560px, поэтому это
   переменная, а не число в одном месте.
*/
/*
   Высота — не больше окна за вычетом шапки. Эталонные 720px рассчитаны на
   монитор: на ноутбуке 1366×768 (видимая область около 650px) первый баннер
   уходил под нижний край вместе с заголовком и кнопкой, а на экране владельца
   1920 при масштабе 125% кнопка прижималась к самому краю (проверка этапа 8).
   min() берёт меньшее из двух, max() не даёт баннеру стать совсем низким
   на горизонтальном телефоне. svh — высота экрана без адресной строки.
*/
.banner {
    position: relative;
    height: min(var(--banner-h), max(420px, calc(100svh - var(--header-h))));
    overflow: hidden;
    background: var(--c-surface);
}

.banner--large { --banner-h: 520px; }
.banner--regular { --banner-h: 440px; }

@media (min-width: 768px) {
    .banner--large { --banner-h: 620px; }
    .banner--regular { --banner-h: 500px; }
}

@media (min-width: 1080px) {
    /* Ровно те высоты, что замерены на эталоне. */
    .banner--large { --banner-h: 720px; }
    .banner--regular { --banner-h: 560px; }
}

/*
   ФОРМА КОРОБКИ — ПО КАДРУ (09.10).

   С фиксированной высотой cover срезал товар, как только окно оказывалось
   шире кадра: кадр WATCH 5 (2:1) в коробке 1425×560 терял верх часов,
   на мониторе 2560 у Band 11 Pro и WATCH FIT 5 пропадала треть браслета
   (замечание владельца «обрезанные картинки, заметно по самому продукту»).

   Теперь вьюха передаёт пропорции кадра для каждого диапазона ширины
   (--ar-m телефон, --ar-tp вертикальный планшет, --ar-t планшет, --ar-d
   компьютер — ровно те файлы, что подставит тег picture), и коробка
   берёт их через aspect-ratio. Высота при этом зажата:
   - снизу — высотой эталона (720 / 560 px), чтобы на широком, но низком
     кадре (Pura 90s Pro 10:3) товар оставался крупным: тогда cover
     срезает пустые поля по бокам, а товар у Huawei всегда по центру;
   - сверху — высотой окна под шапкой, и только у баннеров с текстом по
     центру или внизу (правило ниже): их кнопка должна быть видна без
     прокрутки.
*/
.banner[style*="--ar-d"] {
    --ar: var(--ar-d);
    --banner-max: max(420px, calc(100svh - var(--header-h)));
    height: auto;
    /* Ширина — строго по родителю. Без этого min-height пересчитывается
       через aspect-ratio в минимальную ширину: баннер 10:3 с нижним
       пределом 720px требовал 2400px и давал горизонтальную прокрутку. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: var(--ar);
    min-height: min(var(--banner-h), var(--banner-max));
}

/* Потолок «не выше окна» — только когда текст по центру или внизу: иначе
   кнопка уходит за нижний край экрана. Текст сверху виден при любой высоте
   баннера, а потолок у такого баннера лишь срезал товар снизу: мобильный
   кадр WATCH 5 на вертикальном планшете терял по 18% сверху и снизу,
   Pura 90s Pro на горизонтальном — низ телефона (проверка 09.10). */
.banner--center[style*="--ar-d"],
.banner--bottom[style*="--ar-d"] {
    max-height: var(--banner-max);
}

@media (max-width: 1079.98px) {
    .banner[style*="--ar-d"] { --ar: var(--ar-t); }
}

@media (max-width: 1079.98px) and (orientation: portrait) {
    .banner[style*="--ar-d"] { --ar: var(--ar-tp); }
}

@media (max-width: 767.98px) {
    .banner[style*="--ar-d"] { --ar: var(--ar-m); }
}

/*
   object-fit: cover — картинка заполняет коробку целиком. Коробка уже в
   пропорциях кадра, так что срезаются только пустые поля широкого кадра
   или несколько процентов на низком окне.
*/
.banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Слой с текстом лежит поверх картинки на всю её площадь. */
.banner__content {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;   /* клики проходят сквозь слой на картинку */
}

.banner__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding-block: 40px;
}

/* Кнопке кликабельность возвращаем: pointer-events выше выключен на всём слое. */
.banner__btn {
    pointer-events: auto;
}

/*
   Положение текста — модификатор класса вместо инлайнового info-top эталона.
   Три варианта из перечисления TextPosition: сверху, по центру, снизу.
*/
.banner--top .banner__content { align-items: flex-start; }
.banner--center .banner__content { align-items: center; }
.banner--bottom .banner__content { align-items: flex-end; }

/* «Справа»: на телефоне и планшете — как «сверху»: мобильные кадры Huawei
   оставляют пустое место над товаром (09.10; раньше было «снизу»),
   там, где показан широкий кадр (с 1080px и на горизонтальном планшете;
   вертикальный планшет получает мобильный кадр, см. PictureTagHelper), —
   правая часть по центру. Процент в padding считается от
   ширины всего баннера (окна), а не контейнера 1440px: на мониторе 2560
   «50%» давали отступ 1272px, и текст уезжал за правый край контейнера.
   Поэтому из него вычитается поле слева от контейнера (этап 8).
   63%, а не 50%: на кадрах Huawei товар занимает до 61% ширины (WATCH 5),
   и с половины текст наезжал на часы, а с 60% касался короны (09.10). */
.banner--right .banner__content,
.banner--left .banner__content { align-items: flex-start; }

@media (min-width: 1080px), (min-width: 768px) and (orientation: landscape) {
    .banner--right .banner__content { align-items: center; }
    .banner--right .banner__inner { padding-left: calc(63% - max(0px, (100% - 1440px) / 2)); }

    /* «Слева» (10.10) — зеркало: товар прижат к правому краю кадра и уходит
       за край экрана (ремешок WATCH 5), текст — в левой трети. Отступ
       справа считается так же, от окна, с поправкой на поле контейнера. */
    .banner--left .banner__content { align-items: center; }
    .banner--left .banner__inner { padding-right: calc(60% - max(0px, (100% - 1440px) / 2)); }

    .banner--left[style*="--ar-d"] {
        min-height: 0;
    }

    /* У баннера «справа» товар занимает левую часть кадра, а правая —
       поле под текст. Любая обрезка здесь бьёт по товару или сдвигает
       поле под текстом, поэтому коробка — строго в пропорциях кадра,
       без зажимов по высоте: текст стоит по центру и виден и на низком
       окне. */
    .banner--right[style*="--ar-d"] {
        min-height: 0;
    }
}

/*
   Тон текста. У эталона это инлайновая переменная --text-color на каждом
   заголовке; у нас — светлый или тёмный, потому что произвольный hex
   сотрудник рано или поздно выберет нечитаемый.

   Под светлым текстом лежит мягкая тень: на пёстрой картинке даже белый
   текст без неё теряется.
*/
.banner--dark .banner__inner { color: var(--c-text); }

.banner--light .banner__inner {
    color: var(--c-inverse);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.banner--light .banner__btn {
    background: var(--c-inverse);
    color: var(--c-heading);
    text-shadow: none;
}

/* balance — строки заголовка примерно равной длины: в узкой колонке
   баннера «справа» от «HUAWEI WATCH FIT 5» на второй строке оставалась
   одна «5» (11.10). */
.banner__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.banner__text {
    font-size: 16px;
    max-width: 32ch;   /* длинная строка поверх картинки читается плохо */
}

@media (min-width: 768px) {
    .banner__inner { padding-block: 56px; }
    .banner__title { font-size: 40px; }
    .banner__text { font-size: 18px; }
}

@media (min-width: 1080px) {
    .banner__title { font-size: 48px; }
}

/*
   Появление текста при прокрутке. Класс is-visible вешает reveal.js, когда
   баннер попадает в вьюпорт — тот же приём, что animation-running у эталона.
   Начальное состояние задано здесь, а не в скрипте: пока JS не загрузился,
   текст уже виден, а не спрятан навсегда.
*/
[data-reveal] .banner__inner > * {
    opacity: 1;
}

.js-reveal [data-reveal] .banner__inner > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js-reveal [data-reveal].is-visible .banner__inner > * {
    opacity: 1;
    transform: none;
}

/* Задержка по порядку: заголовок, подзаголовок, кнопка — друг за другом. */
.js-reveal [data-reveal].is-visible .banner__inner > *:nth-child(2) { transition-delay: 0.08s; }
.js-reveal [data-reveal].is-visible .banner__inner > *:nth-child(3) { transition-delay: 0.16s; }

/* Системная настройка «меньше движения» отключает и это: базовый сброс в
   base.css гасит длительности, а здесь снимаем и смещение. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] .banner__inner > * {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 2. «Другие модели» ------------------------------------------- */

.featured {
    padding-block: 40px;
}

@media (min-width: 768px) {
    .featured { padding-block: 64px; }
}

/* Список вкладок: горизонтальная прокрутка на телефоне, где пять категорий
   в строку не помещаются. */
.featured__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

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

.featured__tab:hover {
    color: var(--c-heading);
}

.featured__tab.is-active {
    background: var(--c-heading);
    color: var(--c-inverse);
}

/*
   Панель вкладки скрывается атрибутом hidden, а не классом: так она
   пропадает и из дерева доступности, и из порядка табуляции — без единой
   строки CSS. [hidden] иногда перебивается display из других правил,
   поэтому подстрахуемся явно.
*/
.featured__panel[hidden] {
    display: none;
}

/*
   Сетка блока. На телефоне карточка категории скрыта, остаются только
   карточки товаров 2x2 — как у эталона. С 1080px слева появляется карточка
   категории на всю высоту, справа — сетка товаров.
*/
.featured__grid {
    display: grid;
    gap: var(--grid-gap);
}

/*
   Пропорции колонок сняты с эталона: 524 / 443 / 443 px на 1440 — карточка
   категории в 1,18 раза шире карточки товара, а товары стоят 2×2. До правки
   07.10 было 1,1fr / 3fr: категория узкая, а товарные карточки по 490 px
   и вдвое выше эталонных.
*/
/* 11.10: категория шире — 1,5fr вместо эталонных 1,18fr. Карточка
   категории тянется на высоту двух рядов товаров, а снимки категорий
   горизонтальные, и между кнопкой «Смотреть все» и фото оставалось
   250–400 px пустоты (замечание владельца). Шире колонка — крупнее фото,
   а товарные карточки уже и, значит, ниже: пустота сокращается с двух
   сторон, товар нигде не обрезается. */
@media (min-width: 1080px) {
    .featured__grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
        align-items: stretch;
    }
}

.featured__category {
    display: none;   /* на телефоне и планшете карточки категории нет */
    flex-direction: column;
    overflow: hidden;
    padding: 32px 32px 0;
    border-radius: 8px;
    /* Цвет фона своей картинки категории (вьюха кладёт его в --category-bg):
       серый фон снимка на подложке другого серого читался прямоугольником
       вокруг телефонов (10.10). */
    background: var(--category-bg, var(--c-surface));
}

/*
   Картинка занимает всё, что осталось под текстом: flex: 1 растягивает
   коробку до низа карточки, а min-height: 0 позволяет ей стать ниже
   картинки — иначе высокий снимок раздвинул бы всю строку сетки.
*/
.featured__category-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 24px;
}

.featured__category-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding-bottom: 24px;
}

/* Фото самой категории — до краёв карточки, прижато к низу и видно
   целиком. Было cover: широкий кадр в высокой карточке терял по 20%
   с каждого бока — от трёх Pura 80 Pro оставались середины корпусов
   (замечание владельца 09.10). multiply растворяет белый фон снимка
   в сером фоне карточки — без белого прямоугольника вокруг товара. */
/* Коробка — ровно по картинке (высота от ширины), прижата к низу карточки
   через margin-top: auto. Так края коробки совпадают с краями снимка, и
   маска ниже растворяет именно край снимка, а не пустое поле над ним. */
.featured__category-media.is-cover {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 24px;
    margin-inline: -32px;
}

.featured__category-media.is-cover .featured__category-img {
    position: static;
    height: auto;
    padding-bottom: 0;
    mix-blend-mode: multiply;
}

/* Растворение краёв (классы ставит ImageEdgeLayout.CategoryFade): верх —
   если товар задевает его посреди карточки, низ и бока — если карточка
   белая и её края не видно. Две маски-градиента пересекаются: вертикальная
   и горизонтальная, ширина каждого края — своя переменная. Верх слегка
   (6%) растворяется у любого фото категории: фон снимка Pura 80 Pro
   на тон отличался от карточки, и над телефонами была видна граница. */
.featured__category-media.is-cover { --cf-t: 6%; }

.featured__category-media.is-cover .featured__category-img {
    --mask-v: linear-gradient(to bottom, transparent, #000 var(--cf-t, 0%), #000 calc(100% - var(--cf-b, 0%)), transparent);
    --mask-h: linear-gradient(to right, transparent, #000 var(--cf-l, 0%), #000 calc(100% - var(--cf-r, 0%)), transparent);
    -webkit-mask-image: var(--mask-v), var(--mask-h);
    -webkit-mask-composite: source-in;
    mask-image: var(--mask-v), var(--mask-h);
    mask-composite: intersect;
}

.featured__category-media.cf-t { --cf-t: 16%; }
.featured__category-media.cf-b { --cf-b: 12%; }
.featured__category-media.cf-l { --cf-l: 8%; }
.featured__category-media.cf-r { --cf-r: 8%; }

/* Карточка уже цвета фона картинки — «умножение» больше не нужно: серый
   на сером дал бы ещё более тёмный прямоугольник. */
.featured__category[style*="--category-bg"] .featured__category-img {
    mix-blend-mode: normal;
}

@media (min-width: 1080px) {
    .featured__category { display: flex; }
}

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

.featured__category-text {
    margin-top: 8px;
    font-size: 14px;
    color: var(--c-muted);
}

.featured__category-link {
    margin-top: 20px;
    align-self: flex-start;
}

/* Картинка товарной карточки в этом блоке на компьютере — 3:2, а не
   квадрат, как в каталоге (на телефоне карточка узкая, там квадрат): у эталона карточки здесь ниже (443×408), и две строки сетки
   по высоте совпадают с карточкой категории. */
@media (min-width: 1080px) {
    .featured__cards .card__media {
        aspect-ratio: 3 / 2;
    }

    /* Поле сверху и снизу тоньше, чем в каталоге (4% против 6%): карточки
       стали уже из-за широкой колонки категории (11.10), и при прежнем поле
       телефоны заметно мельчали. По бокам запас прежний — под увеличение
       при наведении. */
    .featured__cards .card__img {
        padding: 4% 6%;
    }
}

/* Внутри блока карточек всегда две колонки: сетка 2x2 из четырёх карточек —
   это и есть раскладка эталона, и она не должна перестраиваться в четыре
   колонки на широком экране. */
.featured__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* На планшете карточки категории нет, и четыре товара встают в один ряд:
   по две в ряд они выходили шириной до 485px — крупнее, чем на компьютере
   (проверка 07.10). */
@media (min-width: 768px) {
    .featured__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

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

.featured__all {
    margin-top: 16px;
}

/* На широком экране ссылка «смотреть все» уже есть в карточке категории —
   дубль убираем. */
@media (min-width: 1080px) {
    .featured__all { display: none; }
}

/* ---------- 3. Промо-плитки ---------------------------------------------- */

/* На /uz/ этого блока нет, он выключен в базе. Разметка и стили заведены,
   чтобы включение не требовало правки кода. */
.promo {
    padding-block: 24px 48px;
}

.promo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

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

.promo__link {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

.promo__img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.promo__title {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    color: var(--c-inverse);
    font-weight: 700;
}