/* ==========================================================================
   TeamCNF hero (the "Hero" block)
   Headline, intro and buttons beside a layered photo collage: a tall photo,
   two overlapping photos, glass stat chips and floating shapes. Every value
   comes from the theme tokens (theme.json): --wp--preset--* and --wp--custom--*.
   Breakpoints: 640 / 1100px.
   ========================================================================== */
.tcnf-hero {
	position: relative;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
	padding-left: var(--wp--style--root--padding-left, var(--wp--custom--gutter));
	padding-right: var(--wp--style--root--padding-right, var(--wp--custom--gutter));
	/* Decorative shapes may bleed past the viewport edge, never scroll it */
	overflow-x: clip;
}

.tcnf-hero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--80);
	align-items: center;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.tcnf-hero__copy {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	justify-items: start;
}

.tcnf-hero .tcnf-hero__copy > * {
	margin: 0;
}

.tcnf-hero .tcnf-hero__title {
	max-width: var(--wp--custom--size--measure-title);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--tight);
}

.tcnf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/* ---- Layered visual ------------------------------------------------------ */
.tcnf-hero__visual {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--size--visual-max);
	aspect-ratio: 1 / 1.06;
	margin-inline: auto;
	perspective: var(--wp--custom--size--perspective);
}

.tcnf-hero__scene {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(var(--tcnf-tilt-y, 0deg)) rotateY(var(--tcnf-tilt-x, 0deg));
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-hero .tcnf-hero__main {
	position: absolute;
	top: 0;
	right: 0;
	width: 64%;
	height: 86%;
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-hero .tcnf-hero__main::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--tint-red);
}

.tcnf-hero .tcnf-hero__crew {
	position: absolute;
	top: 9%;
	left: 3%;
	width: 36%;
	aspect-ratio: 4 / 3;
	z-index: var(--wp--custom--z--raised);
	transform: translateZ(var(--wp--preset--spacing--60));
}

.tcnf-hero .tcnf-hero__stage {
	position: absolute;
	left: 0;
	bottom: 2%;
	width: 54%;
	aspect-ratio: 3 / 2;
	z-index: var(--wp--custom--z--raised);
	transform: translateZ(var(--wp--preset--spacing--70));
}

/* ---- Glass stat chips ---------------------------------------------------- */
.tcnf-hero .tcnf-hero__stat {
	position: absolute;
	z-index: var(--wp--custom--z--overlap);
	display: grid;
	gap: var(--wp--custom--nudge);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	transform: translateZ(var(--wp--preset--spacing--80));
}

/* The chips overlap both the photos and the page, so in the light theme they
   get the strongest frost to keep Charcoal text readable over either */
:root[data-theme="light"] .tcnf-hero .tcnf-hero__stat {
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-strong);
}

.tcnf-hero__stat-num {
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--snug);
}

.tcnf-hero__stat-label {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--leading--snug);
}

.tcnf-hero .tcnf-hero__stat--left {
	left: 6%;
	top: 46%;
}

.tcnf-hero .tcnf-hero__stat--right {
	right: var(--wp--preset--spacing--20);
	bottom: 18%;
}

/* ---- Floating shapes ----------------------------------------------------- */
.tcnf-hero .tcnf-hero__crystal {
	top: -8%;
	left: 22%;
	width: 34%;
	height: auto;
	z-index: var(--wp--custom--z--base);
}

.tcnf-hero .tcnf-hero__orb {
	right: 2%;
	bottom: -5%;
	width: 17%;
	height: auto;
	z-index: var(--wp--custom--z--overlap);
	animation-delay: calc(var(--wp--custom--duration--float) / -2);
}

.tcnf-hero .tcnf-hero__ring {
	top: 2%;
	right: -8%;
	width: 30%;
	height: auto;
	rotate: 1 0.2 0 58deg;
	z-index: var(--wp--custom--z--overlap);
	animation-delay: calc(var(--wp--custom--duration--float) / -3);
}

/* Shown in the editor only, before any field is filled in */
.tcnf-hero-empty {
	padding: var(--wp--preset--spacing--60);
	border: 1px dashed var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--custom--text--secondary);
	text-align: center;
}

@media (min-width: 640px) {
	.tcnf-hero .tcnf-hero__stat {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}

	.tcnf-hero__stat-label {
		font-size: var(--wp--preset--font-size--small);
	}
}

@media (min-width: 1100px) {
	.tcnf-hero {
		padding-top: var(--wp--preset--spacing--70);
	}

	.tcnf-hero__grid {
		grid-template-columns: 1.12fr 1fr;
		gap: var(--wp--preset--spacing--70);
	}

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

	.tcnf-hero .tcnf-hero__stat--right {
		right: calc(var(--wp--preset--spacing--50) * -1);
	}
}