/*
 * 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
 * Centred, max 1600px wide, FIXED 250px tall. object-fit: contain scales the
 * image to fit completely inside the box - never cropped, aspect ratio kept,
 * centred. Slides stack in one grid cell for the cross-fade.
 * A banner may also have a dedicated mobile image, swapped in natively via
 * <picture>/<source> in the template - this box's sizing rules apply to
 * whichever image is shown.
 * ------------------------------------------------------------------------- */
.adata-promo-fullwidth {
    /* Pull the banner up tight under the breadcrumb (theme leaves space above
       columns.top). Make more negative for a tighter gap, less for more. */
    margin: -25px 0 16px;
}

.adata-fw {
    width: 100%;
    max-width: 1600px;
    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: contain;
    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
 * Full column width; image shown in full at its natural aspect ratio (no crop),
 * scaled to the column width, centred. Slides stack for the cross-fade.
 * ------------------------------------------------------------------------- */
.adata-promo-filtercolumn {
    margin: 1rem 0;
}

.adata-fc {
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: .375rem;
}

.adata-fc__slide {
    grid-area: 1 / 1;
    width: 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%;
}

.adata-fc__slide img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}