/*
 * Shubh Laabh Arts — Homepage final CTA banner ("Invite Timeless
 * Divinity"), immediately above the global footer. Matches
 * design-reference/pages/home-page.png's closing banner: a short,
 * premium peacock-navy/gold strip using assets/images/decorative/
 * footer-bg.jpg as its complete visual composition.
 *
 * SIZING: footer-bg.jpg is 2172x247 (ratio ~8.79:1) — even more extreme
 * than the Vastu section's own background. The brief's suggested
 * 260-340px desktop height would force `background-size: cover` to
 * scale the image up enough that its horizontal crop eats almost
 * entirely into the left lotus / right peacock corner artwork (verified
 * by the same crop-math check used for the Vastu section: at 340px
 * height and a 1440px viewport, the required crop exceeds the corner
 * artwork's own width, i.e. it would be cropped out completely). So
 * height here is kept close to the image's native ratio instead —
 * min-height: clamp(180px, 11.5vw, 230px) — which keeps the crop small
 * enough that both corners stay visible at every desktop width, at the
 * cost of a shorter banner than the brief's suggestion. Verified via
 * screenshot, not just this calculation.
 *
 * Mobile stacks four text blocks vertically, which needs more height
 * than this short banner ratio can provide artwork-safely — same
 * tradeoff already established on the Vastu section's own mobile view:
 * the artwork recedes to a plain navy-teal gradient there rather than
 * showing the corner motifs, which is unavoidable once the box is much
 * taller than the image's own short ratio.
 *
 * SAFE ZONE: pixel-sampled footer-bg.jpg directly (rows through the
 * vertical band the text actually occupies) to find where the lotus/
 * peacock line-art actually sits: clean navy runs from ~11.5% to ~92%
 * of the image's width at its vertical center, narrowing slightly
 * toward the top/bottom edges (~18-21% / ~83-85%). Because `background-
 * size: cover` scales this image to fill the section's full width at
 * desktop sizes (only a small vertical crop happens there — see SIZING
 * above), those fractions carry over almost directly to viewport
 * percentages. So .sla-final-cta__inner's horizontal padding below is
 * expressed as `%` of its containing block (the full section width),
 * not a fixed px or the sitewide --sla-container-max box, specifically
 * so the safe margin scales with the artwork instead of drifting out of
 * sync with it at different desktop widths. 15% is used (comfortably
 * above the ~11.5%/8% minimum measured) for margin. Tablet/mobile use a
 * fixed, smaller inset instead once the section's height clamp makes
 * `cover` recede the artwork to a plain gradient (see above) — at that
 * point there's no artwork left to protect, just ordinary text padding.
 *
 * Colors/fonts come from assets/css/design-tokens.css's --sla-* tokens,
 * same as the rest of the site.
 */

.sla-final-cta,
.sla-final-cta *,
.sla-final-cta *::before,
.sla-final-cta *::after {
	box-sizing: border-box;
}

.sla-final-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-image: url( '../images/decorative/footer-bg.jpg' );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: clamp( 180px, 11.5vw, 230px );
}

.sla-final-cta__inner {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var( --sla-container-max );
	margin-inline: auto;
	padding-block: 1.5rem;
	/* % of the section's full width, not a fixed value — see the SAFE
	 * ZONE note at the top of this file. */
	padding-inline: clamp( 1.25rem, 15%, 15rem );
}

.sla-final-cta__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.sla-final-cta__text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center; /* centered editorial stack within its existing left-side region — the region itself (row/padding) is unchanged */
}

.sla-eyebrow.sla-final-cta__eyebrow {
	margin: 0 0 0.875rem; /* 14px, within the 12-16px range */
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.5 );
}

.sla-final-cta__heading {
	font-family: var( --sla-font-display );
	font-weight: 700;
	font-size: clamp( 1.5rem, 1.1rem + 1.6vw, 2rem ); /* ~24-32px — the banner's short height caps this well below the brief's 42-54px suggestion */
	line-height: 1.2;
	color: var( --sla-ivory );
	max-width: 850px; /* wraps to 2 lines rather than stretching the full row width */
	margin: 0 auto 1.25rem; /* 20px, within the 20-24px range; auto inline margins center this block within the wider .sla-final-cta__text column */
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.55 );
}

/* -----------------------------------------------------------------------
 * CTA — redesigned per brief: refined champagne-gold fill, deep navy
 * text, a thin gold rim + inner highlight for a handcrafted "premium
 * button" feel (same interaction vocabulary — elevation + soft shadow
 * + arrow slide — already used by the Craftsmanship section's CTA, see
 * homepage-craftsmanship.css's .sla-craft__cta). Hover deepens to
 * --sla-antique-gold (a darker gold token, not the lighter one this
 * button used previously) per the brief's explicit "darker/deeper gold"
 * hover spec.
 * --------------------------------------------------------------------- */
.sla-final-cta__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	width: 222px; /* brief's 210-230px range */
	height: 54px; /* brief's 50-56px range */
	padding-inline: 0.5rem;
	background: var( --sla-champagne-gold );
	color: var( --sla-peacock-navy );
	font-family: var( --sla-font-body );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid var( --sla-light-gold );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.35 ), 0 8px 18px -10px rgba( 0, 0, 0, 0.45 );
	transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease, border-color 300ms ease;
}

.sla-final-cta__cta:hover,
.sla-final-cta__cta:focus-visible {
	background: var( --sla-antique-gold );
	border-color: var( --sla-antique-gold );
	transform: translateY( -2px );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.2 ), 0 14px 26px -12px rgba( 0, 0, 0, 0.5 );
}

.sla-final-cta__cta:focus-visible {
	outline: 2px solid var( --sla-light-gold );
	outline-offset: 3px;
}

.sla-final-cta__cta-arrow {
	width: 14px;
	height: 14px;
	transition: transform 300ms ease;
}

.sla-final-cta__cta:hover .sla-final-cta__cta-arrow,
.sla-final-cta__cta:focus-visible .sla-final-cta__cta-arrow {
	transform: translateX( 5px );
}

/* -----------------------------------------------------------------------
 * Pull-quote — right side, large gold quotation marks (not a generic
 * icon), compact editorial italic.
 * --------------------------------------------------------------------- */
.sla-final-cta__quote {
	position: relative;
	flex: 0 0 auto;
	max-width: 11rem;
	padding-left: 1.25rem;
}

.sla-final-cta__quote p {
	margin: 0;
	font-family: var( --sla-font-display );
	font-style: italic;
	font-weight: 600;
	font-size: clamp( 0.8125rem, 0.7rem + 0.35vw, 0.9375rem );
	font-size:21px;
	line-height: 1.35;
	color: var( --sla-ivory );
	text-shadow: 0 2px 8px rgba( 0, 0, 0, 0.5 );
}

.sla-final-cta__quote-mark {
	font-family: var( --sla-font-display );
	color: var( --sla-champagne-gold );
	font-weight: 700;
	line-height: 1;
}

.sla-final-cta__quote-mark--open {
	position: absolute;
	top: -0.6rem;
	left: -0.15rem;
	font-size: 2.5rem;
	opacity: 0.85;
}

.sla-final-cta__quote-mark--close {
	font-size: 1.5rem;
	vertical-align: -0.35rem;
	margin-left: 0.15rem;
	opacity: 0.85;
}

/* -----------------------------------------------------------------------
 * Tablet — reduce heading, allow quote to drop below the CTA if the row
 * gets too tight rather than overlapping it.
 * --------------------------------------------------------------------- */
@media ( max-width: 900px ) {
	.sla-final-cta {
		min-height: clamp( 200px, 30vw, 320px );
	}

	/* Below this width the taller section forces `cover` to crop the
	 * artwork back to a plain gradient (see the SIZING note up top), so
	 * there's no longer corner artwork to protect — a fixed, comfortable
	 * inset replaces the desktop safe-zone percentage. */
	.sla-final-cta__inner {
		padding-inline: clamp( 1.25rem, 6vw, 3rem );
	}

	.sla-final-cta__row {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.25rem;
		max-width: 420px;
		margin-inline: auto;
	}

	.sla-final-cta__text {
		text-align: center;
	}

	.sla-final-cta__heading {
		font-size: clamp( 1.5rem, 1.2rem + 1.6vw, 1.875rem );
	}

	.sla-final-cta__cta {
		margin-inline: auto;
	}

	.sla-final-cta__quote {
		max-width: 20rem;
		padding-left: 0;
		margin-inline: auto;
		text-align: center;
	}

	.sla-final-cta__quote p {
		text-align: center;
	}

	.sla-final-cta__quote-mark--open {
		position: static;
		display: block;
		font-size: 1.75rem;
		margin-bottom: -0.35rem;
	}
}

/* -----------------------------------------------------------------------
 * Mobile.
 * --------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.sla-final-cta {
		min-height: clamp( 220px, 62vw, 300px );
		background-position: center center;
	}

	.sla-final-cta__inner {
		padding-block: 2rem;
	}

	.sla-final-cta__row {
		max-width: 320px; /* brief's 300-330px mobile content width */
	}

	.sla-final-cta__eyebrow {
		font-size: clamp( 0.625rem, 0.55rem + 0.2vw, 0.75rem ); /* ~10-12px */
	}

	.sla-final-cta__heading {
		font-size: clamp( 1.75rem, 1.5rem + 1.2vw, 2.125rem ); /* ~28-34px */
	}

	.sla-final-cta__quote p {
		font-size: clamp( 0.9375rem, 0.9rem + 0.2vw, 1.0625rem ); /* ~15-17px */
	}
}

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

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

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

	.sla-final-cta__cta,
	.sla-final-cta__cta-arrow {
		transition: none;
	}
}