/* ============================================================
   Core Web Vitals fixes (CLS) — visual output unchanged.
   Lays the category slider out at its FINAL slidesPerView size
   BEFORE Swiper initialises, so the page doesn't shift.
   Rules only apply while the slider is NOT yet initialised
   (Swiper adds .swiper-container-initialized after init, after
   which Swiper's own inline styles take over — we never override them).
   Matches post-slider-4 config: 4 per view ≥992px, 2 ≥768px, 1 below; 30px gap.
   ============================================================ */

/* --- Font CLS fix: metric-matched fallback for Inter ---
   Before the web font loads, text renders in this Arial-based fallback
   whose metrics are adjusted to match Inter EXACTLY, so when Inter
   swaps in there is no reflow / layout shift. Final look = Inter. */
@font-face {
	font-family: 'Inter-fallback';
	src: local('Arial');
	ascent-override: 90.44%;
	descent-override: 22.52%;
	line-gap-override: 0.00%;
	size-adjust: 107.12%;
}
html {
	font-family: 'Inter', 'Inter-fallback', sans-serif;
}

.swiper-container.post-slider-4 {
	min-height: 224px; /* h-52 slide (208px) + wrapper pt-4 (16px) */
}

.post-slider-4:not(.swiper-container-initialized) .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
}

.post-slider-4:not(.swiper-container-initialized) .swiper-slide {
	flex: 0 0 auto;
	width: 100%;            /* mobile: 1 per view */
	margin-right: 30px;
}

@media (min-width: 768px) {
	.post-slider-4:not(.swiper-container-initialized) .swiper-slide {
		width: calc((100% - 30px) / 2);  /* 2 per view */
	}
}

@media (min-width: 992px) {
	.post-slider-4:not(.swiper-container-initialized) .swiper-slide {
		width: calc((100% - 90px) / 4);  /* 4 per view */
	}
}