/*
 * Shubh Laabh Arts — Homepage "Sacred Forms, Timeless Blessings" collections
 * section (assets/js/homepage-collections.js drives the scroll-reveal).
 *
 * Matches design-reference/collection-design-reference.png: pure white
 * background, a two-tone editorial heading with lotus dividers, botanical
 * side artwork + editorial side text on wide desktop only, and a 4-column
 * desktop / 3-column tablet / 2-column mobile grid of plain rectangular
 * cards — each with a per-card accent color (gold/wine/antique-gold/
 * emerald, cycling every 4 cards, set via the --sla-card-accent custom
 * property inline per card — see inc/homepage-collections.php) used for the
 * Explore label, the circular arrow CTA, and a thin bottom edge. No
 * clip-path, no mask, no decorative card silhouette anywhere in this file.
 *
 * A trailing, incomplete final row (11 products over N columns never
 * divides evenly at every breakpoint) is centered rather than left-aligned
 * via a "doubled grid track" technique: every breakpoint's real column
 * count is doubled as actual tracks, each card spans 2 of them (a full row
 * looks identical to a plain N-column grid), and only a trailing row's
 * cards get an explicit grid-column-start — via the --sla-tail-{d,t,m}
 * custom properties computed in PHP — landing them on the half-column
 * boundary that centers the group. See the grid rules below.
 *
 * Colors/fonts come from assets/css/design-tokens.css's --sla-* tokens and
 * header-footer.css's --sla-container-max (both loaded globally before this
 * file — see functions.php) rather than being redefined here, so this
 * section is guaranteed to stay in sync with the rest of the site's palette
 * and content width — including --sla-wine and --sla-antique-gold, added to
 * theme.json's palette specifically for this section's accent colors.
 */

.sla-collections {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #ffffff;
	padding-block: clamp( 3rem, 2.2rem + 3vw, 4.375rem );
}

/* -----------------------------------------------------------------------
 * Side columns — botanical line art + small editorial text, desktop only.
 * Shown from 1300px (ordinary laptop widths — 1366/1440/1536 — included,
 * not just ultra-wide monitors): .sla-collections__inner's own max-width
 * is pulled in slightly at this same breakpoint (see below) to reserve
 * guaranteed margin for these columns, so they can never overlap the grid
 * regardless of viewport width within this range.
 * --------------------------------------------------------------------- */
.sla-collections__side,
.sla-collections__side-text-block {
	display: none;
	position: absolute;
	z-index: 0;
	width: clamp( 64px, 5.5vw, 108px );
	pointer-events: none;
}

.sla-collections__side {
	flex-direction: column;
}

@media ( min-width: 1300px ) {
	.sla-collections__side,
	.sla-collections__side-text-block {
		display: flex;
	}
}

/* Left: one bundled column (art, then its own small divider, then text),
 * aligned near the TOP of the section — roughly level with the grid's
 * first row, matching the reference. */
.sla-collections__side--left {
	left: clamp( 0.5rem, 2.2vw, 2rem );
	top: 11rem;
	align-items: flex-start;
}

/* Right botanical art stands alone (no adjacent text — see the separate
 * .sla-collections__side-text-block--right below), aligned near the
 * BOTTOM of the section, mirroring the left art horizontally via scaleX. */
.sla-collections__side--right {
	right: clamp( 0.5rem, 2.2vw, 2rem );
	bottom: 3rem;
	align-items: flex-end;
}

.sla-collections__side--right .sla-collections__branch {
	transform: scaleX( -1 );
}

/* Right editorial text stands alone, aligned near the very TOP of the
 * section — level with the eyebrow/heading, matching the reference. */
.sla-collections__side-text-block--right {
	right: clamp( 0.5rem, 2.2vw, 2rem );
	top: 5rem;
	flex-direction: column;
	align-items: flex-end;
}

.sla-collections__branch {
	width: 70%;
	height: auto;
	color: var( --sla-champagne-gold );
	opacity: 0.35;
	fill: currentColor;
	stroke: currentColor;
}

.sla-collections__side-divider {
	width: 28px;
	height: 1px;
	margin: 0.6rem 0;
	background: linear-gradient( 90deg, var( --sla-champagne-gold ), transparent );
	opacity: 0.7;
}

.sla-collections__side--right .sla-collections__side-divider,
.sla-collections__side-text-block--right .sla-collections__side-divider {
	background: linear-gradient( 270deg, var( --sla-champagne-gold ), transparent );
	margin-left: auto;
}

.sla-collections__side-text {
	margin: 0;
	font-family: var( --sla-font-display );
	font-style: italic;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 2;
	color: var( --sla-champagne-gold );
	opacity: 0.85;
}

.sla-collections__side--left .sla-collections__side-text {
	text-align: left;
}

.sla-collections__side-text-block--right .sla-collections__side-text {
	text-align: right;
}

/* -----------------------------------------------------------------------
 * Header — eyebrow / two-tone heading / description, centered, framed by
 * lotus dividers above and below.
 * --------------------------------------------------------------------- */
.sla-collections__inner {
	position: relative;
	z-index: 1;
	max-width: var( --sla-container-max );
	margin-inline: auto;
	padding-inline: clamp( 1.5rem, 4vw, 4.5rem );
}

/* Reserves guaranteed margin for the side botanical art/text (see above)
 * once they're shown, so the grid can never overlap them. Placed AFTER
 * the base rule above (same selector/specificity — source order decides,
 * so this must come later to win at >=1300px). */
@media ( min-width: 1300px ) {
	.sla-collections__inner {
		max-width: min( var( --sla-container-max ), 100% - clamp( 9rem, 15vw, 16rem ) );
	}
}

.sla-collections__header {
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: clamp( 2.25rem, 1.8rem + 2vw, 3.5rem );
	text-align: center;
}

.sla-collections__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.sla-collections__divider--small {
	margin-top: 1.35rem;
	margin-bottom: 0;
}

.sla-collections__divider-line {
	width: clamp( 40px, 6vw, 90px );
	height: 1px;
	background: linear-gradient( 90deg, transparent, var( --sla-champagne-gold ), transparent );
}

.sla-collections__lotus {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var( --sla-champagne-gold );
}

.sla-collections__divider--small .sla-collections__lotus {
	width: 12px;
	height: 12px;
}

.sla-collections__header .sla-eyebrow {
	display: block;
	margin-bottom: 0.6rem;
}

.sla-collections__heading {
	font-family: var( --sla-font-display );
	font-weight: 600;
	font-size: clamp( 2.1rem, 1.5rem + 2.2vw, 3.25rem );
	line-height: 1.15;
	color: var( --sla-peacock-navy );
	margin: 0 0 0.85rem;
}

.sla-collections__heading-accent {
	color: var( --sla-wine );
}

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

/* -----------------------------------------------------------------------
 * Grid — 4 columns desktop, 3 tablet, 2 mobile. Every breakpoint uses
 * DOUBLE the real column count as actual grid tracks (8/6/4), with each
 * card spanning 2 tracks — a plain `span 2` card still renders at exactly
 * 1/4, 1/3 or 1/2 width (the gutter between a card's own two tracks is
 * absorbed into its box, so nothing visually changes for a full row).
 * The extra tracks only matter for a trailing, INCOMPLETE final row: such
 * a row's cards get an explicit `grid-column-start` (via the
 * --sla-tail-{d,t,m} custom properties set per card in
 * inc/homepage-collections.php) that lands them on odd/half-column
 * boundaries, centering the group instead of leaving it left-aligned or
 * stretched — see the tail-attribute rules further down.
 * --------------------------------------------------------------------- */
.sla-collections__grid {
	display: grid;
	grid-template-columns: repeat( 8, 1fr );
	gap: clamp( 1.25rem, 1rem + 1.2vw, 2rem ) clamp( 1.1rem, 0.9rem + 0.9vw, 1.75rem );
}

@media ( max-width: 1100px ) {
	.sla-collections__grid {
		grid-template-columns: repeat( 6, 1fr );
	}
}

@media ( max-width: 640px ) {
	.sla-collections__grid {
		grid-template-columns: repeat( 4, 1fr );
		gap: 1.5rem 1rem;
	}
}

/* Trailing-row centering — gated per breakpoint so a card's desktop tail
 * placement never leaks into the tablet/mobile ranges (each breakpoint
 * only ever gets its OWN --sla-tail-{d,t,m} value, computed for that
 * breakpoint's column count). */
.sla-collections__card-reveal[data-sla-tail-d] {
	grid-column: var( --sla-tail-d ) / span 2;
}

@media ( max-width: 1100px ) {
	.sla-collections__card-reveal[data-sla-tail-d] {
		grid-column: span 2;
	}

	.sla-collections__card-reveal[data-sla-tail-t] {
		grid-column: var( --sla-tail-t ) / span 2;
	}
}

@media ( max-width: 640px ) {
	.sla-collections__card-reveal[data-sla-tail-t] {
		grid-column: span 2;
	}

	.sla-collections__card-reveal[data-sla-tail-m] {
		grid-column: var( --sla-tail-m ) / span 2;
	}
}

/* Reveal wrapper — the direct grid item / [data-sla-reveal-item]. Kept
 * separate from .sla-collections__card itself (not the same element) so
 * the reveal animation's own translateY rule (higher specificity, since it
 * requires the .is-revealed ancestor class) can never fight the card's
 * OWN independent hover-lift translateY. Purely structural: no visible
 * styling of its own; flex + the card's flex:1 below keep every card in a
 * row stretching to match row height. grid-column: span 2 is the default
 * placement for every card (see the doubled-track grid comment above); a
 * trailing card's [data-sla-tail-*] attribute overrides only its
 * grid-column-start, per breakpoint. */
.sla-collections__card-reveal {
	display: flex;
	grid-column: span 2;
}

/* -----------------------------------------------------------------------
 * Card — a plain rectangular tile: white background, small corner
 * rounding, a real unmasked product photo, and a per-card accent color
 * (--sla-card-accent, set inline per card in the PHP) used only for small
 * details — the Explore label, the arrow circle, and a thin bottom edge —
 * never as the card's own background.
 * --------------------------------------------------------------------- */
.sla-collections__card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	text-decoration: none;
	background: #ffffff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 6px 16px -14px color-mix( in srgb, var( --sla-peacock-navy ) 40%, transparent );
	transition: transform 320ms ease, box-shadow 320ms ease;
}

.sla-collections__card:hover,
.sla-collections__card:focus-visible {
	transform: translateY( -5px );
	box-shadow: 0 18px 32px -18px color-mix( in srgb, var( --sla-peacock-navy ) 50%, transparent );
}

.sla-collections__card:focus-visible {
	outline: 2px solid var( --sla-card-accent, var( --sla-champagne-gold ) );
	outline-offset: 3px;
}

/* Thin accent edge along the very bottom of the card — a ::after pseudo-
 * element rather than an extra HTML element: since the card is a column
 * flex container, ::after simply becomes its last item, i.e. sits flush
 * along the bottom automatically. */
.sla-collections__card::after {
	content: "";
	display: block;
	height: 3px;
	background: var( --sla-card-accent, var( --sla-champagne-gold ) );
	transition: height 250ms ease;
}

.sla-collections__card:hover::after,
.sla-collections__card:focus-visible::after {
	height: 4px;
}

/* ---- Product photo — real image, natural rectangle, no mask ----
 * Every imported product image is a natural 1:1 square (see the product
 * importer) — aspect-ratio:1/1 matches that exactly, so object-fit:cover
 * crops nothing in practice. Two images are stacked (primary + the
 * product's own second/gallery photo) and crossfaded on hover — pure CSS,
 * no JS — with a very subtle zoom alongside it. */
.sla-collections__card-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ffffff;
}

.sla-collections__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 450ms ease, transform 450ms ease;
}

.sla-collections__card-img--primary {
	z-index: 1;
	opacity: 1;
}

.sla-collections__card-img--hover {
	z-index: 2;
	opacity: 0;
}

.sla-collections__card:hover .sla-collections__card-img--hover,
.sla-collections__card:focus-visible .sla-collections__card-img--hover {
	opacity: 1;
}

.sla-collections__card:hover .sla-collections__card-img--primary,
.sla-collections__card:focus-visible .sla-collections__card-img--primary {
	opacity: 0;
}

.sla-collections__card:hover .sla-collections__card-img,
.sla-collections__card:focus-visible .sla-collections__card-img {
	transform: scale( 1.02 );
}

/* ---- Info strip: name + Explore on the left, arrow circle on the right ---- */
.sla-collections__card-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.75rem 0.85rem;
}

.sla-collections__card-text {
	display: flex;
	flex-direction: column;
	text-align: left;
	min-width: 0;
}

.sla-collections__card-name {
	font-family: var( --sla-font-display );
	font-weight: 600;
	font-size: clamp( 1.25rem, 1.15rem + 0.4vw, 1.375rem ); /* ~20-22px */
	line-height: 1.25;
	color: var( --sla-peacock-navy );
}

/* Spiritual Significance — one dynamic line pulled from the product's own
 * "Shubh Laabh Details" meta box (see SLA_Product_Fields), never hardcoded.
 * Omitted entirely from the markup (not just hidden) when a product has no
 * value set, so it never leaves blank space in the card. Clamped to one
 * line so a long value can never grow the card taller than its neighbors. */
.sla-collections__card-significance {
	margin-top: 0.15rem;
	font-family: var( --sla-font-body );
	font-size: 0.8125rem;
	font-weight: 500;
	font-style: italic;
	color: var( --sla-muted-blue );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sla-collections__card-explore {
	margin-top: 0.2rem;
	font-family: var( --sla-font-body );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --sla-card-accent, var( --sla-champagne-gold ) );
	transition: color 250ms ease;
}

.sla-collections__card-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var( --sla-card-accent, var( --sla-champagne-gold ) );
	color: #ffffff;
	transition: transform 300ms ease;
}

.sla-collections__card-arrow svg {
	width: 14px;
	height: 14px;
	transition: transform 250ms ease;
}

.sla-collections__card:hover .sla-collections__card-arrow,
.sla-collections__card:focus-visible .sla-collections__card-arrow {
	transform: scale( 1.08 );
}

.sla-collections__card:hover .sla-collections__card-arrow svg,
.sla-collections__card:focus-visible .sla-collections__card-arrow svg {
	transform: translateX( 2px );
}

/* Mobile: tighter still. */
@media ( max-width: 640px ) {
	.sla-collections__card-body {
		padding: 0.6rem 0.65rem;
	}

	.sla-collections__card-name {
		font-size: clamp( 1rem, 0.94rem + 0.3vw, 1.125rem ); /* ~16-18px */
	}

	.sla-collections__card-significance {
		font-size: 0.75rem;
	}

	.sla-collections__card-explore {
		font-size: 0.625rem;
	}

	.sla-collections__card-arrow {
		width: 28px;
		height: 28px;
	}

	.sla-collections__card-arrow svg {
		width: 12px;
		height: 12px;
	}
}

/* -----------------------------------------------------------------------
 * Scroll-reveal — heading fades/slides in, cards follow with a slight
 * stagger (assets/js/homepage-collections.js sets .is-revealed on the
 * section once it enters the viewport). Hidden-by-default state lives
 * here, not inline, so a visitor with JS disabled — who never gets
 * .is-revealed — always sees the section immediately rather than stuck
 * invisible.
 * --------------------------------------------------------------------- */
.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-collections.is-revealed [data-sla-reveal-item] {
	opacity: 1;
	transform: translateY( 0 );
}

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

	.sla-collections__card,
	.sla-collections__card-img,
	.sla-collections__card-explore,
	.sla-collections__card-arrow,
	.sla-collections__card::after {
		transition: none;
	}
}