/* ===== ГЛАВНАЯ СТРАНИЦА — только для home.html, больше нигде не подключается ===== */

:root {
    --section-gap: 3rem; /* 48px — базовый отступ между секциями */
}

/* --- Адаптивные брейкпоинты для --section-gap --- */
@media (max-width: 900px) {
    :root {
        --section-gap: 2rem; /* 32px */
    }
}

@media (max-width: 480px) {
    :root {
        --section-gap: 1rem; /* 16px */
    }
}

/* --- Секция 1: Hero — на всю ширину экрана (full-bleed), без отступов --- */

.hero-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);  /* тот же приём full-bleed, что уже используется в проекте */
    height: 70vh;
    min-height: 26.25rem;  /* 420px */
    max-height: 45rem;     /* 720px */
    overflow: hidden;
    margin-bottom: var(--section-gap);
}

.hero-banner picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-banner-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.hero-banner-text {
    position: absolute;
    left: 2.5rem;   /* 40px */
    right: 2.5rem;  /* 40px */
    bottom: 2.25rem; /* 36px */
    color: #fff;
}

.hero-banner-text h2 {
    margin: 0 0 0.625rem;  /* 10px */
    font-size: 2rem;       /* 32px */
}

.hero-banner-text p {
    margin: 0 0 0.875rem;  /* 14px */
    max-width: 31.25rem;   /* 500px */
}

.hero-banner-text a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .hero-banner {
        height: 50vh;
        min-height: 20rem;  /* 320px */
    }

    .hero-banner-text {
        left: 1.25rem;   /* 20px */
        right: 1.25rem;  /* 20px */
        bottom: 1.25rem; /* 20px */
    }

    .hero-banner-text h2 {
        font-size: 1.5rem;  /* 24px */
    }

    .section-banner-text {
        margin-bottom: 2rem; /* 32px */
    }

    .section-banner-text h2 {
        font-size: 1.375rem; /* 22px */
    }
}

/* --- Баннеры секций 3 и 5: текст отдельно по центру, фото без затемнения отдельным
   блоком ниже (как у Hermes) --- */

.section-banner {
    /* margin-top и margin-bottom одинаковые и не зависят от того, какой
       блок стоит перед .section-banner в конкретном месте страницы.
       Раньше отступ сверху был "чужим": фактически им становился
       margin-bottom предыдущего элемента — а у .category-list он был
       через var(--section-gap), а у .product-list захардкожен как 4rem
       (см. ниже) — отсюда разные на вид отступы у баннера в секции 3
       (после category-list) и в секции 5 (после product-list).
       Margin-top и margin-bottom соседних блоков в потоке документа
       схлопываются (CSS margin collapsing берёт максимум из двух, а не
       сумму) — поэтому дублирования отступа здесь не будет. */
    margin-top: var(--section-gap);
    margin-bottom: var(--section-gap);
}

.section-banner-text {
    text-align: center;
    max-width: 37.5rem;  /* 600px */
    margin: 0 auto 1.8rem; /* 48px */
}

.section-banner-text h2 {
    font-style: italic;
    font-weight: 700;
    font-size: 1.75rem;  /* 28px */
    margin: 0 0 0.5rem; /* 20px */
}

.section-banner-text p {
    font-style: italic;
    font-weight: 400;
    margin: 0 0 1.25rem; /* 20px */
    color: #333;
}

.section-banner-text a {
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.8125rem; /* 13px */
    letter-spacing: 0.05em;
    font-style: normal;
}

.section-banner picture {
    display: block;
    width: 100%;
}

.section-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Секция 2: сетка категорий/статей --- */

.category-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem; /* 10px */
    margin-bottom: var(--section-gap);
}

.category-card-inner {
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

.category-card-inner img {
    width: 100%;
    aspect-ratio: 1 / 1;  /* соответствует реальным фото 1600×2400 — без кропа под 160px */
    object-fit: cover;
    display: block;
}

.category-card-inner p {
    margin: 1rem 0.75rem;
    font-style: normal;
    font-family: var(--font-secondary);
    font-size: 0.8125rem; /* 13px */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000;
}

/* --- Секции 4, 6: товарные ряды --- */

.product-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;         /* 24px */
    max-width: 45rem;   /* 720px — было 900px, карточки уже, полей по бокам больше */
    margin: 0 auto var(--section-gap); /* было "0 auto 4rem" — фиксированный
        отступ снизу не подстраивался под брейкпоинты и не совпадал с
        --section-gap, из-за чего .section-banner после product-list (секция 5)
        получал другой отступ сверху, чем после category-list (секция 3) */
}

.product-card,
.category-card {
    color: inherit;
    text-decoration: none;
}

.product-card-inner {
    box-sizing: border-box;
    width: 100%;
}

.product-card-image {
    margin-bottom: 0.875rem; /* 14px */
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-card-inner p {
    margin: 0 0 0.25rem; /* 4px */
    font-family: var(--font-primary);
    font-size: 0.875rem; /* 14px */
    color: #000;
}

.product-card-inner p:last-child {
    font-family: var(--font-secondary);
    color: #000;
    margin-bottom: 0;
}

.price-sep {
    display: inline-block;
    width: 0.3em; /* ширина промежутка между разрядами — подберите на глаз */
}

.price-currency {
    margin-left: 0.25em; /* расстояние между ценой и значком ₽ — подберите на глаз */
}

/* --- Адаптив сеток --- */

@media (max-width: 900px) {
    .category-list,
    .product-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-list {
        grid-template-columns: 1fr;
    }

    /* .product-list сюда специально НЕ включён — карточки товаров
       должны оставаться по 2 в ряд даже на самых узких экранах
       (наследуют repeat(2, 1fr) из брейкпоинта 900px выше). На таких
       узких экранах карточки и так довольно компактные (фото + название
       + цена умещаются без проблем), одна колонка выглядела бы как
       неоправданно много пустого места по бокам. */
}

.empty-block {
    padding: 1.875rem; /* 30px */
    text-align: center;
}