/**
 * Shared display-mode + scroll-reveal primitives — Phase 19.1.
 *
 * Consumed by woo-sil7en blocks via the `woo-sil7en-display*` classes
 * (woo_sil7en_display_classes()) + the `--woo-sil7en-cols` / `--woo-sil7en-track`
 * custom properties (woo_sil7en_display_style()). Layout values come from design
 * tokens; the column count comes from the locked grid enum. Motion is off the
 * main thread (scroll-driven) and fully gated for reduced-motion + no-support.
 *
 * Mobile-first: base is a single readable column; min-width container queries
 * enhance upward. Same DOM adapts with CSS only.
 */

/* ---- Base: grid mode (mobile-first: one column) ----------------------- *
 * Note: we intentionally use viewport @media, not @container — an element with
 * container-type can't be queried by its own size, so a self-referential
 * @container collapse is inert (the same trap stats hit in Phase 14).
 */
.woo-sil7en-display {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: 1fr;
}

/*
 * ACF wraps InnerBlocks in a single `.acf-innerblocks-container` div; make it
 * transparent so its children become real grid/flex items. Harmless for blocks
 * that render their items directly (repeaters).
 */
.woo-sil7en-display > .acf-innerblocks-container {
	display: contents;
}

/* Tablet: two columns. */
@media (min-width: 37.5rem) {
	.woo-sil7en-display--grid,
	.woo-sil7en-display--bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop: the chosen column count from the locked enum. */
@media (min-width: 60rem) {
	.woo-sil7en-display--grid,
	.woo-sil7en-display--bento {
		grid-template-columns: repeat(var(--woo-sil7en-cols, 3), minmax(0, 1fr));
	}
}

/* ---- Bento: dense mosaic, first child is the feature tile ------------- */
.woo-sil7en-display--bento {
	grid-auto-flow: row dense;
	grid-auto-rows: 1fr;
}

@media (min-width: 60rem) {
	.woo-sil7en-display--bento > :first-child:not(.acf-innerblocks-container),
	.woo-sil7en-display--bento > .acf-innerblocks-container > :first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* ---- Carousel: horizontal scroll-snap rail --------------------------- */
.woo-sil7en-display--carousel {
	grid-auto-flow: column;
	grid-auto-columns: var(--woo-sil7en-track, minmax(16rem, 22rem));
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--md);
	overscroll-behavior-x: contain;
	padding-block-end: var(--wp--preset--spacing--xs, 0.75rem);
}

.woo-sil7en-display--carousel > *,
.woo-sil7en-display--carousel > .acf-innerblocks-container > * {
	scroll-snap-align: start;
}

/* ---- Shared horizontal scrollbar — premium, token-driven -------------- *
 * Applied to the shared carousel mode and to any scroll container that adds
 * the reusable `woo-sil7en-scroll-x` class (e.g. the product-carousel rail).
 * A slim, rounded brand thumb over a subtle inset track, styled consistently
 * across Firefox (scrollbar-*) and Chromium/WebKit (::-webkit-scrollbar-*),
 * with a darker hover state.
 */
.woo-sil7en-display--carousel,
.woo-sil7en-scroll-x {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--primary, #531099) var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
}

.woo-sil7en-display--carousel::-webkit-scrollbar,
.woo-sil7en-scroll-x::-webkit-scrollbar {
	height: 0.625rem;
}

.woo-sil7en-display--carousel::-webkit-scrollbar-track,
.woo-sil7en-scroll-x::-webkit-scrollbar-track {
	background: var(--wp--preset--color--border, rgba(0, 0, 0, 0.08));
	border-radius: var(--wp--custom--radius--pill, 999px);
	margin-inline: var(--wp--preset--spacing--sm, 1rem);
}

.woo-sil7en-display--carousel::-webkit-scrollbar-thumb,
.woo-sil7en-scroll-x::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--primary, #531099);
	border: 0.1875rem solid transparent;
	background-clip: content-box;
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.woo-sil7en-display--carousel::-webkit-scrollbar-thumb:hover,
.woo-sil7en-scroll-x::-webkit-scrollbar-thumb:hover {
	background-color: var(--wp--preset--color--primary-hover, #400080);
}

/* ---- Scroll-reveal: staggered enter (progressive enhancement) -------- *
 * Items start in their FINAL state, so no-support / reduced-motion shows the
 * content normally. Only transform + opacity animate (compositor-only). Add
 * `woo-sil7en-reveal` to a container, or `woo-sil7en-reveal-item` to an item.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.woo-sil7en-reveal > :not(.acf-innerblocks-container),
		.woo-sil7en-reveal > .acf-innerblocks-container > *,
		.woo-sil7en-reveal-item {
			animation: woo-sil7en-reveal-in linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 25%;
		}

		@keyframes woo-sil7en-reveal-in {
			from {
				opacity: 0;
				transform: translateY(2rem);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}