/**
 * AUDIMAC Category / Product Listing — Phase 2
 * ----------------------------------------------------------------------
 * File: assets/css/category.css
 *
 * Chỉ khai báo CSS đặc thù của trang Category chưa có sẵn trong
 * components.css/layout.css (Hero, Breadcrumb wrap, Intro features,
 * Toolbar, Grid card override, Empty state, Application icons,
 * Pagination). Card/Grid/Section-header/Download-item dùng lại nguyên
 * class đã có — không định nghĩa lại.
 */

/* ============================================================
   0. Ẩn khối "Page Header" gốc của theme cha (.c-page-header)
   ----------------------------------------------------------------------
   term meta header_height='hide' (đặt trong inc/category.php) chỉ tắt
   được đúng phần TIÊU ĐỀ/BREADCRUMB của khối này (2 biến $show_title/
   $show_breadcrumbs trong page-header.php theme cha có kiểm tra
   header_height). Phần đếm sản phẩm + dropdown sắp xếp (row-1) và
   carousel danh mục con (row-2) lại do 2 biến RIÊNG, ĐỘC LẬP với
   header_height ($show_ordering/$show_categories) — vẫn render dù đã
   "hide" tiêu đề, gây trùng lặp với Toolbar mới (audm-category-toolbar)
   và không đúng thiết kế mockup. Ẩn hẳn toàn bộ khối bằng CSS (không sửa
   file theme cha, DOM vẫn còn nguyên nên JS carousel gốc không lỗi) —
   chỉ áp dụng trên đúng Shop/Category (category.css chỉ enqueue ở đây).
   ============================================================ */
.c-page-header {
	display: none !important;
}

/* ============================================================
   0b. Khoảng cách giữa các section trong trang Category
   ----------------------------------------------------------------------
   .audm-homepage .audm-section { padding-block: 100px; } (homepage.css)
   áp cho MỌI .audm-section trong wrapper #audm-category — 2 section liền
   kề nào cũng cộng dồn 100px (bottom section trước) + 100px (top section
   sau) = 200px khoảng trắng, kể cả khi không có nền phân biệt (Intro→Grid,
   Grid→Tech Resources, Tech Resources→Applications, Applications→Projects,
   Projects→Final CTA). Bỏ padding-top của section liền SAU 1 section khác
   trong đúng #audm-category — chỉ còn đúng 100px của section trước, không
   nhân đôi. Homepage KHÔNG bị ảnh hưởng (selector scope #audm-category).
   ============================================================ */
#audm-category .audm-section + .audm-section {
	padding-top: 0;
}

/* ============================================================
   1. Breadcrumb wrapper — spacing riêng, không đụng .audm-breadcrumb gốc
   ============================================================ */
.audm-category-breadcrumb-wrap {
	padding-block: var( --audm-space-4 ) 0;
}

/* ============================================================
   2. Hero — nền ảnh full-bleed (theo yêu cầu giữ lại phong cách cũ,
      ảnh tràn hết chiều rộng section thay vì bố cục 2 cột).
   ============================================================ */
.audm-category-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var( --audm-color-dark );
	min-height: 360px;
	display: flex;
	align-items: center;
	color: var( --audm-color-white );
}

.audm-category-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba( 20, 24, 22, 0.82 ) 0%, rgba( 20, 24, 22, 0.55 ) 55%, rgba( 20, 24, 22, 0.25 ) 100% );
}

.audm-category-hero .audm-container {
	position: relative;
	z-index: 1;
}

.audm-category-hero__content {
	max-width: 640px;
	padding-block: var( --audm-space-10 );
}

.audm-category-hero .audm-section-header__eyebrow {
	color: var( --audm-color-primary-light );
}

/* .audm-h1 (base.css) có color: var(--audm-color-dark) áp trực tiếp lên
   thẻ H1 — mạnh hơn color:white kế thừa từ .audm-category-hero. Ghi đè
   rõ ràng ở đây để chữ trắng thật sự hiển thị trên nền ảnh tối. */
.audm-category-hero .audm-h1 {
	color: var( --audm-color-white );
}

.audm-category-hero .audm-lead {
	color: rgba( 255, 255, 255, 0.86 );
}

/* Nút outline mặc định (.audm-btn--outline) có border/chữ màu tối —
   chìm trên nền ảnh tối của Hero. Đổi sang viền/chữ trắng, hover đảo
   màu (nền trắng, chữ tối) cho đúng tương phản. */
.audm-category-hero .audm-btn--outline {
	border-color: rgba( 255, 255, 255, 0.7 );
	color: var( --audm-color-white );
}

.audm-category-hero .audm-btn--outline:hover {
	background: var( --audm-color-white );
	border-color: var( --audm-color-white );
	color: var( --audm-color-dark );
}

/* ============================================================
   3. Introduction
   ============================================================ */
.audm-category-intro__cols {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --audm-space-6 );
	margin-block: var( --audm-space-6 );
}

.audm-category-intro__cols p {
	margin: 0;
	color: var( --audm-color-gray );
	line-height: var( --audm-line-height-relaxed );
}

.audm-category-intro__features {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --audm-space-5 );
	padding-top: var( --audm-space-6 );
	border-top: 1px solid var( --audm-color-border );
}

.audm-category-intro__feature {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.audm-category-intro__feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var( --audm-radius-lg );
	background: var( --audm-color-primary-light );
	color: var( --audm-color-primary );
	margin-bottom: var( --audm-space-3 );
}

.audm-category-intro__feature-icon svg {
	width: 30px;
	height: 30px;
}

.audm-category-intro__feature-label {
	font-weight: var( --audm-font-weight-semibold );
	color: var( --audm-color-dark );
	font-size: var( --audm-font-size-md );
}

.audm-category-intro__feature-sub {
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-gray-light );
}

/* ============================================================
   4. Toolbar (result count + sort — dùng hàm gốc WooCommerce)
   ============================================================ */
.audm-category-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --audm-space-4 );
	padding-bottom: var( --audm-space-5 );
	margin-bottom: var( --audm-space-6 );
	border-bottom: 1px solid var( --audm-color-border );
	flex-wrap: wrap;
}

.audm-category-toolbar__count p {
	margin: 0;
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-gray );
}

.audm-category-toolbar__sort select {
	padding: var( --audm-space-2 ) var( --audm-space-3 );
	border: 1px solid var( --audm-color-border );
	border-radius: var( --audm-radius-md );
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-dark );
	background: var( --audm-color-white );
}

/* ============================================================
   5. Grid — card đồng bộ Homepage, KHÔNG hiện giá/add-to-cart
      (catalog B2B, không phải trang bán lẻ) — ẩn phần tử WooCommerce
      mặc định nếu content-product.php gốc chèn thêm (phòng hờ).
   ============================================================ */
.audm-category-grid .price,
.audm-category-grid .add_to_cart_button,
.audm-category-grid .star-rating {
	display: none;
}

.audm-category-pagination {
	margin-top: var( --audm-space-10 );
	display: flex;
	justify-content: center;
}

.audm-category-pagination nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	list-style: none;
	gap: var( --audm-space-2 );
	margin: 0;
	padding: 0;
}

.audm-category-pagination .page-numbers li a,
.audm-category-pagination .page-numbers li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var( --audm-space-2 );
	border-radius: var( --audm-radius-md );
	border: 1px solid var( --audm-color-border );
	color: var( --audm-color-dark );
	text-decoration: none;
	font-size: var( --audm-font-size-sm );
}

.audm-category-pagination .page-numbers li .current {
	background: var( --audm-color-primary );
	border-color: var( --audm-color-primary );
	color: var( --audm-color-white );
}

/* ============================================================
   6. Empty state
   ============================================================ */
.audm-category-empty {
	text-align: center;
	padding: var( --audm-space-16 ) var( --audm-space-4 );
	background: var( --audm-color-bg-alt );
	border-radius: var( --audm-radius-lg );
}

.audm-category-empty__text {
	max-width: 480px;
	margin: 0 auto var( --audm-space-5 );
	color: var( --audm-color-gray );
	font-size: var( --audm-font-size-md );
	line-height: var( --audm-line-height-relaxed );
}

/* ============================================================
   7. Applications grid
   ============================================================ */
.audm-category-applications__grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: var( --audm-space-4 );
}

/* ============================================================
   7b. Why AUDIMAC
   ============================================================ */
.audm-category-why__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --audm-space-6 );
}

.audm-category-why-card {
	background: var( --audm-color-white );
	border: 1px solid var( --audm-color-border );
	border-radius: var( --audm-radius-lg );
	box-shadow: var( --audm-shadow-sm );
	padding: var( --audm-space-6 );
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --audm-space-3 );
}

.audm-category-why-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var( --audm-radius-md );
	background: var( --audm-color-primary-light );
	color: var( --audm-color-primary );
}

.audm-category-why-card__icon svg { width: 26px; height: 26px; }

.audm-category-why-card h3 { margin: 0; }

.audm-category-application-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var( --audm-color-white );
	border: 1px solid var( --audm-color-border );
	border-radius: var( --audm-radius-lg );
	text-align: center;
	text-decoration: none;
	color: var( --audm-color-dark );
	transition: border-color var( --audm-transition ), transform var( --audm-transition ), box-shadow var( --audm-transition );
}

.audm-category-application-card:hover {
	border-color: var( --audm-color-primary );
	transform: translateY( -3px );
	box-shadow: var( --audm-shadow-md );
}

.audm-category-application-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.audm-category-application-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --audm-transition );
}

.audm-category-application-card:hover .audm-category-application-card__media img {
	transform: scale( 1.05 );
}

.audm-category-application-card__label {
	padding: var( --audm-space-3 );
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-medium );
}

/* ============================================================
   8. Projects grid (Category page dùng grid đơn giản 1-3 cột,
      khác layout bất đối xứng riêng của Homepage)
   ============================================================ */
.audm-category-projects__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: var( --audm-space-6 );
}

/* Card dự án: bố cục ngang (ảnh trái, nội dung phải trên nền xám nhạt) —
   khác .audm-card--project mặc định (ảnh trên/nội dung dưới), chỉ áp
   dụng trong đúng section này, không ảnh hưởng nơi khác dùng component. */
.audm-category-projects .audm-card--project {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	border: 1px solid var( --audm-color-border );
	border-radius: var( --audm-radius-lg );
}

.audm-category-projects .audm-card--project .audm-card__media {
	flex: 0 0 42%;
	aspect-ratio: 4 / 3;
	margin: 0;
}

.audm-category-projects .audm-card--project .audm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.audm-category-projects .audm-card--project .audm-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var( --audm-space-2 );
	padding: var( --audm-space-8 );
	background: var( --audm-color-bg-alt );
}

.audm-category-projects .audm-card--project .audm-card__title {
	font-size: var( --audm-font-size-xl );
}

.audm-category-projects .audm-card--project .audm-card__meta {
	color: var( --audm-color-gray-light );
	font-size: var( --audm-font-size-sm );
}

.audm-category-projects .audm-card--project .audm-card__desc {
	margin: var( --audm-space-2 ) 0 0;
	color: var( --audm-color-gray );
	line-height: var( --audm-line-height-relaxed );
}

@media ( max-width: 768px ) {
	.audm-category-projects .audm-card--project {
		flex-direction: column;
	}
	.audm-category-projects .audm-card--project .audm-card__media {
		flex: none;
		width: 100%;
	}
}

/* ============================================================
   9. Responsive
   ============================================================ */
@media ( max-width: 1024px ) {
	.audm-category-intro__cols {
		grid-template-columns: 1fr;
	}
	.audm-category-applications__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
	.audm-category-why__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 768px ) {
	.audm-category-hero {
		min-height: 280px;
	}
	.audm-category-hero__content {
		padding-block: var( --audm-space-8 );
	}
	.audm-category-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
	.audm-category-applications__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.audm-category-why__grid {
		grid-template-columns: 1fr;
	}
	.audm-category-applications__grid {
		grid-template-columns: 1fr;
	}
}