/**
 * Section 4: Protect — "How to protect / and when?"
 * Figma desktop 4435:4311 · laptop 4435:8079 · mobile 4435:23702 · trạng thái 4435:12519
 *
 * Số đo (get_metadata) + typography (get_variable_defs):
 *   menu item   số   headings-number/heading-6  Konstant Book h6 (20 / mobile 18), lh 1.15
 *               nhãn headings/heading-3        DM Sans 600 h3 (40 / mobile 25), lh 1.15
 *               số → nhãn 6 · icon → nhãn 8 · item cách nhau 48
 *   card        ảnh + 32 + section-headings h5 (heading 16 description) + 20 + tag
 *   tag         padding 8/12, gap 4, cao 30, pill, chữ 2nd-brd 14px IN HOA
 */

/* ============================================================
   Layout — desktop: menu 290 | 40 | nội dung (1070 / laptop 942)
   ============================================================ */
.fd-protect__layout {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	column-gap: var(--var-40);
	align-items: start;
}

/* ============================================================
   Menu trái (tablist)
   ============================================================ */
.fd-protect__menu {
	display: flex;
	flex-direction: column;
	gap: var(--var-48);
	/* sticky: luôn thấy menu khi cuộn qua 2 card. 120 ≈ header 94 + khoảng thở */
	position: sticky;
	top: 120px;
}

.fd-protect__tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--var-6);
	width: 100%;
	text-align: left;
	/* disabled-fg bản tối — global chỉ có bản sáng (rgba(5,5,5,.24)) */
	color: rgba(255, 255, 255, .24);
	transition: color .3s ease;
}

.fd-protect__tab:hover:not(.is-active) {
	color: rgba(255, 255, 255, .56);
}

.fd-protect__tab:focus-visible {
	outline: 2px solid var(--color-2nd-brd);
	outline-offset: 4px;
}

.fd-protect__num {
	font-size: var(--fs-h6);
	color: inherit;
	transition: color .3s ease;
}

.fd-protect__name {
	display: flex;
	align-items: center;
	gap: var(--var-8);
}

.fd-protect__label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-h3);
	line-height: 1.15;
}

.fd-protect__icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--color-reverse-fg);
}

/* item không active: không có icon */
.fd-protect__tab:not(.is-active) .fd-protect__icon {
	display: none;
}

.fd-protect__tab.is-active {
	color: var(--color-reverse-fg);
}

.fd-protect__tab.is-active .fd-protect__num {
	color: var(--color-2nd-brd);
}

/* ============================================================
   Panels — xếp chồng trong cùng 1 ô grid
   Khu panel tự cao bằng panel cao nhất → đổi tab không giật trang,
   không phải đo bằng JS. Đổi tab = crossfade opacity.
   ============================================================ */
.fd-protect__panels {
	display: grid;
}

.fd-protect__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}

.fd-protect__panel.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease .05s, visibility 0s;
}

/* header nhóm chỉ dùng ở mobile/tablet */
.fd-protect__group-head {
	display: none;
}

.fd-protect__cards {
	display: flex;
	flex-direction: column;
	gap: var(--var-40);
}

.fd-protect__card {
	display: flex;
	flex-direction: column;
	gap: var(--var-32);
}

.fd-protect__media {
	display: block;
	/* nền chờ ảnh tải */
	background: #1a1a1a;
}

.fd-protect__media img {
	width: 100%;
	height: auto;
}

/* Desktop/laptop: khung ảnh CAO CỐ ĐỊNH 400 (Account 480), rộng theo cột
   (1070 desktop · 942 laptop). Figma laptop 4435:8103 = 942×400: nội dung giữ
   nguyên cỡ, căn giữa, nền bị cắt 2 bên → object-fit: cover, căn giữa. */
@media (min-width: 1025px) {
	.fd-protect__media img {
		height: 400px;
		object-fit: cover;
		object-position: center;
	}

	.fd-protect__media--tall img {
		height: 480px;
	}
}

.fd-protect__text {
	display: flex;
	flex-direction: column;
	gap: var(--var-20);
}

/* Card dùng component section-headings ở cấp h5: chỉ có heading + description,
   không badge → khoảng cách heading/description = 16 của __main. */
.fd-protect__headings .fd-heading {
	width: auto;
}

/* ============================================================
   Tag
   ============================================================ */
.fd-protect__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--var-4);
}

.fd-protect__tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: var(--var-8) var(--var-12);
	border-radius: 100px;
	/* nền = 2nd-brd 12% trên nền tối (đo trên screenshot: #1d1122) */
	background: rgba(204, 106, 249, .12);
	color: var(--color-2nd-brd);
	font-family: var(--font-body);
	font-weight: 500;
	/* 14 ở CẢ mobile (metadata mobile vẫn cao 14) — không dùng --fs-label-md vì
	   global hạ nó xuống 12 ở ≤ 1024 */
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ============================================================
   Mobile / tablet (≤ 1024): bỏ tab, 4 nhóm xếp dọc
   ============================================================ */
@media (max-width: 1024px) {
	/* Figma mobile 4435:23704: heading căn TRÁI (desktop 4435:4313 căn giữa) */
	.fd-protect__title.fd-headings--center,
	.fd-protect__title.fd-headings--center .fd-headings__block,
	.fd-protect__title.fd-headings--center .fd-headings__main {
		align-items: flex-start;
		text-align: left;
	}

	.fd-protect__layout {
		display: block;
	}

	.fd-protect__menu {
		display: none;
	}

	.fd-protect__panels {
		display: flex;
		flex-direction: column;
		gap: var(--var-40);
	}

	.fd-protect__panel,
	.fd-protect__panel.is-active {
		opacity: 1;
		visibility: visible;
		transition: none;
		display: flex;
		flex-direction: column;
		gap: var(--var-32);
	}

	.fd-protect__group-head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--var-6);
	}

	.fd-protect__group-head .fd-protect__num {
		color: var(--color-2nd-brd);
	}

	.fd-protect__group-head .fd-protect__label {
		color: var(--color-reverse-fg);
	}

	.fd-protect__icon {
		width: 24px;
		height: 24px;
	}

	.fd-protect__cards {
		gap: var(--var-32);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fd-protect__tab,
	.fd-protect__num,
	.fd-protect__panel,
	.fd-protect__panel.is-active {
		transition: none;
	}
}