/* TeamCNF Not found message: the 404 screen. Big outlined 404, message and buttons on the
   left, a glass "Where to next" card on the right on wide screens. Classes come from the
   "TeamCNF Not found message (PHP)" block; glass, buttons and icon badges from the design system. */

.tcnf-section.tcnf-lost {
	position: relative;
	display: grid;
	align-items: center;
	min-height: var(--wp--custom--size--page-hero-h);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
	overflow-x: clip;
}

.tcnf-lost__grid {
	/* Grid item with auto side margins: without a width it would shrink to its content. */
	width: 100%;
	display: grid;
	gap: var(--wp--preset--spacing--80);
	align-items: center;
}

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

.tcnf-lost__code {
	margin-bottom: calc(var(--wp--preset--spacing--40) * -1);
	font-size: var(--wp--custom--type--giant);
	font-weight: 600;
	line-height: var(--wp--custom--leading--flat);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--custom--text--outline);
	user-select: none;
}

@supports not (-webkit-text-stroke: 1px) {
	.tcnf-lost__code {
		color: var(--wp--custom--text--outline);
	}
}

/* ---- Where to next ------------------------------------------------------- */
.tcnf-lost__links {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--size--measure-copy);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-lost__title {
	padding-inline: var(--wp--preset--spacing--30);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: var(--wp--custom--leading--snug);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-lost__links ul {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.tcnf-lost__links a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--lg);
	text-decoration: none;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-lost__links a:hover,
.tcnf-lost__links a:focus-visible {
	background-color: var(--wp--custom--glass--fill-subtle);
}

.tcnf-lost__text {
	display: grid;
	gap: var(--wp--custom--nudge);
	min-width: 0;
	line-height: var(--wp--custom--leading--snug);
}

.tcnf-lost__text span {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-lost__arrow {
	--tcnf-glyph-size: var(--wp--custom--size--icon--sm);
	flex: none;
	margin-left: auto;
	transition: translate var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-lost__links a:hover .tcnf-lost__arrow,
.tcnf-lost__links a:focus-visible .tcnf-lost__arrow {
	translate: var(--wp--custom--nudge) calc(var(--wp--custom--nudge) * -1);
}

@media (prefers-reduced-motion: reduce) {
	.tcnf-lost__links a:hover .tcnf-lost__arrow,
	.tcnf-lost__links a:focus-visible .tcnf-lost__arrow {
		translate: none;
	}
}

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

@media (min-width: 1000px) {
	.tcnf-lost__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--90);
	}
}