/* TabbedV1 — escape hatches only. Band padding, content width, palette, card radius, gaps and
   the tab/panel show-hide all resolve from catalog utilities and tabbable.css. Only the three
   values below have no utility rung: the ribbon/panel overlap, the active-tab palette re-role,
   and the media aspect. */

.tbd.v1 {

	--tbd-v1-ovlp: 1.5; /* { 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.43; /* { min: 0.5, max: 3, step: 0.01, friendly: 'Panel Image Aspect Ratio (w/h)', group: 'Images' } */

	/* 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 (min-width:1280px) {
			& {
				max-width: 90%;
				margin-inline: auto;
			}
		} 
	}

	/* Active tab takes the primary-button palette roles rather than a hardcoded colour, so it
	   tracks every data-colors scope the panel can be placed in. */
	.tbd-v1-tab {
		transition: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, opacity var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s;
		
		&::after {
			background: linear-gradient(180deg, var(--btn-pry) 0%, var(--white) 100%);
			transition: inherit;
			opacity: 0;
		}
		
		@media (hover: hover) and (pointer: fine) {
			&:is(:hover, :focus-visible) {
				--inner-theme: var(--btn-pry);
				--text-color: var(--btn-pry-txt);
				--title-color: var(--btn-pry-txt);
		
				&::after {
					opacity: 1;
				}
			}
		}
	}
	.tbd-v1-tab.active {
		--inner-theme: var(--btn-pry);
		--text-color: var(--btn-pry-txt);
		--title-color: var(--btn-pry-txt);
	
		&::after {
			opacity: 1;
		}
	}

	.w-ato img {
		width: auto;
	}

	.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 (min-width: 1280px) {
		.tbd-v1-pnl {
			margin-top: var(--tbd-v1-ovlp-clc);
		}
	}

}