/* Block Năng lực sản xuất (Figma 289:703) */

.block-capabilities {
	isolation: isolate;
}

.block-capabilities__decor {
	position: absolute;
	top: -0.12em;
	left: 50%;
	z-index: -1;
	width: 117vw; /* Figma: khung chữ rộng 2239/1920 → "GLOBAL" / "MANUFACTURING" thành 2 dòng, dòng dưới tràn 2 mép. */
	white-space: normal;
	translate: -50% 0; /* không dùng transform: hiệu ứng hiện khi cuộn (site.js) dùng transform */
}

.block-capabilities__statements {
	display: grid;
	gap: clamp(20px, 3.75vw, 72px);
	padding-inline: clamp(0px, 8vw, 153px);
	font-family: var(--font-display);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text);
}

.block-capabilities__statement {
	display: grid;
	font-weight: 400;
}

.block-capabilities__statement strong {
	font-size: clamp(24px, 2.71vw, 52px);
	font-weight: 900;
}

.block-capabilities__statement span {
	font-size: clamp(20px, 2.5vw, 48px);
	font-weight: 400;
	text-transform: none;
}

.block-capabilities__statement--end {
	justify-self: end;
	text-align: right;
}

.block-capabilities__cards {
	display: grid;
	gap: clamp(16px, 1.35vw, 26px);
	margin-top: clamp(32px, 4.9vw, 94px);
}

/* Mobile / tablet (Figma mobile, feedback vòng 4): 3 card trên 1 dải cuộn ngang thay vì xếp dọc. Khoảng đệm trên dưới
   để card nổi lên / bóng không bị cắt. */
@media (max-width: 1023px) {
	ul.block-capabilities__cards { /* "ul." thắng ul[class] { padding: 0 } của base.css */
		display: flex;
		width: 100%;
		padding: 24px var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.block-capabilities__cards::-webkit-scrollbar {
		display: none;
	}

	.cap-card {
		flex: 0 0 min(82vw, 440px);
		scroll-snap-align: start;
	}
}

@media (min-width: 1024px) {
	.block-capabilities__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		padding-bottom: clamp(48px, 5.57vw, 107px);
	}

	.block-capabilities__cards > :nth-child(2) {
		translate: 0 clamp(48px, 5.57vw, 107px); /* như trên: transform dành cho hiệu ứng nảy lên khi cuộn */
	}
}

/* Card ----------------------------------------------------------------- */

.cap-card {
	--card-bg: #fff;
	--card-fg: var(--color-text-strong);
	--card-icon: var(--color-brown);
	--card-filter: grayscale(1);
	--card-text: none;
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 17.97vw, 345px);
	padding: clamp(24px, 1.67vw, 32px);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--card-bg);
	color: var(--card-fg);
	box-shadow: var(--shadow-card);
	transition: background-color 0.3s, color 0.3s, box-shadow 0.4s, transform 0.7s var(--ease-spring); /* --ease-spring: effects.css */
	outline-offset: 4px;
}

/* Rê chuột / focus: card nổi lên, nảy kiểu lò xo (vị trí lệch của card giữa nằm ở thuộc tính "translate", không bị đè). */
.cap-card:focus-visible {
	transform: translateY(-20px);
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
}

@media (hover: hover) {
	.cap-card:hover {
		transform: translateY(-20px);
		box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
	}
}

/* Trạng thái nổi bật (nền xanh, ảnh màu, hiện mô tả). Feedback vòng 4: mặc định cả 3 card đen trắng, rê chuột / focus
   card nào thì card đó đổi màu. Thiết bị cảm ứng (không rê chuột được): giữ card "--featured" nổi bật sẵn, không thì
   không bao giờ thấy màu và mô tả. */
.cap-card:focus-visible {
	--card-bg: var(--color-blue);
	--card-fg: #fff;
	--card-icon: #e3f263;
	--card-filter: none;
	--card-text: block;
}

@media (hover: hover) {
	.cap-card:hover {
		--card-bg: var(--color-blue);
		--card-fg: #fff;
		--card-icon: #e3f263;
		--card-filter: none;
		--card-text: block;
	}
}

@media (hover: none) {
	.cap-card--featured {
		--card-bg: var(--color-blue);
		--card-fg: #fff;
		--card-icon: #e3f263;
		--card-filter: none;
		--card-text: block;
	}
}

.cap-card__media {
	position: absolute;
	inset: 0 0 0 28%;
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 64% 100%, 74% 66%, 34% 50%, 54% 30%);
}

.cap-card:nth-child(2) .cap-card__media {
	clip-path: polygon(36% 0, 100% 0, 100% 100%, 46% 100%, 0 54%);
}

.cap-card:nth-child(3) .cap-card__media {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 100%);
}

.cap-card__media picture,
.cap-card__media img {
	width: 100%;
	height: 100%;
}

.cap-card__media img {
	object-fit: cover;
	filter: var(--card-filter);
	transition: filter 0.3s;
}

.cap-card__body {
	position: relative;
	display: grid;
	gap: 8px;
	max-width: 66%;
}

.cap-card__icon {
	width: 40px;
	height: 40px;
	color: var(--card-icon);
	transition: color 0.3s;
}

.cap-card__title {
	font-size: clamp(20px, 1.46vw, 28px);
	font-weight: 700;
	line-height: 1.21;
}

.cap-card__text {
	display: var(--card-text);
	font-size: 14px;
	line-height: 1.3;
	opacity: 0.8;
}