/* ==========================================================================
   TeamCNF services (the "Services grid" block)
   A split heading with the "instead of" box, then photo tiles under dark glass
   panels and a red-glow call-to-action tile. Phones scroll the tiles sideways;
   wider screens lay them out as a grid, and exactly ten services make the bento
   mosaic. Tiles 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--*.
   ========================================================================== */

/* ---- "Instead of" box ---------------------------------------------------- */
.tcnf-services__juggle {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
}

.tcnf-services .tcnf-services__juggle-label {
	margin: 0;
	color: var(--wp--custom--text--meta);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
}

.tcnf-services__juggle-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcnf-services__juggle-list li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--glass--border-subtle);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
}

/* The struck-through look comes from the slanted line below, not the font */
.tcnf-services__juggle-list s {
	text-decoration: none;
}

.tcnf-services__juggle-list li::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
	top: 50%;
	height: 1px;
	background: var(--wp--custom--glass--border-strong);
	transform: rotate(-6deg);
}

.tcnf-services .tcnf-services__juggle-result {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	justify-self: start;
	margin: 0;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: var(--wp--custom--leading--snug);
	letter-spacing: var(--wp--custom--tracking--snug);
	--tcnf-glyph-size: var(--wp--custom--size--icon--md);
}

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

/* ---- Tiles --------------------------------------------------------------- */
/* Phones: one row that scrolls sideways and runs to the screen edges */
.tcnf-bento {
	display: flex;
	gap: var(--wp--custom--grid);
	margin: 0 calc(var(--wp--style--root--padding-right, var(--wp--custom--gutter)) * -1) 0 calc(var(--wp--style--root--padding-left, var(--wp--custom--gutter)) * -1);
	padding: var(--wp--preset--spacing--10) var(--wp--style--root--padding-right, var(--wp--custom--gutter)) var(--wp--preset--spacing--40) var(--wp--style--root--padding-left, var(--wp--custom--gutter));
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--style--root--padding-left, var(--wp--custom--gutter));
	scrollbar-width: none;
}

.tcnf-bento::-webkit-scrollbar {
	display: none;
}

.tcnf-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 0 0 min(84%, var(--wp--custom--size--tile--width));
	min-height: var(--wp--custom--size--tile--height);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	overflow: hidden;
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--glass);
	scroll-snap-align: start;
}

.tcnf-tile :is(h3, p, ul) {
	margin: 0;
}

.tcnf-tile .tcnf-tile__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);
}

/* Darkens the bottom of the photo so the panel reads */
.tcnf-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--fade-bottom);
}

.tcnf-tile:hover .tcnf-tile__img {
	transform: scale(1.05);
}

/* Scoped under .tcnf-tile so the smaller radius wins over .tcnf-glass */
.tcnf-tile .tcnf-tile__panel {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--md);
}

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

.tcnf-tile__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);
}

.tcnf-tile .tcnf-tile__title {
	font-size: var(--wp--preset--font-size--large);
}

/* Services read as one quiet line ("Audits · Strategy · …") rather than a
   cluster of pills, which keeps the tiles calm */
.tcnf-tile__list {
	padding: 0;
	list-style: none;
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--leading--base);
}

.tcnf-tile__list li {
	display: inline;
	margin: 0;
}

.tcnf-tile__list li:not(:last-child)::after {
	content: "\00a0\00a0\00b7\00a0 ";
	color: var(--wp--custom--text--tertiary);
}

/* Call-to-action tile: glass with a soft red glow, no photo */
.tcnf-tile--cta {
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
}

.tcnf-tile--cta::before {
	background: radial-gradient(circle at 100% 0%, var(--wp--custom--orb--cnf-red) 0%, var(--wp--custom--orb--fade) 70%);
}

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

.tcnf-tile--cta p {
	color: var(--wp--custom--text--secondary);
}

.tcnf-tile--cta .wp-block-button {
	align-self: flex-start;
}

/* ---- Below the grid ------------------------------------------------------ */
.tcnf-services__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

.tcnf-services .tcnf-services__swipe {
	margin: 0;
	color: var(--wp--custom--text--meta);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---- Grid on wider screens ----------------------------------------------- */
/* Any number of services: an even grid. Exactly ten: the bento mosaic, with
   each tile in a fixed place (s1 to s10, then the call-to-action tile). */
@media (min-width: 640px) {
	.tcnf-services .tcnf-services__swipe {
		display: none;
	}

	.tcnf-bento {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(var(--wp--custom--size--bento-row), auto);
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.tcnf-bento--mosaic {
		grid-template-areas:
			"s1 s1"
			"s2 s3"
			"s2 s5"
			"s4 s4"
			"s6 s7"
			"s6 s8"
			"s9 s10"
			"cta cta";
	}

	.tcnf-bento--mosaic.tcnf-bento--no-cta {
		grid-template-areas:
			"s1 s1"
			"s2 s3"
			"s2 s5"
			"s4 s4"
			"s6 s7"
			"s6 s8"
			"s9 s10";
	}

	.tcnf-tile {
		min-height: 0;
	}
}

@media (min-width: 1100px) {
	.tcnf-bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(var(--wp--custom--size--bento-row-lg), auto);
	}

	.tcnf-bento--mosaic {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"s1 s1 s2 s3"
			"s4 s4 s2 s5"
			"s6 s7 s8 s9"
			"s6 s10 s10 cta";
	}

	.tcnf-bento--mosaic.tcnf-bento--no-cta {
		grid-template-areas:
			"s1 s1 s2 s3"
			"s4 s4 s2 s5"
			"s6 s7 s8 s9"
			"s6 s10 s10 s10";
	}

	.tcnf-bento--mosaic .tcnf-tile--feature .tcnf-tile__title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

.tcnf-bento--mosaic .tcnf-tile--1   { grid-area: s1; }
.tcnf-bento--mosaic .tcnf-tile--2   { grid-area: s2; }
.tcnf-bento--mosaic .tcnf-tile--3   { grid-area: s3; }
.tcnf-bento--mosaic .tcnf-tile--4   { grid-area: s4; }
.tcnf-bento--mosaic .tcnf-tile--5   { grid-area: s5; }
.tcnf-bento--mosaic .tcnf-tile--6   { grid-area: s6; }
.tcnf-bento--mosaic .tcnf-tile--7   { grid-area: s7; }
.tcnf-bento--mosaic .tcnf-tile--8   { grid-area: s8; }
.tcnf-bento--mosaic .tcnf-tile--9   { grid-area: s9; }
.tcnf-bento--mosaic .tcnf-tile--10  { grid-area: s10; }
.tcnf-bento--mosaic .tcnf-tile--cta { grid-area: cta; }

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