/**
 * Layout Section — front end + editor canvas.
 *
 * The wrapper is the full-bleed background surface (block-supports colour
 * or gradient, plus the optional image layer); .layout-section__inner is
 * the grid-obedient container. 'content' width tracks the HOST THEME's own
 * grid — the theme sets --sx-content-width to whatever token it calls its
 * content measure. Layout classes are prefixed is-layout-sx-*
 * because core's layout support owns the bare is-layout-* namespace.
 *
 * Shaped edges are the shared layer's (includes/edges.php + assets/edges.css,
 * which declares the depth defaults on .sx-edge-host and owns the fill /
 * overlap wrapper); here we only fold the depths — and a neighbour's overlap —
 * into the block padding so content stays clear of the carved zone. Browsers
 * without mask support ignore the mask and show straight edges.
 */

.wp-block-aurora-arcade-section {
	/* Theme contract: --sx-content-width is the portable name every host sets.
	   --bodysoul-content-width remains as an inner fallback so that site
	   renders identically whether or not its theme adopts the portable name. */
	--sx-content-max: var(--sx-content-width, var(--bodysoul-content-width, 1600px));
	--sx-narrow-max: 720px;
	--sx-wide-max: 1920px;
	--sx-max: var(--sx-content-max);
	/* Side padding of the content column. A host theme that publishes its
	   page gutter as --sx-page-gutter (the inset its header, footer and
	   bands share) gets the content edge exactly on that line; otherwise
	   the plugin's own fluid inset. Same contract shape as content-width. */
	--sx-pad-inline: var(--sx-page-gutter, clamp(16px, 4vw, 64px));
	--sx-pad-block: clamp(40px, 9vh, 88px);
	--sx-pad-scale: 1;
	--sx-gap: clamp(16px, 2.5vw, 40px);
	--sx-focal: 50% 50%;
	/* Per-screen-size band padding (1.38.0). The -tier slot is filled per
	   screen size by the sheet includes/screen-tiers.php prints on the
	   aurora-arcade-edges handle, and only on a band carrying has-pad-tiers.
	   `initial` is the guaranteed-invalid value, so an unset slot makes the
	   var() below fall to the pre-1.38.0 expression and a nested section never
	   inherits its parent's. The edge multipliers are 1 = identity; a tier
	   that meets the edge sets one to 0 to drop the edge term (see .is-edge-bleed). */
	--sx-pad-top-tier: initial;
	--sx-pad-bottom-tier: initial;
	--sx-pad-top-laptop: initial;
	--sx-pad-top-tablet: initial;
	--sx-pad-top-mobile: initial;
	--sx-pad-bottom-laptop: initial;
	--sx-pad-bottom-tablet: initial;
	--sx-pad-bottom-mobile: initial;
	--sx-edge-pad-top: 1;
	--sx-edge-pad-bottom: 1;
	/* --sx-edge-default / --sx-edge-arch-default / --sx-edge-top / -bottom
	   come from .sx-edge-host in assets/edges.css. */

	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: var(--sx-min-height, auto);
	/* Vertical padding: the free value from the block's padding control
	   (--sx-pad-top/-bottom, set inline by render.php / edit.js) when there
	   is one, else the preset scale; the carved edge depth is added either
	   way so content never sits in the cut, and so is the depth of a
	   neighbour's edge laid over this side (--sx-overlap-*, handed over by
	   the neighbour pass in includes/edges.php). */
	/* --sx-host-pad-top/-bottom (1.20.0): a host that needs flush children
	   (content-slider in carousel mode) publishes it and wins over the free
	   value AND the preset; the edge depth is still added. Unset or
	   `initial` = the block's own. Same token the Split Section reads.
	   Order, outermost first: host token, the per-screen-size slot
	   (--sx-pad-top-tier, 1.38.0), the free value, the preset. The edge
	   depth is multiplied by --sx-edge-pad-* (1, or 0 where the content
	   meets the edge) so a screen size can drop the term without restating
	   this calc. */
	padding-top: calc(var(--sx-host-pad-top, var(--sx-pad-top-tier, var(--sx-pad-top, calc(var(--sx-pad-block) * var(--sx-pad-scale))))) + var(--sx-edge-top) * var(--sx-edge-pad-top) + var(--sx-overlap-top, 0px));
	padding-bottom: calc(var(--sx-host-pad-bottom, var(--sx-pad-bottom-tier, var(--sx-pad-bottom, calc(var(--sx-pad-block) * var(--sx-pad-scale))))) + var(--sx-edge-bottom) * var(--sx-edge-pad-bottom) + var(--sx-overlap-bottom, 0px));
}

.wp-block-aurora-arcade-section *,
.wp-block-aurora-arcade-section *::before,
.wp-block-aurora-arcade-section *::after {
	box-sizing: inherit;
}

.wp-block-aurora-arcade-section.is-valign-center {
	justify-content: center;
}

.wp-block-aurora-arcade-section.is-valign-bottom {
	justify-content: flex-end;
}

.wp-block-aurora-arcade-section.is-pad-none {
	--sx-pad-scale: 0;
}

.wp-block-aurora-arcade-section.is-pad-compact {
	--sx-pad-scale: 0.45;
}

.wp-block-aurora-arcade-section.is-pad-spacious {
	--sx-pad-scale: 1.7;
}

/* ------------------------------------------------------------------ */
/* Background image layer                                              */
/* ------------------------------------------------------------------ */
/* The layer, the scrim and the slideshow moved to assets/background.css
   at 1.22.0 (.sx-bg), shared with the Split Section's sides. What stays
   here is the alias: the layer reads --sx-bg-focal, this block emits
   --sx-focal. */

.wp-block-aurora-arcade-section {
	--sx-bg-focal: var(--sx-focal);
}

/* ------------------------------------------------------------------ */
/* Content container: obeys the grid                                   */
/* ------------------------------------------------------------------ */

.layout-section__inner {
	position: relative;
	width: 100%;
	max-width: min(100%, var(--sx-max));
	margin-inline: auto;
	/* The free horizontal padding (--sx-pad-left/-right, 1.17.0) beats the
	   page gutter: an inset from the content column's edge, which on a phone
	   is the viewport edge. */
	padding-left: var(--sx-pad-left, var(--sx-pad-inline));
	padding-right: var(--sx-pad-right, var(--sx-pad-inline));
}

.is-width-narrow {
	--sx-max: var(--sx-narrow-max);
}

.is-width-wide {
	--sx-max: var(--sx-wide-max);
}

.is-width-full {
	--sx-max: 100%;
}

/* Grow on large screens (1.31.0): the content area steps wider on 1920+ and
   2560+ screens. A theme sets the two widths with --sx-content-width-large /
   --sx-content-width-xl; max() keeps a theme whose own content width is wider
   from shrinking. Fixed breakpoints, like this file's 720/960 (see AGENTS.md
   "Configurable breakpoints"), on the +.02px boundary convention. Keyed on
   the block class so a nested section answers only to its own switch. */
@media (min-width: 1920.02px) {
	.wp-block-aurora-arcade-section.is-grow-wide {
		--sx-max: max(var(--sx-content-max), var(--sx-content-width-large, 2000px));
	}
}

@media (min-width: 2560.02px) {
	.wp-block-aurora-arcade-section.is-grow-wide {
		--sx-max: max(var(--sx-content-max), var(--sx-content-width-xl, 2400px));
	}
}

.layout-section__layout {
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Child layout: stack (plain flow) / grid / flex row                  */
/* ------------------------------------------------------------------ */
/* Every rule here walks section > inner > layout with child combinators
   (1.18.1). A descendant selector keyed on a state class reaches INTO a
   nested block that shares the vocabulary: `.is-layout-sx-grid
   .layout-section__layout` used to turn a stack section's layout into a
   grid whenever it sat in a grid section's cell, and `.is-valign-*` had the
   same effect on a hosted Split Section (blocks/split-section/style.css). */

.is-layout-sx-grid > .layout-section__inner > .layout-section__layout {
	display: grid;
	gap: var(--sx-gap);
	grid-template-columns: minmax(0, 1fr);
}

/* 720.02 / 960.02, not 721 / 961: the next tier starts just above the
   integer breakpoint so a fractional viewport width (device pixels / DPR,
   browser zoom) can never sit between two tiers — the plugin-wide
   convention, argued in includes/dynamic-css.php (ssec_dynamic_css()).
   Still hardcoded rather than read from ssec_get_breakpoints(); see
   AGENTS.md "Configurable breakpoints". */
@media (min-width: 720.02px) {
	.is-layout-sx-grid > .layout-section__inner > .layout-section__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960.02px) {
	.is-layout-sx-grid.is-cols-2 > .layout-section__inner > .layout-section__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.is-layout-sx-grid.is-cols-3 > .layout-section__inner > .layout-section__layout {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.is-layout-sx-grid.is-cols-4 > .layout-section__inner > .layout-section__layout {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.is-layout-sx-flex > .layout-section__inner > .layout-section__layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sx-gap);
	justify-content: center;
}

.is-layout-sx-flex.is-justify-start > .layout-section__inner > .layout-section__layout {
	justify-content: flex-start;
}

.is-layout-sx-flex.is-justify-end > .layout-section__inner > .layout-section__layout {
	justify-content: flex-end;
}

.is-layout-sx-flex.is-justify-between > .layout-section__inner > .layout-section__layout {
	justify-content: space-between;
}

/* Cell alignment inside grid/flex rows. */
.is-layout-sx-grid > .layout-section__inner > .layout-section__layout,
.is-layout-sx-flex > .layout-section__inner > .layout-section__layout {
	align-items: start;
}

.is-layout-sx-grid.is-valign-center > .layout-section__inner > .layout-section__layout,
.is-layout-sx-flex.is-valign-center > .layout-section__inner > .layout-section__layout {
	align-items: center;
}

.is-layout-sx-grid.is-valign-bottom > .layout-section__inner > .layout-section__layout,
.is-layout-sx-flex.is-valign-bottom > .layout-section__inner > .layout-section__layout {
	align-items: end;
}

/* Core blocks bring their own block margins; inside a grid/flex cell
   those fight the gap and misalign cell tops, so the gap owns spacing. */
.is-layout-sx-grid > .layout-section__inner > .layout-section__layout > *,
.is-layout-sx-flex > .layout-section__inner > .layout-section__layout > * {
	margin-block: 0;
}

/* Old-browser fallback — same invalid-at-computed-value-time trap as
   split-section/style.css: static stand-ins for the fluid tokens. */
@supports not (padding: clamp(1px, 2px, 3px)) {
	.wp-block-aurora-arcade-section {
		--sx-pad-inline: 32px;
		--sx-pad-block: 64px;
		--sx-gap: 24px;
	}
}

/* ------------------------------------------------------------------ */
/* Edge bleed: let the content run into the carved zone                 */
/* ------------------------------------------------------------------ */
/* By default the block adds each edge's depth to its padding, so a
   shaped edge cuts the band's BACKGROUND and the content sits safely
   below the carve. That is right for copy — a headline sliced in half by
   a scallop is a bug, not a design.

   With bleed on, the compensation is dropped: content fills the whole
   box, so the mask cuts across the content itself. Meant for imagery, a
   slider or a gallery, where being clipped by the shape IS the effect.
   The mask already applies to descendants, so nothing else is needed.

   Since 1.38.0 this only zeroes the multipliers the main padding calc
   already carries: computed-identical to the old restated calc (60px + 24px
   * 0 + 0), and it lets a screen size re-add or drop the term with a
   higher-specificity rule instead of restating the calc. */
.wp-block-aurora-arcade-section.is-edge-bleed {
	--sx-edge-pad-top: 0;
	--sx-edge-pad-bottom: 0;
}

/* On a full-width bleed band the inline gutter is the last thing holding
   media off the edge, so it goes too — "bleed" that stops 2rem short of
   the sides is not bleed. Width presets other than full keep it: their
   content is centred and still wants breathing room. */
.wp-block-aurora-arcade-section.is-edge-bleed.is-width-full > .layout-section__inner {
	padding-left: var(--sx-pad-left, 0px);
	padding-right: var(--sx-pad-right, 0px);
}

/* ------------------------------------------------------------------ */
/* Full-width children: `alignfull` breaks out of the column (1.18.0)  */
/* ------------------------------------------------------------------ */
/* The content column is a padded, centred box, so a child that wants the
   band's whole width — a Split Section, a slider, a Cover — stopped at the
   column's edge: the page gutter short of the viewport on a laptop, the
   whole centring margin on a wide screen. Neither `contentWidth: full`
   (keeps the gutter, on purpose) nor edge bleed (drops the vertical
   compensation too) was the control for it. The control is core's block
   toolbar alignment: a Full-width child reaches the section's edges.
   `alignwide` is deliberately NOT handled here — a host theme owns what
   "wide" measures (cupofrest caps wide children at its own wide size
   inside these sections) and the plugin's wide preset would override it.

   The child needs the SECTION's width, and CSS lets a descendant read an
   ancestor's size only through container-query units: the section becomes
   an inline-size query container and the child's side margin is
   (column − section) / 2 — a percentage margin resolves against the column
   (its containing block), 100cqi is the section's content box. width and
   max-width are reset because a theme's viewport-based `.alignfull` rule
   (`width: 100vw`) would otherwise size the child past the margins.

   Gated on the full-width child being PRESENT, via :has(), for two reasons.
   Inline-size containment makes the section's intrinsic width zero, which
   collapses it wherever it is sized by its content (a flex-row item, a
   float, an auto grid track): only a section actually hosting such a child
   pays that, and every other section is untouched by construction. And the
   margin rule carries the same :has(), so an engine without it drops both
   rules together (an unparseable selector invalidates the whole rule) and
   never reaches a `100cqi` that, with no container, would resolve against
   the viewport and overflow by a scrollbar. Stack layout only: a grid or
   flex cell cannot bleed. The edge-fill wrapper repeats the child's align
   class, so a Split Section with a fill inside a section bleeds through its
   wrapper. Verified on Playwright's Chromium (1.61) that container-type
   applies no layout containment, so a fixed-position descendant of the
   child stays viewport-anchored. */
.wp-block-aurora-arcade-section.is-layout-sx-stack:has(> .layout-section__inner > .layout-section__layout > .alignfull) {
	container-type: inline-size;
}

.wp-block-aurora-arcade-section.is-layout-sx-stack:has(> .layout-section__inner > .layout-section__layout > .alignfull) > .layout-section__inner > .layout-section__layout > .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc((100% - 100cqi) / 2);
}