/**
 * StyleCloud Horizontal Gallery — frontend + editor shared styles.
 *
 * Structure (from render.php):
 *   section.stylecloud-horizontal-gallery > .stylecloud-horizontal-gallery__pin > .stylecloud-horizontal-gallery__track > .stylecloud-horizontal-gallery__panel …
 *
 * Each .stylecloud-horizontal-gallery__panel is a track item that holds any blocks (an image,
 * text, a section). Two modes:
 *   • Native (default) — the panels simply stack vertically. The editor,
 *     mobile, no-JS and reduced-motion users get this.
 *   • Pinned — added by view.js on desktop when motion is allowed. The
 *     section pins to the viewport and the panels become a horizontal
 *     track translated sideways as the page scrolls. The editorial
 *     vertical stagger lives here.
 *
 * Theme-respecting: colours and fonts read --wp--preset--* values from
 * theme.json when available, with neutral fallbacks otherwise. The block's
 * Color panel (background / text) overrides via Gutenberg's own classes.
 *
 * All custom properties are namespaced --hg-* and scoped to .stylecloud-horizontal-gallery so
 * nothing collides with the theme.
 *
 * Layout knobs set inline by render.php:
 *   --schg-stagger  multiplier on the per-panel vertical offset
 *   --schg-gap      space between panels (horizontal when pinned, vertical
 *                 when stacked)
 *   --schg-offset   per-panel vertical offset (set by a panel that overrides
 *                 the automatic stagger)
 */

.stylecloud-horizontal-gallery {
	--schg-gap:        5rem;
	--schg-stagger:    1;
	--schg-img-height: 62vh;   /* height cap for images inside panels */
	--schg-serif:      var(--wp--preset--font-family--serif, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);

	position: relative;
	background: var(--wp--preset--color--background, #f4efe6);
	color: var(--wp--preset--color--foreground, #20201d);
}
.stylecloud-horizontal-gallery,
.stylecloud-horizontal-gallery * { box-sizing: border-box; }

/* ─── Native default — panels stacked vertically ─────────────────── */
/* (editor / mobile / no-JS / reduced motion) */
.stylecloud-horizontal-gallery__pin {
	position: static;
	height: auto;
	overflow: visible;
}

.stylecloud-horizontal-gallery__track {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--schg-gap, 5rem);
	padding: 3rem clamp(1.5rem, 6vw, 5rem);
}

/* Each track child is a panel. */
.stylecloud-horizontal-gallery__track > * {
	flex: 0 0 auto;
	margin: 0;
}
.stylecloud-horizontal-gallery__panel {
	max-width: 86vw;   /* a panel never exceeds the viewport */
}

/* Images placed inside a panel keep the editorial sizing — capped height,
   never wider than the panel. */
.stylecloud-horizontal-gallery__panel img {
	display: block;
	max-width: 100%;
	max-height: var(--schg-img-height, 62vh);
	width: auto;
	height: auto;
}

/* A core Image block's caption inside a panel → editorial caption. */
.stylecloud-horizontal-gallery__panel figcaption,
.stylecloud-horizontal-gallery__panel .wp-element-caption {
	margin: 1.25rem auto 0;
	max-width: 24rem;
	text-align: center;
	font-family: var(--schg-serif);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.5;
	color: inherit;
}

/* ─── Pinned mode — added by view.js on desktop, motion allowed ──── */
/* The vertical stack becomes a horizontal track. */
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track {
	flex-direction: row;
	height: 100%;
	padding: 3rem clamp(2rem, 8vw, 9rem);
	overflow: visible;
	will-change: transform;
}

/* Automatic editorial stagger: a repeating six-step rhythm keyed off each
   panel's position in the track, so any number of panels gets the bob with
   no per-panel setup. --schg-stagger scales the whole effect (0 = flat).
   A panel with its own Vertical offset emits --schg-offset inline, which
   overrides the matching :nth-child rule below (inline beats the sheet).
   Only applies in pinned mode — a vertical stack has no stagger. */
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > * {
	transform: translateY( calc( var(--schg-offset, 0rem) * var(--schg-stagger, 1) ) );
}
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > *:nth-child(6n + 1) { --schg-offset: -7rem; }
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > *:nth-child(6n + 2) { --schg-offset:  5rem; }
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > *:nth-child(6n + 3) { --schg-offset: -11rem; }
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > *:nth-child(6n + 4) { --schg-offset:  9rem; }
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > *:nth-child(6n + 5) { --schg-offset: -3rem; }
.stylecloud-horizontal-gallery--pinned .stylecloud-horizontal-gallery__track > *:nth-child(6n + 6) { --schg-offset:  7rem; }