/**
 * AUDIMAC Homepage — CSS riêng, chỉ enqueue trên Front Page.
 * ----------------------------------------------------------------------
 * File: assets/css/homepage.css
 * Phụ thuộc: tokens/base/layout/components.css đã load trước.
 * Không lặp lại token/biến — chỉ layout đặc thù Homepage.
 */

.audm-homepage { overflow-x: hidden; }

/* Section rhythm riêng cho Homepage: 80–120px giữa các section (yêu cầu
   thiết kế) — không sửa token .audm-section dùng chung toàn Design System,
   chỉ override phạm vi Homepage. */
.audm-homepage .audm-section { padding-block: 100px; }

/* ============================================================
   1. Hero — REVISION 02: ảnh nền toàn chiều rộng (ảnh đã có sẵn hiệu
      ứng mờ dần sang trắng ở cạnh trái, không cần overlay CSS thêm).
   ============================================================ */
.audm-home-hero {
	background-color: var(--audm-color-white); /* fallback nếu ảnh chưa tải xong */
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	min-height: 560px;
	display: flex;
	align-items: center;
}

.audm-home-hero__content {
	max-width: 560px;
	padding-block: var(--audm-space-12);
}
.audm-home-hero__content .audm-h1 { margin-block: var(--audm-space-4); }
.audm-home-hero__content .audm-lead { margin-bottom: var(--audm-space-6); max-width: 46ch; }
.audm-home-hero__content .audm-btn--lg { min-width: 200px; }

/* ============================================================
   2. Trust Bar
   ============================================================ */
.audm-home-trust {
	border-top: 1px solid var(--audm-color-border);
	border-bottom: 1px solid var(--audm-color-border);
	padding-block: var(--audm-space-6);
}
.audm-home-trust__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--audm-space-4);
}
.audm-home-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
}
.audm-home-trust__number {
	font-size: var(--audm-font-size-lg);
	font-weight: var(--audm-font-weight-bold);
	color: var(--audm-color-primary);
}
.audm-home-trust__label {
	font-size: var(--audm-font-size-xs);
	color: var(--audm-color-gray);
}

/* ============================================================
   3. Product Categories — REVISION 01: tất cả card cùng 1 trạng thái
      thị giác (không còn "Sắp ra mắt"/opacity mờ).
   ============================================================ */
.audm-home-category-card { text-decoration: none; color: inherit; }

.audm-home-category-card__media--placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		var(--audm-color-bg-alt),
		var(--audm-color-bg-alt) 10px,
		#EFF1EF 10px,
		#EFF1EF 20px
	);
}

/* ============================================================
   4. Why AUDIMAC
   ============================================================ */
.audm-home-why__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--audm-space-12);
	align-items: center;
}
.audm-home-why__media img {
	border-radius: var(--audm-radius-lg);
	width: 100%;
	box-shadow: var(--audm-shadow-md); /* REVISION 01: polish visual */
}
.audm-home-why__content .audm-h2 { margin-block: var(--audm-space-3) var(--audm-space-4); }
.audm-home-why__content > .audm-body { margin-bottom: var(--audm-space-5); max-width: 52ch; }

.audm-home-why__list {
	list-style: none;
	margin: 0 0 var(--audm-space-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--audm-space-3);
}
.audm-home-why__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--audm-space-3);
	font-size: var(--audm-font-size-sm);
	color: var(--audm-color-dark);
}
.audm-home-why__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: var(--audm-radius-full);
	background: var(--audm-color-primary-light);
	position: relative;
}
.audm-home-why__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--audm-color-primary);
	border-bottom: 2px solid var(--audm-color-primary);
	transform: translate(-60%, -60%) rotate(45deg);
}

/* ============================================================
   6. Solutions — REVISION 01: bỏ trạng thái "Sắp ra mắt"/opacity mờ,
      card đầy đủ thị giác như các card khác.
   ============================================================ */
.audm-home-solution-card { text-decoration: none; color: inherit; }

/* ============================================================
   7. Technical Resources — REVISION 01: đúng 5 cột ngang trên desktop
      (không dùng lại .audm-grid-4, cần grid riêng cho đúng 5 item).
   ============================================================ */
.audm-home-resources {
	/* REVISION: ảnh nền toàn chiều rộng do bạn cung cấp (bản vẽ kỹ thuật,
	   đã có sẵn hiệu ứng mờ xanh nhạt) — thay cho nền phẳng trước đó. */
	background-color: var(--audm-color-bg-alt); /* fallback nếu ảnh chưa tải */
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}
.audm-home-resources__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--audm-space-4);
	margin-bottom: var(--audm-space-6);
}
.audm-home-resource-item { background: var(--audm-color-white); }

/* ============================================================
   8. Featured Projects — REVISION 01: layout tự thích ứng theo số
      lượng dự án thật (1 dự án → full width; nhiều dự án → bất đối xứng).
   ============================================================ */
.audm-home-projects__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--audm-space-5);
}
.audm-home-projects__grid--single {
	grid-template-columns: 1fr; /* chỉ 1 dự án thật → card lớn full width */
}
.audm-home-project-card { text-decoration: none; color: inherit; }
.audm-home-project-card--main .audm-card__media { aspect-ratio: 16 / 9; }
.audm-home-projects__grid--single .audm-home-project-card--main .audm-card__media { aspect-ratio: 21 / 9; }
.audm-home-project-card__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--audm-space-5);
}

/* ============================================================
   9. Working Process
   ============================================================ */
.audm-home-process__timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--audm-space-6);
	position: relative;
}
.audm-home-process__timeline::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: var(--audm-color-border);
}
.audm-home-process__step {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--audm-space-2);
}
.audm-home-process__number {
	width: 48px;
	height: 48px;
	border-radius: var(--audm-radius-full);
	background: var(--audm-color-primary);
	color: var(--audm-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--audm-font-weight-bold);
	position: relative;
	z-index: 1;
}

/* ============================================================
   8b. Cam kết từ AUDIMAC
   ============================================================ */
.audm-home-commitments__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--audm-space-6);
}
.audm-home-commitment-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);
	display: flex;
	flex-direction: column;
	gap: var(--audm-space-2);
}
.audm-home-commitment-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);
	margin-bottom: var(--audm-space-2);
}
.audm-home-commitment-card__icon svg { width: 26px; height: 26px; }
.audm-home-commitment-card h3 { margin: 0; }
.audm-home-commitment-card p { margin: 0; color: var(--audm-color-gray); }

/* ============================================================
   10. Final CTA
   ============================================================ */
.audm-home-final-cta {
	position: relative;
	background-color: var(--audm-color-dark);
	background-size: cover;
	background-position: center;
	padding-block: var(--audm-space-16);
}
.audm-home-final-cta__overlay {
	/* Làm sáng hơn (yêu cầu: không dùng background quá tối) — vẫn đủ tương
	   phản để chữ trắng đọc được. */
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,30,25,0.32), rgba(20,30,25,0.52));
}
.audm-home-final-cta__content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	color: var(--audm-color-white);
}
.audm-home-final-cta__content .audm-h2 { color: var(--audm-color-white); margin-bottom: var(--audm-space-3); }
.audm-home-final-cta__content .audm-lead { color: rgba(255,255,255,0.85); margin-bottom: var(--audm-space-6); }

/* ============================================================
   11. Homepage Footer — REVISION 01: 7 cột (Brand + 6, thêm CHÍNH SÁCH)
   ============================================================ */
.audm-home-footer {
	background: var(--audm-color-dark);
	color: rgba(255,255,255,0.82);
	padding-top: var(--audm-space-12);
}
.audm-home-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(6, 1fr);
	gap: var(--audm-space-5);
	padding-bottom: var(--audm-space-8);
}
.audm-home-footer__logo {
	font-size: var(--audm-font-size-lg);
	font-weight: var(--audm-font-weight-bold);
	color: var(--audm-color-white);
	margin-bottom: var(--audm-space-3);
}
.audm-home-footer__col--brand .audm-small { color: rgba(255,255,255,0.65); }
.audm-home-footer__col h4 {
	color: var(--audm-color-white);
	margin-bottom: var(--audm-space-3);
}
.audm-home-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--audm-space-2);
	font-size: var(--audm-font-size-sm);
}
.audm-home-footer__col a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	transition: color var(--audm-transition);
}
.audm-home-footer__col a:hover { color: var(--audm-color-primary); }
.audm-home-footer__col span { color: rgba(255,255,255,0.45); }

.audm-home-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-block: var(--audm-space-4);
}
.audm-home-footer__bottom .audm-caption { color: rgba(255,255,255,0.5); }