.zbc {
	position: relative;
	width: 100%;
	--zbc-per: var(--zbc-d, 3);
}
@media (max-width: 1024px) { .zbc { --zbc-per: var(--zbc-t, 2); } }
@media (max-width: 640px)  { .zbc { --zbc-per: var(--zbc-m, 1); } }

.zbc-track {
	display: flex;
	gap: var(--zbc-gap, 24px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 6px 2px 14px;
	outline: none;
}
.zbc-track::-webkit-scrollbar { display: none; }

.zbc-slide {
	flex: 0 0 calc((100% - (var(--zbc-per) - 1) * var(--zbc-gap, 24px)) / var(--zbc-per));
	scroll-snap-align: start;
	min-width: 0;
}
.zbc-card {
	height: 100%;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}
.zbc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); }

.zbc-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: #eceff3; overflow: hidden; }
.zbc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.zbc-card:hover .zbc-thumb img { transform: scale(1.05); }
.zbc-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #dfe4ea, #f3f5f8); }
.zbc-cat {
	position: absolute; left: 12px; top: 12px;
	background: var(--zbc-tag-bg, var(--zbc-accent, #e63946)); color: var(--zbc-tag-color, #fff);
	font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px;
}

.zbc-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.zbc-date { font-size: 13px; color: #7a828c; }
.zbc-title { margin: 0; font-size: 19px; line-height: 1.3; }
.zbc-title a { color: #1d2430; text-decoration: none; }
.zbc-card .zbc-title a:hover,
.zbc-card .zbc-title a:focus { color: #1d2430; }
.zbc-excerpt { margin: 0; font-size: 15px; line-height: 1.6; color: #4b5563; }
.zbc-btn {
	margin-top: auto; align-self: flex-start;
	color: var(--zbc-accent, #e63946); font-weight: 600; font-size: 14px; text-decoration: none;
	border-bottom: 2px solid transparent;
}
.zbc-btn:hover { border-bottom-color: currentColor; }

.zbc-arrow {
	position: absolute; top: 40%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--zbc-arrow-bg, #fff); color: var(--zbc-arrow-color, #1d2430); font-size: 26px; line-height: 1;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
	display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
	z-index: 2; transition: background .2s, color .2s;
}
.zbc-arrow:hover { background: var(--zbc-arrow-hover-bg, var(--zbc-accent, #e63946)); color: var(--zbc-arrow-hover-color, #fff); }
.zbc-prev { left: -14px; }
.zbc-next { right: -14px; }
@media (max-width: 640px) {
	.zbc-prev { left: 4px; }
	.zbc-next { right: 4px; }
}

.zbc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.zbc-dot {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
	background: var(--zbc-dot, #c9ced6); cursor: pointer; transition: all .25s;
}
.zbc-dot.is-active { background: var(--zbc-dot-active, var(--zbc-accent, #e63946)); width: 24px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
	.zbc-track { scroll-behavior: auto; }
	.zbc-card, .zbc-thumb img { transition: none; }
}