/**
 * DS Elements — Lưới bài viết
 */

.elementor-widget-ds-post-cards {
	width: 100%;
	min-width: 0;
}

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

	--ds-pc-cols: 4;
	--ds-pc-gap: var(--ds-space-4);
	--ds-pc-ratio: 1.4;
	--ds-pc-title-lines: 3;
}

.ds-pc *,
.ds-pc *::before,
.ds-pc *::after {
	box-sizing: border-box;
}

/* --- Tiêu đề ------------------------------------------------------------ */

.ds-pc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ds-space-4);
	margin-bottom: var(--ds-pc-head-gap, var(--ds-space-6));
}

.ds-pc__heading {
	margin: 0;
	color: var(--ds-pc-heading-color, var(--ds-color-brand));
	font-size: var(--ds-fs-h3);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h3);
	text-transform: uppercase;
}

.ds-pc__more {
	flex: 0 0 auto;
	color: var(--ds-pc-more-color, var(--ds-color-brand-light));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
	text-decoration: none;
	white-space: nowrap;
}

.ds-pc__more:hover {
	text-decoration: underline;
}

/* --- Lưới --------------------------------------------------------------- */

.ds-pc__grid {
	display: grid;
	grid-template-columns: repeat(var(--ds-pc-cols), minmax(0, 1fr));
	gap: var(--ds-pc-gap);
}

.ds-pc__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;

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

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

.ds-pc__media {
	display: block;
	background: var(--ds-color-surface);
}

/* Tỉ lệ đặt thẳng lên <img> kèm height:auto, KHÔNG đặt trên khung bọc.
   Khung bọc là con của thẻ flex-column: min-height:auto của flex item lấy
   chiều cao tự nhiên của ảnh, nên ảnh dọc hơn tỉ lệ đẩy khung cao theo (đo:
   ảnh 1:4 trong khung 1:1 ra 200×800). height:auto phải tự khai — <img> của
   WordPress mang thuộc tính height, không có dòng này thì thuộc tính thắng
   aspect-ratio (ra 200×400); site thật chỉ thoát nhờ reset của theme. */
.ds-pc__media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: var(--ds-pc-ratio);
	object-fit: cover;
}

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

.ds-pc__title {
	margin: 0;
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);

	/* Cắt bớt dòng để mọi thẻ cao xấp xỉ nhau; đặt 0 dòng thì bỏ giới hạn. */
	display: -webkit-box;
	-webkit-line-clamp: var(--ds-pc-title-lines);
	line-clamp: var(--ds-pc-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ds-pc__title a {
	color: var(--ds-pc-title-color, var(--ds-color-brand));
	text-decoration: none;
}

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

.ds-pc__link {
	/* Đẩy xuống đáy để mọi thẻ có link thẳng hàng nhau. */
	margin-top: auto;
	color: var(--ds-pc-link-color, var(--ds-color-brand-light));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-small);
	text-decoration: none;
}

.ds-pc__link:hover {
	text-decoration: underline;
}

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

@media (max-width: 767px) {
	.ds-pc__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ds-space-2);
	}

	.ds-pc__body {
		padding: var(--ds-space-3);
		gap: var(--ds-space-2);
	}
}