/* Thrillark City Essentials — shared (front-end + editor preview) */

.tce-section {
	--tce-a: #1362ad;
	--tce-b: #49c4c9;
	--tce-ink: #0f1722;
	--tce-label: #1f2a37;
	--tce-value: #3a4654;
	--tce-tile: 96px;
	font-family: inherit;
	margin: clamp( 20px, 4vw, 36px ) 0;
	position: relative;
}

.tce-section *,
.tce-section *::before,
.tce-section *::after {
	box-sizing: border-box;
}

.tce-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.tce-title {
	margin: 0 0 10px;
	font-size: clamp( 1.25rem, 1rem + 1.4vw, 1.6rem );
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--tce-ink);
}

.tce-rule {
	display: block;
	width: 54px;
	height: 3px;
	margin: 0 0 clamp( 18px, 3vw, 28px );
	border-radius: 3px;
	background: linear-gradient( 90deg, var(--tce-a), var(--tce-b) );
}

/* Layout: fixed column counts per breakpoint so cards never stretch
   and the row always fills evenly, matching the reference strip. */
.tce-grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: clamp( 20px, 2.5vw, 28px ) clamp( 12px, 1.5vw, 18px );
	align-items: start;
}

.tce-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-self: center;
	width: 100%;
	max-width: 200px;
	min-width: 0;
}

.tce-tile {
	width: var(--tce-tile);
	height: var(--tce-tile);
	margin-bottom: 14px;
	border-radius: 20px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba( 17, 40, 70, 0.1 ), 0 2px 6px rgba( 17, 40, 70, 0.06 );
}

.tce-icon {
	display: inline-flex;
	width: 42px;
	height: 42px;
}

.tce-icon svg {
	width: 42px;
	height: 42px;
	fill: none;
	stroke: url( #tceGrad );
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--tce-a); /* fallback if the gradient ref is unavailable */
}

.tce-label {
	margin-bottom: 4px;
	font-size: 0.72rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tce-label);
}

.tce-value {
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--tce-value);
	overflow-wrap: anywhere;
}

/* Tablet */
@media ( max-width: 991px ) {
	.tce-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Phone — steady 2-up, lone trailing card spans the row and centres */
@media ( max-width: 680px ) {
	.tce-section {
		--tce-tile: 78px;
	}
	.tce-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 22px 14px;
	}
	.tce-card:last-child:nth-child( odd ) {
		grid-column: 1 / -1;
	}
	.tce-icon,
	.tce-icon svg {
		width: 36px;
		height: 36px;
	}
}

/* Hover lift — pointer devices only, motion-safe */
@media ( hover: hover ) and ( prefers-reduced-motion: no-preference ) {
	.tce-tile {
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}
	.tce-card:hover .tce-tile {
		transform: translateY( -3px );
		box-shadow: 0 16px 32px rgba( 17, 40, 70, 0.14 ), 0 3px 8px rgba( 17, 40, 70, 0.07 );
	}
}