/* ==========================================================================
   TeamCNF Total Media Solutions (the four chapter blocks on that page)
   01 Plan: two staggered feature panels. 02 Produce: a bento of glass cards
   over a full-bleed studio photo. 03 Publish: the media photo with the news
   portal card, and the placement cards. 04 Promote: expanding photo panels
   (one open at a time) and the two-point promise strip.
   Every value comes from the theme tokens (theme.json).
   ========================================================================== */

/* ---- 01 Plan: staggered features ----------------------------------------- */
.tcnf-features {
	display: grid;
	gap: var(--wp--preset--spacing--90);
}

.tcnf-feature {
	position: relative;
	display: grid;
	scroll-margin-top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--60));
}

.tcnf-feature__media {
	aspect-ratio: 4 / 3;
}

.tcnf-feature__panel {
	position: relative;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	margin: calc(var(--wp--preset--spacing--80) * -1) var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tcnf-feature__head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

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

@media (min-width: 900px) {
	.tcnf-feature {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: center;
	}

	.tcnf-feature__media {
		grid-column: 1 / span 8;
		grid-row: 1;
		aspect-ratio: 16 / 10;
	}

	.tcnf-feature__panel {
		grid-column: 7 / -1;
		grid-row: 1;
		margin: 0;
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}

	.tcnf-feature--flip .tcnf-feature__media {
		grid-column: 5 / -1;
	}

	.tcnf-feature--flip .tcnf-feature__panel {
		grid-column: 1 / span 6;
	}
}

@media (min-width: 1100px) {
	.tcnf-feature--flip {
		margin-right: var(--wp--preset--spacing--90);
	}

	.tcnf-feature:not(.tcnf-feature--flip) {
		margin-left: var(--wp--preset--spacing--90);
	}
}

/* ---- 02 Produce: full-bleed studio section ------------------------------- */
.tcnf-produce {
	isolation: isolate;
	overflow: hidden;
}

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

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

.tcnf-produce .tcnf-chapter__intro {
	color: var(--wp--custom--text--secondary);
}

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

.tcnf-produce__card {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	justify-items: start;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--xl);
	scroll-margin-top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--60));
}

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

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

.tcnf-produce__card--lead {
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--70);
}

.tcnf-produce__card--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	align-content: end;
	min-height: var(--wp--custom--size--bento-row-lg);
	border: 1px solid var(--wp--custom--glass--border);
	box-shadow: var(--wp--preset--shadow--float);
}

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

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

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

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

	.tcnf-produce__card--lead {
		grid-column: 1 / span 3;
		grid-row: 1 / span 2;
		align-content: end;
	}

	.tcnf-produce__card--photo {
		grid-column: 4 / -1;
	}

	.tcnf-produce__card--web {
		grid-column: 4 / -1;
	}
}

/* ---- 03 Publish: media placements and own media ------------------------- */
.tcnf-publish {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-publish__visual {
	position: relative;
}

.tcnf-publish__frame {
	aspect-ratio: 16 / 10;
}

.tcnf-publish__reach {
	position: relative;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	margin: calc(var(--wp--preset--spacing--80) * -1) var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--50);
}

.tcnf-publish__brand {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

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

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

.tcnf-publish__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-publish__stats dt {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
}

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

.tcnf-publish__card {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--xl);
	scroll-margin-top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--60));
}

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

/* Media placements lead the chapter: accent edge, and a channel list that
	turns into five tiles once the card is wide enough */
.tcnf-publish__card--lead {
	container-type: inline-size;
	border-color: var(--wp--custom--accent-line);
	box-shadow: var(--wp--preset--shadow--glass), var(--wp--preset--shadow--glow);
}

.tcnf-placements {
	display: grid;
	width: 100%;
}

.tcnf-placements__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--glass--border);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--leading--snug);
}

.tcnf-placements__item {
	--tcnf-glyph-size: var(--wp--custom--size--icon--md);
}

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

@container (min-width: 36rem) {
	.tcnf-placements {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}

	.tcnf-placements__item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
		border: 1px solid var(--wp--custom--glass--border);
		border-radius: var(--wp--custom--radius--md);
	}
}

@media (min-width: 640px) {
	.tcnf-publish__reach {
		position: absolute;
		left: var(--wp--preset--spacing--50);
		bottom: var(--wp--preset--spacing--50);
		margin: 0;
		max-width: var(--wp--custom--size--tile--width);
	}

	.tcnf-publish__card {
		padding: var(--wp--preset--spacing--60);
	}
}

@media (min-width: 1100px) {
	.tcnf-publish {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: center;
		gap: 0;
	}

	.tcnf-publish__frame {
		aspect-ratio: 4 / 3;
	}

	.tcnf-publish__cards {
		position: relative;
		z-index: var(--wp--custom--z--raised);
		grid-template-columns: minmax(0, 1fr);
		margin-left: calc(var(--wp--preset--spacing--90) * -1);
	}

	.tcnf-publish__card:last-child {
		margin-left: var(--wp--preset--spacing--80);
	}
}

/* ---- 04 Promote: expanding panels ---------------------------------------- */
.tcnf-expand {
	display: grid;
	gap: var(--wp--custom--grid);
}

.tcnf-expand__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--wp--custom--size--expand-closed);
	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--soft);
	scroll-margin-top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--60));
	transition:
		flex-grow var(--wp--custom--duration--slow) var(--wp--custom--ease--out),
		min-height var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-expand__panel.is-open,
html:not(.tcnf-js) .tcnf-expand__panel {
	min-height: var(--wp--custom--size--stack-card-h);
}

.tcnf-expand__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-expand__panel::before,
.tcnf-expand__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-expand__panel::before {
	background: var(--wp--custom--overlay--fade-bottom);
}

/* Closed panels get an extra scrim so the label stays readable */
.tcnf-expand__panel::after {
	background: var(--wp--custom--scrim--base);
}

.tcnf-expand__panel.is-open::after,
html:not(.tcnf-js) .tcnf-expand__panel::after {
	opacity: 0;
}

.tcnf-expand__panel:hover .tcnf-expand__img {
	scale: 1.04;
}

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

.tcnf-expand__btn {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	min-height: var(--wp--custom--size--expand-closed);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	color: var(--wp--custom--text--primary);
	font: inherit;
	font-weight: 600;
	text-align: left;
}

.tcnf-expand__btn:focus-visible {
	outline-offset: calc(var(--wp--custom--border-thick) * -2);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-expand__num {
	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-expand__label {
	flex: 1;
}

.tcnf-expand__icon {
	--tcnf-glyph-size: var(--wp--custom--size--icon--md);
	transition: rotate var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-expand__panel.is-open .tcnf-expand__icon {
	rotate: 45deg;
}

.tcnf-expand__body {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	max-width: var(--wp--custom--size--measure-copy);
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

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

/* Closed bodies only hide once JS runs, so all copy shows without it */
.tcnf-js .tcnf-expand__body[hidden] {
	display: none;
}

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

	.tcnf-expand__body {
		padding: 0 var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	}
}

/* Side-by-side accordion on wider screens (JS only, so all copy shows without it) */
@media (min-width: 900px) {
	.tcnf-js .tcnf-expand {
		display: flex;
		height: var(--wp--custom--size--expand-h);
	}

	.tcnf-js .tcnf-expand__panel {
		flex: 1 1 0;
		min-width: 0;
		min-height: 0;
	}

	.tcnf-js .tcnf-expand__panel.is-open {
		flex-grow: 3.2;
	}

	/* The whole closed panel is the button */
	.tcnf-js .tcnf-expand__panel:not(.is-open) .tcnf-expand__title {
		display: flex;
		flex: 1;
	}

	.tcnf-js .tcnf-expand__panel:not(.is-open) .tcnf-expand__btn {
		flex-wrap: wrap;
		align-items: flex-end;
		align-content: flex-end;
	}

	.tcnf-js .tcnf-expand__body {
		min-width: var(--wp--custom--size--rail-card);
	}
}

/* ---- Promise strip ------------------------------------------------------- */
.tcnf-promise {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--custom--grid);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--xl);
}

.tcnf-promise__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

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

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

@media (min-width: 900px) {
	.tcnf-promise {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--70);
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	}

	.tcnf-promise__item + .tcnf-promise__item {
		padding-left: var(--wp--preset--spacing--70);
		border-left: 1px solid var(--wp--custom--glass--border-subtle);
	}
}