/* ==========================================================================
   Image Box Block
   Repeater grid of image cards with photo + uppercase label.
   Figma spec: white bg · padding 20px · gap 30px · LibreFranklin-Medium 22px uppercase
   4 columns on desktop (≥1200px) · Splide carousel below 1199px
   ========================================================================== */

/* ── Editor preview — responsive grid ───────────────────────────────────────── */
.block-image-box--preview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1199px) {
	.block-image-box--preview {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.block-image-box--preview {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.block-image-box--preview {
		grid-template-columns: 1fr;
	}
}

/* Allow cards to overflow when Splide has destroyed itself into a CSS grid.
   Must NOT be applied while the carousel is active — that would expose the
   cloned loop slides on either side of the visible slide. */
.block-image-box.splide.is-initialized:not(.is-active) .splide__track,
.block-image-box.splide:not(.is-initialized) .splide__track {
	overflow: visible;
}

/* Base list resets — safe to apply in all states */
.block-image-box .splide__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 4-column CSS Grid after Splide destroys at 1200px.
   Scoped to destroyed/uninitialised states so it never fires while the
   carousel is active (would break Splide's transform-based positioning). */
.block-image-box.splide.is-initialized:not(.is-active) .splide__list,
.block-image-box.splide:not(.is-initialized) .splide__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Prevent grid blowout from long text or wide images */
.block-image-box.splide.is-initialized:not(.is-active) .image-box-item,
.block-image-box.splide:not(.is-initialized) .image-box-item {
	min-width: 0;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
/* Two-row grid: image takes its natural height (row 1 = auto),
   text fills the remainder (row 2 = 1fr). Because the outer 4-col CSS Grid
   stretches every card in a row to the same total height, the 1fr row is
   identical across cards — so text always starts at the exact same Y. */
.image-box-item {
	background: #ffffff;
	padding: 20px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 30px;
	position: relative;
}

/* ── Image wrapper ──────────────────────────────────────────────────────────── */
.image-box-item__image {
	width: 100%;
}

.image-box-item__image img {
	display: block;
	width: 100%;
	aspect-ratio: 5/6;
	max-height: 318px;
	object-fit: cover;
}

/* ── Label ──────────────────────────────────────────────────────────────────── */
.image-box-item__text {
	color: #000000;
	text-align: center !important;
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	align-self: center;
	margin: 0 !important;
}

/* ── Editor placeholder ────────────────────────────────────────────────────── */
.block-image-box--placeholder {
	padding: 24px;
	background: #f5f5f5;
	text-align: center;
	color: #999;
	font-style: italic;
	border-radius: 4px;
}

/* ── Scroll-in animation ─────────────────────────────────────────────────── */
@keyframes image-box-fade-in-down {
	from {
		opacity: 0;
		transform: translateY(-18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Grid mode — each item hidden until it animates in */
.image-box-item.will-animate {
	opacity: 0;
}

.image-box-item.is-in-view {
	animation: image-box-fade-in-down 0.55s ease forwards;
	animation-delay: var(--anim-delay, 0ms);
}

/* Slider mode — whole container hidden until it animates in */
.block-image-box.will-animate {
	opacity: 0;
}

.block-image-box.is-in-view {
	animation: image-box-fade-in-down 0.55s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
	.image-box-item.will-animate,
	.block-image-box.will-animate {
		opacity: 1;
	}

	.image-box-item.is-in-view,
	.block-image-box.is-in-view {
		animation: none;
	}
}

/* ── Mobile card adjustments ────────────────────────────────────────────────── */
@media (max-width: 479px) {
	.image-box-item {
		padding: 16px;
		gap: 20px;
	}
}