/* ==========================================================================
   TeamCNF reach (the "Media reach" block)
   A dark section over a city photo: the words and channel chips on the left, a
   tilted phone photo with the CNF News chip on the right, then the audience
   numbers. It sits on a photo, so it keeps the dark roles in both themes.
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */
.tcnf-reach {
	isolation: isolate;
	overflow: hidden;
}

/* ---- Background photo ---------------------------------------------------- */
.tcnf-reach__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.tcnf-reach__bg img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* Darkens the photo on the text side and fades it into the sections around it */
.tcnf-reach__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--overlay--fade-left), var(--wp--custom--overlay--section);
}

/* ---- Layout -------------------------------------------------------------- */
.tcnf-reach__grid {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	grid-template-areas:
		"copy"
		"phone"
		"stats";
}

.tcnf-reach__copy {
	grid-area: copy;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-content: start;
	max-width: var(--wp--custom--size--measure-copy);
}

.tcnf-reach__copy > :is(h2, p) {
	margin: 0;
}

/* ---- Phone photo ---------------------------------------------------------- */
.tcnf-reach__phone {
	grid-area: phone;
	position: relative;
	justify-self: center;
	width: min(100%, var(--wp--custom--size--phone-w));
}

.tcnf-reach__phone .tcnf-media-frame {
	aspect-ratio: 4 / 5;
	transform: rotate(4deg);
}

/* Scoped under .tcnf-reach so the smaller radius wins over .tcnf-glass */
.tcnf-reach .tcnf-reach__phone-chip {
	position: absolute;
	left: calc(var(--wp--preset--spacing--50) * -1);
	bottom: var(--wp--preset--spacing--60);
	z-index: var(--wp--custom--z--raised);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.tcnf-reach__orb {
	top: calc(var(--wp--preset--spacing--50) * -1);
	right: calc(var(--wp--preset--spacing--50) * -1);
	z-index: var(--wp--custom--z--overlap);
	width: 34%;
	height: auto;
}

/* ---- Stats ----------------------------------------------------------------- */
.tcnf-reach__stats {
	grid-area: stats;
}

@media (min-width: 900px) {
	.tcnf-reach__grid {
		grid-template-columns: 1.4fr 0.8fr;
		grid-template-areas:
			"copy phone"
			"stats stats";
		align-items: center;
	}

	.tcnf-reach__phone {
		justify-self: end;
	}

	.tcnf-reach__orb {
		top: calc(var(--wp--preset--spacing--70) * -1);
	}
}

/* Editor placeholder when the block has no content yet */
.tcnf-reach-empty {
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--custom--text--meta);
	font-size: var(--wp--preset--font-size--small);
}