/*
 * Hydro Shield — homepage Google Reviews section. Dark graphite background
 * — homepage section 2 (right after the Hero), matching the reference
 * site's own review block placement (IA reference only). Cyan stays
 * restrained to the eyebrow only.
 *
 * REWORKED (2026-09-18, direct client follow-up): the main box is an empty
 * rectangle with left/right arrow navigation, ready for real Google review
 * screenshots to be dropped in later — see customer-proof.php's header
 * comment for how to add a real screenshot to a slot. The small sample-
 * text review cards sit alongside it (kept per direct follow-up request),
 * in a 1.2fr/1fr two-column layout (`.hs-proof__reviews`) mirroring the
 * section's original composition.
 */

.hs-proof {
	background: var(--hs-color-bg);
	padding-top: var(--hs-space-6);
	padding-bottom: var(--hs-space-6);
}

.hs-proof__inner {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--hs-space-4);
}

.hs-proof__top {
	max-width: 640px;
	margin: 0 0 var(--hs-space-5);
}


.hs-proof__heading {
	margin: 0 0 var(--hs-space-3);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--hs-color-text);
}

.hs-proof__note {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.55;
	font-style: italic;
	color: var(--hs-color-grey-mid);
}

/* ================= Reviews: screenshot box (left) + text cards (right) ================= */

.hs-proof__reviews {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--hs-space-5);
	align-items: start;
}

.hs-proof__shots {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hs-space-3);
}

.hs-proof__shots-frame {
	position: relative;
	width: 100%;
}

/* Only the .is-active slot is shown — a plain stacked-slide swap (no
   crossfade needed, these are empty placeholders, not photography). */
.hs-proof__shots-track {
	position: relative;
}

.hs-proof__shot {
	display: none;
}

.hs-proof__shot.is-active {
	display: block;
}

/* Rectangle, not square (direct follow-up — "rectangle shape mein banao",
   matching the section's original wide "featured quote" box proportions)
   — a real Google review screenshot also tends to read wider than tall. */
.hs-proof__shot-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--hs-space-3);
	aspect-ratio: 16 / 9;
	border: 1px dashed rgba(240, 240, 232, 0.28);
	border-radius: 10px;
	background: var(--hs-color-surface);
	color: var(--hs-color-grey-mid);
	text-align: center;
	padding: var(--hs-space-4);
}

.hs-proof__shot-text {
	margin: 0;
	max-width: 26ch;
	font-size: 0.86rem;
	line-height: 1.5;
}

/* FOLLOW-UP (direct feedback — "kuch ka size chota kuch ka poora, kuch ki
   height chooti kuch ki width chooti"): the 30 real screenshots vary hugely
   in natural height (one line of stars vs. a 5-paragraph review with 9
   photos), so showing each at its own aspect ratio inside a fixed 16:9 box
   made some fill it edge-to-edge and others render as a thin sliver. Fixed
   at the FILE level instead of here — every review-NN.jpg is now already a
   pre-composed, IDENTICAL 1300×700 canvas (scaled down to fit, never
   cropped, then centered on white padding — see the project's own
   generation notes), so this box's aspect-ratio just matches that exactly
   (13/7) and object-fit: contain becomes a no-op in the normal case. */
.hs-proof__shot-image {
	display: block;
	width: 100%;
	aspect-ratio: 13 / 7;
	object-fit: contain;
	border-radius: 10px;
	background: var(--hs-color-surface);
}

/* ================= Small sample-text review cards (right column) ================= */

.hs-proof__cards {
	display: flex;
	flex-direction: column;
	gap: var(--hs-space-3);
}

/* FOLLOW-UP (direct request — change the card background): off-white now,
   matching the screenshot slider's own white review cards beside it, so
   both halves of this section read as one family instead of a light box
   next to two differently-toned dark ones. Text colors below flipped to
   dark-on-light to stay readable (the old light-on-dark values would be
   invisible/low-contrast here). */
.hs-proof__card {
	margin: 0;
	padding: var(--hs-space-4);
	border: 1px solid rgba(26, 26, 29, 0.08);
	border-radius: 10px;
	background: var(--hs-color-off-white);
}

.hs-proof__card-quote {
	margin: 0 0 10px;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--hs-color-grey-dark);
}

.hs-proof__card-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hs-proof__card-name {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hs-color-graphite);
}

.hs-proof__card-detail {
	font-size: 0.74rem;
	color: var(--hs-color-grey-mid);
}

.hs-proof__shots-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	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.7);
	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-proof__shots-arrow--prev {
	left: -16px;
}

.hs-proof__shots-arrow--next {
	right: -16px;
}

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

.hs-proof__shots-arrow:active {
	transform: translateY(-50%) scale(0.94);
}

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

.hs-proof__shots-counter {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--hs-color-grey-mid);
}

/* ================= Responsive ================= */

@media (max-width: 899.98px) {
	.hs-proof {
		padding-top: var(--hs-space-5);
		padding-bottom: var(--hs-space-5);
	}

	.hs-proof__reviews {
		grid-template-columns: 1fr;
		gap: var(--hs-space-4);
	}
}

@media (max-width: 639.98px) {
	.hs-proof__shots-arrow--prev {
		left: 0;
	}

	.hs-proof__shots-arrow--next {
		right: 0;
	}

	.hs-proof__shots-arrow {
		width: 38px;
		height: 38px;
	}
}