/*
 * Banner layout contract (BAN-MET-001).
 * The shell owns rendered geometry; media only paints inside the reserved box.
 */
.banner-shell {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: stretch;
    block-size: clamp(
        var(--banner-min-height-desktop, 240px),
        var(--banner-preferred-height-desktop, 18vw),
        var(--banner-max-height-desktop, 300px));
    min-block-size: 0;
    max-inline-size: 100%;
    padding-block: 0;
    overflow: hidden;
    overflow: clip;
}

.banner-shell > :where(.banner-shell__media, .banner-shell__overlay, .banner-shell__visuals, .banner-shell__controls, .banner-shell__breadcrumb) {
    position: absolute;
    inset: 0;
}

.banner-shell__media {
    z-index: 0;
    --media-frame-fit: var(--banner-media-fit, cover);
    --media-frame-position: var(--banner-media-position-desktop, 50% 50%);
}

.banner-shell__media :where(.swiper-wrapper, .swiper-slide) {
    block-size: 100%;
    min-block-size: 0;
}

.banner-shell__media :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    object-fit: var(--banner-media-fit, cover);
    object-position: var(--banner-media-position-desktop, 50% 50%);
}

.banner-shell__overlay {
    z-index: 1;
    pointer-events: none;
    background: transparent;
}

.banner-shell[data-banner-overlay="subtle"] .banner-shell__overlay {
    background: var(--amin-product-banner-overlay-subtle, rgb(0 0 0 / 0.16));
}

.banner-shell[data-banner-overlay="normal"] .banner-shell__overlay {
    background: var(--amin-product-banner-overlay-normal, rgb(0 0 0 / 0.32));
}

.banner-shell[data-banner-overlay="strong"] .banner-shell__overlay {
    background: var(--amin-product-banner-overlay-strong, rgb(0 0 0 / 0.52));
}

.banner-shell__content {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    min-inline-size: 0;
    min-block-size: 0;
    inline-size: 100%;
    block-size: 100%;
    padding-block: clamp(1rem, 3vw, 2rem);
    pointer-events: none;
}

.banner-shell__content-container {
    display: grid;
    justify-items: var(--banner-text-align-desktop, start);
    min-inline-size: 0;
}

.banner-shell__content-body {
    inline-size: min(100%, var(--banner-content-width-desktop, 48rem));
    min-inline-size: 0;
    text-align: var(--banner-text-align-desktop, start);
    pointer-events: auto;
}

.banner-shell__title,
.banner-shell__title :where(h1, h2, h3, p) {
    margin-block: 0;
    font-size: clamp(1.5rem, calc(1.1rem + 1.4vw), var(--banner-title-max-desktop, 2.5rem));
    line-height: 1.2;
    text-wrap: balance;
}

.banner-shell__description {
    margin-block-start: clamp(.5rem, 1.3vw, 1rem);
    font-size: clamp(.95rem, calc(.9rem + .25vw), 1.125rem);
    line-height: 1.65;
}

.banner-shell__description > :first-child {
    margin-block-start: 0;
}

.banner-shell__description > :last-child {
    margin-block-end: 0;
}

.banner-shell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: var(--banner-text-align-desktop, start);
    margin-block-start: clamp(.75rem, 1.8vw, 1.25rem);
}

.banner-shell__actions .btn {
    min-block-size: 44px;
}

.banner-shell__visuals {
    z-index: 4;
    pointer-events: none;
}

.banner-shell__controls {
    z-index: 3;
    pointer-events: none;
}

.banner-shell__controls :where(.swiper-button-next, .swiper-button-prev, .swiper-pagination) {
    pointer-events: auto;
}

.banner-shell__breadcrumb {
    z-index: 3;
    inset-block-start: auto;
    min-block-size: 0;
    pointer-events: none;
}

.banner-shell__breadcrumb :is(a, button) {
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .banner-shell {
        block-size: clamp(
            var(--banner-min-height-tablet, 240px),
            var(--banner-preferred-height-tablet, 24vw),
            var(--banner-max-height-tablet, 280px));
    }

    .banner-shell__media {
        --media-frame-position: var(--banner-media-position-tablet, 50% 50%);
    }

    .banner-shell__media :is(img, video) {
        object-position: var(--banner-media-position-tablet, 50% 50%);
    }

    .banner-shell__content-container {
        justify-items: var(--banner-text-align-tablet, start);
    }

    .banner-shell__content-body {
        inline-size: min(100%, var(--banner-content-width-tablet, 48rem));
        text-align: var(--banner-text-align-tablet, start);
    }

    .banner-shell__title,
    .banner-shell__title :where(h1, h2, h3, p) {
        font-size: clamp(1.5rem, calc(1.15rem + 1.2vw), var(--banner-title-max-tablet, 2.5rem));
    }

    .banner-shell__actions {
        justify-content: var(--banner-text-align-tablet, start);
    }
}

@media (max-width: 767.98px) {
    .banner-shell {
        block-size: min(
            clamp(
                var(--banner-min-height-mobile, 200px),
                var(--banner-preferred-height-mobile, 52vw),
                var(--banner-max-height-mobile, 240px)),
            var(--banner-max-viewport-height-mobile, 45svh));
    }

    .banner-shell__media {
        --media-frame-position: var(--banner-media-position-mobile, 50% 50%);
    }

    .banner-shell__media :is(img, video) {
        object-position: var(--banner-media-position-mobile, 50% 50%);
    }

    .banner-shell__content {
        padding-block: 1rem;
    }

    .banner-shell__content-container {
        justify-items: var(--banner-text-align-mobile, center);
        padding-inline: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
    }

    .banner-shell__content-body {
        inline-size: min(100%, var(--banner-content-width-mobile, 48rem));
        text-align: var(--banner-text-align-mobile, center);
    }

    .banner-shell__title,
    .banner-shell__title :where(h1, h2, h3, p) {
        font-size: clamp(1.5rem, calc(1.15rem + 2vw), var(--banner-title-max-mobile, 2rem));
    }

    .banner-shell__actions {
        justify-content: var(--banner-text-align-mobile, center);
    }
}