/* Block Thẻ dịch vụ (Figma "Detail page → Dugarco creative" → Frame 2147231146: 1807 × 1080, 4 thẻ 340 × 440, gap 24, bo 24) */

.block-services {
	padding: clamp(48px, 16.67vw, 320px) var(--gutter); /* thẻ nằm giữa khung cao 1080 */
}

/* Cột co theo bề ngang, tối đa 340: 2 cột rồi 4 cột trên 1 hàng (trước đây auto-fit xuống hàng 3 + 1 ở màn 1440). */
.block-services__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 340px));
	justify-content: center;
	gap: clamp(16px, 1.25vw, 24px);
}

@media (min-width: 1024px) {
	.block-services__list {
		grid-template-columns: repeat(4, minmax(0, 340px));
	}
}

/*
 * Mảng màu là ::after phủ cả mặt trước, cắt bằng clip-path (toạ độ % đo trên thẻ 340 × 440 trong Figma).
 * --sc-rest: hình khi không chọn (theo vị trí thẻ), --sc-roof: hình khi được chọn.
 * Mọi hình đều 5 điểm để clip-path chuyển mượt giữa 2 hình.
 */
.service-card {
	--sc-rest: polygon(0 64.8%, 40% 60%, 84% 68.4%, 96.5% 100%, 0 100%);
	--sc-roof: polygon(0 63.6%, 49.5% 48%, 100% 63%, 100% 100%, 0 100%);
	--sc-shape: var(--sc-rest);
	--sc-fill: #fff;
	--sc-ink: #111;
	--sc-more: 0fr;
	--sc-face: #fff;
	position: relative;
	border-radius: var(--radius-lg);
	aspect-ratio: 340 / 440;
	outline-offset: 4px;
}

/* Thẻ 2 mặt: khung lật giữ không gian 3D (không được có overflow / opacity / isolation – sẽ làm phẳng 2 mặt),
   mặt trước chứa ảnh + chữ, mặt sau quay ngược 180°; mặt nào quay lưng về người xem thì ẩn. */
.service-card__flip,
.service-card__face,
.service-card__back {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.service-card__flip {
	transform-style: preserve-3d;
}

.service-card__face,
.service-card__back {
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.service-card__face {
	background: var(--sc-face);
	isolation: isolate;
}

/* Mặt sau – tạm do dev vẽ, chờ thiết kế (PLAN.md Q41): nền đỏ thương hiệu, hoạ tiết ô trám mảnh, khung viền trong,
   biểu tượng Dugarco ở giữa như lưng một lá bài. */
.service-card__back {
	background:
		url("../../assets/img/logo-mark.svg") center / 34% auto no-repeat,
		repeating-linear-gradient(45deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 18px),
		repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 18px),
		var(--color-primary-dark);
	transform: rotateY(180deg);
}

.service-card__back::before {
	content: "";
	position: absolute;
	inset: clamp(10px, 0.83vw, 16px);
	border: 1.5px solid rgb(255 255 255 / 0.55);
	border-radius: clamp(10px, 0.83vw, 14px);
}

/* Chia bài (site.js, REVEAL kiểu "deal"): lúc ẩn thẻ úp mặt sau; khi bay lên được một đoạn thì lật ra mặt trước,
   các thẻ lần lượt theo --reveal-delay. Lúc ẩn lại (cuộn đi) thẻ úp ngay, không lật ngược. */
.service-card.reveal--deal {
	perspective: 1600px;
}

.service-card.reveal--deal .service-card__flip {
	transform: rotateY(-180deg);
}

.service-card.reveal--deal.is-revealed .service-card__flip {
	transform: none;
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--reveal-delay, 0s) + 0.35s);
}

.service-card:nth-child(4n + 2) { --sc-rest: polygon(0 65%, 56% 57%, 100% 80%, 100% 100%, 0 100%); }
.service-card:nth-child(4n + 3) { --sc-rest: polygon(0 70%, 49.5% 62%, 100% 70%, 100% 100%, 0 100%); }
.service-card:nth-child(4n + 4) { --sc-rest: polygon(0 76%, 41% 73.5%, 82% 71%, 96.5% 100%, 0 100%); }

/* Kiểu "Dịch vụ" (feedback vòng 4): mặc định mọi thẻ chữ + icon đen; rê chuột / focus thẻ nào thì thẻ đó có mảng màu xanh
   và hiện mô tả. Thiết bị cảm ứng (không rê chuột được): thẻ "Chọn sẵn" nổi bật sẵn, không thì không bao giờ thấy mô tả. */
.block-services--track .service-card:focus-within {
	--sc-shape: var(--sc-roof);
	--sc-fill: #3d9df3;
	--sc-ink: #fff;
	--sc-more: 1fr;
}

@media (hover: hover) {
	.block-services--track .service-card:hover {
		--sc-shape: var(--sc-roof);
		--sc-fill: #3d9df3;
		--sc-ink: #fff;
		--sc-more: 1fr;
	}
}

@media (hover: none) {
	.block-services--track .service-card--default {
		--sc-shape: var(--sc-roof);
		--sc-fill: #3d9df3;
		--sc-ink: #fff;
		--sc-more: 1fr;
	}
}

/* Kiểu "lease": thẻ đang chọn mặc định là thẻ "Chọn sẵn"; rê chuột / focus thẻ khác thì chuyển sang thẻ đó. */
.block-services--lease .service-card--default,
.block-services--lease .block-services__list:is(:hover, :focus-within) .service-card:is(:hover, :focus-within) {
	--sc-shape: var(--sc-roof);
	--sc-fill: #3d9df3;
	--sc-ink: #fff;
	--sc-more: 1fr;
}

.block-services--lease .block-services__list:is(:hover, :focus-within) .service-card--default:not(:hover, :focus-within) {
	--sc-shape: var(--sc-rest);
	--sc-fill: #fff;
	--sc-ink: #111;
	--sc-more: 0fr;
}

.service-card__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-card__face::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sc-fill);
	clip-path: var(--sc-shape);
	transition: clip-path 0.35s ease, background-color 0.35s ease;
}

.service-card__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	padding: clamp(16px, 1.25vw, 24px);
	color: var(--sc-ink);
	transition: color 0.35s ease;
}

.service-card__icon {
	width: clamp(28px, 2.08vw, 40px);
	height: clamp(28px, 2.08vw, 40px);
	margin-bottom: clamp(8px, 0.83vw, 16px);
}

.service-card__title {
	font-size: clamp(20px, 1.46vw, 28px);
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	color: inherit;
}

/* Mô tả thu gọn bằng grid 0fr → 1fr: vẫn có trong HTML và cây trợ năng. */
.service-card__more {
	display: grid;
	grid-template-rows: var(--sc-more);
	transition: grid-template-rows 0.35s ease;
}

.service-card__clip {
	min-height: 0;
	overflow: hidden;
}

.service-card__text {
	padding-top: 8px; /* nằm trong phần thu gọn: thẻ chưa chọn không bị thừa khoảng trống dưới tiêu đề */
	font-size: 14px;
	line-height: 1.25;
	opacity: 0.8;
}

/* Kiểu "Dịch vụ": 9 thẻ trên 1 dải ngang tràn 2 mép (Figma Frame 2147231148: 5 thẻ 340 trên khung 1807), vuốt / cuộn
   ngang hoặc bấm nút trước / sau. Thẻ đang lật / nổi lên không bị cắt nhờ khoảng đệm trên dưới của dải. */
.block-services--track {
	padding-block: clamp(48px, 13vw, 250px) clamp(48px, 10vw, 190px);
}

.block-services--track ul.block-services__list { /* "ul." thắng ul[class] { padding: 0 } của base.css */
	display: flex;
	justify-content: flex-start;
	gap: clamp(16px, 1.25vw, 24px);
	margin-inline: calc(-1 * var(--gutter));
	padding: 16px var(--gutter) 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.block-services--track .block-services__list::-webkit-scrollbar {
	display: none;
}

.block-services--track .service-card {
	flex: 0 0 clamp(240px, 17.7vw, 340px);
	scroll-snap-align: start;
}

@media (max-width: 599px) {
	.block-services--track .service-card {
		flex-basis: 72vw;
	}
}

.block-services__nav {
	margin-top: clamp(16px, 1.67vw, 32px);
}

/* Kiểu "lease" – Assets for lease (Figma "Detail page → Cooperate" → Frame 100: 1808 × 920; tiêu đề Zalando 900 92px;
   4 thẻ 427 × 533 bo 23.4, cách 33, top 196; thẻ không chọn mờ 30%; link "Explore leasing opportunities" top 800) */

.block-services--lease {
	margin-block: var(--section-space) clamp(64px, 6.04vw, 116px);
	padding: 0 var(--gutter);
	text-align: center;
}

.block-services__title {
	font-size: clamp(30px, 4.79vw, 92px);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-text);
}

/* Mobile (Figma mobile "Cooperate"): 4 thẻ trên 1 dải cuộn ngang. */
@media (max-width: 599px) {
	.block-services--lease ul.block-services__list {
		display: flex;
		margin-inline: calc(-1 * var(--gutter));
		padding: 8px var(--gutter) 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.block-services--lease .block-services__list::-webkit-scrollbar {
		display: none;
	}

	.block-services--lease .service-card {
		flex: 0 0 min(52vw, 260px);
		scroll-snap-align: start;
	}
}

/* Cột co theo bề ngang (không xuống hàng khi có thanh cuộn): 1 → 2 → 4 cột, tối đa 427. */
.block-services--lease .block-services__list {
	grid-template-columns: minmax(0, 427px);
	gap: clamp(16px, 1.72vw, 33px);
	margin-top: clamp(32px, 4.4vw, 84px);
	text-align: left;
}

@media (min-width: 600px) {
	.block-services--lease .block-services__list {
		grid-template-columns: repeat(2, minmax(0, 427px));
	}
}

@media (min-width: 1024px) {
	.block-services--lease .block-services__list {
		grid-template-columns: repeat(4, minmax(0, 427px));
	}
}

.block-services--lease .service-card {
	--sc-dim: 0.3;
	--sc-roof: polygon(0 69%, 24% 60%, 90% 65%, 100% 100%, 0 100%);
	--sc-face: transparent;
	border-radius: 23.4px;
	aspect-ratio: 427 / 533;
}

/* Chỉ mặt trước mờ (mặt sau lúc chia bài luôn rõ). */
.block-services--lease .service-card__face {
	opacity: var(--sc-dim);
	transition: opacity 0.35s ease;
}

.block-services--lease .service-card:nth-child(4n + 1) { --sc-rest: polygon(0 72.5%, 35% 63.6%, 82% 72.5%, 93% 100%, 0 100%); }
.block-services--lease .service-card:nth-child(4n + 2) { --sc-rest: polygon(0 72%, 39% 66%, 74% 81%, 100% 100%, 0 100%); }
.block-services--lease .service-card:nth-child(4n + 3) { --sc-rest: polygon(0 69%, 24% 60%, 90% 65%, 100% 100%, 0 100%); }
.block-services--lease .service-card:nth-child(4n + 4) { --sc-rest: polygon(0 72%, 30% 64%, 84% 72%, 100% 100%, 0 100%); }

.block-services--lease .service-card--default,
.block-services--lease .block-services__list:is(:hover, :focus-within) .service-card:is(:hover, :focus-within) {
	--sc-dim: 1;
}

.block-services--lease .block-services__list:is(:hover, :focus-within) .service-card--default:not(:hover, :focus-within) {
	--sc-dim: 0.3;
}

/* Thiết bị cảm ứng (không rê chuột để chọn thẻ): không làm mờ thẻ. */
@media (hover: none) {
	.block-services--lease .service-card {
		--sc-dim: 1;
	}
}

.block-services__more {
	display: inline-flex;
	align-items: center;
	gap: clamp(16px, 2.08vw, 40px);
	margin-top: clamp(32px, 3.65vw, 70px);
	font-family: var(--font-display);
	font-size: clamp(18px, 2.08vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	color: var(--color-text);
}

.block-services__more .icon {
	width: clamp(32px, 3.33vw, 64px);
	height: clamp(32px, 3.33vw, 64px);
	transition: transform 0.2s;
}

.block-services__more:hover {
	color: var(--color-primary);
}

.block-services__more:hover .icon {
	transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
	.service-card__face,
	.service-card__face::after,
	.service-card__body,
	.service-card__more {
		transition: none;
	}
}