/*
 * Shubh Laabh Arts — Homepage Vastu feature banner, immediately below the
 * Collections section. The supplied background image
 * (assets/images/decorative/section background.jpg, 2172x382) is the
 * section's entire visual composition — left lotus/mandala artwork,
 * right peacock-feather/diya artwork, sweeping gold artwork along the
 * bottom — and must never be covered by a second visible color.
 *
 * SIZING: the section uses a generous, premium min-height
 * (clamp(420px, 30vw, 620px) desktop) so the heading/cards/CTA can be
 * genuinely large rather than cramped into the image's own very short
 * native ratio (2172x382 = ~5.7:1, which alone would only allow a
 * ~250-340px band at typical widths). `background-size: cover` always
 * fills the section completely regardless of this height (there is
 * never a way for a second color to show through), at the cost of some
 * horizontal crop of the image at these taller heights — kept minimal
 * by choosing a HEIGHT THAT SCALES WITH VIEWPORT WIDTH (the clamp's
 * 30vw middle term) rather than a flat pixel value: cover's crop amount
 * shrinks as the height-to-width ratio approaches the image's own
 * ratio, so scaling height with width keeps the crop fraction roughly
 * constant (and small) across the whole desktop range, rather than
 * growing severe at narrower widths the way a fixed height would.
 *
 * CONTENT: normal document flow inside .sla-vastu__inner (not absolutely
 * positioned — this section is tall enough now that content doesn't
 * need to be pulled out of flow to fit), vertically centered, with a
 * left copy column and a right column (.sla-vastu__cards-col) holding
 * the four Vastu cards in ONE horizontal row plus the quote directly
 * beneath them — never a 2x2 grid until the mobile breakpoint, where a
 * single row of four would genuinely be too cramped. Both columns are
 * inset well clear of the image's outer ~20% where the lotus and
 * peacock/diya artwork live.
 *
 * Colors/fonts come from assets/css/design-tokens.css's --sla-* tokens,
 * same as the rest of the site.
 */

/* Defensive reset scoped to this component: several elements below combine
 * a percentage/flex width with their own padding (.sla-vastu__inner most
 * importantly), which silently overflows the viewport under the default
 * content-box model — the section's own `overflow: hidden` was masking
 * this as visual clipping (mid-word) rather than a page-level scrollbar,
 * so it went unnoticed by a bare document-width overflow check. */
.sla-vastu,
.sla-vastu *,
.sla-vastu *::before,
.sla-vastu *::after {
	box-sizing: border-box;
}

.sla-vastu {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-image: url( '../images/decorative/section background.jpg' );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: clamp( 420px, 30vw, 620px );
}

/* Same artwork, WebP copy (378KB -> 141KB); original kept as fallback. The
 * mobile background rule further down still takes precedence below 768px. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
	.sla-vastu {
		background-image: image-set(url("../images/decorative/section-background-2172w.webp") type("image/webp"), url("../images/decorative/section background.jpg") type("image/jpeg"));
	}
}

/* Subtle protective scrim — top and bottom only, where the eyebrow/
 * heading and the quote sit — so text stays legible over the artwork
 * without ever dimming the lotus/peacock/gold-wave areas the brief
 * requires to stay clearly visible. */
.sla-vastu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( 180deg, rgba( 2, 20, 32, 0.32 ) 0%, rgba( 2, 20, 32, 0.05 ) 30%, rgba( 2, 20, 32, 0.05 ) 68%, rgba( 2, 20, 32, 0.34 ) 100% );
	pointer-events: none;
}

.sla-vastu__inner {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp( 1.5rem, 2.5vw, 2.5rem );
	width: 100%;
	max-width: clamp( 1200px, 82vw, 1550px );
	margin-inline: auto;
	padding: clamp( 2.5rem, 4vw, 3.75rem ) clamp( 2rem, 4vw, 3.125rem );
}

/* -----------------------------------------------------------------------
 * Row — left copy (~40%) + right 2x2 cards (~55%), a real gap between
 * them rather than edge-justified, so neither ever crowds the section's
 * own side padding (which is what keeps them clear of the lotus/peacock
 * artwork beyond the inner container).
 * --------------------------------------------------------------------- */
.sla-vastu__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 2.5rem, 6vw, 5rem );
	flex-wrap: wrap;
}

.sla-vastu__copy {
	flex: 1 1 340px;
	max-width: 440px;
}

.sla-eyebrow.sla-vastu__eyebrow {
	margin: 0 0 0.85rem;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.6 );
}

.sla-vastu__heading {
	font-family: var( --sla-font-display );
	font-weight: 700;
	font-size: clamp( 2.25rem, 1.4rem + 3vw, 4rem ); /* ~36-64px */
	line-height: 1.02;
	color: var( --sla-ivory );
	margin: 0 0 1rem;
	text-shadow: 0 2px 18px rgba( 0, 0, 0, 0.65 );
}

.sla-vastu__description {
	font-family: var( --sla-font-body );
	font-size: clamp( 1rem, 0.85rem + 0.4vw, 1.1875rem ); /* ~16-19px */
	font-weight: 500;
	line-height: 1.55;
	color: rgba( 248, 243, 232, 0.85 );
	margin: 0 0 1.5rem;
	max-width: 34rem;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.55 );
}

/* -----------------------------------------------------------------------
 * CTA — premium navy-teal base (not the flat champagne-gold fill used
 * elsewhere on the site) with a thin gold border and PURE WHITE text —
 * an explicit, deliberate exception to the site's usual gold-fill/navy-
 * text button, per this section's own brief. The arrow is gold, not
 * inherited white, for a two-tone accent.
 * --------------------------------------------------------------------- */
.sla-vastu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 1rem 1.85rem;
	background: linear-gradient( 180deg, rgba( 12, 66, 84, 0.92 ), rgba( 5, 43, 58, 0.96 ) );
	color: #ffffff;
	border: 1px solid rgba( 210, 164, 72, 0.75 );
	font-family: var( --sla-font-body );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.1 ),
		0 10px 22px -8px rgba( 0, 0, 0, 0.6 );
	transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.sla-vastu__cta:hover,
.sla-vastu__cta:focus-visible {
	background: linear-gradient( 180deg, rgba( 16, 80, 100, 0.95 ), rgba( 7, 55, 72, 0.98 ) );
	border-color: rgba( 210, 164, 72, 1 );
	transform: translateY( -2px );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.14 ),
		0 0 22px rgba( 210, 164, 72, 0.35 ),
		0 14px 26px -8px rgba( 0, 0, 0, 0.65 );
}

.sla-vastu__cta-arrow {
	width: 15px;
	height: 15px;
	color: var( --sla-champagne-gold );
	transition: transform 250ms ease;
}

.sla-vastu__cta:hover .sla-vastu__cta-arrow,
.sla-vastu__cta:focus-visible .sla-vastu__cta-arrow {
	transform: translateX( 3px );
}

/* -----------------------------------------------------------------------
 * Cards — ONE horizontal row of four (never a 2x2 grid on desktop/
 * tablet — see .sla-vastu__cards-col below for how the quote attaches
 * directly beneath this row), translucent panels over the artwork.
 * --------------------------------------------------------------------- */
.sla-vastu__cards-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp( 1rem, 2vw, 1.75rem );
	flex: 1 1 460px;
	max-width: 720px;
}

.sla-vastu__cards {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 0.6rem, 1vw, 1rem );
	width: 100%;
}

.sla-vastu-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.4rem;
	min-width: 0;
	max-width: 190px;
	height: clamp( 108px, 9vw, 135px );
	padding: 0.6rem 0.5rem;
	background: rgba( 5, 43, 58, 0.72 );
	border: 1px solid rgba( 199, 154, 69, 0.38 );
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.07 ),
		0 12px 26px -14px rgba( 0, 0, 0, 0.6 );
	backdrop-filter: blur( 6px );
	transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}

.sla-vastu-card:hover {
	transform: translateY( -4px );
	border-color: rgba( 199, 154, 69, 0.7 );
	background: rgba( 5, 43, 58, 0.85 );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, 0.1 ),
		0 16px 32px -14px rgba( 0, 0, 0, 0.65 );
}

/* Real brand icon assets (assets/images/decorative/{money,secure-shield,
 * lotus,book}.png) — already champagne-gold, flat PNGs, displayed as-is
 * rather than recolored. */
.sla-vastu-card__icon {
	width: clamp( 30px, 3vw, 44px );
	height: clamp( 30px, 3vw, 44px );
	object-fit: contain;
	transition: transform 300ms ease;
}

.sla-vastu-card:hover .sla-vastu-card__icon {
	transform: scale( 1.04 );
}

.sla-vastu-card__title {
	display: block;
	font-family: var( --sla-font-display );
	font-weight: 600;
	font-size: clamp( 0.875rem, 0.5vw + 0.7rem, 1.0625rem ); /* ~14-17px */
	line-height: 1.2;
	color: var( --sla-ivory );
}

.sla-vastu-card__subtitle {
	display: block;
	font-family: var( --sla-font-body );
	font-weight: 500;
	font-size: clamp( 0.75rem, 0.3vw + 0.65rem, 0.875rem ); /* ~12-14px */
	line-height: 1.2;
	color: rgba( 248, 243, 232, 0.78 );
}

/* -----------------------------------------------------------------------
 * Quote — sits directly beneath the card row (same .sla-vastu__cards-col
 * column as the cards, not a section-wide element), a single small gold
 * divider above it rather than flanking dividers either side.
 * --------------------------------------------------------------------- */
.sla-vastu__quote {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}

.sla-vastu__quote p {
	font-family: var( --sla-font-display );
	font-style: italic;
	font-weight: 500;
	font-size: clamp( 1.125rem, 0.4vw + 1rem, 1.3125rem ); /* ~18-21px */
	line-height: 1.5;
	color: #ffffff;
	margin: 0;
	text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.6 );
}

.sla-vastu__quote-divider {
	position: relative;
	width: clamp( 28px, 3.5vw, 48px );
	height: 1px;
	background: linear-gradient( 90deg, transparent, var( --sla-champagne-gold ), transparent 90% );
	flex-shrink: 0;
}

.sla-vastu__quote-divider::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: var( --sla-champagne-gold );
	transform: translate( -50%, -50% ) rotate( 45deg );
}

/* -----------------------------------------------------------------------
 * Tablet — content stacks and centers; the four cards STAY in one row
 * (per the brief: prefer one row when practical, only switch to 2x2 at
 * genuinely narrow mobile widths — see the 640px breakpoint below). Once
 * stacked, .sla-vastu__cards-col has the row's full width to itself, so
 * a single row of four remains comfortable even at tablet widths.
 * --------------------------------------------------------------------- */
@media ( max-width: 1023.98px ) {
	.sla-vastu {
		min-height: clamp( 620px, 90vw, 760px );
		background-position: center center;
	}

	.sla-vastu__row {
		flex-direction: column;
		gap: 2rem;
	}

	/* Bug fix: both .sla-vastu__copy (`flex: 1 1 340px`) and
	 * .sla-vastu__cards-col (`flex: 1 1 460px`) carry desktop flex-basis
	 * values meant for the ROW layout's horizontal main axis. Once
	 * .sla-vastu__row switches to flex-direction: column above, the main
	 * axis becomes vertical, and those same px values silently become
	 * HEIGHT floors instead — forcing each column to be at least that
	 * tall regardless of its actual (shorter) content. This is what was
	 * still producing the large gap between the CTA and the card grid
	 * even after the row's own `gap` was tightened to 28px: .sla-vastu__
	 * copy was being held at a 340px-tall floor when its real content
	 * (eyebrow/heading/description/CTA) only needed ~272px, so the cards
	 * column that follows it (via the row's gap) started ~68px lower
	 * than it visually should have. Resetting both to `flex: 0 0 auto`
	 * lets each size to its real content in the column direction. */
	.sla-vastu__copy,
	.sla-vastu__cards-col {
		flex: 0 0 auto;
	}

	.sla-vastu__copy {
		max-width: 30rem;
		text-align: center;
	}

	.sla-vastu__description {
		margin-inline: auto;
	}

	.sla-vastu__heading {
		font-size: clamp( 2rem, 1.5rem + 2vw, 2.75rem );
	}

	.sla-vastu-card {
		height: clamp( 100px, 11vw, 130px );
	}
}

/* -----------------------------------------------------------------------
 * Mobile (<=767px) — a DELIBERATE composition around its own dedicated
 * artwork (assets/images/decorative/section background mobile.jpg,
 * 1086x1448, a portrait 3:4 image), never the desktop background
 * reused/repositioned. This image's top ~55-60% is open navy and the
 * decorative artwork — lotus (bottom-left), peacock/diya (bottom-right),
 * the gold wave — sits in the bottom ~25-30%.
 *
 * Content is a COMPACT, content-driven natural stack (height: auto via
 * no min-height + controlled padding/gaps), NOT the wide space-between
 * distribution an earlier pass used — that pushed the cards+quote all
 * the way down to the artwork band, leaving a large dead gap after the
 * CTA. Every gap below is a small, fixed value (never vw/vh-scaled), so
 * spacing stays controlled at every width in this range rather than
 * growing with viewport size.
 *
 * background-position: center bottom still protects the artwork-bearing
 * bottom from any residual crop (taken from the empty top instead), but
 * cover's crop amount is now much smaller than an earlier pass's, since
 * the section is noticeably shorter now that content no longer forces
 * extra height.
 * --------------------------------------------------------------------- */
@media ( max-width: 767px ) {
	.sla-vastu {
		background-image: url( '../images/decorative/section background mobile.jpg' );
		background-position: center bottom;
		min-height: 0;
	}

	.sla-vastu__inner {
		justify-content: flex-start;
		/* Bottom padding is much larger than it looks like it should be —
		 * verified by sampling the actual mobile background image
		 * (assets/images/decorative/section background mobile.jpg): at
		 * the quote's horizontal position (roughly the center 21-79% of
		 * the image, once background-size:cover's horizontal crop at
		 * mobile widths is accounted for), the gold artwork doesn't
		 * start until ~87-90% down the image, not the ~62-81% where the
		 * outer lotus/peacock corners begin. Because `cover` maps the
		 * image's full height into the section regardless of section
		 * height, this bottom padding is what actually buys clearance
		 * between the quote and that artwork — see the .sla-vastu__quote
		 * comment below for the exact relationship. */
		padding: 2rem 1.125rem 7.5rem; /* ~16-20px sides, per brief */
		gap: 0;
	}

	.sla-vastu__row {
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 1.75rem; /* CTA -> cards: the main fix, was an unbounded space-between gap */
	}

	.sla-vastu__copy {
		max-width: 22rem;
	}

	.sla-vastu__heading {
		font-size: clamp( 2.125rem, 1.7rem + 2vw, 2.5rem ); /* ~34-40px */
		line-height: 1.08;
	}

	.sla-vastu__description {
		font-size: 0.9375rem; /* ~15px */
		line-height: 1.5;
		max-width: 20.625rem; /* ~330px */
		margin-inline: auto;
	}

	.sla-vastu__cards-col {
		max-width: 22rem;
		gap: 1.5rem; /* cards -> quote: ~24px */
	}

	.sla-vastu__cards {
		grid-template-columns: repeat( 2, 1fr );
		gap: 0.7rem; /* ~11px, within the 10-12px target */
	}

	.sla-vastu-card {
		max-width: none;
		width: 100%;
		height: clamp( 90px, 24vw, 105px );
		padding: 0.8rem 0.65rem; /* ~12.8px / 10.4px */
		gap: 0.3rem;
	}

	.sla-vastu-card__icon {
		width: 27px;
		height: 27px;
	}

	.sla-vastu-card__title {
		font-size: 0.9375rem; /* ~15px */
	}

	.sla-vastu-card__subtitle {
		font-size: 0.8125rem; /* ~13px */
	}

	.sla-vastu__quote {
		max-width: 21.25rem; /* ~340px */
		margin-inline: auto;
	}

	.sla-vastu__quote p {
		font-size: 0.9375rem; /* ~15px */
		line-height: 1.48;
	}

	.sla-vastu__quote p br {
		display: none;
	}
}

/* -----------------------------------------------------------------------
 * Scroll-reveal — fade + slight upward movement, cards stagger.
 * --------------------------------------------------------------------- */
.sla-js [data-sla-reveal-item] {
	opacity: 0;
	transform: translateY( 20px );
	transition: opacity 700ms ease, transform 700ms ease;
	transition-delay: var( --sla-reveal-delay, 0ms );
}

.sla-js .sla-vastu.is-revealed [data-sla-reveal-item] {
	opacity: 1;
	transform: translateY( 0 );
}

.sla-js .sla-vastu.is-revealed .sla-vastu-card:hover {
	transform: translateY( -4px );
}

/* .sla-vastu-card already gets its opacity:0/translateY reveal state and
 * transition-delay from the generic [data-sla-reveal-item] rules above
 * (it carries that attribute directly — see inc/homepage-vastu.php).
 * This re-declares the `transition` property specifically (same
 * selector specificity as .sla-vastu-card's own base rule, but later in
 * source, so it wins) to include opacity alongside the card's hover
 * transitions (border-color/box-shadow/background-color) — otherwise
 * the generic rule's `transition: opacity..., transform...` would
 * silently replace the whole shorthand and cards would lose their
 * smooth hover color/shadow transitions. */
.sla-vastu-card {
	transition: opacity 700ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.sla-js .sla-vastu [data-sla-reveal-item],
	.sla-js .sla-vastu .sla-vastu-card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sla-vastu-card,
	.sla-vastu-card__icon,
	.sla-vastu__cta,
	.sla-vastu__cta-arrow {
		transition: none;
	}
}