/* ==========================================================================
   TeamCNF studio (the "CNF Studio" block)
   A photo stage beside the tabs: picking a tab swaps the photo and shows its
   panel. Phones get a sideways-scrolling pill strip above the panel; wide
   screens get a vertical list with an arrow on the chosen tab. Below it, the
   talent card with the three language circles.
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */

/* ---- Layout -------------------------------------------------------------- */
.tcnf-studio__layout {
	display: grid;
	/* minmax(0, …) stops the scrolling tab strip from widening the column */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
}

/* ---- Photo stage ---------------------------------------------------------- */
.tcnf-studio__stage {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--size--visual-max);
	margin-inline: auto;
	padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) 0;
}

.tcnf-studio .tcnf-studio__frames {
	aspect-ratio: 1 / 1.08;
	border-radius: var(--wp--custom--radius--xl);
}

/* One photo per tab, stacked; the chosen one fades in */
.tcnf-studio .tcnf-studio__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition:
		opacity var(--wp--custom--duration--slow) var(--wp--custom--ease--out),
		transform var(--wp--custom--duration--reveal) var(--wp--custom--ease--out);
}

.tcnf-studio .tcnf-studio__frame.is-active {
	opacity: 1;
	transform: none;
}

.tcnf-studio__edit {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: var(--wp--custom--z--overlap);
	width: 48%;
	aspect-ratio: 2 / 1;
}

/* Scoped under .tcnf-studio so the pill shape wins over .tcnf-glass */
.tcnf-studio .tcnf-studio__badge {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--40);
	z-index: var(--wp--custom--z--overlap);
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.tcnf-studio__badge img {
	display: block;
	width: auto;
	height: var(--wp--custom--size--badge-logo-h);
}

.tcnf-studio__shape {
	top: -6%;
	right: 2%;
	z-index: var(--wp--custom--z--overlap);
	width: 26%;
	height: auto;
}

/* ---- Tabs ------------------------------------------------------------------ */
.tcnf-studio__controls {
	min-width: 0;
}

.tcnf-tablist {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin: 0 calc(var(--wp--style--root--padding-right, var(--wp--custom--gutter)) * -1) 0 calc(var(--wp--style--root--padding-left, var(--wp--custom--gutter)) * -1);
	padding: var(--wp--preset--spacing--10) var(--wp--style--root--padding-right, var(--wp--custom--gutter)) var(--wp--preset--spacing--30) var(--wp--style--root--padding-left, var(--wp--custom--gutter));
	overflow-x: auto;
	scrollbar-width: none;
}

.tcnf-tablist::-webkit-scrollbar {
	display: none;
}

.tcnf-tab {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex: none;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--glass--border-subtle);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--custom--text--tertiary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--leading--snug);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
	--tcnf-glyph-size: var(--wp--custom--size--icon--md);
}

.tcnf-tab .tcnf-glyph {
	opacity: var(--wp--custom--opacity--muted);
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-tab .tcnf-tab__arrow {
	display: none;
	--tcnf-glyph-size: var(--wp--custom--size--icon--sm);
}

.tcnf-tab:hover {
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--primary);
}

.tcnf-tab[aria-selected="true"] {
	border-color: var(--wp--custom--glass--border);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill);
	box-shadow: var(--wp--custom--inset-sheen);
	color: var(--wp--custom--text--primary);
}

.tcnf-tab[aria-selected="true"] .tcnf-glyph {
	opacity: 1;
}

.tcnf-tab:focus-visible {
	box-shadow: var(--wp--custom--focus-ring);
}

/* ---- Tab panels -------------------------------------------------------------- */
.tcnf-tabpanel {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
}

.tcnf-tabpanel[hidden] {
	display: none;
}

.tcnf-tabpanel:not([hidden]) {
	animation: tcnf-accordion-in var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-tabpanel > * {
	margin: 0;
}

.tcnf-tabpanel h3 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.tcnf-tabpanel .tcnf-link-arrow {
	justify-self: start;
}

/* ---- Talent card ------------------------------------------------------------- */
/* Scoped under .tcnf-studio so the larger radius wins over .tcnf-glass */
.tcnf-studio .tcnf-talent {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-studio .tcnf-talent__media {
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: none;
}

.tcnf-talent__copy {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: 0 var(--wp--preset--spacing--40);
}

.tcnf-talent__copy > * {
	margin: 0;
}

.tcnf-talent__copy h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

.tcnf-talent__langs {
	display: flex;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	list-style: none;
}

.tcnf-studio .tcnf-talent__lang {
	display: grid;
	place-items: center;
	flex: none;
	width: calc(var(--wp--custom--size--icon-badge-lg) + var(--wp--preset--spacing--50));
	height: calc(var(--wp--custom--size--icon-badge-lg) + var(--wp--preset--spacing--50));
	margin: 0;
	border-radius: 50%;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.tcnf-studio .tcnf-talent__lang + .tcnf-talent__lang {
	margin-left: calc(var(--wp--preset--spacing--40) * -1);
}

.tcnf-studio .tcnf-talent__lang:nth-child(2) {
	border-color: var(--wp--custom--accent-line);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-accent);
}

@media (min-width: 900px) {
	.tcnf-studio__stage {
		padding: 0 var(--wp--preset--spacing--70) var(--wp--preset--spacing--70) 0;
	}

	.tcnf-studio .tcnf-talent {
		grid-template-columns: 0.9fr 1.5fr auto;
		align-items: center;
		gap: var(--wp--preset--spacing--60);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	}

	.tcnf-talent__copy,
	.tcnf-talent__langs {
		padding: 0;
	}
}

@media (min-width: 1100px) {
	.tcnf-studio__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--wp--preset--spacing--80);
	}

	.tcnf-studio__stage {
		max-width: none;
	}

	/* Wide screens: a vertical list, the chosen tab gets an arrow */
	.tcnf-tablist {
		display: grid;
		gap: var(--wp--preset--spacing--10);
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.tcnf-tab {
		width: 100%;
		border-color: transparent;
		border-radius: var(--wp--custom--radius--md);
		font-size: var(--wp--preset--font-size--medium);
	}

	.tcnf-tab .tcnf-tab__arrow {
		display: block;
		margin-left: auto;
		opacity: 0;
		transform: translateX(calc(var(--wp--preset--spacing--20) * -1));
		transition:
			opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out),
			transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
	}

	.tcnf-tab[aria-selected="true"] .tcnf-tab__arrow {
		opacity: 1;
		transform: none;
	}
}

/* Editor placeholder when the block has no content yet */
.tcnf-studio-empty {
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--custom--text--meta);
	font-size: var(--wp--preset--font-size--small);
}