/* ==========================================================================
   [thermal_services] — Services section (1A "Neon Index Grid").
   Depends on calafate-child-style (loaded after it). Header/nav & footer are
   the theme's responsibility; this sheet only covers the section itself.
   Responsive: 4-col desktop (1A) -> 2-col tablet -> single column (2A mobile).
   ========================================================================== */

.thermal-services {
	padding: 72px 0 64px;
}

/* --- header --------------------------------------------------------------- */
.thermal-services__header { max-width: 960px; margin: 0 0 24px; }

.thermal-services__eyebrow {
	color: #ff4d2e;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.thermal-services__heading {
	line-height: 1.02;
	font-weight: 800;
	margin: 0;
}

.thermal-services__sub {
	font-size: 18px;
	line-height: 1.6;
	margin: 22px 0 0;
}

/* --- grid ----------------------------------------------------------------- */
.thermal-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 24px;
}

/* --- service card --------------------------------------------------------- */
.thermal-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.07);
	background-color: #0b0a10;
	text-decoration: none;
	transition: transform .3s ease;
}
/* Hover = lift only. The card deliberately casts no glow: the neon heroes
   already carry the colour, and a coloured drop-shadow read as a halo bleeding
   under the tile. */
.thermal-card:hover {
	transform: translateY(-6px);
}
/* Hero image covers the card beneath the scrim. */
.thermal-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	object-position: center;
	display: block;
}
.thermal-card__scrim {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	/* Darkest at the bottom (behind the title/description) fading to clear at the
	   top, so copy stays readable over the neon hero. */
	background: linear-gradient(
		to top,
		rgba(8,7,12,.95) 0%,
		rgba(8,7,12,.78) 26%,
		rgba(8,7,12,.35) 58%,
		rgba(8,7,12,0) 100%
	);
	transition: opacity .3s ease;
}

/* Staggered entrance: cards reveal in sequence, 0.2s apart. Uses `translate`
   (individual property) so it composes with the hover `transform` lift. */
@keyframes thermal-card-reveal {
	from { opacity: 0; translate: 0 1.5rem; }
	to   { opacity: 1; translate: 0 0; }
}
.thermal-services__grid > a {
	animation: thermal-card-reveal .5s ease-out both;
	animation-delay: calc(var(--stagger, 0) * .2s);
}
.thermal-services__grid > a:nth-child(2) { --stagger: 1; }
.thermal-services__grid > a:nth-child(3) { --stagger: 2; }
.thermal-services__grid > a:nth-child(4) { --stagger: 3; }
.thermal-services__grid > a:nth-child(5) { --stagger: 4; }
.thermal-services__grid > a:nth-child(6) { --stagger: 5; }
.thermal-services__grid > a:nth-child(7) { --stagger: 6; }
.thermal-services__grid > a:nth-child(8) { --stagger: 7; }
.thermal-card__num {
	position: absolute;
	top: 16px;
	left: 18px;
	z-index: 1;
	color: rgba(255,255,255,.7);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
}
.thermal-card__body {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1;
}
.thermal-card__title {
	color: #ffffff;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 8px;
	text-shadow: 0 0 18px rgba(255,77,46,.45);
}
.thermal-card__line {
	color: #c9c4d4;
	font-size: 16px;
	font-weight: 400;
}

/* --- CTA card ------------------------------------------------------------- */
/* Type + colour follow the rest of the redesign (Poppins, #fff / #d3d3d3, brand
   green) rather than the neon-orange of the hero art. */
.thermal-cta {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	padding: 22px;
	border-radius: 14px;
	border: 1px dashed rgba(51,255,204,.45);
	background: radial-gradient(120% 90% at 50% 0%, rgba(51,255,204,.10), rgba(11,10,16,0) 70%);
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	transition: transform .3s ease, border-color .3s ease;
}
/* Same lift as the service cards (no glow). */
.thermal-cta:hover {
	transform: translateY(-6px);
	border-color: rgba(51,255,204,.8);
}
.thermal-cta__title {
	color: #ffffff;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 10px;
}
.thermal-cta__text {
	color: #d3d3d3;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 18px;
}
.thermal-cta__btn {
	align-self: flex-start;
	padding: 12px 20px;
	background: #33ffcc;
	color: #0a0a0f;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.3px;
	border-radius: 999px;
	transition: background-color .2s ease;
}
.thermal-cta:hover .thermal-cta__btn {
	background: #5cffd8;
}

/* --- parent-theme overrides ---------------------------------------------- */
/* The parent theme forces `.entry-content a { overflow: visible }` (higher
   specificity), which lets the square-cornered scrim spill past the card's
   rounded corners. Re-clip, and kill the theme's animated link-underline
   pseudo on these card/CTA anchors. */
.thermal-card { overflow: hidden !important; }
.thermal-card::after,
.thermal-cta::after { content: none !important; }
/* The theme underlines content links on hover — keep the CTA card clean. */
.thermal-cta,
.thermal-cta:hover,
.thermal-cta:focus { text-decoration: none !important; }
/* Same for the service cards: `a:hover` in style.css paints a brand-green
   underline on every link, which struck through the card copy on hover. */
#content .thermal-card,
#content .thermal-card:hover,
#content .thermal-card:focus { text-decoration: none; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.thermal-services__grid { grid-template-columns: repeat(2, 1fr); }
	.thermal-services__heading { font-size: 48px; }
}
@media (max-width: 640px) {
	.thermal-services { padding: 40px 22px; }
	.thermal-services__grid { grid-template-columns: 1fr; }
	.thermal-services__heading { font-size: 36px; }
	.thermal-card { aspect-ratio: auto; height: 196px; border-radius: 18px; }
	.thermal-cta { aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.thermal-card,
	.thermal-card__scrim,
	.thermal-cta { transition: none; }
	.thermal-services__grid > a { animation: none; }
}