/* Round16 — Anti-leak Discount — component scroll-tabs
   Dùng chung cho 2 section: goodbye (4372:9410) và introducing (4372:9711).

   Figma desktop (4372:9411):
     content-wrapper  VERTICAL gap 80
       ├ div  HORIZONTAL gap 16 → heading (grow) | description (460)
       └ div  HORIZONTAL gap 16 → panel "code" (grow, bg 2nd-bg, pad 24, gap 16)
                                 | Frame 210 (460, VERTICAL gap 16, 4 thẻ tab)
     panel: ảnh 876 x 606.46 + caption 20px
     thẻ tab: bg 2nd-bg, pad 24, label h5 (25); thẻ đang mở opacity 1 + ô vuông
              12x12 màu 2nd-brd, thẻ còn lại opacity .4

   Figma phone (I4372:8841;1092:18113):
     div VERTICAL gap 8
       ├ hàng 4 thẻ 130 x 120, cuộn ngang, gap 8 (ô vuông TRÊN, label DƯỚI)
       └ panel pad 20, gap 16 → ảnh + caption 16px
*/

/* ---------------------------------------------------------------- layout */
.al-tabs__row {
	display: flex;
	align-items: stretch;
	gap: var(--var-16);
}

/* introducing: danh sách tab nằm bên TRÁI (Figma 4372:9718) */
.al-tabs--reverse .al-tabs__row {
	flex-direction: row-reverse;
}

.al-tabs__panel {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

.al-tabs__list {
	flex: 0 0 var(--al-side-col);
	max-width: var(--al-side-col);
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

/* ------------------------------------------------------- ảnh + caption */
/* Xếp chồng bằng grid (mọi item vào cùng 1 ô) để chiều cao khung luôn bằng
   item cao nhất — không nhảy layout khi đổi tab. */
.al-tabs__media,
.al-tabs__captions {
	display: grid;
}

.al-tabs__media > *,
.al-tabs__captions > * {
	grid-area: 1 / 1;
}

.al-tabs__img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--al-ratio-tabs);
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--al-swap-ms) var(--al-ease-out);
}

.al-tabs__img.is-active {
	opacity: 1;
}

/* Figma: caption dùng màu 1st-fg (trắng đặc), KHÔNG phải 2nd-fg */
.al-tabs__caption {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--al-description-lg);   /* 20px */
	line-height: var(--lh-body);
	color: var(--color-1st-fg);
	opacity: 0;
	transition: opacity var(--al-swap-ms) var(--al-ease-out);
}

.al-tabs__caption.is-active {
	opacity: 1;
}

/* -------------------------------------------------------------- thẻ tab */
.al-tabs__item {
	flex: 1 1 0;
	display: flex;
	align-items: flex-start;
	gap: var(--var-16);
	padding: var(--var-24);
	background: var(--color-2nd-bg);
	overflow: hidden;
	opacity: var(--al-tab-dim);
	transition: opacity var(--al-swap-ms) var(--al-ease-out);
}

.al-tabs__item.is-active {
	opacity: 1;
}

.al-tabs__label {
	flex: 1 1 auto;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h5);               /* 25 / 18 (xem <=1024) */
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
	/* Figma đặt word-break: break-word cho các text layer này. Cần thiết ở <=1024:
	   thẻ chỉ rộng 130 (nội dung 106) mà "Creators/Influencers" là một token liền,
	   CSS không ngắt ở dấu "/" nên chữ bị tràn và cắt cụt — Figma xuống 2 dòng. */
	overflow-wrap: break-word;
}

/* Ô vuông đánh dấu — luôn có trong DOM để bề rộng label không đổi khi chuyển tab */
.al-tabs__marker {
	flex: none;
	width: var(--var-12);
	height: var(--var-12);
	background: var(--color-2nd-brd);
	opacity: 0;
	transition: opacity var(--al-swap-ms) var(--al-ease-out);
}

.al-tabs__item.is-active .al-tabs__marker {
	opacity: 1;
}

/* ------------------------------------------------ <=1024 (tablet + mobile) */
@media (max-width: 1024px) {
	.al-tabs__row,
	.al-tabs--reverse .al-tabs__row {
		flex-direction: column;
		gap: var(--var-8);
	}

	/* Figma phone: hàng tab nằm TRÊN panel ở cả 2 section */
	.al-tabs__list {
		order: 0;
		flex: none;
		max-width: none;
		flex-direction: row;
		gap: var(--var-8);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.al-tabs__list::-webkit-scrollbar {
		display: none;
	}

	/* flex: none BẮT BUỘC — ở desktop panel là `flex: 1 1 0` trên trục NGANG,
	   sang <=1024 hàng đổi thành column nên flex-basis 0 rơi vào trục DỌC,
	   ghi đè aspect-ratio và làm ảnh sập về height 0. */
	.al-tabs__panel {
		order: 1;
		flex: none;
		padding: var(--var-20);
	}

	/* Thẻ 130 x 120: ô vuông ở TRÊN, label ở DƯỚI.
	   column-reverse + space-between → con đầu (label) về đáy, con cuối
	   (marker) lên đỉnh, đúng Figma I4372:8841;1092:18118. */
	.al-tabs__item {
		flex: 0 0 var(--al-tab-card-w);
		width: var(--al-tab-card-w);
		height: var(--al-tab-card-h);
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: stretch;
		padding: var(--var-12);
		gap: var(--var-16);
	}

	.al-tabs__label {
		flex: 0 1 auto;
		font-size: var(--fs-h6);           /* 18px ở <=1024 */
	}

	.al-tabs__caption {
		font-size: var(--fs-body);         /* 16px */
	}
}