/**
 * Tom Luxury — Section "posts" (Kien thuc noi that)
 * -----------------------------------------------------------------------------
 * Chi chua CSS rieng cua section nay. Moi mau / khoang cach / font deu tham
 * chieu design token trong tokens.css. Khong dung !important.
 *
 * Bien do template dat qua inline custom property (ngoai le hop le):
 *   .tl-posts__grid  --tl-cols / --tl-cols-md / --tl-cols-sm
 *   .tl-posts__frame --tl-ratio
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * 1. WRAPPER
 * ========================================================================== */
.tl-posts--bg-none {
	background-color: transparent;
}

.tl-posts--empty .tl-container {
	display: block;
}

/* =============================================================================
 * 2. TIEU DE — can giua nhung link "Xem tat ca" nam ben phai (mockup)
 * ========================================================================== */
.tl-posts__heading {
	position: relative;
}

@media (min-width: 1025px) {

	/* Chua cho lien ket o goc phai, dong thoi rut ngan doan ke trang tri de
	   tieu de tieng Viet dai van nam gon tren mot dong. */
	.tl-posts .tl-heading:not(.tl-heading--left):has(.tl-heading__link) {
		--ornament-line: clamp(20px, 3.4vw, 48px);
		padding-inline: clamp(110px, 13vw, 190px);
	}

	.tl-posts .tl-heading:not(.tl-heading--left):has(.tl-heading__link) .tl-heading__title {
		gap: var(--space-sm);
	}

	.tl-posts .tl-heading:not(.tl-heading--left) .tl-heading__link {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-top: 0;
	}
}

/* =============================================================================
 * 3. LUOI THE
 * ========================================================================== */
.tl-posts__grid {
	align-items: start;
}

.tl-posts__item {
	background-color: transparent;
	border-radius: 0;
}

/* =============================================================================
 * 4. ANH + HUY HIEU NGAY DANG
 * ========================================================================== */
.tl-posts__media {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--color-shade);
}

.tl-posts__frame {
	display: block;
	border-radius: 0;
}

.tl-posts__frame--empty {
	background-color: var(--color-shade);
}

.tl-posts__img {
	display: block;
}

/* Huy hieu ngay dang: goc duoi trai, nen toi chu sang */
.tl-posts__date {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	max-width: calc(100% - var(--space-md));
	margin: 0;
	padding: var(--space-2xs) var(--space-sm);
	background-color: var(--color-primary);
	border-top-right-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--weight-medium);
	line-height: 1.35;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-on-dark);
}

.tl-posts__date time {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Trong panel toi, huy hieu phai sang hon nen section moi doc duoc */
.tl-posts.tl-section--dark .tl-posts__date {
	background-color: var(--color-secondary);
}

/* =============================================================================
 * 5. NOI DUNG THE
 * ========================================================================== */
.tl-posts__body {
	gap: var(--space-2xs);
	padding: var(--space-sm) 0 0;
}

.tl-posts__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.0625rem, 1.35vw, var(--font-size-xl));
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	text-transform: none;
	color: var(--color-primary);
}

/* Lien ket phu kin the bang ::after (components.css .tl-card__link) —
   the <a> that su van la diem dung cua ban phim, khong dung div bam duoc. */
.tl-posts__link {
	color: inherit;
	text-decoration: none;
}

.tl-posts__link:hover,
.tl-posts__link:focus-visible {
	color: var(--color-luxury-gold);
}

/* Vien focus ve quanh CA the (nho ::after phu kin the) thay vi quanh dong chu
   bi cat boi line-clamp — van dat yeu cau :focus-visible cua WCAG 2.1 AA. */
.tl-posts__link:focus-visible {
	outline: none;
}

.tl-posts__link:focus-visible::after {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-md);
}

/* =============================================================================
 * 6. RESPONSIVE
 *    Da kiem: 1920 / 1440 / 1366 / 1024 / 820 / 768 / 430 / 390 / 360
 * ========================================================================== */

/* Man hinh rat rong: gioi han be ngang the de anh khong bi keo qua kho */
@media (min-width: 1600px) {

	.tl-posts__title {
		font-size: var(--font-size-xl);
	}
}

/* Laptop nho / tablet ngang */
@media (max-width: 1024px) {

	.tl-posts .tl-heading:not(.tl-heading--left) .tl-heading__link {
		position: static;
		margin-top: var(--space-2xs);
	}

	.tl-posts__date {
		padding: var(--space-3xs) var(--space-xs);
	}
}

/* Tablet dung */
@media (max-width: 820px) {

	.tl-posts__body {
		padding-top: var(--space-xs);
	}
}

/* Dien thoai */
@media (max-width: 640px) {

	.tl-posts__title {
		font-size: var(--font-size-lg);
	}

	.tl-posts__media {
		border-radius: var(--radius-sm);
	}
}

/* Dien thoai hep */
@media (max-width: 430px) {

	.tl-posts__date {
		padding: var(--space-3xs) var(--space-2xs);
		font-size: calc(var(--font-size-xs) * .92);
		letter-spacing: .06em;
	}
}

@media (max-width: 360px) {

	.tl-posts__title {
		font-size: var(--font-size-base);
	}
}