/* Home blog cards. Loads after 1b5/1b6. Tokens only. */

.yepx-home-v2 .yepx-blog,
.yepx-blog {
	background: var(--yepx-color-bg-section);
	text-align: center;
}

.yepx-home-v2 .yepx-blog > :is(h1, h2, h3, h4, h5, h6),
.yepx-blog > :is(h1, h2, h3, h4, h5, h6) {
	margin-inline: auto;
	max-width: var(--yepx-measure);
}

.yepx-home-v2 .yepx-blog__list,
.yepx-blog__list {
	gap: var(--yepx-space-6);
	margin: 0 0 var(--yepx-space-8);
	text-align: start;
}

.yepx-home-v2 .yepx-blog-card a,
.yepx-blog-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: var(--yepx-color-surface);
	border: 1px solid var(--yepx-color-border-soft);
	border-radius: var(--yepx-radius-card);
	box-shadow: var(--yepx-shadow-card);
	text-align: start;
}

.yepx-home-v2 .yepx-blog-card a:hover,
.yepx-blog-card a:hover {
	box-shadow: var(--yepx-shadow-hover);
}

.yepx-blog-card__media,
.yepx-blog-card__media img,
.yepx-blog-card__fallback {
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	background: var(--yepx-color-surface-alt);
}

.yepx-blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--yepx-space-5) var(--yepx-card-pad) var(--yepx-space-6);
	gap: var(--yepx-space-2);
}

.yepx-blog-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yepx-space-2) var(--yepx-space-3);
}

.yepx-blog-card__cat,
.yepx-blog-card time {
	display: inline-block;
	margin: 0;
	font-size: var(--yepx-meta);
	color: var(--yepx-color-muted);
}

.yepx-blog-card__title,
.yepx-blog-card strong {
	display: block;
	margin: 0;
	color: var(--yepx-color-heading);
	font-size: var(--yepx-h3);
	line-height: 1.35;
}

.yepx-blog-card__excerpt {
	display: block;
	color: var(--yepx-color-text);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.yepx-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--yepx-space-2);
	margin-top: auto;
	padding-top: var(--yepx-space-3);
	color: var(--yepx-color-hover);
	font-weight: 700;
	min-height: 44px;
}

.yepx-blog-card__more::after {
	content: "→";
	font-weight: 700;
}

.yepx-blog__actions {
	margin: 0;
	text-align: center;
}

.yepx-blog__actions .yepx-btn {
	min-height: 44px;
	border-radius: var(--yepx-radius-pill);
}

.yepx-blog__lead {
	margin: 0 auto var(--yepx-space-6);
	max-width: var(--yepx-measure);
	color: var(--yepx-color-muted);
}

@media (min-width: 768px) {
	.yepx-home-v2 .yepx-blog__list,
	.yepx-blog__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}

	.yepx-home-v2 .yepx-blog__list > li,
	.yepx-blog__list > li {
		flex: none;
		max-width: none;
		scroll-snap-align: unset;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.yepx-blog.yepx-blog--tcols-2 .yepx-blog__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yepx-blog.yepx-blog--tcols-3 .yepx-blog__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.yepx-blog.yepx-blog--dcols-2 .yepx-blog__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yepx-blog.yepx-blog--dcols-3 .yepx-blog__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.yepx-home-v2 .yepx-blog__list,
	.yepx-blog__list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		grid-template-columns: none;
		grid-auto-flow: unset;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.yepx-home-v2 .yepx-blog__list > li,
	.yepx-blog__list > li {
		flex: 0 0 86%;
		max-width: 86%;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yepx-home-v2 .yepx-blog-card a,
	.yepx-blog-card a {
		transition: none;
	}
}