/* =============================================================================
   Parallax Columns (acf/parallax) — "Parallax Image Columns" Figma spec
   Full-bleed section → .theme-container → 3-column grid. The text stack is
   placed by grid-template-areas from the block's text-position class; photo
   columns keep DOM order (text, col 1–3) so mobile stacking is stable.
   Stagger comes from acf/spacer blocks baked into the patterns; motion from
   parallax.js at the per-column --parallax-factor custom props below.
   ============================================================================= */

.parallax--block {
	position: relative;
	padding: 90px 0;
	overflow: clip; /* translated columns must not spill into neighbor sections */
}

/* --- the grid (comp: 3 × 400px columns, ~110px gutters at 1400 container) --- */
.parallax--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: min(110px, 6vw);
	row-gap: min(110px, 6vw);
}

/* editor canvas only: ACF wraps InnerBlocks in a container div — promote its
   children to grid items (never matches on the front end) */
.parallax--grid > .acf-innerblocks-container { display: contents; }

/* children → areas (descendant selectors so the editor's extra div still works) */
.parallax--grid .parallax--text  { grid-area: t; min-width: 0; }
.parallax--grid .parallax--col-1 { grid-area: c1; --parallax-factor: 0.05; }
.parallax--grid .parallax--col-2 { grid-area: c2; --parallax-factor: 0.08; }
.parallax--grid .parallax--col-3 { grid-area: c3; --parallax-factor: 0.12; }
.parallax--grid .parallax--col   { min-width: 0; will-change: transform; }

/* stagger spacers own their offset — the acf/spacer prints a <style> tag before
   its div, so the column's blockGap would otherwise add a gap above the spacer */
.parallax--grid .parallax--col > .wp-block-acf-spacer { margin-block-start: 0; }

/* --- text-position variants --- */
.parallax--text-wide  .parallax--grid { grid-template-areas: "c1 t  t"  "c1 c2 c3"; }
.parallax--text-wide-left .parallax--grid { grid-template-areas: "t  t  c3" "c1 c2 c3"; }
.parallax--text-col-1 .parallax--grid { grid-template-areas: "t  c2 c3" "c1 c2 c3"; }
.parallax--text-col-2 .parallax--grid { grid-template-areas: "c1 t  c3" "c1 c2 c3"; }
.parallax--text-col-3 .parallax--grid { grid-template-areas: "c1 c2 t"  "c1 c2 c3"; }

/* =============================================================================
   Mobile collapse (<756px) — no mobile comps yet; assumption flagged to Dapper.
   Full-width stack in DOM order (text → col 1 → col 2 → col 3); the patterns'
   acf/spacer stagger blocks are 0 at the initial breakpoint, and parallax.js
   clears transforms below this width.
   ============================================================================= */
@media (max-width: 755.98px) {
	.parallax--block { padding: 45px 0; }

	.parallax--grid { display: block; }
	.parallax--grid .parallax--col { transform: none !important; }

	/* stagger spacers vanish, and the desktop tile gaps (110–180px blockGap)
	   normalize to standard 24px rhythm in the stack */
	.parallax--grid .parallax--col > .wp-block-acf-spacer { display: none; }
	.parallax--grid .parallax--col > * + * { margin-block-start: 24px; }
	.parallax--grid .parallax--text + .parallax--col,
	.parallax--grid .parallax--col + .parallax--col { margin-block-start: 40px; }
}