/**
 * AUDIMAC Responsive Overrides
 * ----------------------------------------------------------------------
 * File: assets/css/responsive.css
 * Phụ thuộc: tokens.css, base.css, layout.css, components.css.
 * Toàn bộ media query của Design System tập trung tại đây (không rải
 * rác qua các file khác) để dễ kiểm tra breakpoint.
 *
 * Breakpoint đã kiểm tra: 1440 / 1280 / 1024 / 768 / 480 / 390 / 375.
 * 1440px và 1280px dùng layout desktop mặc định (fluid trong max-width
 * container, không cần override riêng). Từ 1024px trở xuống bắt đầu
 * override.
 */

/* ============================================================
   Tablet ngang / Desktop nhỏ (<=1024px)
   ============================================================ */
@media (max-width: 1024px) {
	.audm-grid-4 { grid-template-columns: repeat(3, 1fr); }

	/* Homepage */
	.audm-home-trust__grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--audm-space-5); }
	.audm-home-footer__grid { grid-template-columns: repeat(4, 1fr); }
	.audm-home-resources__grid { grid-template-columns: repeat(3, 1fr); }
	.audm-home-commitments__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Tablet dọc (<=768px)
   ============================================================ */
@media (max-width: 768px) {
	:root {
		--audm-font-size-4xl: 2.5rem;   /* 40px */
		--audm-font-size-3xl: 2rem;     /* 32px */
		--audm-container-gutter: 20px;
	}

	.audm-section { padding-block: var(--audm-space-12); }
	.audm-section-lg { padding-block: var(--audm-space-12); padding-bottom: calc(var(--audm-space-12) + var(--audm-space-6)); }
	.audm-homepage .audm-section { padding-block: 80px; } /* vẫn trong khung 80–120px */

	.audm-grid-3,
	.audm-grid-4 { grid-template-columns: repeat(2, 1fr); }

	.audm-cta { flex-direction: column; align-items: flex-start; padding: var(--audm-space-6); }
	.audm-cta__actions { width: 100%; }
	.audm-cta__actions .audm-btn { flex: 1; }

	/* Homepage */
	.audm-home-hero { min-height: 420px; background-position: center; position: relative; }
	.audm-home-hero::before {
		/* Ảnh nền vốn thiết kế cho tỉ lệ ngang rộng — ở màn hình hẹp phần
		   mờ-sang-trắng có thể bị crop mất, thêm overlay để chữ luôn đọc được. */
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.75) 55%, rgba(255,255,255,0.35) 100%);
	}
	.audm-home-hero__content { position: relative; z-index: 1; max-width: 100%; }
	.audm-home-why__grid { grid-template-columns: 1fr; gap: var(--audm-space-6); }

	/* Technical Resources: ảnh nền cùng lý do như Hero — thêm overlay dự
	   phòng ở màn hình hẹp để đảm bảo đọc được. */
	.audm-home-resources { background-position: center; position: relative; }
	.audm-home-resources::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(247, 248, 247, 0.88); /* gần với --audm-color-bg-alt */
	}
	.audm-home-resources > .audm-container { position: relative; z-index: 1; }
	.audm-home-process__timeline { grid-template-columns: repeat(2, 1fr); row-gap: var(--audm-space-6); }
	.audm-home-process__timeline::before { display: none; }
	.audm-home-projects__grid { grid-template-columns: 1fr; }
	.audm-home-project-card__list { grid-template-columns: 1fr 1fr; }
	.audm-home-resources__grid { grid-template-columns: repeat(3, 1fr); }
	.audm-home-footer__grid { grid-template-columns: 1fr 1fr; }
	.audm-home-footer__col--brand { grid-column: 1 / -1; }
}

/* ============================================================
   Mobile (<=480px, bao trùm 390px / 375px)
   ============================================================ */
@media (max-width: 480px) {
	:root {
		--audm-font-size-4xl: 1.875rem; /* 30px */
		--audm-font-size-3xl: 1.625rem; /* 26px */
		--audm-font-size-2xl: 1.375rem; /* 22px */
		--audm-font-size-xl: 1.125rem;  /* 18px */
		--audm-container-gutter: 16px;
	}

	.audm-section { padding-block: var(--audm-space-8); }
	.audm-section-sm { padding-block: var(--audm-space-6); }
	.audm-homepage .audm-section { padding-block: 64px; } /* mobile nhỏ nhất — vẫn có nhịp section rõ ràng */

	.audm-grid-2,
	.audm-grid-3,
	.audm-grid-4 { grid-template-columns: 1fr; }

	/* Specification Table: chuyển thành list 1 cột, không để bảng tràn ngang */
	.audm-spec,
	.audm-spec tbody,
	.audm-spec tr,
	.audm-spec th,
	.audm-spec td {
		display: block;
		width: 100%;
	}
	.audm-spec tr { padding: var(--audm-space-2) var(--audm-space-1); }
	.audm-spec th { padding: 0; font-size: var(--audm-font-size-xs); }
	.audm-spec td { padding: 0 0 var(--audm-space-2); }

	/* Download Box: 1 cột trên mobile nhỏ nhất */
	.audm-download-box { grid-template-columns: 1fr; padding: var(--audm-space-4); }

	/* Breadcrumb: giữ 1 dòng cuộn ngang thay vì wrap gây vỡ layout */
	.audm-breadcrumb { flex-wrap: nowrap; }

	/* Sticky bottom CTA: kích hoạt trên mobile */
	.audm-sticky-cta.is-active { display: flex; }

	/* Card: giảm padding cho vừa màn hình hẹp */
	.audm-card__body { padding: var(--audm-space-4); }

	/* Homepage */
	.audm-home-hero__content .audm-flex--wrap { flex-direction: column; align-items: stretch; }
	.audm-home-hero__content .audm-btn { width: 100%; }
	.audm-home-trust__grid { grid-template-columns: repeat(2, 1fr); }
	.audm-home-process__timeline { grid-template-columns: 1fr; }
	.audm-home-project-card__list { grid-template-columns: 1fr; }
	.audm-home-resources__grid { grid-template-columns: repeat(2, 1fr); }
	.audm-home-footer__grid { grid-template-columns: 1fr; }
	.audm-home-footer__col--brand { grid-column: auto; }
	.audm-home-commitments__grid { grid-template-columns: 1fr; }
}