/* ==========================================================
   DekoKZ Category Hero v1.3
   Файл: category.hero.css

   Архитектура:
   - hero_theme отвечает за цвета
   - hero_align отвечает за расположение и градиент
   - hero_action отвечает только за текст кнопки в HTML

   Форматы изображений:
   - Desktop: 1600 × 600, пропорция 8:3
   - Mobile: 1080 × 1350, пропорция 4:5
========================================================== */


/* ==========================================================
   Плавная прокрутка
========================================================== */

html{
    scroll-behavior:smooth;
}


/* ==========================================================
   ОСНОВНОЙ HERO
========================================================== */

.dkz-category-hero{
    /* Цвета по умолчанию */
    --dkz-hero-title-color:#ffffff;
    --dkz-hero-text-color:rgba(255,255,255,.96);

    --dkz-hero-button-bg:#ffffff;
    --dkz-hero-button-color:#6f46b4;
    --dkz-hero-button-border:#ffffff;

    /* Интенсивность затемнения */
    --dkz-hero-overlay-strong:rgba(18,13,24,.64);
    --dkz-hero-overlay-medium:rgba(18,13,24,.40);
    --dkz-hero-overlay-light:rgba(18,13,24,.08);

    position:relative;
    isolation:isolate;

    display:block;

    width:100%;

    /* Пропорция изображения 1600 × 600 */
    aspect-ratio:8 / 3;

    margin:0 0 36px;
    padding:0;

    overflow:hidden;

    border-radius:20px;
    background:#6d557d;

    box-sizing:border-box;
}


/* ==========================================================
   ИЗОБРАЖЕНИЕ
========================================================== */

.dkz-category-hero__media{
    position:absolute;
    inset:0;
    z-index:0;

    display:block;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    overflow:hidden;
}

.dkz-category-hero__image{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    max-width:none;
    height:100%;
    max-height:none;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center center;

    border:0;
}


/* ==========================================================
   OVERLAY
   Направление зависит только от hero_align
========================================================== */

.dkz-category-hero__overlay{
    position:absolute;
    inset:0;
    z-index:1;

    display:block;

    pointer-events:none;
}


/* Текст слева — затемнение слева */

.dkz-category-hero--left .dkz-category-hero__overlay{
    background:
        linear-gradient(
            90deg,
            var(--dkz-hero-overlay-strong) 0%,
            var(--dkz-hero-overlay-medium) 46%,
            var(--dkz-hero-overlay-light) 100%
        );
}


/* Текст справа — затемнение справа */

.dkz-category-hero--right .dkz-category-hero__overlay{
    background:
        linear-gradient(
            270deg,
            var(--dkz-hero-overlay-strong) 0%,
            var(--dkz-hero-overlay-medium) 46%,
            var(--dkz-hero-overlay-light) 100%
        );
}


/* Текст по центру — затемнение по центру */

.dkz-category-hero--center .dkz-category-hero__overlay{
    background:
        radial-gradient(
            ellipse at center,
            var(--dkz-hero-overlay-strong) 0%,
            var(--dkz-hero-overlay-medium) 44%,
            var(--dkz-hero-overlay-light) 100%
        );
}


/* ==========================================================
   КОНТЕНТ HERO
========================================================== */

.dkz-category-hero__inner{
    position:absolute;
    inset:0;
    z-index:2;

    display:flex;
    align-items:center;

    width:100%;
    height:100%;

    margin:0;
    padding:54px 64px;

    box-sizing:border-box;
}

.dkz-category-hero__content{
    display:block;

    width:100%;
    max-width:640px;

    margin:0;
    padding:0;
}


/* ==========================================================
   ВЫРАВНИВАНИЕ
========================================================== */


/* LEFT */

.dkz-category-hero--left .dkz-category-hero__inner{
    justify-content:flex-start;
    text-align:left;
}

.dkz-category-hero--left .dkz-category-hero__content{
    margin-right:auto;
    margin-left:0;
}


/* CENTER */

.dkz-category-hero--center .dkz-category-hero__inner{
    justify-content:center;
    text-align:center;
}

.dkz-category-hero--center .dkz-category-hero__content{
    margin-right:auto;
    margin-left:auto;
}

.dkz-category-hero--center .dkz-category-hero__text{
    margin-right:auto;
    margin-left:auto;
}


/* RIGHT */

.dkz-category-hero--right .dkz-category-hero__inner{
    justify-content:flex-end;
    text-align:right;
}

.dkz-category-hero--right .dkz-category-hero__content{
    margin-right:0;
    margin-left:auto;
}

.dkz-category-hero--right .dkz-category-hero__text{
    margin-left:auto;
}


/* ==========================================================
   H1
========================================================== */

.dkz-category-hero__title{
    display:block;

    margin:0 0 18px;
    padding:0;

    color:var(--dkz-hero-title-color);

    font-size:48px;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.025em;

    text-shadow:0 2px 18px rgba(0,0,0,.18);

    text-wrap:balance;
}


/* ==========================================================
   ТЕКСТ HERO
========================================================== */

.dkz-category-hero__text{
    display:block;

    max-width:610px;

    margin:0 0 28px;
    padding:0;

    color:var(--dkz-hero-text-color);

    font-size:18px;
    font-weight:400;
    line-height:1.55;

    text-shadow:0 2px 14px rgba(0,0,0,.14);

    text-wrap:pretty;
}


/* ==========================================================
   КНОПКА
========================================================== */

.dkz-category-hero__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    width:auto;
    min-width:150px;
    min-height:46px;

    margin:0;
    padding:12px 23px;

    border:1px solid var(--dkz-hero-button-border);
    border-radius:999px;

    background:var(--dkz-hero-button-bg);

    color:var(--dkz-hero-button-color);

    font-size:15px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;

    box-shadow:0 9px 24px rgba(0,0,0,.18);

    box-sizing:border-box;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.dkz-category-hero__button:hover,
.dkz-category-hero__button:focus-visible{
    color:var(--dkz-hero-button-color);
    text-decoration:none;

    filter:brightness(.96);

    transform:translateY(-2px);

    box-shadow:0 13px 30px rgba(0,0,0,.23);
}

.dkz-category-hero__button:focus-visible{
    outline:3px solid rgba(255,255,255,.65);
    outline-offset:3px;
}

.dkz-category-hero__button-text{
    display:inline-block;
}

.dkz-category-hero__button-icon{
    display:inline-block;

    color:inherit;

    font-size:17px;
    font-weight:600;
    line-height:1;

    transition:transform .2s ease;
}

.dkz-category-hero__button:hover .dkz-category-hero__button-icon,
.dkz-category-hero__button:focus-visible .dkz-category-hero__button-icon{
    transform:translateY(3px);
}


/* ==========================================================
   ТЕМЫ HERO
   hero_theme отвечает только за цвета
========================================================== */


/* ----------------------------------------------------------
   DARK
   Светлый текст и белая кнопка
---------------------------------------------------------- */

.dkz-category-hero--dark{
    --dkz-hero-title-color:#ffffff;
    --dkz-hero-text-color:rgba(255,255,255,.96);

    --dkz-hero-button-bg:#ffffff;
    --dkz-hero-button-color:#6f46b4;
    --dkz-hero-button-border:#ffffff;

    --dkz-hero-overlay-strong:rgba(18,13,24,.64);
    --dkz-hero-overlay-medium:rgba(18,13,24,.40);
    --dkz-hero-overlay-light:rgba(18,13,24,.08);
}


/* ----------------------------------------------------------
   LIGHT
   Тёмный текст и фиолетовая кнопка
---------------------------------------------------------- */

.dkz-category-hero--light{
    --dkz-hero-title-color:#29242e;
    --dkz-hero-text-color:#514a58;

    --dkz-hero-button-bg:#8056c9;
    --dkz-hero-button-color:#ffffff;
    --dkz-hero-button-border:#8056c9;

    --dkz-hero-overlay-strong:rgba(255,255,255,.92);
    --dkz-hero-overlay-medium:rgba(255,255,255,.70);
    --dkz-hero-overlay-light:rgba(255,255,255,.08);
}

.dkz-category-hero--light .dkz-category-hero__title,
.dkz-category-hero--light .dkz-category-hero__text{
    text-shadow:none;
}


/* ----------------------------------------------------------
   ACCENT
   Фирменная фиолетовая тема
---------------------------------------------------------- */

.dkz-category-hero--accent{
    --dkz-hero-title-color:#ffffff;
    --dkz-hero-text-color:rgba(255,255,255,.96);

    --dkz-hero-button-bg:#ffffff;
    --dkz-hero-button-color:#7045b8;
    --dkz-hero-button-border:#ffffff;

    --dkz-hero-overlay-strong:rgba(86,45,142,.82);
    --dkz-hero-overlay-medium:rgba(112,69,184,.56);
    --dkz-hero-overlay-light:rgba(112,69,184,.08);
}


/* ==========================================================
   HERO БЕЗ ИЗОБРАЖЕНИЯ
========================================================== */

.dkz-category-hero--without-image{
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255,255,255,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #8056c9 0%,
            #5f3c9f 100%
        );
}


/* ==========================================================
   ПРОКРУТКА К КАРТОЧКАМ
========================================================== */

#product-list{
    scroll-margin-top:140px;
}


/* ==========================================================
   ПЛАНШЕТ
========================================================== */

@media (min-width:769px) and (max-width:1100px){

    .dkz-category-hero{
        margin-bottom:32px;
        border-radius:18px;
    }

    .dkz-category-hero__inner{
        padding:42px 40px;
    }

    .dkz-category-hero__content{
        max-width:560px;
    }

    .dkz-category-hero__title{
        margin-bottom:16px;

        font-size:40px;
    }

    .dkz-category-hero__text{
        margin-bottom:24px;

        font-size:17px;
        line-height:1.5;
    }

    .dkz-category-hero__button{
        min-height:44px;
        padding:11px 21px;
    }

    #product-list{
        scroll-margin-top:120px;
    }
}


/* ==========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   Изображение banner_mobile 1080 × 1350
========================================================== */

@media (max-width:768px){

    .dkz-category-hero{
        aspect-ratio:4 / 5;

        margin:0 0 26px;

        border-radius:16px;
    }

    .dkz-category-hero__image{
        object-position:center center;
    }

    .dkz-category-hero__inner{
        align-items:flex-end;
        justify-content:flex-start;

        padding:26px 20px;

        text-align:left;
    }

    .dkz-category-hero__content,
    .dkz-category-hero--left .dkz-category-hero__content,
    .dkz-category-hero--center .dkz-category-hero__content,
    .dkz-category-hero--right .dkz-category-hero__content{
        max-width:100%;

        margin:0;
    }

    .dkz-category-hero--left .dkz-category-hero__inner,
    .dkz-category-hero--center .dkz-category-hero__inner,
    .dkz-category-hero--right .dkz-category-hero__inner{
        justify-content:flex-start;
        text-align:left;
    }

    .dkz-category-hero__title{
        margin-bottom:12px;

        font-size:32px;
        line-height:1.1;
    }

    .dkz-category-hero__text,
    .dkz-category-hero--left .dkz-category-hero__text,
    .dkz-category-hero--center .dkz-category-hero__text,
    .dkz-category-hero--right .dkz-category-hero__text{
        max-width:100%;

        margin:0 0 20px;

        font-size:15px;
        line-height:1.5;
    }

    .dkz-category-hero__button{
        min-width:138px;
        min-height:42px;

        padding:11px 18px;

        font-size:13px;
    }

    /*
     * На мобильном текст всегда внизу,
     * поэтому градиент идёт сверху вниз.
     */

    .dkz-category-hero--left .dkz-category-hero__overlay,
    .dkz-category-hero--center .dkz-category-hero__overlay,
    .dkz-category-hero--right .dkz-category-hero__overlay{
        background:
            linear-gradient(
                to bottom,
                var(--dkz-hero-overlay-light) 0%,
                var(--dkz-hero-overlay-light) 35%,
                var(--dkz-hero-overlay-medium) 70%,
                var(--dkz-hero-overlay-strong) 100%
            );
    }

    #product-list{
        scroll-margin-top:90px;
    }
}


/* ==========================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ
========================================================== */

@media (max-width:420px){

    .dkz-category-hero{
        border-radius:14px;
    }

    .dkz-category-hero__inner{
        padding:23px 17px;
    }

    .dkz-category-hero__title{
        font-size:29px;
    }

    .dkz-category-hero__text{
        font-size:14px;
    }

    .dkz-category-hero__button{
        min-width:130px;
        min-height:40px;

        padding:10px 16px;

        font-size:12px;
    }
}


/* ==========================================================
   УСТРОЙСТВА БЕЗ HOVER
========================================================== */

@media (hover:none){

    .dkz-category-hero__button:hover{
        transform:none;
        filter:none;
    }
}


/* ==========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
========================================================== */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .dkz-category-hero__button,
    .dkz-category-hero__button-icon{
        transition:none;
    }
}