/* TabbedV1 — escape hatches only. Band padding, content width, palettes, card radius, gaps and
   the tab/panel show-hide resolve from catalog utilities and tabbable.css. What's below has no
   utility rung. Landmark comp (Figma 18426:23995): light panel on the dark band, a ribbon of
   alternate-light tabs overlapping its top edge 48px, the active tab re-roled to alternate-dark. */

.tbd.v1 {

	--tbd-v1-ovlp: 3; /* { min: 0, max: 8, step: 0.25, friendly: 'Tab Ribbon Overlap', group: 'Spacing' } */
	--tbd-v1-ovlp-clc: calc(var(--tbd-v1-ovlp) * -1rem); /* { readonly: true } */
	--tbd-v1-mda-asp: 1.5; /* { min: 0.5, max: 3, step: 0.01, friendly: 'Panel Image Aspect Ratio (w/h)', group: 'Images' } */
	--tbd-v1-bdr: 2px solid color-mix(in srgb, var(--lt-alt-bdr) 30%, transparent); /* comp hairline: border token at 0.3 */

	/* The ribbon must paint over the panel it overlaps. Both carry bg-bx (z-index 1), and the
	   panel comes later in source order, so the ribbon needs to be lifted explicitly. */
	.tbd-v1-rbn {
		z-index: 2;

		@media screen and (width >= 1280px) {
			flex-wrap: nowrap;
			gap: 1rem; /* comp: 16px between tabs */
			padding-inline: 4rem; /* comp: ribbon inset 64px inside the panel's edges */

			> li {
				flex: 1 1 0;
				min-width: 15rem; /* comp: 240 */
				max-width: 30rem; /* comp: 480 */
			}
		}
	}

	.tbd-v1-tab {
		width: 100%;
		padding: 1.5rem 1rem; /* comp: 24 / 16 */
		border: var(--tbd-v1-bdr);
		font-weight: 500; /* comp: title-5 at Medium */
		transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s;

		@media (hover: hover) and (pointer: fine) {
			&:is(:hover, :focus-visible) {
				--background: var(--dk-alt-bg);
				--text-color: var(--dk-alt-txt);
				--title-color: var(--dk-alt-txt);
			}
		}
	}

	/* Active tab takes the alternate-dark palette roles (comp #212121 / white, gold hairline). */
	.tbd-v1-tab.active {
		--background: var(--dk-alt-bg);
		--inner-theme: var(--dk-alt-bg);
		--text-color: var(--dk-alt-txt);
		--title-color: var(--dk-alt-txt);
		border-color: color-mix(in srgb, var(--dk-alt-bdr) 30%, transparent);
	}

	.tbd-v1-pnl {
		border: var(--tbd-v1-bdr);
		padding: 4rem; /* comp: 64 */

		> [class*="flx-at-1280"] {
			column-gap: 4rem; /* comp: 64 between copy and image */
		}
	}

	.tbd-v1-mda img {
		aspect-ratio: var(--tbd-v1-mda-asp);
		object-fit: cover;
	}

	/* Overlap is a desktop-only treatment: below 1280 the ribbon wraps and stacking it over the
	   panel would collide with the panel's own content. */
	@media screen and (width >= 1280px) {
		.tbd-v1-pnl {
			margin-top: var(--tbd-v1-ovlp-clc);
			padding-top: calc(4rem + var(--tbd-v1-ovlp) * 1rem + 1rem); /* comp: 128 — clears the overlapping ribbon */
		}
	}

	/* Below 1280 the ribbon is a single swipeable strip instead of a stack, so the panel stays
	   directly under the tab that drives it. The right-edge fade hints there's more to scroll;
	   init.js centres the tapped tab in the strip. */
	@media screen and (width < 1280px) {
		.tbd-v1-rbn {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-start; /* not f_c: centred overflow spills off the left edge, where it can't be scrolled to */
			gap: 0.5rem;
			margin: 0;
			padding: 0 2rem 0 0; /* lets the last tab scroll clear of the fade */
			overflow-x: auto;
			overscroll-behavior-x: contain;
			scroll-snap-type: x proximity;
			scrollbar-width: none;
			mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);

			&::-webkit-scrollbar {
				display: none;
			}

			> li {
				flex: 0 0 auto;
				scroll-snap-align: start;
			}
		}

		.tbd-v1-tab {
			width: auto; /* hug the label — the desktop tab fills its li */
			padding: 0.75rem 1.25rem;
			white-space: nowrap;
		}

		.tbd-v1-pnl {
			margin-top: 0.75rem;
			padding: 2rem 1.5rem;
		}
	}

}