/* =========================================================
   KihCarpet Promo Banners
========================================================= */

.kih-promo-zone {
    width: 100%;

    padding:
        clamp(12px, 1.8vw, 24px)
        20px;
}

.kih-promo-zone__inner {
    display: grid;
    gap: 16px;

    width: 100%;
}

.kih-promo-banner {
    --kih-banner-max-width: 1400px;
    --kih-banner-radius: 16px;
    --kih-banner-object-fit: cover;

    display: block;

    width: min(
        100%,
        var(--kih-banner-max-width)
    );

    margin: 0 auto;

    overflow: hidden;

    background: #f3f7f4;

    border-radius:
        var(--kih-banner-radius);

    box-shadow:
        0 8px 28px
        rgba(35, 79, 48, .055);

    line-height: 0;

    text-decoration: none;

    transform: translateZ(0);
}

.kih-promo-banner--full {
    width: 100%;
    max-width: none;

    border-radius:
        var(--kih-banner-radius);
}

.kih-promo-banner__picture {
    display: block;

    width: 100%;
    height: 100%;
}

.kih-promo-banner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        var(--kih-banner-object-fit);

    object-position: center;
}


/* Natural image proportions */

.kih-promo-banner--auto
.kih-promo-banner__picture,
.kih-promo-banner--auto img {
    height: auto;
}


/* Ready presets */

.kih-promo-banner--wide_1400_350,
.kih-promo-banner--wide_1400_500,
.kih-promo-banner--wide_1200_300,
.kih-promo-banner--ratio_3_1,
.kih-promo-banner--ratio_2_1 {
    aspect-ratio:
        var(--kih-banner-ratio);
}


/* Custom */

.kih-promo-banner--custom {
    height: auto;
}

.kih-promo-banner--custom.has-desktop-height {
    height:
        var(--kih-banner-desktop-height);
}


/* Clickable hover */

a.kih-promo-banner {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

a.kih-promo-banner:hover,
a.kih-promo-banner:focus-visible {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 34px
        rgba(35, 79, 48, .11);
}

a.kih-promo-banner:focus-visible {
    outline:
        2px solid #1e8a45;

    outline-offset:
        3px;
}


/* Full width mode */

.kih-promo-banner--full {
    width: 100vw;
    max-width: none;

    margin-left:
        calc(50% - 50vw);

    margin-right:
        calc(50% - 50vw);

    border-radius: 0;
}


@media (max-width: 767px) {

    .kih-promo-zone {
        padding:
            10px
            14px;
    }

    .kih-promo-zone__inner {
        gap: 12px;
    }

    .kih-promo-banner {
        --kih-banner-radius:
            min(
                var(--kih-banner-radius),
                14px
            );
    }

    .kih-promo-banner--full {
        width: 100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);
    }

    .kih-promo-banner--custom.has-mobile-height {
        height:
            var(--kih-banner-mobile-height);
    }
}


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

    a.kih-promo-banner {
        transition: none;
    }

    a.kih-promo-banner:hover,
    a.kih-promo-banner:focus-visible {
        transform: none;
    }
}