/* A collection's banner block (products/partials/_collection-banners).
 *
 * Loaded by the block itself: the collection page does not load product-details.css,
 * which is where these rules first lived and never applied.
 *
 * A single banner shows whole, at the proportions it was uploaded in, the way the one
 * page banner always did. Only arrangements that must line up are cut to one shape:
 * tiles in a row share a height, and carousel slides share one so the block does not
 * jump as they turn. The admin form states these shapes next to the upload fields. */

.collection-banners img {
    display: block;
    width: 100%;
    height: auto;
}

.collection-banners .row > [class*="col-"] > a,
.collection-banners .row > [class*="col-"] > div {
    height: 100%;
}

.collection-banners[data-layout="two_up"] img,
.collection-banners[data-layout="three_up"] img,
.collection-banners[data-layout="grid_2x2"] img {
    aspect-ratio: 16 / 7;
    height: 100%;
    object-fit: cover;
}

.collection-banners[data-layout="carousel"] img {
    aspect-ratio: 64 / 15;
    object-fit: cover;
}

/* Owl hides a carousel until its script has started it, so the block would take no
   room and then push the products down. Until then, show the first slide in place. */
.collection-banner-slider:not(.owl-loaded) {
    display: block;
}

.collection-banner-slider:not(.owl-loaded) > :not(:first-child) {
    display: none;
}

@media (max-width: 767.98px) {
    /* A phone cut is drawn for the phone, so it gets the phone's shape. A banner without
       one keeps its wide shape here instead of being cut down to its middle. */
    .collection-banners[data-layout="carousel"] .has-phone-cut img {
        aspect-ratio: 2 / 1;
    }

    .collection-banners[data-layout="two_up"] .has-phone-cut img,
    .collection-banners[data-layout="three_up"] .has-phone-cut img,
    .collection-banners[data-layout="grid_2x2"] .has-phone-cut img {
        aspect-ratio: 3 / 2;
    }
}