/**
 * Gallery Block Splide Carousel – Frontend Styles
 *
 * Minimal layout tweaks to ensure the core/gallery block works
 * correctly as a Splide carousel. Splide's own CSS handles most
 * of the heavy lifting.
 *
 * @package gallery-block-splider
 */

/* ---------------------------------------------------------------
   Base: hide default gallery grid when carousel is active
   --------------------------------------------------------------- */
.wp-block-gallery.is-style-carousel.splide {
	display: block;
}

.wp-block-gallery.is-style-carousel.splide .splide__list {
	display: flex;
	align-items: center;
}

.wp-block-gallery.is-style-carousel.splide .splide__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ensure images fill the slide area proportionally */
.wp-block-gallery.is-style-carousel.splide .splide__slide .wp-block-image {
	margin: 0;
	width: 100%;
}

.wp-block-gallery.is-style-carousel.splide .splide__slide .wp-block-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: inherit;
}

.wp-block-gallery.is-style-carousel.splide .splide__slide .wp-block-image img[data-focal-x] {
	object-position: var(--kc-focal-x, 50%) var(--kc-focal-y, 50%);
}

/* ---------------------------------------------------------------
   Captions: keep gallery-level caption below the carousel
   --------------------------------------------------------------- */
.wp-block-gallery.is-style-carousel.splide > figcaption {
	text-align: center;
	margin-top: 0.75rem;
}

/* Per-image captions inside slides */
.wp-block-gallery.is-style-carousel.splide .splide__slide figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5rem 0.75rem;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.875rem;
	text-align: center;
}

.wp-block-gallery.is-style-carousel.splide .splide__slide .wp-block-image {
	position: relative;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   Graceful degradation: before JS runs, show normal grid
   --------------------------------------------------------------- */
.wp-block-gallery.is-style-carousel:not(.splide) {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.wp-block-gallery.is-style-carousel:not(.splide) .wp-block-image {
	flex: 1 1 calc(50% - 0.5rem);
	max-width: calc(50% - 0.5rem);
}

/* ---------------------------------------------------------------
   Arrows: minor positioning tweaks
   --------------------------------------------------------------- */
.wp-block-gallery.is-style-carousel .splide__arrows .splide__arrow {
	background: rgba(255, 255, 255, 0.85);
	opacity: 0.9;
}

.wp-block-gallery.is-style-carousel .splide__arrows .splide__arrow:hover,
.wp-block-gallery.is-style-carousel .splide__arrows .splide__arrow:focus {
	opacity: 1;
	background: #fff;
}

/* ---------------------------------------------------------------
   Pagination dots
   --------------------------------------------------------------- */
.wp-block-gallery.is-style-carousel .splide__pagination__page.is-active {
	background: currentColor;
}