/*
 * Shubh Laabh Arts — Homepage "About Us / Craftsmanship" section,
 * immediately below the Vastu section. Matches
 * design-reference/pages/home-page.png: a premium warm-ivory editorial
 * section (deliberate visual contrast against the dark Vastu section
 * above it) — a two-part composition of (1) a craftsmanship media +
 * editorial copy + a pull-quote, and (2) a compact "Why Choose" four-
 * point value strip below it.
 *
 * Decorative corners reuse the SAME footer-mandala.png asset the global
 * footer already uses (see header-footer.css's --sla-art-mandala) at a
 * much lower opacity — one brand mandala asset, not a new one, kept
 * strictly in the outer corners and masked so it never competes with
 * the content.
 *
 * Colors/fonts come from assets/css/design-tokens.css's --sla-* tokens,
 * same as the rest of the site.
 */

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

.sla-craft {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var( --sla-warm-cream );
	padding-block: clamp( 4.375rem, 3.5rem + 3vw, 5.625rem ); /* ~70-90px */
}

/* Faint corner mandala fragments — one asset, reused from the footer,
 * masked so each fades toward the section's center and never sits under
 * the readable content. */
.sla-craft::before,
.sla-craft::after {
	content: "";
	position: absolute;
	top: 50%;
	z-index: 0;
	transform: translateY( -50% );
	pointer-events: none;
	width: clamp( 160px, 14vw, 220px );
	height: auto;
	aspect-ratio: 546 / 1024;
	background-image: url( '../images/decorative/footer-mandala.png' );
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.12;
}

/* Same artwork, WebP copy (see header-footer.css); originals kept as fallback. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
	.sla-craft::before,
	.sla-craft::after {
		background-image: image-set(url("../images/decorative/footer-mandala-546w.webp") type("image/webp"), url("../images/decorative/footer-mandala.png") type("image/png"));
	}
}

.sla-craft::before {
	left: 0;
	background-position: left center;
	-webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 40%, transparent 100% );
	mask-image: linear-gradient( 90deg, #000 0%, #000 40%, transparent 100% );
}

.sla-craft::after {
	right: 0;
	transform: translateY( -50% ) scaleX( -1 );
	background-position: left center;
	-webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 40%, transparent 100% );
	mask-image: linear-gradient( 90deg, #000 0%, #000 40%, transparent 100% );
}

.sla-craft__inner {
	position: relative;
	z-index: 1;
	max-width: var( --sla-container-max );
	margin-inline: auto;
	padding-inline: clamp( 1.5rem, 4vw, 4.5rem );
}

/* -----------------------------------------------------------------------
 * Top row — media (left, ~50%) + content (right, ~50%: text + pull-quote
 * side by side).
 * --------------------------------------------------------------------- */
.sla-craft__row {
	display: flex;
	align-items: center;
	gap: clamp( 2rem, 4vw, 4rem );
}

.sla-craft__media {
	flex: 1 1 50%;
	max-width: 52%;
}

/* our-story-home.jpg is 1484x1060 (1.4:1) — aspect-ratio matches that
 * exactly (not an arbitrary 16:10/4:3) so object-fit: cover has nothing
 * to crop at the default width; only the narrower breakpoints below
 * adjust it, and only slightly, to keep the artisan subject framed. */
.sla-craft__media-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1484 / 1060;
	object-fit: cover;
	object-position: center;
	border-radius: 14px;
	border: 1px solid var( --sla-ivory-dark );
	box-shadow: 0 20px 45px -28px rgba( 7, 59, 76, 0.35 );
}

.sla-craft__content {
	flex: 1 1 50%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp( 1.5rem, 3vw, 3rem );
}

.sla-craft__text {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 28rem;
}

.sla-eyebrow.sla-craft__eyebrow {
	margin: 0 0 0.75rem;
}

.sla-craft__heading {
	font-family: var( --sla-font-display );
	font-weight: 700;
	font-size: clamp( 2rem, 1.3rem + 2.6vw, 3.375rem ); /* ~32-54px */
	line-height: 1.1;
	color: var( --sla-peacock-navy );
	margin: 0 0 1rem;
}

.sla-craft__description {
	font-family: var( --sla-font-body );
	font-size: clamp( 0.9375rem, 0.9rem + 0.2vw, 1rem );
	font-weight: 500;
	line-height: 1.65;
	color: var( --sla-muted-blue );
	margin: 0 0 1.75rem;
}

/* -----------------------------------------------------------------------
 * CTA — the reference's OUTLINE treatment for this section specifically
 * (ivory fill, thin gold border, navy text) — distinct from the gold-
 * fill CTA used elsewhere, matching design-reference/pages/home-page.png.
 * --------------------------------------------------------------------- */
.sla-craft__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.9rem 1.75rem;
	background: var( --sla-warm-cream );
	color: var( --sla-peacock-navy );
	border: 1px solid var( --sla-champagne-gold );
	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: 4px;
	transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.sla-craft__cta:hover,
.sla-craft__cta:focus-visible {
	background: var( --sla-ivory );
	border-color: var( --sla-light-gold );
	transform: translateY( -2px );
	box-shadow: 0 12px 24px -16px rgba( 7, 59, 76, 0.4 );
}

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

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

/* -----------------------------------------------------------------------
 * Pull-quote — small, secondary, editorial. Never competes with the
 * heading.
 * --------------------------------------------------------------------- */
.sla-craft__pullquote {
	flex: 0 0 auto;
	max-width: 9rem;
	padding-top: 0.25rem;
}

.sla-craft__pullquote p {
	margin: 0 0 0.75rem;
	font-family: var( --sla-font-display );
	font-style: italic;
	font-weight: 600;
	font-size: clamp( 1rem, 0.9rem + 0.4vw, 1.1875rem );
	line-height: 1.3;
	color: var( --sla-champagne-gold );
	text-align: right;
}

.sla-craft__pullquote-divider {
	display: block;
	margin-left: auto;
	width: 40px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var( --sla-champagne-gold ) );
}

/* -----------------------------------------------------------------------
 * "Why Choose" strip — centered heading, four-column editorial benefits
 * row with thin vertical separators (no cards, no shadows).
 * --------------------------------------------------------------------- */
.sla-craft__why {
	margin-top: clamp( 3.5rem, 3rem + 2.5vw, 5rem );
}

.sla-craft__why-header {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: clamp( 2rem, 1.6rem + 2vw, 3rem );
}

.sla-craft__why-heading {
	font-family: var( --sla-font-display );
	font-weight: 600;
	font-size: clamp( 1.625rem, 1.3rem + 1.4vw, 2.25rem );
	line-height: 1.2;
	color: var( --sla-peacock-navy );
	margin: 0.4rem 0 0;
}

.sla-craft__values {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
}

.sla-craft-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding-inline: clamp( 0.75rem, 2vw, 1.5rem );
	border-left: 1px solid var( --sla-ivory-dark );
}

.sla-craft-value:first-child {
	border-left: none;
}

.sla-craft-value__icon {
	width: 34px;
	height: 34px;
	color: var( --sla-champagne-gold );
	transition: transform 300ms ease;
}

.sla-craft-value:hover .sla-craft-value__icon {
	transform: scale( 1.08 ) translateY( -2px );
}

.sla-craft-value__title {
	font-family: var( --sla-font-display );
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var( --sla-peacock-navy );
}

.sla-craft-value__desc {
	font-family: var( --sla-font-body );
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	color: var( --sla-muted-blue );
}

/* -----------------------------------------------------------------------
 * Tablet.
 * --------------------------------------------------------------------- */
@media ( max-width: 1023.98px ) {
	.sla-craft__row {
		flex-direction: column;
		align-items: stretch;
		gap: 1.75rem;
	}

	/* Required mobile/tablet reading order is text (eyebrow/heading/
	 * description/CTA) -> media -> pull-quote — NOT the desktop DOM order
	 * (media, then a content block containing text+pull-quote together).
	 * .sla-craft__content is unwrapped via `display: contents` so its two
	 * children become direct flex items of .sla-craft__row alongside
	 * .sla-craft__media, and `order` places all three in the sequence the
	 * brief asks for without changing the underlying markup. */
	.sla-craft__content {
		display: contents;
	}

	.sla-craft__text {
		order: 0;
		max-width: 34rem;
		margin-inline: auto;
		text-align: center;
	}

	.sla-craft__media {
		order: 1;
		max-width: none;
	}

	.sla-craft__pullquote {
		order: 2;
		max-width: none;
	}

	.sla-craft__pullquote p {
		text-align: center;
	}

	.sla-craft__pullquote-divider {
		margin-inline: auto;
	}

	.sla-craft__values {
		grid-template-columns: repeat( 2, 1fr );
		row-gap: 2rem;
	}

	.sla-craft-value {
		border-left: none;
	}

	.sla-craft-value:nth-child(odd) {
		border-right: 1px solid var( --sla-ivory-dark );
	}
}

/* -----------------------------------------------------------------------
 * Mobile.
 * --------------------------------------------------------------------- */
@media ( max-width: 640px ) {
	.sla-craft__heading {
		font-size: clamp( 1.75rem, 1.5rem + 1.5vw, 2.25rem );
	}

	.sla-craft__values {
		grid-template-columns: repeat( 2, 1fr );
		row-gap: 1.75rem;
	}

	@media ( max-width: 380px ) {
		.sla-craft__values {
			grid-template-columns: 1fr;
		}

		.sla-craft-value:nth-child(odd) {
			border-right: none;
		}

		.sla-craft-value {
			border-left: none !important;
		}
	}
}

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

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

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

	.sla-craft__cta,
	.sla-craft__cta-arrow,
	.sla-craft-value__icon {
		transition: none;
	}
}