/**
 * Trang danh sách bài viết (/news/, trang chuyên mục, tag, tác giả, tìm kiếm).
 *
 * Chỉ dùng CSS, giữ nguyên markup của Blocksy - nên không vỡ khi theme cập nhật.
 * Ngôn ngữ thiết kế bám theo thẻ sản phẩm ở trang chủ: ảnh bo góc, phóng nhẹ khi
 * rê chuột, chuyên mục chữ nhỏ in hoa nằm trên tiêu đề, tiêu đề cắt dòng cho
 * các thẻ cùng hàng thẳng chân nhau.
 */

.blog .site-main,
.archive .site-main,
.search .site-main {
	--bchb-accent:   var(--theme-palette-color-1, #e8363c);
	--bchb-ink:      var(--theme-text-color, #16202c);
	--bchb-soft:     color-mix(in srgb, var(--theme-text-color, #16202c) 62%, transparent);
	--bchb-line:     color-mix(in srgb, var(--theme-text-color, #16202c) 12%, transparent);
	--bchb-surface:  var(--theme-palette-color-7, #f6f8fb);
	--bchb-radius:   14px;
	--bchb-ease:     cubic-bezier(.16, 1, .3, 1);
	--bchb-shadow:   0 2px 4px rgb(16 24 40 / 5%), 0 24px 48px -20px rgb(16 24 40 / 22%);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.blog .site-main,
	.archive .site-main,
	.search .site-main {
		--bchb-soft: rgb(85 100 120);
		--bchb-line: rgb(16 24 40 / 12%);
	}
}

/* ==========================================================================
   TIÊU ĐỀ TRANG
   ========================================================================== */
.blog .hero-section,
.archive .hero-section,
.search .hero-section {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--bchb-surface);
	text-align: center;
}

.blog .hero-section .entry-header,
.archive .hero-section .entry-header,
.search .hero-section .entry-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .875rem;
}

.blog .hero-section .page-title,
.archive .hero-section .page-title,
.search .hero-section .page-title {
	position: relative;
	margin: 0;
	padding-block-end: 1rem;
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
}

/* Gạch ngắn dưới tiêu đề, cùng ngôn ngữ với tiêu đề section ở trang chủ. */
.blog .hero-section .page-title::after,
.archive .hero-section .page-title::after,
.search .hero-section .page-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 3rem;
	block-size: 3px;
	border-radius: 2px;
	background: var(--bchb-accent);
}

.blog .ct-breadcrumbs,
.archive .ct-breadcrumbs,
.search .ct-breadcrumbs {
	order: -1;
	font-size: .8125rem;
	color: var(--bchb-soft);
}

/* ==========================================================================
   LƯỚI BÀI VIẾT
   ========================================================================== */
.entries[data-layout="grid"] {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);
}

@media (min-width: 40rem) {
	.entries[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.entries[data-layout="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   THẺ BÀI VIẾT
   ========================================================================== */
.entries .entry-card {
	display: flex;
	flex-direction: column;
	/* Canh nội dung lên đỉnh -> ảnh của mọi thẻ trên cùng hàng bắt đầu cùng độ cao.
	   Thẻ nào ngắn hơn thì thừa khoảng trắng ở đáy, đó là điều mong muốn. */
	justify-content: flex-start;
	gap: .5rem;
	padding: 0;
	border: 0;
	background: none;
	transition: transform .3s var(--bchb-ease);
}

.entries .entry-card:hover { transform: translateY(-4px); }

/* --- Ảnh --- */
.entries .entry-card .ct-media-container {
	position: relative;
	display: block;
	overflow: hidden;
	margin-block-end: .5rem;
	aspect-ratio: 3 / 2;
	border-radius: var(--bchb-radius);
	background: var(--bchb-surface);
	/* clip-path để bo góc luôn đúng kể cả khi ảnh bên trong đang phóng to. */
	clip-path: inset(0 round var(--bchb-radius));
	transition: box-shadow .3s var(--bchb-ease);
}

.entries .entry-card:hover .ct-media-container { box-shadow: var(--bchb-shadow); }

/* Blocksy không dùng aspect-ratio mà dựng chiều cao khung ảnh bằng thủ thuật cũ:
   một pseudo-element ::before có padding-bottom tính theo tỉ lệ ảnh. Còn nó thì
   chiều cao khung do nó quyết định, aspect-ratio ở trên vô hiệu, và mỗi thẻ cao
   một kiểu. Gỡ pseudo-element đó ra để aspect-ratio nắm quyền. */
.entries .entry-card .ct-media-container::before { content: none; }

.entries .entry-card .ct-media-container img {
	/* Blocksy đặt ảnh position:absolute; thêm inset:0 để nó phủ kín khung. */
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Ghi đè aspect-ratio Blocksy in thẳng vào thuộc tính style của thẻ img. */
	aspect-ratio: auto !important;
	transition: transform .5s var(--bchb-ease);
}

.entries .entry-card:hover .ct-media-container img { transform: scale(1.05); }

/* Blocksy ghim phần tử cuối cùng xuống đáy thẻ:

     .entries:not([data-cards=cover])
     :is(.entry-button,.entry-meta,.ct-media-container):last-child:not(:only-child)
     { --card-element-margin-start: auto; margin-top: auto }

   Ta đưa .entry-meta lên đầu bằng order: -1, nhưng order chỉ đổi thứ tự hiển
   thị chứ không đổi thứ tự trong DOM - meta vẫn là :last-child nên vẫn dính
   margin-top: auto. Trong flex column, margin auto đó nuốt hết khoảng trống
   thừa và đẩy cả cụm nội dung xuống, thẻ nào tiêu đề ngắn thì tụt sâu hơn.

   Selector của Blocksy có độ đặc hiệu 0-5-0 nên phải viết dài hơn nó mới thắng. */
.entries:not([data-cards="cover"]) .entry-card .entry-meta:last-child:not(:only-child) {
	--card-element-margin-start: 0;
	margin-block-start: 0;
}

/* --- Chuyên mục + ngày: đưa lên trên tiêu đề như thẻ sản phẩm --- */
.entries .entry-card .entry-meta {
	order: -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bchb-soft);
}

.entries .entry-card .entry-meta li {
	display: flex;
	align-items: center;
	gap: .3em;
	margin: 0;
	padding: 0;
	border: 0;
}

.entries .entry-card .entry-meta li::before,
.entries .entry-card .entry-meta li::after { content: none; }

.entries .entry-card .entry-meta .meta-categories a {
	color: var(--bchb-accent);
	font-weight: 600;
	text-decoration: none;
}

.entries .entry-card .entry-meta .meta-categories a:hover { text-decoration: underline; }

/* --- Tiêu đề --- */
.entries .entry-card .entry-title {
	margin: 0;
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
	font-weight: 700;
	line-height: 1.4;
}

.entries .entry-card .entry-title a {
	color: var(--bchb-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--bchb-accent), var(--bchb-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size .35s var(--bchb-ease), color .2s var(--bchb-ease);

	/* Cắt ở dòng thứ 2 để các thẻ cùng hàng thẳng chân nhau. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entries .entry-card:hover .entry-title a {
	color: var(--bchb-accent);
	background-size: 100% 2px;
}

/* --- Trích dẫn --- */
.entries .entry-card .entry-excerpt {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--bchb-soft);
}

.entries .entry-card .entry-excerpt p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   PHÂN TRANG
   ========================================================================== */
.blog .ct-pagination,
.archive .ct-pagination,
.search .ct-pagination { margin-block-start: clamp(2.5rem, 5vw, 4rem); }

.blog .ct-pagination .page-numbers,
.archive .ct-pagination .page-numbers,
.search .ct-pagination .page-numbers {
	border-radius: 8px;
	transition: background-color .2s var(--bchb-ease), color .2s var(--bchb-ease);
}

.blog .ct-pagination .page-numbers.current,
.archive .ct-pagination .page-numbers.current,
.search .ct-pagination .page-numbers.current {
	background: var(--bchb-accent);
	color: #fff;
}

/* ==========================================================================
   TIẾP CẬN
   ========================================================================== */
.entries .entry-card :where(a):focus-visible {
	outline: 3px solid var(--bchb-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.entries .entry-card,
	.entries .entry-card .ct-media-container,
	.entries .entry-card .ct-media-container img,
	.entries .entry-card .entry-title a { transition: none; }

	.entries .entry-card:hover { transform: none; }
	.entries .entry-card:hover .ct-media-container img { transform: none; }
}