/* ─── Slick Gallery ──────────────────────────────────────────────────────────
 * Styles shared by every SlickGallery instance.
 * Scoped to .slick-gallery-wrapper so they don't bleed into the Slick
 * carousel styles used elsewhere in the plugin.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Clip each slide so oversized images don't break the layout */
.slick-gallery-wrapper .slick-slide {
    overflow: hidden;
}

/* Aspect ratio constraints on the wrapper — applied via PHP getAspectRatioClass() */
.slick-gallery-wrapper.aspect-ratio-16-9 .slick-slide {
    aspect-ratio: 16 / 9;
}

.slick-gallery-wrapper.aspect-ratio-4-3 .slick-slide {
    aspect-ratio: 4 / 3;
}

.slick-gallery-wrapper.aspect-ratio-square .slick-slide {
    aspect-ratio: 1 / 1;
}

.slick-gallery-wrapper.aspect-ratio-raw .slick-slide {
    aspect-ratio: auto;
}

/* Images fill the slide and centre-crop — the correct behaviour for galleries */
.slick-gallery-wrapper .slick-gallery-image {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
}

/* Raw/uncropped variant: contain instead of cover */
.slick-gallery-wrapper.aspect-ratio-raw .slick-gallery-image {
    object-fit: contain;
    object-position: center;
    height: auto;
}

/* Optional caption bar */
.slick-gallery-wrapper .slick-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}

/* Keep arrows on top of slides */
.slick-gallery-wrapper .slick-prev {
    left: 10px;
    z-index: 100;
}

.slick-gallery-wrapper .slick-next {
    right: 10px;
    z-index: 100;
}