/* ==========================================================================
   Housing Belt Slider ("Slider" page, between "Professional housing vs.
   self-organisation" and "Calculate your savings" in the reference template)
   Endless auto-scrolling image belt with a floating caption card that
   cross-fades between slides as each image passes the horizontal center.
   Values below are taken directly from the reference template's computed
   styles (housing-landing-page-v7.html, #usp-belt).
   Content (images + titles + texts) comes from the "Housing Belt Slider"
   ACF field group on this page - editable in wp-admin without touching
   this file. This stylesheet only controls the look, not the content.

   Every rule below is !important: Divi 5 renders each module's own layout
   (position, display, background, sizing, ...) as auto-generated, highly
   specific per-module CSS, so a plain class selector here would otherwise
   lose the cascade to it.
   ========================================================================== */

.hbs-section {
	position: relative !important;
	background: #0f1114 !important;
	overflow: hidden !important;
	height: clamp(460px, 62vh, 600px) !important;
}

/* Undo Divi's default row/column max-width + gutters so the belt runs
   truly edge-to-edge, matching the reference template's fullwidth band. */
.hbs-row {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	/* .hbs-row/.hbs-column are position:relative (Divi's default), which
	   makes one of them - not .hbs-section - the containing block for the
	   absolutely positioned .hbs-belt/.hbs-card below. Both need an
	   explicit, definite height so "height: 100%" on their descendants has
	   something real to resolve against instead of collapsing to 1px. */
	height: 100% !important;
}

.hbs-column {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	height: 100% !important;
}

/* ---- The scrolling belt of image tiles ---- */

.hbs-belt {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 100% !important;
	width: auto !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	will-change: transform;
	/* JS drives the actual motion via transform: translateX(...); this is
	   just the resting position before JS boots (or if JS fails to load). */
}

.hbs-tile {
	position: relative !important;
	flex: 0 0 auto !important;
	height: 100% !important;
	width: clamp(340px, 44vw, 660px) !important;
	margin: 0 !important;
}

.hbs-tile img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Dark gradient overlay on every tile, reproduced as a pseudo-element so no
   extra markup is needed beyond the plain Divi Image module. */
.hbs-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(15, 17, 20, 0.26), rgba(15, 17, 20, 0.44));
	pointer-events: none;
}

/* ---- Floating caption card ---- */

.hbs-card {
	position: absolute !important;
	top: 76% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: min(460px, 86vw) !important;
	max-width: min(460px, 86vw) !important;
	/* No !important here: the belt-slider.js animation loop sets this via
	   inline style.opacity every frame to fade the card in/out, and an
	   !important rule here would permanently block that (inline styles
	   without !important can never beat a stylesheet rule that has it). */
	opacity: 0.005;
	pointer-events: none !important;
	background: rgba(245, 246, 246, 0.55) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	backdrop-filter: blur(18px) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	padding: 40px 40px 44px !important;
	text-align: center !important;
	border-radius: 0 40px !important;
	transition: opacity 90ms linear !important;
	z-index: 5;
}

.hbs-card-title {
	margin: 0 !important;
	font-family: var(--font-display, "Orator Std", ui-monospace, "SFMono-Regular", monospace) !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	font-size: 26px !important;
	color: #000 !important;
	line-height: 1.25 !important;
	text-align: center !important;
}

.hbs-card-divider {
	width: 44px !important;
	max-width: 44px !important;
	height: 2px !important;
	margin: 18px auto 16px !important;
}
.hbs-card-divider .et_pb_divider_internal {
	display: none !important;
}
.hbs-card-divider {
	background: var(--c-gruen, #4aa383) !important;
	border: none !important;
}

.hbs-card-text {
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1.5 !important;
	color: var(--c-text, #1f2225) !important;
	text-align: center !important;
}
.hbs-card-text p {
	margin: 0 !important;
}

/* ---- Respect reduced-motion: freeze the belt, show the first slide ---- */

@media (prefers-reduced-motion: reduce) {
	.hbs-card {
		opacity: 1 !important;
	}
}

/* ---- Responsive ---- */

@media (max-width: 700px) {
	.hbs-section {
		height: clamp(380px, 70vh, 520px) !important;
	}
	.hbs-card {
		padding: 28px 24px 32px !important;
	}
	.hbs-card-title {
		font-size: 21px !important;
	}
	.hbs-card-text {
		font-size: 16px !important;
	}
}