/* ==========================================================================
   TeamCNF stories (the "Client stories" block)
   Photo cards that fade to black at the bottom, with a dark glass panel for
   the words. On wide screens the lead story spans two rows beside the others.
   The cards sit on photos, so they keep the dark roles in both themes.
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */
.tcnf-stories__grid {
	display: grid;
	gap: var(--wp--custom--grid);
}

.tcnf-story {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--wp--custom--size--story--h);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	overflow: hidden;
	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-story .tcnf-story__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--duration--reveal) var(--wp--custom--ease--out);
}

.tcnf-story:hover .tcnf-story__img {
	transform: scale(1.04);
}

/* Fades the photo to black under the panel */
.tcnf-story::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--fade-bottom);
}

/* Scoped under .tcnf-story so the padding and gaps win over .tcnf-glass */
.tcnf-story .tcnf-story__panel {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
}

.tcnf-story__panel > * {
	margin: 0;
}

.tcnf-story__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

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

.tcnf-story .tcnf-story__stat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-story__stat-num {
	color: var(--wp--custom--text--primary);
	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);
}

.tcnf-story__stat-label {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Closing "Your campaign next" card */
.tcnf-story--next {
	justify-content: center;
	min-height: var(--wp--custom--size--story--next-h);
}

.tcnf-story--next::before {
	background: var(--wp--custom--overlay--fade-bottom), var(--wp--custom--scrim--base);
}

.tcnf-story--next .tcnf-story__panel {
	justify-items: start;
}

@media (min-width: 900px) {
	.tcnf-stories__grid {
		grid-template-columns: 1.3fr 1fr;
	}

	.tcnf-story {
		padding: var(--wp--preset--spacing--40);
	}

	.tcnf-story--lead {
		grid-row: span 2;
		min-height: var(--wp--custom--size--story--lead-h);
	}

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

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

/* Editor placeholder when the block has no content yet */
.tcnf-stories-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);
}