.termogas-hero-slider {
	position: relative;
	min-height: 480px;
	overflow: hidden;
}

/* The hero is the one exception to the shared .tg-full 10% breakout
   (base.css) — it stays at 30%, wider than every other full-bleed
   section. Its top edge also lands on the floating header's vertical
   center — header sits 10px from the viewport top, so half its height
   (set as --header-height by JS) gets us there. */
@media ( min-width: 782px ) {
	.termogas-hero-slider {
		max-width: calc( var( --wide-size ) * 1.3 );
		margin-top: calc( 10px + var( --header-height, 70px ) / 2 );
	}
}

.termogas-hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	background-size: cover;
	background-position: var( --slide-pos, center );
	background-image: var( --slide-bg );
}

/* Portrait crop for phones, set per slide (falls back to the desktop image). */
@media ( max-width: 781px ) {
	.termogas-hero-slide {
		background-image: var( --slide-bg-mobile, var( --slide-bg ) );
		background-position: var( --slide-pos-mobile, var( --slide-pos, center ) );
		/* Eyebrow + title at the top, subtitle + button pinned to the
		   bottom (above the dots), leaving the middle of the portrait
		   crop to the image. */
		align-items: stretch;
		padding: 1.5rem 0 3.25rem;
	}

	.termogas-hero-slide .termogas-hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Subtitle + button as one block at the bottom (the subtitle is the
	   second <p>; !important because its margins are inline). */
	.termogas-hero-slide .termogas-hero-content > p:nth-of-type(2) {
		margin-top: auto !important;
	}
}

/* Keeps the centered hero content clear of the promo bar overlapping
   the bottom half of the hero (see .tg-promo-bar below) — padding-bottom
   shifts the flex-centered content up instead of letting it run under
   the overlap. */
@media ( min-width: 782px ) {
	.termogas-hero-slide {
		padding-bottom: calc( var( --promobar-height, 160px ) / 2 );
	}
}

.termogas-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.termogas-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.22 );
}

/* On phones the overlay gets darker toward the bottom, where the subtitle +
   button sit, so white text holds up on bright photos too. */
@media ( max-width: 781px ) {
	.termogas-hero-slide::before {
		background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.18 ) 0%, rgba( 0, 0, 0, 0.1 ) 35%, rgba( 0, 0, 0, 0.1 ) 50%, rgba( 0, 0, 0, 0.5 ) 100% );
	}
}

.termogas-hero-slide .termogas-hero-content {
	text-shadow: 0 1px 14px rgba( 0, 0, 0, 0.5 );
	position: relative;
	z-index: 1;
	text-align: center;
	width: 100%;
	max-width: var( --wide-size, 1200px );
	margin-inline: auto;
	padding: var( --space-card, 1rem ) var( --space-stack, 1.5rem );
	box-sizing: border-box;
}

.termogas-hero-dots {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	gap: 0.5rem;
	z-index: 2;
}

.termogas-hero-dot {
	width: 24px;
	height: 4px;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.5 );
	border: 0;
	padding: 0;
	cursor: pointer;
}

.termogas-hero-dot.is-active {
	background: #fff;
}

/* On desktop the promo bar covers the bottom half of the hero — lift the
   controls into the part that stays visible. */
@media ( min-width: 782px ) {
	.termogas-hero-dots {
		bottom: calc( var( --promobar-height, 160px ) / 2 + 1.25rem );
	}
}

/* Bigger tap target than the 4px bar itself. */
.termogas-hero-dot {
	position: relative;
}

.termogas-hero-dot::after {
	content: "";
	position: absolute;
	inset: -10px -4px;
}

/* Prev / next arrows — desktop only; on touch screens swipe + dots do the job. */
.termogas-hero-arrow {
	display: none;
}

@media ( min-width: 782px ) {
	.termogas-hero-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: calc( ( 100% - var( --promobar-height, 160px ) / 2 ) / 2 );
		transform: translateY( -50% );
		z-index: 2;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		color: var( --color-text-primary );
		background: rgba( 255, 255, 255, 0.7 );
		-webkit-backdrop-filter: blur( 14px );
		backdrop-filter: blur( 14px );
		box-shadow: var( --shadow-soft );
		cursor: pointer;
		transition: background 0.2s ease;
	}

	.termogas-hero-arrow:hover,
	.termogas-hero-arrow:focus-visible {
		background: rgba( 255, 255, 255, 0.95 );
	}

	.termogas-hero-arrow--prev {
		left: 1.25rem;
	}

	.termogas-hero-arrow--prev svg {
		transform: scaleX( -1 );
	}

	.termogas-hero-arrow--next {
		right: 1.25rem;
	}
}

.termogas-hero-content .tg-btn {
	text-shadow: none;
}

/* Desktop: text on the left when the subject of the photo sits on the right
   (set per slide with 'align' => 'left'). On mobile the text stays centered. */
@media ( min-width: 782px ) {
	.termogas-hero-slide--left .termogas-hero-content {
		text-align: left;
		/* Clear of the prev arrow (1.25rem offset + 2.75rem wide). */
		padding-inline: 5.5rem;
	}

	.termogas-hero-slide--left .termogas-hero-content > * {
		max-width: 40rem;
	}
}