/**
 * Section "6 nền tảng".
 * Kích thước ghi chú dạng "min → max" là px ở màn 1024 → 1920.
 */

.foundations {
	padding-block: var(--space-xl) var(--section-space);
}

/* ------------------------------------------------------------------------
 * Tiêu đề + đoạn mô tả
 * ---------------------------------------------------------------------- */

.foundations__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr); /* tiêu đề rộng theo nội dung, mô tả lấy phần còn lại */
	align-items: start;
	column-gap: var(--space-sm);
	margin-bottom: clamp(3rem, 0.5714rem + 3.7946vw, 5.125rem); /* 48 → 82 */
}

.foundations__title {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.1071rem + 1.0045vw, 1.3125rem); /* 12 → 21 */
	font-size: var(--fs-h2);
}

.foundations__title-text {
	white-space: nowrap; /* mỗi dòng giữ nguyên như thiết kế */
}

.foundations__hand {
	flex: none;
	width: clamp(9.375rem, 2.1607rem + 11.2723vw, 15.6875rem); /* 150 → 251 */
	height: auto;
}

.foundations__intro {
	margin-top: clamp(1.5625rem, -0.2232rem + 2.7902vw, 3.125rem); /* 25 → 50: thấp hơn tiêu đề ~40px như yêu cầu */
	padding-left: 0.5rem;
	border-left: 1px solid var(--color-gray);
	color: var(--color-gray);
	font-family: var(--font-title);
	font-size: var(--fs-title-md);
	line-height: var(--lh-heading);
}

/* ------------------------------------------------------------------------
 * Lưới 6 thẻ
 * ---------------------------------------------------------------------- */

.foundations__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2xl) clamp(2rem, 0.8571rem + 1.7857vw, 3rem); /* hàng 48 → 80, cột 32 → 48 */
}

.fcard {
	transition: transform 450ms var(--ease-bounce);
	--tag-fade: clamp(2.5rem, 0.0714rem + 3.7946vw, 4.625rem); /* 40 → 74: đoạn nền nhãn mờ dần */

	padding-left: clamp(0.75rem, 0.25rem + 0.7813vw, 1.1875rem); /* 12 → 19 */
	border-left: 3px solid var(--color-heading);
}

.fcard:hover {
	transform: scale(1.06);
}

.fcard__tag {
	display: inline-block;
	padding: 0.05em var(--tag-fade) 0.05em 0.25em;
	background: linear-gradient(90deg, var(--color-heading) calc(100% - var(--tag-fade)), transparent);
	color: var(--color-white);
	font-family: var(--font-title);
	font-size: var(--fs-title-xs);
	line-height: var(--lh-heading);
}

.fcard__title {
	margin-top: 0.15em;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: var(--fw-extrabold);
	line-height: 1.15;
	text-transform: uppercase;
}

.fcard__text {
	max-width: 30em;
	margin-top: clamp(0.75rem, 0.4643rem + 0.4464vw, 1rem); /* 12 → 16 */
	font-size: var(--fs-md);
	line-height: var(--lh-heading);
	text-align: justify;
}

/* ------------------------------------------------------------------------
 * Màn nhỏ hơn 1280 (tạm, chờ thiết kế mobile)
 * ---------------------------------------------------------------------- */

@media (max-width: 1279.98px) {
	.foundations__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-md);
	}

	.foundations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.foundations__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fcard:hover {
		transform: none;
	}
}