/**
 * Two Views block (template-parts/blocks/block-two-views.php).
 *
 * Every value reads a --tv-* token from Design Tokens → Two Views
 * (inc/two-views-tokens.php) and falls back to a literal, so a blank option
 * never breaks the block. The private --_* vars below are the resolved
 * values; rules only read those.
 *
 * Width / float come from Block Layout (libs/block-layout.css). The words
 * sit under the disc, side by side, while the block is wide enough; when it
 * is not, they become a one-column list under the graphic (icon, name and
 * return on one line) and the switch turns upright beside that list, top-aligned with it — a container query, so it follows the
 * block's own width (1/3 on a desktop page behaves like a phone).
 *
 * Without JS the starting side shows, still. twoViews.js drives the spin by
 * setting inline transforms and .is-org states; it adds .is-enhanced.
 */

.tv {
	/* Colors — palette selects */
	--_aud:   var(--tv-aud, #c8382d);
	--_org:   var(--tv-org, #24606f);
	--_icon:  var(--tv-icon, #ffffff);
	--_text:  var(--tv-text, var(--colJ, #262626));
	--_muted: var(--tv-muted, var(--colI, #636363));
	--_line:  var(--tv-line, var(--colG, #e5e5e5));

	--_pull: 16cqi; /* lets the disc rise under the switch (overlapping it) without leaving the block */

	container-type: inline-size;
	display: grid;
	gap: clamp(8px, 2cqi, 16px);
	color: var(--_text);
	margin-block: var(--spacing-scale-large, 2rem);
	background: var(--tv-bg, transparent);
	padding: var(--tv-pad, 0);
	border-radius: var(--tv-radius, 0);
}

.tv *,
.tv *::before,
.tv *::after { box-sizing: border-box; }

/* ── Switch: one colored thumb slides under the active side ─────────────── */

.tv__top {
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 1; /* may overlap the disc, which is pulled up under it */
}

/* Title — above the switch */
.tv .tv__title {
	margin: 0;
	position: relative;
	z-index: 1; /* the disc rises under it */
	color: var(--tv-title-color, var(--_text));
	font-family: var(--tv-title-family, inherit);
	font-weight: var(--tv-title-weight, 700);
	font-style: var(--tv-title-style, normal);
	font-size: var(--tv-title-size, 1.5rem);
	line-height: var(--tv-title-line-height, 1.2);
	letter-spacing: var(--tv-title-letter-spacing, normal);
	text-transform: var(--tv-title-text-transform, none);
}

.tv__switch {
	position: relative;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: var(--tv-switch-stroke, 0px) solid var(--_line);
	border-radius: 999px;
	background: var(--tv-switch-bg, #ffffff);
}

.tv__thumb {
	position: absolute;
	/* Position and size measured from the active button by twoViews.js, so it works across or upright */
	top: 0; left: 0;
	width: var(--tv-thumb-w, 50%);
	height: var(--tv-thumb-h, calc(100% - 6px));
	transform: translate(var(--tv-thumb-x, 3px), var(--tv-thumb-y, 3px));
	border-radius: 999px;
	background: var(--_aud);
	transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .45s cubic-bezier(.65, 0, .35, 1), height .45s cubic-bezier(.65, 0, .35, 1), background-color .45s ease;
}
.tv.is-org .tv__thumb { background: var(--_org); }
/* Before JS measures the labels, sit the thumb on the starting side */
.tv:not(.is-enhanced) .tv__thumb { display: none; }
.tv.tv:not(.is-enhanced) .tv__side[aria-pressed="true"] { background: var(--_aud); color: var(--_icon); }
.tv.tv--org:not(.is-enhanced) .tv__side[aria-pressed="true"] { background: var(--_org); }

/* .tv-scoped so the theme's own button, hover and focus backgrounds never paint over the thumb */
.tv .tv__side,
.tv .tv__side:hover,
.tv .tv__side:focus,
.tv .tv__side:active {
	position: relative;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--_muted);
	cursor: pointer;
	font-family: var(--tv-switch-family, inherit);
	font-weight: var(--tv-switch-weight, 600);
	font-style: var(--tv-switch-style, normal);
	font-size: var(--tv-switch-size, 0.75rem);
	line-height: var(--tv-switch-line-height, 1);
	letter-spacing: var(--tv-switch-letter-spacing, 0.1em);
	text-transform: var(--tv-switch-text-transform, uppercase);
	transition: color .45s ease;
}
.tv .tv__side[aria-pressed="true"] { color: var(--_icon); }

/* Nudge: a small shake every few seconds, a hint that the switch is live.
   twoViews.js adds .is-nudging once the block is on screen and removes it for good on the first touch. */
.tv.is-nudging .tv__switch { animation: tv-nudge 4.5s ease-in-out infinite; }
@keyframes tv-nudge {
	0%, 14%, 100% { transform: translateX(0); }
	2%  { transform: translateX(-4px) rotate(-1deg); }
	4%  { transform: translateX(4px) rotate(1deg); }
	6%  { transform: translateX(-3px) rotate(-.6deg); }
	8%  { transform: translateX(3px) rotate(.6deg); }
	10% { transform: translateX(-1.5px); }
	12% { transform: translateX(1.5px); }
}
@media (prefers-reduced-motion: reduce) {
	.tv.is-nudging .tv__switch { animation: none; }
}
.tv .tv__side:focus-visible { outline: 2px solid var(--_text); outline-offset: 2px; }

/* ── The graphic ───────────────────────────────────────────────────────── */

.tv__stage {
	position: relative;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.tv.is-enhanced .tv__stage { cursor: grab; }
.tv.is-dragging .tv__stage { cursor: grabbing; }

/* The art's viewBox leaves room above the disc; --_pull lifts the art into the
   gap under the switch, so the title and switch sit close to it. Everything
   placed over the art (header, words) subtracts the same amount. */
.tv__art { display: block; width: 100%; height: auto; overflow: visible; margin-top: calc(-1 * var(--_pull)); }

/* Each half fades from its color to clear, so it melts into whatever the page is */
.tv__stop-aud { stop-color: var(--_aud); }
.tv__stop-org { stop-color: var(--_org); }
.tv__stop-clear { stop-opacity: 0; }

/* The gap between the two halves shows the block's background (white when it has none) */
.tv__seam { fill: var(--tv-bg, #ffffff); }

/* The disc (and the clip that keeps the shading on it) spins about the seam's pivot */
.tv__disc,
.tv__clip {
	transform-box: view-box;
	transform-origin: 420px 431px;
}
.tv--org .tv__disc,
.tv--org .tv__clip { transform: rotate(180deg); }

/* Header — sits on the top half of the disc, centered over the seam's pivot.
   Its Type Role sets the size, capped at 6% of the block's width so it always
   fits inside the dome (the default, 4.5%, is 30px on a 672px block). */
.tv__header {
	position: absolute;
	left: 50%;
	/* 41.5% of the art's height (the art is 0.98× the block's width), so it holds
	   its place on the dome however tall the stage gets below it */
	top: calc(41.5 * 0.98cqi - var(--_pull));
	transform: translate(-50%, -100%);
	display: grid;
	justify-items: center;
	width: 70%;
	text-align: center;
	pointer-events: none;
	font-family: var(--tv-header-family, inherit);
	font-weight: var(--tv-header-weight, 600);
	font-style: var(--tv-header-style, normal);
	font-size: min(var(--tv-header-size, 4.5cqi), 6cqi);
	line-height: var(--tv-header-line-height, 1.1);
	letter-spacing: var(--tv-header-letter-spacing, 0.03em);
	text-transform: var(--tv-header-text-transform, uppercase);
	color: var(--_text);
	text-wrap: balance;
}
.tv__header > span { grid-area: 1 / 1; }
.tv--aud .tv__header-org,
.tv--org .tv__header-aud { opacity: 0; }

/* Each icon is a coin above its name: the same icon on both faces, one per side's color.
   Full size is a fifth of the block's width, as the dots on the disc were; Design Tokens → Two Views → Icon size scales it. */
.tv__coin {
	flex: none;
	display: block;
	width: calc(20cqi * var(--tv-icon-size, 100) / 100);
	height: auto;
	overflow: visible;
	transform-origin: center;
}
/* Direct child only: an icon can be a circle too (Simplicity), and must keep the icon color */
.tv__face-aud > circle { fill: var(--_aud); }
.tv__face-org > circle { fill: var(--_org); }
.tv__icon { fill: var(--_icon); }
/* Uploaded icons: only the file's shape counts, never its colors */
.tv__icon-mask { mask-type: alpha; }
.tv__coin:not(.is-org) .tv__face-org,
.tv__coin.is-org .tv__face-aud { visibility: hidden; }
.tv--org:not(.is-enhanced) .tv__face-aud { visibility: hidden; }
.tv--org:not(.is-enhanced) .tv__face-org { visibility: visible; }

/* ── Words: a name in its side's color, the return in the text color ────── */

/* Divs with list roles (not ul/li), so the page's list styles never reach them */
.tv .tv__words {
	margin: 0;
	padding: 0;
}

.tv .tv__quality {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	justify-items: center;
	align-content: start;
	text-align: center;
	min-width: 0;
}

/* The coin sits directly above its name, centered */
.tv__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--tv-icon-gap, 0);
	max-width: 100%;
}

/* Subhead — the quality's name */
.tv__name {
	font-family: var(--tv-subhead-family, inherit);
	font-weight: var(--tv-subhead-weight, 700);
	font-style: var(--tv-subhead-style, normal);
	font-size: var(--tv-subhead-size, 0.78rem);
	line-height: var(--tv-subhead-line-height, 1.3);
	letter-spacing: var(--tv-subhead-letter-spacing, 0.14em);
	text-transform: var(--tv-subhead-text-transform, uppercase);
	color: var(--_aud);
	text-align: center;
	transition: color .35s ease;
}
.tv__quality.is-org .tv__name,
.tv--org:not(.is-enhanced) .tv__name { color: var(--_org); }

/* Body copy — what that side gets from the quality */
.tv__ret {
	display: grid;
	font-family: var(--tv-body-family, inherit);
	font-weight: var(--tv-body-weight, 400);
	font-style: var(--tv-body-style, normal);
	font-size: var(--tv-body-size, 1rem);
	line-height: var(--tv-body-line-height, 1.25);
	letter-spacing: var(--tv-body-letter-spacing, normal);
	text-transform: var(--tv-body-text-transform, none);
}
/* Both returns share one cell, so the box keeps the taller one's height while they cross-fade */
.tv__ret > span { grid-area: 1 / 1; }
.tv--aud .tv__ret-org,
.tv--org .tv__ret-aud { opacity: 0; }

/* Wide block: each quality sits under the disc at its own spot (x from the template) */
@container (min-width: 520px) {
	.tv .tv__words {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}
	.tv .tv__quality {
		position: absolute;
		top: calc(78 * 0.98cqi - var(--_pull)); /* 78% of the art's height */
		left: var(--tv-x);
		width: 21.6%;
		transform: translateX(-50%);
	}
}

/* Narrow block: one list under the graphic, each row icon · name · return */
@container (max-width: 519.98px) {
	.tv .tv__words {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		gap: 14px;
	}
	/* Subgrid, so names and returns line up in columns down the list */
	.tv .tv__quality {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		align-items: center;
		justify-items: start;
		column-gap: 12px;
		text-align: left;
	}
	.tv__head { display: contents; }
	/* No switch above the disc here, so stop just short of the title */
	.tv__stage { --_pull: 9cqi; }
	.tv__name { text-align: left; }

	/* The switch stands upright, left of the list, sharing its top line. It shares
	   the stage's grid row and is pushed down to where the list starts; the list
	   makes room for it. twoViews.js measures both (--tv-rocker-top, --tv-rocker-w). */
	/* Same cell, not a second column */
	.tv__stage,
	.tv__top { grid-column: 1; }
	.tv__stage { grid-row: 2; }
	.tv--titled .tv__stage { grid-row: 3; }
	.tv__top {
		grid-row: 2;
		align-self: start;
		justify-self: start;
		position: relative;
		z-index: 1;
		margin-top: var(--tv-rocker-top, 76cqi);
	}
	.tv--titled .tv__top { grid-row: 3; }
	.tv__switch {
		flex-direction: column;
		border-radius: 1.25rem;
	}
	.tv .tv__words { padding-left: calc(var(--tv-rocker-w, 7.5rem) + 14px); }
	/* The words move out from under the disc, so the graphic can end where it fades */
	.tv__art { margin-bottom: -22%; }
}

/* Very narrow block: not enough room for the return on the same line beside
   the upright switch, so it drops under the name (icon and name stay side by side) */
@container (max-width: 399.98px) {
	.tv .tv__words { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
	.tv .tv__quality { row-gap: 0; }
	.tv__coin { grid-row: span 2; }
	.tv__ret { grid-column: 2; }
}

/* Narrowest block: no room beside the list at all, so the switch lies across
   again and sits on top of the list, left-aligned */
@container (max-width: 339.98px) {
	.tv__switch { flex-direction: row; border-radius: 999px; }
	.tv .tv__words {
		padding-left: 0;
		padding-top: calc(var(--tv-rocker-h, 2.5rem) + 14px);
	}
}

/* Mobile, list layout: the return runs as one sentence and wraps only when it
   has to, ignoring the line breaks set in the field */
@media (max-width: 767px) {
	@container (max-width: 519.98px) {
		.tv__ret br { display: none; }
	}
}