/**
 * DS Elements — Carousel bài viết
 *
 * Cuộn ngang bằng scroll-snap thuần CSS, không phụ thuộc Swiper.
 * Đổi lại: hoạt động y hệt nhau ở frontend và trong editor, không có
 * vòng đời init/destroy để hỏng, và vuốt trên mobile là cử chỉ native.
 */

/* Thằng co lại là wrapper do Elementor sinh ra, không phải div bên trong.
   Khi widget nằm trong Flexbox hàng ngang, wrapper co vừa nội dung — mà
   nội dung rộng nhất là dòng heading, nên cả hàng card bị bó theo heading.
   Class này Elementor sinh cố định theo get_name(). */
.elementor-widget-ds-post-carousel {
	width: 100%;
	min-width: 0;
}

.ds-postc {
	width: 100%;
	min-width: 0;

	--ds-postc-cols: 4;
	--ds-postc-gap: var(--ds-space-6);

	/* Hai token này đi cùng nhau. Ratio chỉ là sàn: nếu phần nội dung bên phải
	   cao hơn chiều cao mà ratio sinh ra, ảnh sẽ giãn theo card và trông cao
	   hơn 4:3. Muốn ảnh ngang hơn nữa thì tăng thumb-width. */
	--ds-postc-thumb-width: 50%;
	--ds-postc-thumb-ratio: 4 / 3;
}

/* --- Cụm tiêu đề -------------------------------------------------------- */

.ds-postc__head {
	text-align: center;
	margin-bottom: var(--ds-space-8);
}

.ds-postc__eyebrow {
	margin: 0 0 var(--ds-space-2);
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-base);
	letter-spacing: var(--ds-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ds-color-brand-light);
}

.ds-postc__heading {
	margin: 0;
	font-size: var(--ds-fs-h2);
	font-weight: var(--ds-fw-black);
	line-height: var(--ds-lh-tight);
	text-transform: uppercase;
	color: var(--ds-color-brand);
}

/* --- Vùng cuộn ---------------------------------------------------------- */

.ds-postc__body {
	position: relative;
}

.ds-postc__track {
	display: flex;
	gap: var(--ds-postc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* Chừa chỗ cho box-shadow của card khỏi bị overflow cắt mất,
	   rồi kéo ngược lại bằng margin âm để mép card vẫn thẳng container. */
	padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-4);
	margin: calc(var(--ds-space-2) * -1) calc(var(--ds-space-2) * -1) calc(var(--ds-space-4) * -1);
}

.ds-postc__track::-webkit-scrollbar {
	display: none;
}

/* --- Card --------------------------------------------------------------- */

.ds-postc__card {
	flex: 0 0 calc(
		(100% - (var(--ds-postc-cols) - 1) * var(--ds-postc-gap)) / var(--ds-postc-cols)
	);
	/* Sàn tính bằng px: vừa chặn thẻ teo lại, vừa trả lại chiều rộng nội tại
	   cho track. min() để ở màn hẹp hơn 220px thẻ vẫn co theo container. */
	min-width: min(220px, 100%);
	scroll-snap-align: start;

	display: flex;
	align-items: stretch;
	overflow: hidden;

	background: var(--ds-color-white);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-md);
	box-shadow: var(--ds-shadow-card);
	transition: box-shadow var(--ds-transition), transform var(--ds-transition);
}

.ds-postc__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-raised);
}

.ds-postc__thumb {
	position: relative;
	flex: 0 0 var(--ds-postc-thumb-width);
	align-self: stretch;
	display: block;
	background: var(--ds-color-border);
}
/* Khối rỗng này giữ chiều cao tối thiểu theo đúng tỉ lệ. Không có nó thì
   chiều cao ảnh do nội dung bên phải quyết định — đó là lý do ảnh bị vuông. */
.ds-postc__thumb::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: var(--ds-postc-thumb-ratio);
}

.ds-postc__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-postc__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-1);
	padding: var(--ds-space-3);
}

.ds-postc__date {
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-base);
	color: var(--ds-color-muted);
}

.ds-postc__title {
	margin: 0;
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-base);
	color: var(--ds-color-heading);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ds-postc__title a {
	color: inherit;
	text-decoration: none;
}

.ds-postc__title a:hover {
	color: var(--ds-color-brand-light);
}

.ds-postc__link {
	margin-top: auto;
	padding-top: var(--ds-space-2);
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-1);
	align-self: flex-start;

	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-base);
	color: var(--ds-color-brand-light);
	text-decoration: none;
}

.ds-postc__link:hover {
	color: var(--ds-color-brand);
}

.ds-postc__link-arrow {
	transition: transform var(--ds-transition);
}

.ds-postc__link:hover .ds-postc__link-arrow {
	transform: translateX(3px);
}

/* --- Nút điều hướng ----------------------------------------------------- */

.ds-postc__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;

	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;

	background: var(--ds-color-white);
	color: var(--ds-color-brand-light);
	border: 1px solid var(--ds-color-brand-light);
	border-radius: var(--ds-radius-pill);
	box-shadow: var(--ds-shadow-raised);
	cursor: pointer;
	transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-postc__nav:hover {
	background: var(--ds-color-brand-light);
	color: var(--ds-color-white);
}

.ds-postc__nav:focus-visible {
	outline: 2px solid var(--ds-color-brand-light);
	outline-offset: 2px;
}

.ds-postc__nav--prev {
	left: -22px;
}

.ds-postc__nav--next {
	right: -22px;
}

.ds-postc__nav[hidden] {
	display: none;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ds-postc__nav--prev {
		left: var(--ds-space-1);
	}

	.ds-postc__nav--next {
		right: var(--ds-space-1);
	}
}

@media (max-width: 767px) {
	.ds-postc {
		--ds-postc-gap: var(--ds-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ds-postc__track {
		scroll-behavior: auto;
	}

	.ds-postc__card,
	.ds-postc__link-arrow {
		transition: none;
	}
}