/**
 * Home page blog cards ("Güncel Yazılarımız", BlogSection) as a carousel — a deliberate change from
 * the original grid (2026-10-09 revision). Same behaviour as the testimonials carousel: phones 1 card
 * (the next one peeks in), tablets 2, desktops 3. The generated block markup is untouched; this only
 * applies once assets/js/site/carousel.js has added .ep-carousel-ready and the arrow/dot controls
 * (styled in references-carousel.css, which this file depends on). Without JS, and in the block
 * editor's preview, the original grid shows.
 */

.BlogSection-module__TjVhMG__grid.ep-carousel-ready {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Phones: the track bleeds to the screen edges and the next card peeks in. Vertical padding
	   leaves room for the card's hover lift and shadow inside the scroll box. */
	margin: 0 calc(-1 * var(--margin-mobile));
	padding: 8px var(--margin-mobile) 24px;
	scroll-padding-inline: var(--margin-mobile);
	scrollbar-width: none;
}

.BlogSection-module__TjVhMG__grid.ep-carousel-ready::-webkit-scrollbar {
	display: none;
}

.BlogSection-module__TjVhMG__grid.ep-carousel-moving {
	scroll-snap-type: none;
}

.BlogSection-module__TjVhMG__grid.ep-carousel-ready > * {
	flex: 0 0 86%;
	scroll-snap-align: start;
}

/* The arrows sit between the cards and the "all articles" link. */
.BlogSection-module__TjVhMG__grid.ep-carousel-ready + .ep-carousel-nav {
	margin-top: 12px;
}

.BlogSection-module__TjVhMG__section .ep-carousel-nav ~ .BlogSection-module__TjVhMG__footer {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.BlogSection-module__TjVhMG__grid.ep-carousel-ready {
		gap: 24px;
		margin: 0 -8px;
		padding: 8px 8px 24px;
		scroll-padding-inline: 8px;
	}

	.BlogSection-module__TjVhMG__grid.ep-carousel-ready > * {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (min-width: 1024px) {
	.BlogSection-module__TjVhMG__grid.ep-carousel-ready > * {
		flex-basis: calc((100% - 48px) / 3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.BlogSection-module__TjVhMG__grid.ep-carousel-ready {
		scroll-behavior: auto;
	}
}