/*
 * TPF — Specialist Network Grid
 * Full-bleed 6-column grid of square images. Each tile has two stacked
 * background layers to allow JS-driven cross-fades during swaps.
 */

.tpf-sng {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	background-color: #293c7b;
	color: #ffffff;
	overflow: hidden;
	font-family: proxima-nova, "Proxima Nova", -apple-system, BlinkMacSystemFont, sans-serif;
}

.tpf-sng__header {
	padding: 4rem 0 3rem;
}

.tpf-sng__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.tpf-sng__heading {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	color: #00b3f1;
	margin: 0 0 24px;
	padding: 0;
}

.tpf-sng__lead,
.tpf-sng__lead p {
	font-size: 24px;
	line-height: 34px;
	font-weight: 500;
	color: #ffffff;
	margin: 0;
	padding: 0;
}

.tpf-sng__lead {
	max-width: 921px;
}

.tpf-sng__lead p + p { margin-top: 1rem; }

.tpf-sng__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	background-color: #000000;
}

.tpf-sng__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #1a1a1a;
}

.tpf-sng__tile-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--tpf-sng-fade, 700ms) ease-in-out;
}

.tpf-sng__tile-layer.is-shown {
	opacity: 1;
}

.tpf-sng__pool,
.tpf-sng__alts {
	display: none;
}

@media (max-width: 1024px) {
	.tpf-sng__header { padding: 3rem 0 2rem; }
	.tpf-sng__heading { font-size: 32px; }
	.tpf-sng__lead,
	.tpf-sng__lead p { font-size: 20px; line-height: 30px; }
	.tpf-sng__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.tpf-sng__header { padding: 2.5rem 0 1.75rem; }
	.tpf-sng__heading { font-size: 28px; margin-bottom: 16px; }
	.tpf-sng__lead,
	.tpf-sng__lead p { font-size: 18px; line-height: 26px; }
}

@media (max-width: 600px) {
	.tpf-sng__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tpf-sng__tile-layer {
		transition: none;
	}
}