/**
 * Work-page domain console — floats halfway into hero,
 * halfway into paper content. Re-uses hero-interactive__*
 * classes for console tab internals; explore panels sit
 * below on the paper background with their own light-mode styles.
 */

.work-console-float,
.wp-block-template-part > .work-console-float {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	box-sizing: border-box;
}

.work-console-float {
	--work-console-gutter: max(
		var(--wp--style--root--padding-left, 1.5rem),
		calc((100vw - var(--wp--style--global--wide-size, 1200px)) / 2)
	);
	position: relative;
	z-index: 10;
	margin-top: clamp(-200px, -20vh, -140px);
	margin-bottom: 0;
	padding-inline: var(--work-console-gutter);
}

.work-console .hero-interactive__console {
	box-sizing: border-box;
	box-shadow:
		0 32px 80px rgba(0, 0, 0, 0.35),
		0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ─── Explore panels — paper background ─── */

.work-explore {
	position: relative;
	padding-top: var(--wp--preset--spacing--40, 1.5rem);
	padding-bottom: 0;
	min-height: 5.5rem;
}

.work-explore__panel {
	position: absolute;
	top: var(--wp--preset--spacing--40, 1.5rem);
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition:
		opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-explore__panel.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.work-explore__lead {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #0e1a1f);
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	max-width: 48ch;
}

.work-explore__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.55rem;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	padding: 0;
}

a.work-explore__tag {
	text-decoration: none;
	color: inherit;
}

.work-explore__tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.6rem;
	color: var(--studio-teal, #2c5f6e);
	background: rgba(44, 95, 110, 0.06);
	border: 1px solid rgba(44, 95, 110, 0.2);
	border-radius: 2px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

a.work-explore__tag:hover {
	background: rgba(44, 95, 110, 0.12);
	border-color: rgba(44, 95, 110, 0.4);
}

.work-explore__panel[data-domain="none"] .work-explore__tag {
	cursor: default;
	pointer-events: none;
}

/* ── Cluster narrative panel (injected server-side per domain) ── */

.work-explore__cluster {
	margin: var(--wp--preset--spacing--30, 0.75rem) 0 var(--wp--preset--spacing--35, 1rem);
	padding: var(--wp--preset--spacing--35, 1rem) var(--wp--preset--spacing--40, 1.25rem);
	background: rgba(44, 95, 110, 0.04);
	border-left: 2px solid rgba(44, 95, 110, 0.18);
}

.work-explore__cluster-narrative {
	font-family: var(--wp--preset--font-family--serif, Fraunces, serif);
	font-size: clamp(0.95rem, 1.4vw, 1.05rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast, #0e1a1f);
	margin: 0 0 var(--wp--preset--spacing--25, 0.5rem) !important;
}

.work-explore__cluster-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.work-explore__cluster-projects {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.5rem;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--studio-teal, #2c5f6e);
}

.work-explore__cluster-projects li {
	display: inline;
}

.work-explore__cluster-projects li + li::before {
	content: '·';
	margin-right: 0.5rem;
	color: var(--wp--preset--color--muted, #6b7f85);
}

.work-explore__cluster-outcome {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted, #6b7f85);
	letter-spacing: 0.02em;
}

.work-explore__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.25rem;
	margin: 0;
	font-size: 0.88rem;
}

.work-explore__cta {
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-weight: 600;
	color: var(--studio-teal, #2c5f6e);
	text-decoration: none;
	border-bottom: 1px solid rgba(44, 95, 110, 0.35);
	padding-bottom: 2px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.work-explore__cta:hover {
	border-color: var(--studio-teal, #2c5f6e);
	color: var(--wp--preset--color--contrast, #0e1a1f);
}

.work-explore__cta:focus-visible {
	outline: 2px solid var(--studio-teal, #2c5f6e);
	outline-offset: 3px;
}

@media (max-width: 960px) {
	.work-console-float {
		margin-top: clamp(-160px, -16vh, -110px);
	}
}

@media (max-width: 640px) {
	.work-console-float {
		margin-top: clamp(-120px, -12vh, -80px);
	}

	.work-explore {
		min-height: 4rem;
	}
}

/* ─── Cluster console — links as doors ─── */

.work-console--cluster .hero-interactive__console {
	gap: 0;
}

a.hero-interactive__door {
	text-decoration: none;
	color: var(--wp--preset--color--base, #faf9f7);
}

a.hero-interactive__door.is-active {
	color: var(--wp--preset--color--contrast, #1a1a1a);
}

.work-console__back {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans, 'Source Sans 3', sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(250, 249, 247, 0.6);
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--30, 1rem);
	transition: color 0.2s ease;
}

.work-console__back:hover {
	color: rgba(250, 249, 247, 0.9);
}

/* Cluster heroes — extra padding for console overlap */
.studio-hero.studio-hero--video[class*="cluster-hero--"] {
	padding-bottom: clamp(120px, 14vh, 200px);
}

@media (prefers-reduced-motion: reduce) {
	.work-explore__panel {
		transition: none;
		transform: none;
	}
}