/* TeamCNF Careers: the disciplines list (photo appears on hover), the three career facts and the
   open roles (a card per role, plus the "send your CV" card). Classes come from the "TeamCNF
   Careers (PHP)" blocks; shared pieces (glass, chips, icon badge) from the design system. */

/* ---- Disciplines list with hover photo ----------------------------------- */
.tcnf-disc {
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-disc__row {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) var(--wp--custom--size--thumb);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	align-items: center;
	padding-block: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-disc__num {
	min-width: 2ch;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-variant-numeric: tabular-nums;
}

.tcnf-disc__name {
	font-size: var(--wp--custom--type--discipline);
	font-weight: 600;
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--tight);
	transition:
		translate var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-disc__desc {
	grid-column: 2 / -1;
	max-width: var(--wp--custom--size--measure-copy);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-disc__img {
	grid-column: 3;
	grid-row: 1;
	width: var(--wp--custom--size--thumb);
	height: var(--wp--custom--size--thumb);
	object-fit: cover;
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
}

@media (min-width: 1100px) {
	.tcnf-disc__row {
		grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr) minmax(0, 0.8fr) var(--wp--custom--size--thumb);
		gap: var(--wp--preset--spacing--70);
		padding-block: var(--wp--preset--spacing--70);
	}

	.tcnf-disc__desc {
		grid-column: 3;
		grid-row: 1;
	}

	.tcnf-disc__img {
		grid-column: 4;
	}
}

/* With a mouse, the photo appears beside the name on hover */
@media (hover: hover) and (min-width: 1100px) {
	.tcnf-disc__row {
		grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr) minmax(0, 0.8fr);
	}

	.tcnf-disc__img {
		grid-area: auto;
		position: absolute;
		top: 50%;
		left: 34%;
		z-index: -1;
		width: var(--wp--custom--size--reveal-w);
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--preset--shadow--float);
		translate: 0 -50%;
		rotate: -3deg;
		scale: 0.9;
		opacity: 0;
		pointer-events: none;
		transition:
			opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out),
			scale var(--wp--custom--duration--slow) var(--wp--custom--ease--spring);
	}

	.tcnf-disc__row:hover .tcnf-disc__img {
		opacity: 1;
		scale: 1;
	}

	.tcnf-disc__row:hover .tcnf-disc__name {
		translate: var(--wp--preset--spacing--40) 0;
	}
}

/* ---- Career facts -------------------------------------------------------- */
.tcnf-career-facts {
	display: grid;
	gap: var(--wp--custom--grid);
}

.tcnf-career-fact {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: end;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-career-fact strong {
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 600;
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--custom--text--primary);
}

.tcnf-career-fact p {
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 900px) {
	.tcnf-career-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-top: var(--wp--preset--spacing--70);
	}

	.tcnf-career-fact {
		min-height: var(--wp--custom--size--story--next-h);
	}

	.tcnf-career-fact:nth-child(2) {
		translate: 0 calc(var(--wp--preset--spacing--70) * -1);
	}
}

/* ---- Open roles ---------------------------------------------------------- */
.tcnf-roles {
	display: grid;
	gap: var(--wp--custom--grid);
	scroll-margin-top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--60));
}

.tcnf-role,
.tcnf-roles__cv {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-roles__cv {
	align-content: center;
}

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

.tcnf-roles__cv .wp-block-button {
	margin-top: var(--wp--preset--spacing--30);
}

/* Job listing card */
.tcnf-role {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	align-content: start;
}

.tcnf-role__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--60);
}

.tcnf-role__status {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--accent-line);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--accent-soft);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-role__meta {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-role__dot {
	position: relative;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
}

.tcnf-role__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--accent);
	animation: tcnf-role-pulse var(--wp--custom--duration--pulse) var(--wp--custom--ease--out) infinite;
}

@keyframes tcnf-role-pulse {
	from {
		opacity: var(--wp--custom--opacity--soft);
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(3);
	}
}

/* Outlined number behind the title */
.tcnf-role__num {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
	z-index: -1;
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--custom--text--outline);
	font-size: var(--wp--custom--type--giant);
	font-weight: 600;
	line-height: var(--wp--custom--leading--flat);
	letter-spacing: var(--wp--custom--tracking--tight);
	user-select: none;
}

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

.tcnf-role__title {
	font-size: var(--wp--preset--font-size--display);
}

.tcnf-role__copy {
	max-width: var(--wp--custom--size--measure-copy);
}

/* Areas an intern can choose from */
.tcnf-role__areas {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
}

.tcnf-role__label {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-role__areas .tcnf-chip {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-role__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	width: 100%;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-role__to {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

.tcnf-role__to a {
	color: var(--wp--custom--text--primary);
}

.tcnf-role__to a:hover {
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.tcnf-role__dot::after {
		animation: none;
		opacity: 0;
	}
}

@media (min-width: 900px) {
	.tcnf-roles {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.tcnf-role,
	.tcnf-roles__cv {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	}
}