/**
 * Featured Projects Section ("Dự án tiêu biểu", trang chủ). Toàn bộ giá trị
 * --projects-* là CSS custom property do tmnhanphat_render_projects_css_vars() sinh
 * ra, gắn bằng wp_add_inline_style() trong inc/enqueue.php (PROJECT_RULES.md mục 22)
 * — file này KHÔNG hardcode giá trị người dùng đổi được trong Customizer.
 *
 * Slider dùng lại base .tmnp-slider (viewport/track/is-enhanced/dots) trong
 * services.css — enqueue khai báo dependency 'tmnhanphat-services'. File này chỉ
 * override theo scope .projects-home: 1 slide/khung nhìn + màu/kích thước dots riêng.
 */

.projects-home {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block: var(--projects-margin, 0);
	padding-block: var(--projects-padding, 50px);
	background-color: var(--projects-bg, #046AB5);
}

/* Background Decoration — thuần trang trí, LUÔN dưới toàn bộ nội dung (z 0 < container 1). */
.projects-home__decoration {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--projects-deco-image, none);
	background-size: var(--projects-deco-size, cover);
	background-position: var(--projects-deco-pos, center);
	background-repeat: no-repeat;
	opacity: var(--projects-deco-opacity, 1);
	pointer-events: none;
}

.projects-home__container {
	position: relative;
	z-index: 1;
	max-width: var(--projects-container-width, var(--container-max-width));
}

/* ==================== HEADER ==================== */
.projects-home__heading {
	margin: 0 0 calc(27 * var(--fig1px)); /* Figma: Heading → Description 27px. */
	color: var(--projects-title-color, #ffffff);
	/* Figma 96/900 — fluid theo tỉ lệ container, trần = setting theo breakpoint. */
	/* Chuẩn hoá heading system: size 85·fig (từ 96). */
	font-size: clamp(30px, calc(85 * var(--fig1px)), var(--projects-title-size, 96px));
	font-weight: var(--projects-title-weight, 900);
	line-height: 1.21;
	letter-spacing: -0.02em;
	text-align: var(--projects-title-align, center);
}

/* Heading dùng TYPOGRAPHY làm điểm nhấn — KHÔNG underline/gạch (chuẩn hoá Design System). */

.projects-home__description {
	margin: 0 var(--projects-desc-margin-x, auto) var(--projects-header-margin, 72px);
	max-width: var(--projects-desc-max-width, 820px);
	color: var(--projects-desc-color, #ffffff);
	font-size: clamp(16px, calc(20 * var(--fig1px)), var(--projects-desc-size, 20px)); /* Migrate: sàn 16. */
	line-height: 1.5; /* Taste A: body văn xuôi leading thoáng. */
	text-align: var(--projects-desc-align, center);
}

/* ==================== SLIDER (override base .tmnp-slider theo scope) ==================== */
.projects-home .tmnp-slider__track {
	gap: 32px;
}

/* 1 dự án / khung nhìn ở mọi breakpoint — đúng design. */
.projects-home .tmnp-slider__slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.projects-home .tmnp-slider.is-enhanced .tmnp-slider__track {
	transition: transform var(--projects-transition, 600ms) ease;
}

.projects-home .tmnp-slider__viewport:focus-visible {
	outline: 2px solid var(--projects-dot-active, #ffffff);
	outline-offset: 4px;
}

/* Dots: đè màu/kích thước theo Customizer của section này. */
.projects-home .tmnp-slider__dots {
	gap: 8px;
	margin-top: calc(43 * var(--fig1px)); /* Figma: đáy card → dots 43px. */
}

.projects-home .tmnp-slider__dot {
	width: 8px;
	height: 8px;
	background-color: var(--projects-dot-color, #A8AEB8);
}

.projects-home .tmnp-slider__dot.is-active {
	width: 24px;
	border-radius: 999px;
	background-color: var(--projects-dot-active, #ffffff);
}

.projects-home .tmnp-slider__dot:focus-visible {
	outline-color: var(--projects-dot-active, #ffffff);
}

/* ==================== PROJECT CARD (kính mờ trên nền xanh, 2 cột 65/35) ==================== */
/* Figma vẽ nền ĐẶC #A1ACC1 + chữ trắng = ~2.2:1 (lỗi design). Card chuyển thành kính mờ
   25% (PHP hex_to_rgba) — chữ trắng đạt ~4.5:1, cùng vật liệu glass với Hero stats card. */
.project-card {
	display: flex;
	align-items: var(--projects-valign, center);
	gap: var(--projects-content-gap, 33px);
	/* Figma: card 1590×750 (hẹp hơn container 1636, căn giữa), padding 4 phía
	   67/97/55/90 — co theo tỉ lệ container. */
	max-width: calc(1590 * var(--fig1px));
	margin-inline: auto;
	padding: calc(67 * var(--fig1px)) calc(97 * var(--fig1px)) calc(55 * var(--fig1px)) calc(90 * var(--fig1px));
	border-radius: var(--projects-card-radius, 10px);
	background-color: var(--projects-card-bg, rgb(161 172 193 / 0.25));
	/* Rim kính mảnh — cùng công thức viền glass của Hero stats (border trắng mờ). */
	border: 1px solid rgb(255 255 255 / 0.28);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	/* Figma gốc 0 4px 4px /25% — blur bằng offset + opacity cao trông như viền bẩn
	   (anti-pattern shadow). Làm mềm theo đúng ngôn ngữ shadow FAQ card: blur lớn,
	   opacity thấp — độ nổi tương đương, mắt dễ chịu hơn. */
	box-shadow: 0 16px 38px rgb(0 0 0 / 0.12);
}

.project-card__content {
	flex: 0 0 calc(var(--projects-left-width, 65%) - var(--projects-content-gap, 33px));
	min-width: 0;
}

.project-card__media {
	flex: 1;
	min-width: 0;
}

.project-card__title {
	margin: 0 0 var(--projects-ptitle-margin, 16px);
	/* Color đặt ở CHÍNH h3 (không phải chỉ ở <a>) — khi Line Clamp bật, dấu "..." do
	   trình duyệt vẽ theo màu của phần tử -webkit-box này, đặt màu ở <a> con không đủ
	   nên "..." bị mặc định đen. */
	color: var(--projects-ptitle-color, #ffffff);
	/* Figma 55/700 — fluid theo container. */
	font-size: clamp(24px, calc(55 * var(--fig1px)), var(--projects-ptitle-size, 55px));
	font-weight: var(--projects-ptitle-weight, 700);
	line-height: 1.21;
}

.project-card__title a {
	color: inherit;
}

.project-card__title a:hover,
.project-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.project-card__description {
	margin: 0 0 var(--projects-pdesc-margin, 37px);
	max-width: calc(625 * var(--fig1px)); /* Figma: box mô tả 625px. */
	color: var(--projects-pdesc-color, #ffffff);
	font-size: clamp(16px, calc(20 * var(--fig1px)), var(--projects-pdesc-size, 20px)); /* Migrate: sàn 16. */
	line-height: 1.5; /* Taste A: mô tả dự án là body — leading thoáng. */
}

/* ==================== META (3 mục, divider trên mỗi mục — đúng design) ==================== */
.project-card__meta {
	display: flex;
	flex-direction: column;
	gap: calc(33 * var(--fig1px)); /* Figma: value → divider mục kế 33px. */
	margin: 0;
	padding: 0;
	list-style: none;
	/* Divider trong design chỉ chạy ngang phần meta (Figma 376px), không kéo hết cột. */
	max-width: calc(376 * var(--fig1px));
}

.project-card__meta-item {
	padding-top: var(--projects-meta-gap, 18px); /* Figma: divider → label 18px. */
	border-top: var(--projects-divider, 1px solid #ffffff);
}

.project-card__meta-label {
	display: block;
	margin-bottom: 7px; /* Figma: label → value 7px. */
	color: var(--projects-meta-label-color, #E7F0FF);
	font-size: clamp(13px, calc(20 * var(--fig1px)), var(--projects-meta-label-size, 20px));
}

.project-card__meta-value {
	display: block;
	color: var(--projects-meta-value-color, #ffffff);
	/* Figma 32/700 — fluid theo container. */
	font-size: clamp(18px, calc(32 * var(--fig1px)), var(--projects-meta-value-size, 32px));
	font-weight: 700;
	line-height: 1.21;
}

/* ==================== THUMBNAIL (khung cố định, cover crop center) ==================== */
.project-card__media-link {
	display: block;
	width: var(--projects-thumb-width, 100%);
	max-width: 100%;
	margin-inline: auto;
	border-radius: var(--projects-thumb-radius, 10px);
	overflow: hidden;
	box-shadow: var(--projects-thumb-shadow, 0 6px 20px rgb(6 24 44 / 0.06));
}

.project-card__image {
	width: 100%;
	/* Figma: ảnh cao 628 — co theo tỉ lệ container, trần = setting. */
	height: min(var(--projects-thumb-height, 628px), calc(628 * var(--fig1px)));
	object-fit: var(--projects-thumb-fit, cover);
	object-position: center;
	transition: transform 0.3s ease;
}

.project-card:hover .project-card__image {
	transform: scale(var(--projects-thumb-zoom, 1.05));
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
	/* Padding card KHÔNG cần override — đã co theo --fig1px ở rule desktop. */
	.project-card {
		gap: 32px;
	}

	.project-card__content {
		flex-basis: calc(var(--projects-left-width, 65%) - 32px);
	}

	.project-card__image {
		height: calc(var(--projects-thumb-height, 628px) * 0.8);
	}
}

/* Mobile: xếp dọc Header → Content (Title/Desc/Meta) → Image full width → Dots. */
@media (max-width: 599px) {
	.project-card {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.project-card__content {
		flex-basis: auto;
	}

	.project-card__meta {
		max-width: 100%;
	}

	.project-card__media-link {
		width: 100%;
	}

	.project-card__image {
		height: calc(var(--projects-thumb-height, 628px) * 0.65);
	}
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
	.projects-home .tmnp-slider.is-enhanced .tmnp-slider__track,
	.project-card__image {
		transition: none;
	}

	.project-card:hover .project-card__image {
		transform: none;
	}
}