/* ==========================================================================
   Gallery Carousel block — Splide.js integration styles
   Jewelry Studio
   ========================================================================== */

.wp-block-acf-gallery-carousel {
	--wp--style--global--content-size: 100%
}

/* ── Slide image ──────────────────────────────────────────────────────────── */
/*
 * Aspect ratio matches the original 580 × 584 px design spec per image.
 * object-fit:cover fills the cell without distortion at all column widths.
 */
.gallery-carousel__item img {
	display: block;
	width: 100%;
	aspect-ratio: 580 / 584;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

/* ── Pagination position — pull dots out of the track ────────────────────── */
/*
 * Splide renders pagination as position:absolute by default, overlapping the
 * bottom edge of the track. Resetting to static drops it into normal flow so
 * it sits visually below the slides.
 */
.gallery-carousel .splide__pagination {
	position: static;
	margin-top: 2.625rem;
	margin-bottom: 0;
}

/* ── Pagination dots — override Splide defaults ───────────────────────────── */
.gallery-carousel .splide__pagination__page {
	width: 6px;
	height: 6px;
	background: #ccc;
	opacity: 1;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.gallery-carousel .splide__pagination__page.is-active {
	background: var( --wp--preset--color--primary );
    transform: scale(1);
}

.gallery-carousel .splide__pagination__page:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 3px;
}

/* ── Editor preview — static CSS grid ────────────────────────────────────── */
/*
 * Splide JS does not initialise inside the ACF block preview iframe, so the
 * editor renders a plain CSS grid instead of the Splide markup.
 */
.gallery-carousel--preview .gallery-carousel__preview-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2.625rem; /* 42px — mirrors the front-end Splide gap */
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */
.gallery-carousel--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	background: #f0f0f0;
	border: 2px dashed #ccc;
	color: #888;
	font-size: 0.875rem;
	margin: auto;
}