/* ==========================================================================
   Icon Box Block
   Repeater grid of icon cards.
   Figma spec: #FFFCF8 bg · Pistara 18px 500 uppercase · letter-spacing 1.44px
   ========================================================================== */

/* ── Desktop flex grid (editor preview + frontend after Splide destroys) ───── */
.block-icon-box--preview {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: center;
}

/* Allow cards to overflow when Splide has destroyed itself into a flex 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-icon-box.splide.is-initialized:not(.is-active) .splide__track,
.block-icon-box.splide:not(.is-initialized) .splide__track {
	overflow: visible;
}

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

/* Centre items only in flex-grid mode (Splide destroyed or not yet initialised).
   MUST NOT apply while the carousel is active: Splide positions slides via
   transform: translateX() assuming the list starts at the left edge. Adding
   justify-content: center shifts the list inward by an amount Splide can't
   measure, misaligning every slide and causing clone bleed-through and a
   "backwards" loop transition. */
.block-icon-box.splide.is-initialized:not(.is-active) .splide__list,
.block-icon-box.splide:not(.is-initialized) .splide__list {
	justify-content: center;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.icon-box-item {
	--icon-color: var(--wp--preset--color--primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: #FFFCF8;
	padding: 32px 24px;
	min-height: 195px;
	text-align: center;
	position: relative;
}

.icon-box-item:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: var(--icon-color);
	transition: height 0.2s ease;
}

.icon-box-item:hover:before,
.icon-box-item.is-visible:before {
	height: 2px;
}

/* ── Icon wrapper ──────────────────────────────────────────────────────────── */
.icon-box-item__icon {
	color: var(--icon-color);
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.icon-box-item__icon--svg svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}

.icon-box-item__icon--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ── Label ──────────────────────────────────────────────────────────────────── */
.icon-box-item__text {
	font-family: var(--wp--preset--font-family--pistara);
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.44px;
	line-height: 1.33;
	color: var(--wp--preset--color--black, #000);
	-webkit-text-stroke-width: 0.46px;
	-webkit-text-stroke-color: var(--wp--preset--color--black);
	margin: 0!important;
	text-align: center!important;
}

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

/* ── Scroll-in animation ─────────────────────────────────────────────────── */
@keyframes icon-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 */
.icon-box-item.will-animate {
	opacity: 0;
}

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

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

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

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

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

/* ── Responsive row-gap (desktop flex grid only) ───────────────────────────── */
/* Flex grid when Splide is destroyed (any breakpoint) or never initialized */
.block-icon-box.splide.is-initialized:not(.is-active) .splide__list,
.block-icon-box.splide:not(.is-initialized) .splide__list {
	display: flex;
	flex-wrap: wrap;
}

.block-icon-box.splide.is-initialized:not(.is-active) .icon-box-item,
.block-icon-box.splide:not(.is-initialized) .icon-box-item {
	flex: 0 1 285px;
}

@media (min-width: 1024px) {
	.block-icon-box .splide__list,
	.block-icon-box--preview {
		row-gap: 30px;
	}
}

@media (min-width: 1200px) {
	.block-icon-box .splide__list {
		gap: 22px;
	}
	
	.block-icon-box .splide__list,
	.block-icon-box--preview {
		row-gap: 40px;
	}
}

@media (min-width: 1440px) {
	.block-icon-box .splide__list,
	.block-icon-box--preview {
		row-gap: 55px;
	}
}