/* Round16 — Anti-leak Discount — section hero
   Figma desktop 4368:2743 · laptop 4372:6665 · phone 4372:8803
   Token: assets/Round16/anti-leak/base.css + assets/css/global.css */

.al-hero__inner {
	display: flex;
	flex-direction: column;
	/* Figma desktop: content-wrapper 1400x962 = headings 238 + image 724 → gap 0 */
	gap: 0;
	justify-content: center;
}

/* Figma 4368:2746 — khung ảnh 1400 x 724 */
.al-hero__media {
	width: 100%;
}

.al-hero__img {
	width: 100%;
	height: auto;
}

/* object-fit: cover BẮT BUỘC, không phải trang trí.
   Frame Figma "image - desktop" (4372:10036) là 1400x724 nhưng `clipsContent: false`,
   nên bản render Figma trả về nở ra 1400x777 (@2x: 2800x1554) để ôm phần tràn.
   Để mặc định `object-fit: fill` thì ảnh 1.8018 bị ép vào khung 1.9337 = BÓP DỌC ~7%
   (Lighthouse bắt đúng lỗi này: audit `image-aspect-ratio`).
   Quét alpha cho thấy nội dung thật chỉ nằm ở dòng 99..1490 (@2x), tức cao 696px trên
   khung 724 — phần tràn 53px là vùng TRONG SUỐT. `cover` cắt 53px trên + 53px dưới
   (@2x), cửa sổ còn lại 53..1500 vẫn chứa trọn nội dung 99..1490 → không mất gì. */
.al-hero__img--desktop {
	aspect-ratio: var(--al-ratio-hero-desktop);
	object-fit: cover;
}

/* Bản mobile chỉ bật ở <=1024 (Figma 4372:8806).
   object-fit: cover vì fill của Figma là scaleMode FILL — khung 350x257.8 crop
   ảnh export 942x724, không hiển thị nguyên tỉ lệ gốc. */
.al-hero__img--mobile {
	display: none;
	aspect-ratio: var(--al-ratio-hero-mobile);
	object-fit: cover;
}

@media (max-width: 1024px) {
	/* Figma phone 4372:8804 — content-wrapper gap 40 */
	.al-hero__inner {
		gap: var(--var-40);
	}

	.al-hero__img--desktop {
		display: none;
	}

	.al-hero__img--mobile {
		display: block;
	}
}