/* TeamCNF About: the Manifesto hero, Stacking cards, Group tree, Sectors list, Numbers panel and
   Timeline blocks. Classes come from "TeamCNF About (PHP)"; glass, media frames, the news badge,
   link arrows and the dark card colours from the design system. */

/* ---- Manifesto hero ------------------------------------------------------ */
.tcnf-section.tcnf-manifesto {
	position: relative;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
	overflow-x: clip;
}

.tcnf-manifesto__head {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
	padding-top: var(--wp--preset--spacing--70);
}

.tcnf-manifesto__mark {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	font-size: var(--wp--custom--type--watermark);
	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-manifesto__mark {
		color: var(--wp--custom--text--outline);
		opacity: var(--wp--custom--opacity--faint);
	}
}

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

.tcnf-manifesto__cols {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-manifesto__cols p:first-child {
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--leading--snug);
}

.tcnf-manifesto__strip {
	margin-top: var(--wp--preset--spacing--80);
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-manifesto__caption {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

@media (min-width: 640px) {
	.tcnf-manifesto__strip {
		aspect-ratio: 16 / 9;
	}

	.tcnf-manifesto__caption {
		left: var(--wp--preset--spacing--60);
		bottom: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 900px) {
	.tcnf-manifesto__head {
		padding-top: var(--wp--preset--spacing--90);
	}

	.tcnf-manifesto__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--90);
	}

	.tcnf-manifesto__strip {
		aspect-ratio: 21 / 9;
	}
}

/* ---- Pillars: cards that stack while scrolling --------------------------- */
.tcnf-pillars {
	display: grid;
	gap: var(--wp--preset--spacing--80);
}

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

.tcnf-pillars__stack {
	display: grid;
	gap: var(--wp--custom--grid);
}

.tcnf-pillar {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: end;
	min-height: var(--wp--custom--size--stack-card-h);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
}

.tcnf-pillar__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcnf-pillar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--fade-bottom);
}

.tcnf-pillar__num {
	position: absolute;
	top: var(--wp--preset--spacing--60);
	left: var(--wp--preset--spacing--50);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	font-variant-numeric: tabular-nums;
}

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

.tcnf-pillar p {
	max-width: var(--wp--custom--size--measure-copy);
	color: var(--wp--custom--text--secondary);
}

.tcnf-pillar__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--glass--border);
}

.tcnf-pillar__stats div {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--wp--custom--nudge);
}

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

.tcnf-pillar__stats dt {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (min-width: 640px) {
	.tcnf-pillar {
		padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
	}

	.tcnf-pillar__num {
		left: var(--wp--preset--spacing--70);
	}
}

@media (min-width: 900px) {
	.tcnf-pillars {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--wp--preset--spacing--90);
		align-items: start;
	}

	.tcnf-pillars__intro {
		position: sticky;
		top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--70));
	}

	.tcnf-pillars__stack {
		gap: var(--wp--preset--spacing--90);
	}

	/* Each card stops a little lower than the one before (--i is its position, set by the block) */
	.tcnf-pillar {
		position: sticky;
		top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--60) + var(--i, 0) * var(--wp--preset--spacing--50));
	}
}

/* ---- Group tree ---------------------------------------------------------- */
.tcnf-group-tree {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-group-tree__root {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	border-radius: var(--wp--custom--radius--xl);
	text-align: center;
}

.tcnf-group-tree__mark {
	width: auto;
	height: var(--wp--custom--size--logo-footer--height);
}

.tcnf-group-tree__mark--on-light,
:root[data-theme="light"] .tcnf-group-tree__mark--on-dark {
	display: none;
}

:root[data-theme="light"] .tcnf-group-tree__mark--on-light {
	display: block;
}

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

.tcnf-group-tree__branches {
	position: relative;
	display: grid;
	gap: var(--wp--custom--grid);
	width: 100%;
}

.tcnf-group-node {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	justify-items: start;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--xl);
}

/* Connector above each branch */
.tcnf-group-node::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: var(--wp--custom--border-thick);
	height: var(--wp--custom--grid);
	translate: -50% 0;
	background: var(--wp--custom--glass--border-strong);
}

.tcnf-group-node:first-child::before {
	height: var(--wp--preset--spacing--70);
}

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

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

/* CNF News badge, top right of its card */
.tcnf-group-node .tcnf-group-node__logo {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	right: var(--wp--preset--spacing--50);
	width: var(--wp--custom--size--icon-badge-lg);
	height: var(--wp--custom--size--icon-badge-lg);
}

.tcnf-group-node__tag {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--custom--nudge) var(--wp--preset--spacing--30);
	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--tiny);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-group-node--current {
	border-color: var(--wp--custom--accent-line);
	box-shadow: var(--wp--preset--shadow--glass), var(--wp--preset--shadow--glow);
}

.tcnf-group-node--current .tcnf-group-node__tag {
	border-color: transparent;
	background: var(--wp--preset--gradient--accent);
	color: var(--wp--custom--text--on-accent);
}

.tcnf-group-node .tcnf-link-arrow {
	margin-top: auto;
}

@media (min-width: 900px) {
	.tcnf-group-tree__root::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		width: var(--wp--custom--border-thick);
		height: calc(var(--wp--preset--spacing--70) / 2);
		translate: -50% 0;
		background: var(--wp--custom--glass--border-strong);
	}

	.tcnf-group-tree__branches {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Horizontal bar linking the three branches */
	.tcnf-group-tree__branches::before {
		content: "";
		position: absolute;
		top: calc(var(--wp--preset--spacing--70) / -2);
		left: calc((100% - 2 * var(--wp--custom--grid)) / 6);
		right: calc((100% - 2 * var(--wp--custom--grid)) / 6);
		height: var(--wp--custom--border-thick);
		translate: 0 -50%;
		background: var(--wp--custom--glass--border-strong);
	}

	.tcnf-group-node::before,
	.tcnf-group-node:first-child::before {
		height: calc(var(--wp--preset--spacing--70) / 2);
	}
}

/* ---- Sectors (photo bleeds left) ----------------------------------------- */
.tcnf-sectors {
	overflow-x: clip;
}

.tcnf-sectors__grid {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-sectors__media {
	aspect-ratio: 4 / 5;
	max-height: var(--wp--custom--size--story--lead-h);
}

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

.tcnf-sectors__copy h2 {
	max-width: var(--wp--custom--size--measure-title);
}

.tcnf-sectors__list {
	width: 100%;
	margin-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-sectors__list li {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--custom--glass--border-subtle);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: var(--wp--custom--leading--tight);
	letter-spacing: var(--wp--custom--tracking--tight);
	transition: padding-left var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-sectors__list li span {
	flex: none;
	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-sectors__list li:hover {
	padding-left: var(--wp--preset--spacing--30);
}

/* Numbers run down each column (01-08, then 09-16), so the list reads in
   order. The block sets --rows to half the item count. */
@media (min-width: 640px) {
	.tcnf-sectors__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--rows, 8), auto);
		grid-auto-flow: column;
		column-gap: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 900px) {
	.tcnf-sectors__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--90);
	}

	.tcnf-sectors__media {
		margin-left: calc(var(--bleed) * -1);
		border-left: 0;
		border-radius: 0 var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0;
	}
}

/* ---- Facts band ---------------------------------------------------------- */
.tcnf-facts__panel {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-facts__panel .tcnf-eyebrow {
	margin-bottom: var(--wp--preset--spacing--70);
}

.tcnf-facts__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.tcnf-facts__row div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--10);
}

.tcnf-facts__row dd {
	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);
	font-variant-numeric: tabular-nums;
}

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

@media (min-width: 640px) {
	.tcnf-facts__panel {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	}
}

@media (min-width: 1100px) {
	.tcnf-facts__row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
	}

	.tcnf-facts__row div {
		padding-inline: var(--wp--preset--spacing--60);
	}

	.tcnf-facts__row div:first-child {
		padding-left: 0;
	}

	.tcnf-facts__row div + div {
		border-left: 1px solid var(--wp--custom--glass--border-subtle);
	}

	.tcnf-facts__row dd {
		font-size: var(--wp--preset--font-size--stat-small);
	}
}

@media (min-width: 1240px) {
	.tcnf-facts__row dd {
		font-size: var(--wp--preset--font-size--stat);
	}
}

/* ---- Journey timeline ---------------------------------------------------- */
.tcnf-journey__list {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--70);
	counter-reset: journey;
}

.tcnf-journey__list::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--custom--size--control) / 2);
	bottom: calc(var(--wp--custom--size--control) / 2);
	left: calc(var(--wp--custom--size--control) / 2);
	width: var(--wp--custom--border-thick);
	translate: -50% 0;
	background: var(--wp--custom--accent-line-vertical);
}

.tcnf-journey__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--wp--custom--size--control) minmax(0, 1fr);
	align-content: start;
	gap: var(--wp--preset--spacing--50);
	counter-increment: journey;
}

.tcnf-journey__step::before {
	content: counter(journey, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--control);
	height: var(--wp--custom--size--control);
	border: 1px solid var(--wp--custom--glass--border-strong);
	border-radius: 50%;
	background: var(--wp--preset--gradient--sheen), linear-gradient(var(--wp--custom--glass--fill), var(--wp--custom--glass--fill)), var(--wp--preset--color--base);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tcnf-journey__body {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
	padding-top: var(--wp--preset--spacing--30);
}

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

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

@media (min-width: 1100px) {
	.tcnf-journey__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--wp--custom--grid);
	}

	.tcnf-journey__list::before {
		top: calc(var(--wp--custom--size--control) / 2);
		bottom: auto;
		left: calc(var(--wp--custom--size--control) / 2);
		right: calc(var(--wp--custom--size--control) / 2);
		width: auto;
		height: var(--wp--custom--border-thick);
		translate: 0 -50%;
		background: var(--wp--preset--gradient--accent-line);
	}

	.tcnf-journey__step {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.tcnf-journey__body {
		padding-top: 0;
		padding-right: var(--wp--preset--spacing--40);
	}
}