/*
 * Google Reviews - narrow-column horizontal-scroll variant.
 *
 * Layered on top of google-reviews-widget.css (which must load first) for the
 * four service pages that show the widget inside the form column rather than
 * as a full-width section:
 *   deep-cleaning, move-in-move-out, standard-cleaning, post-construction
 *
 * Kept in its own file so google-reviews-widget.css stays a byte-for-byte copy
 * of the reviews handoff package - that file is what a future live-sync task
 * will diff against, so nothing site-specific belongs in it.
 *
 * WHY A VARIANT AND NOT .grw-grid:
 * .grw-grid is `repeat(auto-fit, minmax(300px, 1fr))`. The form column is
 * `flex: 0 0 40%` of the viewport with 84px of horizontal padding, which is
 * ~308px of usable width at the 981px breakpoint - auto-fit resolves that to a
 * single column, so the cards would stack vertically, which is exactly what
 * the horizontal strip is meant to avoid. auto-fit cannot produce an
 * overflowing track, so no amount of tuning makes .grw-grid scroll sideways.
 *
 * The container still carries data-grw-grid: that attribute is the hook
 * google-reviews-widget.js selects on, and dropping it would silently break
 * the "Read more" toggle. Only the class differs.
 *
 * REQUIRES `min-width: 0` ON THE FORM COLUMN.
 * The four pages set it in their own `.post-construction-image` rule. Without
 * it that column is a flex item of a row flex container with the default
 * `min-width: auto`, so its automatic minimum size is content-based and beats
 * its own `flex-basis: 40%`: measured in Chrome, the column blew out to a fixed
 * 3177px at every desktop width instead of 40%, and because both hero columns
 * are `flex-shrink: 0` the whole page grew ~2400-2800px wider than the
 * viewport. Nothing in this file can fix that from the inside - overflow-x or
 * min-width on .grw-scroll / .grw-inner / .grw-scroll-section were all measured
 * and all made no difference, because the strip already scrolls correctly
 * within whatever width it is given; the problem is the width it was given.
 * If this strip is ever reused in another flex column, that column needs
 * `min-width: 0` too.
 */

/*
 * The form column is `flex-direction: column; align-items: flex-start`, so
 * children are NOT stretched - a block child shrink-wraps to its content. The
 * strip needs a definite width to scroll inside, hence the explicit stretch.
 * (The Fillout iframe above it gets away with this only because it sets
 * width:100% inline.)
 */
.grw-scroll-section {
	width: 100%;
	align-self: stretch;
	/* Let the column's background photo show through instead of dropping an
	   opaque panel on top of it. The cards keep their own background. */
	background: transparent;
	margin-top: 32px;
}

/* .grw-inner is sized for a full-bleed section: 1180px cap and 96px of
   vertical padding. Both are wrong inside a form column. */
.grw-scroll-section .grw-inner {
	max-width: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

/*
 * .grw-heading is clamp(32px, 4vw, 44px) - and 4vw is viewport-relative, not
 * column-relative, so it renders ~39px inside a ~308px column. This is the
 * small-column equivalent.
 *
 * Deliberately two classes deep: the service pages style their form column's
 * heading with `.post-construction-image h2` (specificity 0,1,1 - and again in
 * their <=640px media query), which would otherwise beat a single-class rule
 * and force this to 40px white Poppins. 0,2,0 wins that comparison.
 */
.grw-scroll-section .grw-scroll-heading {
	font-family: Inter, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--grw-text);
	margin: 0 0 16px;
}

/* ---------- the strip ---------- */

.grw-scroll {
	display: flex;
	align-items: stretch;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--grw-border) transparent;
	/* Vertical room for the card shadows, and space beneath so the scrollbar
	   never sits on top of the cards. No horizontal padding: the strip has to
	   line up flush with the form iframe above it, and the negative side
	   margins that would have offset it made the strip 4px wider than its own
	   containing block - a real (if small) horizontal overflow. */
	padding: 6px 0 12px;
	margin-top: -6px;
}

/*
 * Card sizing is the one thing the base CSS cannot supply: .grw-card has no
 * width, so as a flex item it would shrink and all 13 reviews would be crushed
 * into the column. The clamp keeps a partial next card visible at every width -
 * that peek is what signals "scrollable" without needing arrow buttons:
 *   ~308px column -> 240px card + peek
 *   ~684px column -> 320px cards, ~2.1 visible
 */
.grw-scroll .grw-card {
	flex: 0 0 clamp(240px, 78%, 320px);
	scroll-snap-align: start;
	/* height:100% is for grid row stretching; in a content-height flex row it
	   resolves against nothing. Equal heights come from align-items:stretch. */
	height: auto;
	/* 28px of padding on a 240px card leaves 184px for text. */
	padding: 20px;
}

/*
 * overflow-x:auto forces overflow-y to a scrolling value too, so the base
 * card's -4px hover lift would either clip or add a vertical scrollbar. Keep
 * the shadow response, drop the movement.
 */
.grw-scroll .grw-card:hover {
	transform: none;
}

/* ---------- footer link ---------- */

/* .grw-cta normally sits in .grw-header, which centres it and adds a 56px
   bottom margin. Neither applies here. */
.grw-scroll-foot {
	display: flex;
	margin-top: 16px;
}

.grw-scroll-foot .grw-cta {
	margin-top: 0;
	font-size: 14px;
	padding: 11px 20px;
}

@media (prefers-reduced-motion: reduce) {
	.grw-scroll {
		scroll-snap-type: none;
	}
}