/* Round16 — Anti-leak Discount — section leak ("Code leaking is quietly eating away profit")
   Figma desktop 4368:2832 · laptop 4372:6669 · phone 4372:8807 */

/* ---- heading block (Figma 4368:2834 — VERTICAL gap 16, canh giữa) ---- */
.al-leak__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--var-16);
	text-align: center;
}

/* Figma: section-headings/heading luôn rộng 800 ở cấp section */
.al-leak__head .al-heading {
	width: 800px;
	max-width: 100%;
}

/* "Here is why" + icon/arrow-down (Figma 4368:2836 — HORIZONTAL gap 6) */
.al-leak__sub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-6);
	color: var(--color-2nd-fg);
}

.al-leak__sub-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* ---- 3 cột (Figma 4368:2839 — viền ngoài 1px stroke, divider 1px) ---- */
.al-leak__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	border: 1px solid var(--color-stroke);
}

.al-leak__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Figma 4368:2888 / 4368:2929 — divider dọc giữa các cột */
.al-leak__item + .al-leak__item {
	border-left: 1px solid var(--color-stroke);
}

/* Figma 4368:2841 — image 466.67 x 360 */
.al-leak__media {
	width: 100%;
}

.al-leak__img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--al-ratio-leak);
	object-fit: cover;
}

/* Figma 4368:2882 — item, padding 32, gap 0 giữa số và phần chữ */
.al-leak__body {
	display: flex;
	flex-direction: column;
	padding: var(--var-32);
}

/* Số: "81" h1 + "%" h5, canh mép trên (Figma 4368:2884) */
.al-leak__stat {
	display: flex;
	align-items: flex-start;
}

.al-leak__value {
	font-size: var(--fs-h1);   /* 58 / 32 */
}

.al-leak__unit {
	font-size: var(--fs-h5);   /* 25 / 20 */
}

/* Figma I4368:2887;4333:13543 — gap 16 giữa tiêu đề và mô tả */
.al-leak__copy {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

/* ---- <=1024: xếp dọc, divider thành đường ngang (Figma 4372:8814) ---- */
@media (max-width: 1024px) {
	.al-leak__list {
		grid-template-columns: 1fr;
	}

	.al-leak__item + .al-leak__item {
		border-left: 0;
		border-top: 1px solid var(--color-stroke);
	}
}