/**
 * AUDIMAC News Archive — CSS riêng, chỉ enqueue trên /category/tin-tuc/.
 * ----------------------------------------------------------------------
 * File: assets/css/news-archive.css
 * Phụ thuộc: tokens/base/layout/components/homepage.css đã load trước
 * (dùng lại .audm-container/.audm-section/.audm-grid/.audm-card/.audm-btn/
 * .audm-h1/.audm-lead/.audm-section-header/.audm-home-final-cta gốc).
 */

/* ============================================================
   0. Ẩn khối "Page Header" gốc của theme cha (.c-page-header)
   ----------------------------------------------------------------------
   Đã thử filter `theme_mod_header_height_post` trước (như inc/category.php
   làm với `theme_mod_header_height_product_list`) nhưng KHÔNG có tác dụng
   thật: hàm `ideapark_mod()` của theme cha đọc trực tiếp từ mảng raw
   `get_theme_mods()` (đã cache vào global lúc `wp_loaded`) hoặc fallback
   `get_option('moderno_mod_...')` — cả 2 đường đều KHÔNG đi qua
   `get_theme_mod()`, nên filter `theme_mod_*` không bao giờ được áp dụng
   (đã xác minh trực tiếp bằng cách fetch HTML live: `.c-page-header` vẫn
   render dù đã add_filter). Ẩn hẳn bằng CSS — an toàn, không sửa file
   theme cha, DOM vẫn nguyên nên không có JS nào bị lỗi khi thiếu phần tử
   này. Chỉ áp dụng trên đúng /category/tin-tuc/ (news-archive.css chỉ
   enqueue ở context này).
   ============================================================ */
.c-page-header {
	display: none !important;
}

/* ============================================================
   1. Hero — nền neutral nhẹ, không ảnh nền, không slider (đúng brief mục 4)
   ============================================================ */
.audm-news-hero {
	padding-block: var( --audm-space-12 ) var( --audm-space-8 );
	background: var( --audm-color-bg-alt, #F7F8F7 );
	text-align: left;
}
.audm-news-hero .audm-lead {
	max-width: 640px;
	margin-top: var( --audm-space-3 );
}

.audm-news-breadcrumb-wrap {
	padding-top: var( --audm-space-4 );
}

/* ============================================================
   2. Category Navigation — pill, horizontal scroll trên mobile
   ============================================================ */
.audm-news-nav {
	border-bottom: 1px solid var( --audm-color-border, #E5E7EB );
}
.audm-news-nav__scroll {
	display: flex;
	gap: var( --audm-space-2 );
	overflow-x: auto;
	padding-block: var( --audm-space-3 );
	scrollbar-width: none;
}
.audm-news-nav__scroll::-webkit-scrollbar { display: none; }
.audm-news-nav__pill {
	flex: 0 0 auto;
	padding: var( --audm-space-2 ) var( --audm-space-4 );
	border-radius: 999px;
	border: 1px solid var( --audm-color-border, #E5E7EB );
	color: var( --audm-color-dark );
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-medium );
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.audm-news-nav__pill:hover {
	border-color: var( --audm-color-primary );
	color: var( --audm-color-primary );
}
.audm-news-nav__pill.is-active {
	background: var( --audm-color-primary );
	border-color: var( --audm-color-primary );
	color: var( --audm-color-white );
}

/* ============================================================
   3. Featured Article — 2 cột (media | content), hierarchy mạnh hơn card
   ============================================================ */
.audm-news-featured__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var( --audm-space-8 );
	align-items: center;
}
.audm-news-featured__media {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.audm-news-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.audm-news-featured__body h2 {
	margin-top: var( --audm-space-2 );
}
.audm-news-featured__body h2 a {
	color: inherit;
	text-decoration: none;
}
.audm-news-featured__body h2 a:hover { color: var( --audm-color-primary ); }
.audm-news-featured__excerpt {
	margin-top: var( --audm-space-3 );
}
.audm-news-featured__meta {
	margin: var( --audm-space-4 ) 0 var( --audm-space-5 );
}

/* ============================================================
   4. Article Card — border nhẹ, bo góc 8–12px, hover rất nhẹ
   ============================================================ */
.audm-card--article {
	border-radius: 12px;
}
.audm-card--article .audm-card__media {
	aspect-ratio: 16 / 10;
}
.audm-card--article:hover {
	transform: translateY(-2px);
}

.audm-news-grid { margin-top: var( --audm-space-6 ); }
.audm-news-latest__single-note {
	margin-top: var( --audm-space-4 );
	color: var( --audm-color-gray );
}

/* ============================================================
   5. Empty state (dùng chung Latest News / category rỗng)
   ============================================================ */
.audm-news-empty {
	text-align: center;
	padding: var( --audm-space-10 ) 0;
}
.audm-news-empty__text {
	margin-bottom: var( --audm-space-4 );
	color: var( --audm-color-gray );
}

/* ============================================================
   6. Pagination — bọc lại corenavi gốc của theme cha cho đúng container
   ============================================================ */
.audm-news-pagination {
	margin-top: var( --audm-space-8 );
	display: flex;
	justify-content: center;
}

/* ============================================================
   7. Final CTA — dùng lại nền audm-home-final-cta nhưng không có ảnh nền
   ============================================================ */
.audm-news-final-cta {
	background-color: var( --audm-color-dark );
	background-image: none;
}
.audm-news-final-cta .audm-section-header__eyebrow {
	color: var( --audm-color-primary );
}

/* ============================================================
   8. Responsive
   ============================================================ */
@media ( max-width: 768px ) {
	.audm-news-featured__grid {
		grid-template-columns: 1fr;
	}
	.audm-news-hero {
		padding-block: var( --audm-space-8 ) var( --audm-space-6 );
	}
}