/**
 * Section: turn one — Figma 4002:1812 (desktop) / 4002:2319 (mobile)
 *
 * Khung ngoài  1400 x 466.67, stroke 1px #4a4949 (stroke INSIDE → dùng inset box-shadow
 *              để không ảnh hưởng layout, giữ đúng 3 × 466.667 = 1400)
 * Card         466.667 x 466.67 · padding 32 (var-32) · VERTICAL SPACE_BETWEEN
 *   heading    32 / 600 / lh115%  (h4) — mobile 22 / 600
 *   frame      ảnh rộng 79.47% (320 / 402.667) căn giữa, aspect theo từng card
 *   desc       16 / 400 / lh140%, 2nd-fg
 * Divider      1px #4a4949 giữa các card (dọc ở desktop, ngang ở mobile)
 */

#cd-turn-one .cd-turnone {
	display: flex;
	position: relative;
}

/* Viền khung ngoài vẽ bằng OVERLAY (z-index 2) chứ không phải box-shadow trên
   chính .cd-turnone. Lý do: card có `isolation: isolate` nên cả stacking context
   của card — gồm ::before nền hover — vẽ ĐÈ lên background layer của cha, làm mất
   viền khi hover. Overlay nằm trên card nên viền luôn còn. */
#cd-turn-one .cd-turnone::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px var(--color-stroke);
}

/* Figma xếp SPACE_BETWEEN với itemSpacing tối thiểu 10, card VUÔNG khi nội dung vừa
   và HUG khi nội dung cao hơn bề rộng — `aspect-ratio: 1` cho đúng cả hai:
     desktop 1400/3 = 466.67 rộng, nội dung hug 439.97 < 466.67 → card 466.67 (vuông)
     laptop  1272/3 = 424    rộng, nội dung hug 439.97 > 424    → card 439.97 (cao hơn)
   space-between tự chia khoảng trống nên KHÔNG cần tính gap sẵn cho từng breakpoint:
     desktop card 1: (402.667 − 37 − 274.97 − 44) / 2 = 23.35  ✓ Figma
     laptop  card 1: (375.97  − 37 − 274.97 − 44) / 2 = 10     ✓ Figma */
#cd-turn-one .cd-turnone__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	padding: var(--var-32);
}

/* divider giữa các card — Figma vector 1px, không chiếm chỗ trong layout.
   Dùng ::after (z-index 2, trong stacking context của card) để nằm TRÊN ::before
   nền hover — nếu để box-shadow trên chính card thì nền hover sẽ phủ mất. */
#cd-turn-one .cd-turnone__card + .cd-turnone__card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	box-shadow: inset 1px 0 0 var(--color-stroke);
}

#cd-turn-one .cd-turnone__title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
}

/* Khung ảnh cao CỐ ĐỊNH đúng giá trị Figma (274.967 / 260 / 267 — giống nhau ở
   mọi breakpoint). Chiều cao khung KHÔNG chạy theo ảnh: nhờ vậy khi hover ảnh to
   ra thì card không đổi chiều cao, cả hàng đứng yên (xem khối hover ở cuối file).
     desktop default  ảnh 79.47% × 402.667 = 320    (vừa khít khung 274.97)
     laptop  default  ảnh 79.47% × 360     = 286.09 (cao 245.83, thụt trong khung)
     desktop hover    ảnh 100%   × 402.667 = 402.67 (cao 346, tràn xuống dưới)
     laptop  hover    ảnh 100%   × 360     = 360    (cao 309.3, tràn xuống dưới)
   Ảnh neo `flex-start` nên phần tràn luôn đi XUỐNG, không bao giờ đè lên heading. */
#cd-turn-one .cd-turnone__frame {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: var(--cd-frame-h);
	flex: none;
}

#cd-turn-one .cd-turnone__image {
	/* Figma: ảnh 320 trong khung 402.667 → 79.4702% */
	width: 79.4702%;
	height: auto;
	aspect-ratio: var(--cd-ratio);
	object-fit: cover;
}

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
	/* Card vuông khi nội dung vừa; nếu nội dung cao hơn thì tự cao lên (laptop).
	   Cả hàng kéo đều theo card cao nhất — bỏ height cứng 466.67 vì ở laptop
	   Figma cho hàng cao 439.97 chứ không phải 466.67. */
	#cd-turn-one .cd-turnone__card {
		aspect-ratio: 1;
	}
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 1024px) {
	#cd-turn-one .cd-turnone {
		flex-direction: column;
	}

	/* mobile: divider nằm ngang */
	#cd-turn-one .cd-turnone__card + .cd-turnone__card::after {
		box-shadow: inset 0 1px 0 var(--color-stroke);
	}
}

/* ============================================================
   Effect "Hover to replace" (spec PDF — Turn one into many)
   Figma section "turn one" 4002:10211 — 3 card × 2 trạng thái:
     default (10344/45/46): nền #050505 · ảnh rộng 320 · có description
     hover   (10341/42/43): nền = ảnh riêng của card · ảnh rộng 403 · ẩn description
   → scale ảnh khi hover = 403 / 320 = 1.2594
   ============================================================ */
/* KHÔNG đặt background đục lên card: viền của khung ngoài (.cd-turnone) vẽ bằng
   inset box-shadow nên nằm DƯỚI các card — card có nền đục sẽ che mất viền và
   cả divider giữa các card. Nền mặc định của Figma trùng --color-1st-bg nên để trong
   suốt là giống hệt về mặt hình ảnh. */
#cd-turn-one .cd-turnone__card {
	position: relative;
	background-color: transparent;
	isolation: isolate;
}

/* Ảnh nền hover, fade vào bằng opacity để không giật layout */
#cd-turn-one .cd-turnone__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--cd-hover-bg);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .42s var(--cd-ease-out, ease);
	pointer-events: none;
}

#cd-turn-one .cd-turnone__image {
	transition: width .48s var(--cd-ease-out, ease);
}

#cd-turn-one .cd-turnone__card .cd-description {
	transition: opacity .3s var(--cd-ease-out, ease);
}

/* Hover — YÊU CẦU: layout phải ĐỨNG YÊN, không đẩy card nào nhúc nhích.
   Trước đây description bị `position: absolute` khi hover → nội dung card thấp đi
   → `align-items: stretch` kéo CẢ 3 card đổi chiều cao (đo được −7.9px ở 1336) và
   `space-between` phân bố lại làm ảnh trượt 2–4px.
   Giờ:
     · description GIỮ NGUYÊN trong luồng, chỉ mờ đi  → chiều cao card không đổi
     · frame có height CỐ ĐỊNH (--cd-frame-h)          → ảnh to ra không đội frame lên
     · ảnh neo `flex-start` và tràn XUỐNG DƯỚI vào chỗ description vừa mờ đi,
       nên không bao giờ đè lên heading
   Ảnh vẫn đổi `width` thật (79.47% → 100% = đúng 320 → 403 của Figma) chứ không
   dùng `transform: scale()`, để ảnh không bị mờ ở state hover. */
@media (hover: hover) and (min-width: 1025px) {
	#cd-turn-one .cd-turnone__card:hover::before {
		opacity: 1;
	}

	/* Figma: 320 / 402.667 → 403 / 402.667 */
	#cd-turn-one .cd-turnone__card:hover .cd-turnone__image {
		width: 100%;
	}

	#cd-turn-one .cd-turnone__card:hover .cd-description {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cd-turn-one .cd-turnone__card::before,
	#cd-turn-one .cd-turnone__image,
	#cd-turn-one .cd-turnone__card .cd-description { transition: none; }
}

/* ---------- Tablet (Figma 4002:2003) ----------
   Card vẫn rộng trọn content-wrapper (794) nhưng chữ và ảnh bên trong bị giới hạn
   500 và căn giữa. Ở mobile 390 nội dung chỉ rộng 286 < 500 nên các luật này vô
   hiệu — một quy tắc fluid duy nhất khớp CẢ HAI mốc Figma:
     mobile  ảnh min(79.47% × 286, 500) = 227.28 × 195.30 ✓ (khung 274.97, ảnh thụt)
     tablet  ảnh min(79.47% × 730, 500) = 500.00 × 429.64 ✓ (khung nở theo ảnh)  */
@media (max-width: 1024px) {
	#cd-turn-one .cd-turnone__title,
	#cd-turn-one .cd-turnone__card > .cd-description {
		width: 100%;
		max-width: 500px;
		margin-inline: auto;
	}

	#cd-turn-one .cd-turnone__image {
		width: min(79.4702%, 500px);
	}
}