/*
 * Hydro Shield — homepage Hero.
 * REWORKED (visual rework command): full-bleed cinematic background —
 * three stacked images crossfade/zoom behind the copy (see hero.js),
 * replacing the previous split text-left/image-right layout. Copy sits in
 * a single left-aligned column (still lined up with the navbar's 1360px
 * container, same trick as before) over a left-to-right + bottom scrim
 * gradient — dark enough for legible text near the copy, but the image
 * stays clearly visible toward the right/top, never a heavy flat overlay.
 * Cyan stays restrained to the eyebrow only.
 */

.hs-hero {
	position: relative;
	/* Off-white base (command: "Section 1 background to white/off-white") —
	   the cinematic image sequence still covers this completely once
	   loaded; this shows only behind/around it (initial paint, any gap),
	   never in front of the scrim/text. */
	background: var(--hs-color-off-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 77px);
}

/* ================= Cinematic background sequence ================= */

.hs-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hs-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* transform-origin stays center; hero.js animates scale for the slow
	   zoom — kept off the `img` itself so the zoom can never reveal the
	   slide's edges past the container. */
	overflow: hidden;
}

.hs-hero__slide.is-active {
	opacity: 1;
}

.hs-hero__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}

/* Left-to-right + a soft bottom fade for the scroll indicator — never a
   flat full-image scrim. Two independent gradients layered on one element. */
.hs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(26, 26, 29, 0.88) 0%, rgba(26, 26, 29, 0.6) 34%, rgba(26, 26, 29, 0.18) 62%, rgba(26, 26, 29, 0) 85%),
		linear-gradient(0deg, rgba(26, 26, 29, 0.55) 0%, rgba(26, 26, 29, 0) 32%);
	pointer-events: none;
}

/* Manual slider arrows (master-audit rework) — same restrained circular-
   button device already proven on page-ppf.php's own hero slider, just
   under the .hs-hero__ prefix. Bottom-CENTER — bottom-right would collide
   with the global fixed .hs-whatsapp-float button (footer.css, every page),
   bottom-left would collide with the scroll indicator. Manual clicks are
   independent of the auto-loop but never reverse it — see hero.js goTo(). */
.hs-hero__arrows {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: var(--hs-space-5);
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.hs-hero__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	appearance: none;
	color: var(--hs-color-text);
	background: rgba(26, 26, 29, 0.45);
	border: 1px solid rgba(240, 240, 232, 0.3);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-hero__arrow:hover,
.hs-hero__arrow:focus-visible {
	background: rgba(26, 26, 29, 0.75);
	border-color: var(--hs-color-off-white);
}

.hs-hero__arrow:active {
	transform: scale(0.94);
}

.hs-hero__arrow:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 2px;
}

@media (max-width: 639.98px) {
	.hs-hero__arrows {
		bottom: var(--hs-space-3);
	}

	.hs-hero__arrow {
		width: 38px;
		height: 38px;
	}
}

/* Under reduced-motion, hero.js never starts the sequence/timer at all —
   the arrows would do nothing, so hide them rather than leave dead controls. */
@media (prefers-reduced-motion: reduce) {
	.hs-hero__arrows {
		display: none;
	}
}

/* ================= Copy ================= */

.hs-hero__inner {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
}

.hs-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 640px;
	/* Left edge lines up with the navbar's own 1360px container so the
	   heading visually sits under the logo, not floating independently. */
	padding-left: max(var(--hs-space-4), calc((100vw - 1360px) / 2 + var(--hs-space-4)));
	padding-right: var(--hs-space-5);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

/* Master-audit rework: the eyebrow/heading/paragraph markup is gone (the
   hero is visual-first now, see hero.php) — .hs-hero__group is the only
   copy block left. */
.hs-hero__group {
	display: flex;
	flex-direction: column;
	gap: var(--hs-space-4);
}

.hs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hs-space-3);
}

.hs-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 16px 30px;
	border-radius: var(--hs-radius-sm);
	transition: transform var(--hs-duration-fast) var(--hs-ease-standard), box-shadow var(--hs-duration-fast) var(--hs-ease-standard), background var(--hs-duration-fast) var(--hs-ease-standard), border-color var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-hero__cta--primary {
	background: var(--hs-color-off-white);
	color: var(--hs-color-graphite);
	border: 1px solid var(--hs-color-off-white);
}

.hs-hero__cta--primary:hover,
.hs-hero__cta--primary:focus-visible {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

.hs-hero__cta--secondary {
	background: transparent;
	color: var(--hs-color-text);
	border: 1px solid rgba(240, 240, 232, 0.4);
}

.hs-hero__cta--secondary:hover,
.hs-hero__cta--secondary:focus-visible {
	border-color: var(--hs-color-off-white);
	background: rgba(240, 240, 232, 0.1);
	transform: translateY(-1px);
}

.hs-hero__cta:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 3px;
}

/* Per-slide caption (2026-09-22 rework, see hero.php/hero.js header
   comments) — REPLACES both the earlier text-only .hs-hero__index rail
   AND a since-rejected static image-card grid. Every caption is stacked
   into the SAME CSS grid cell (`grid-area: 1 / 1`) so hero.js can
   crossfade the active one in sync with its background slide — one
   product name + one "View" button on screen at a time, always matching
   whichever photo is currently showing. Grid (not absolute positioning)
   deliberately: the container's height auto-sizes to the tallest caption
   across ALL of them regardless of which is currently opacity:1, so
   swapping between captions of slightly different text length never
   jumps the layout. */
.hs-hero__captions {
	display: grid;
}

.hs-hero__caption {
	grid-area: 1 / 1;
	opacity: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	pointer-events: none;
}

.hs-hero__caption.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hs-hero__caption-name {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(240, 240, 232, 0.85);
}

.hs-hero__caption-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--hs-color-off-white);
	color: var(--hs-color-graphite);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--hs-duration-fast) var(--hs-ease-standard), transform var(--hs-duration-fast) var(--hs-ease-standard);
}

.hs-hero__caption-cta:hover,
.hs-hero__caption-cta:focus-visible {
	background: #ffffff;
	transform: translateY(-1px);
}

.hs-hero__caption-cta:focus-visible {
	outline: 2px solid var(--hs-color-accent);
	outline-offset: 3px;
}

/* Under reduced-motion (hero.js never starts the sequence), every caption
   but the first stays display:none via the absolute/relative split above
   already collapsing non-active ones out of layout — nothing extra needed
   here; this just guarantees no stray inactive caption is ever clickable. */
@media (prefers-reduced-motion: reduce) {
	.hs-hero__caption:not(.is-active) {
		display: none;
	}
}

/* ================= Tablet ================= */

@media (max-width: 1023.98px) {
	.hs-hero {
		min-height: auto;
	}

	.hs-hero__inner {
		min-height: calc(100svh - 77px);
	}

	.hs-hero__content {
		max-width: 560px;
		padding-top: var(--hs-space-6);
		padding-bottom: var(--hs-space-6);
	}
}

/* ================= Mobile ================= */

@media (max-width: 639.98px) {
	.hs-hero__content {
		max-width: none;
		padding: var(--hs-space-5) var(--hs-space-4) var(--hs-space-5);
	}

	.hs-hero__cta {
		flex: 1 1 auto;
		text-align: center;
	}

	/* A narrow viewport needs stronger contrast since there's less clear
	   image real-estate for the gradient to fade into. */
	.hs-hero__scrim {
		background:
			linear-gradient(180deg, rgba(26, 26, 29, 0.35) 0%, rgba(26, 26, 29, 0.9) 62%, rgba(26, 26, 29, 0.96) 100%);
	}
}