/**
 * Home blog preview — header + desktop grid overrides.
 * Carousel layout, Swiper, nav, fades: home-featured.css (shared with courses).
 */

.elementor-widget-cb_home_blog_preview .elementor-widget-container {
	overflow: visible;
}

.cb-home-blog.cb-widget-section {
	padding: var(--space-24) 0;
	overflow: visible;
}

.cb-home-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
	margin-bottom: 0;
}

.cb-home-blog .cb-home-featured__bleed {
	margin-top: var(--space-12);
}

/* Match featured bleed at carousel widths (full-width track + fades) */
@media (max-width: 979px) {
	.cb-home-blog .cb-home-featured__inner.cb-container {
		max-width: none;
		width: 100%;
		padding-inline: 0;
	}

	/* Blog carousel: one full card per slide (testimonial-style) — no peeking
	   side cards, no scale/opacity falloff like the course carousel. Let Swiper
	   size each slide (slidesPerView: 1) — do not force width:100% or allow
	   flex-shrink, which collapses all slides into the viewport at once. */
	.cb-home-blog .cb-home-featured__fade {
		display: none;
	}

	.cb-home-blog .cb-home-featured__swiper .swiper-slide {
		flex-shrink: 0;
	}

	.cb-home-blog .cb-home-featured__swiper .swiper-slide .cb-blog-card {
		max-width: 440px;
		margin-inline: auto;
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
}

/* Desktop grid: asymmetric 3-up (courses use equal columns) */
@media (min-width: 980px) {
	.cb-home-blog--cols-3 .cb-home-featured__swiper .swiper-wrapper {
		grid-template-columns: 1.4fr 1fr 1fr !important;
		justify-items: stretch;
	}

	.cb-home-blog .cb-home-featured__swiper .swiper-slide {
		max-width: none;
	}

	.cb-home-blog .cb-home-featured__swiper .swiper-slide .cb-blog-card {
		max-width: none;
		width: 100%;
		transform: none;
		opacity: 1;
	}
}

/* Static grid (related posts on single) */
.cb-home-blog__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var(--space-6);
}

@media (max-width: 1024px) {
	.cb-home-blog__grid {
		grid-template-columns: 1fr 1fr;
	}

	.cb-home-blog__grid .cb-blog-card--large {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.cb-home-blog__grid {
		grid-template-columns: 1fr;
	}
}