/* ============================================================
   Blog carousel — homepage (World of Di Fratelli)
   ============================================================ */

.df-blog {
	background: var(--df-black);
	color: var(--df-white);
	padding: var(--df-sp-16) 0 var(--df-sp-20);
	overflow: hidden;
}

.df-blog__inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 var(--df-gutter-x);
}

.df-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--df-sp-6);
	margin-bottom: var(--df-sp-10);
}

.df-blog__brand {
	text-decoration: none;
	color: var(--df-white);
	flex-shrink: 0;
}

.df-blog__brand-text {
	display: inline-block;
	font-family: var(--df-font-body);
	font-size: clamp(0.7rem, 1.1vw, 0.8125rem);
	font-weight: 400;
	letter-spacing: var(--df-track-wider);
	text-transform: uppercase;
	line-height: 1.3;
	padding-bottom: var(--df-sp-2);
	border-bottom: 1px solid var(--df-white);
}

.df-blog__head-right {
	display: flex;
	align-items: center;
	gap: var(--df-sp-6);
	min-width: 0;
}

.df-blog__cats {
	min-width: 0;
}

.df-blog__cats-list {
	display: flex;
	align-items: center;
	gap: var(--df-sp-6);
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.df-blog__cats-list::-webkit-scrollbar {
	display: none;
}

.df-blog__cat {
	font-family: var(--df-font-body);
	font-size: clamp(0.65rem, 1vw, 0.75rem);
	font-weight: 400;
	letter-spacing: var(--df-track-wide);
	text-transform: uppercase;
	color: var(--df-white);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.85;
	transition: opacity var(--df-ease);
}

.df-blog__cat:hover {
	opacity: 1;
}

.df-blog__arrows {
	display: flex;
	align-items: center;
	gap: var(--df-sp-2);
	flex-shrink: 0;
}

.df-blog__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--df-white);
	background: transparent;
	color: var(--df-white);
	cursor: pointer;
	transition: background var(--df-ease), color var(--df-ease);
}

.df-blog__arrow:hover {
	background: var(--df-white);
	color: var(--df-black);
}

.df-blog__viewport {
	overflow: hidden;
}

.df-blog__track {
	display: flex;
	gap: var(--df-sp-6);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.df-blog__track::-webkit-scrollbar {
	display: none;
}

/* ── Card (shared with archive) ── */

.df-blog-card {
	flex: 0 0 calc((100% - (var(--df-sp-6) * 2)) / 3);
	scroll-snap-align: start;
	min-width: 0;
}

.df-blog-card__link {
	display: block;
	text-decoration: none;
	color: var(--df-white);
}

.df-blog-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--df-dark);
	margin-bottom: var(--df-sp-4);
}

.df-blog-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--df-ease-slow);
}

.df-blog-card__link:hover .df-blog-card__img {
	transform: scale(1.03);
}

.df-blog-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		160deg,
		var(--df-dark) 0%,
		rgba(255, 255, 255, 0.08) 100%
	);
}

.df-blog-card__title {
	font-family: var(--df-font-body);
	font-size: clamp(0.875rem, 1.4vw, 1.05rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--df-white);
	margin: 0 0 var(--df-sp-2);
}

.df-blog-card__subtitle {
	font-family: var(--df-font-body);
	font-size: clamp(0.75rem, 1.1vw, 0.875rem);
	font-weight: 300;
	line-height: 1.45;
	color: var(--df-white-muted);
	margin: 0;
}

@media (max-width: 1023px) {
	.df-blog {
		padding: var(--df-sp-12) 0 var(--df-sp-16);
	}

	.df-blog__head {
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: var(--df-sp-8);
	}

	.df-blog__head-right {
		width: 100%;
		justify-content: space-between;
	}

	.df-blog-card {
		flex: 0 0 calc((100% - var(--df-sp-6)) / 2);
	}
}

@media (max-width: 768px) {
	.df-blog__cats {
		display: none;
	}

	.df-blog__head-right {
		width: auto;
		margin-left: auto;
	}

	.df-blog__track {
		gap: var(--df-sp-4);
	}

	.df-blog-card {
		flex: 0 0 78%;
	}

	.df-blog__arrow {
		width: 36px;
		height: 36px;
	}
}