/*
 * Adata_PromotionalBanner - frontend banner styles.
 * Moved out of the PHTML templates so the templates stay clean and this is
 * cached/maintained as a normal static asset. Loaded on the category page via
 * view/frontend/layout/catalog_category_view.xml.
 */

/* Shared: wrappers are positioning contexts for the nav arrows. */
.adata-promo-fullwidth,
.adata-promo-filtercolumn {
    position: relative;
}

/* ---------------------------------------------------------------------------
 * Full-width (main) banner
 * ------------------------------------------------------------------------- */
.adata-promo-fullwidth {
    margin: -25px auto 16px;
    max-width: 1500px;
}

.adata-fw {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    height: 250px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: .375rem;
}

.adata-fw__slide {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

.adata-fw__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.adata-fw__slide,
.adata-fw__slide a,
.adata-fw__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.adata-fw__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.adata-fw__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    opacity: 0;
    transition: opacity .3s;
    cursor: pointer;
}

.adata-promo-fullwidth:hover .adata-fw__nav {
    opacity: 1;
}

.adata-fw__nav--prev {
    left: 10px;
}

.adata-fw__nav--next {
    right: 10px;
}

/* ---------------------------------------------------------------------------
 * Filter-column (sidebar) banner
 * ------------------------------------------------------------------------- */
.adata-promo-filtercolumn {
    margin: 1rem 0;
    overflow: hidden;
}

.adata-fc {
    width: 350px;
    height: 500px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: .375rem;
}

.adata-fc__slide {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}

.adata-fc__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.adata-fc__slide,
.adata-fc__slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.adata-fc__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------------------------------------------
 * Mobile overrides (≤767px)
 * Keep display:grid so slides stack correctly for the crossfade.
 * Use padding-top aspect-ratio trick to make the container height match
 * the image aspect ratio (350x200 = 57.14%).
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Full-width banner: fixed box, whole image fits inside it (contain).
       Any leftover space is filled with a neutral background. */
    .adata-promo-fullwidth {
        margin: 0 0 16px 0;
        max-width: 100%;
    }

    .adata-fw {
        width: 100%;
        max-width: 100%;
        height: 200px;
        display: grid;
        place-items: center;
        border-radius: 0;
        overflow: hidden;
        background: #f4f4f4;
    }

    .adata-fw__slide {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
    }

    .adata-fw__slide,
    .adata-fw__slide a,
    .adata-fw__slide picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .adata-fw__slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    /* Filter-column banner: same "fit inside the box" behaviour. */
    .adata-promo-filtercolumn {
        width: 100%;
        max-width: 100%;
    }

    .adata-fc {
        width: 100%;
        max-width: 100%;
        height: 200px;
        display: grid;
        place-items: center;
        border-radius: 0;
        overflow: hidden;
        background: #f4f4f4;
    }

    .adata-fc__slide {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
    }

    .adata-fc__slide,
    .adata-fc__slide a,
    .adata-fc__slide picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .adata-fc__slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }
}