.vrl-row {
	--vrl-cols: var(--vrl-cols-wide);
	--vrl-gap: var(--vrl-gap-wide);
	--vrl-justify: var(--vrl-justify-wide);
	--vrl-align: var(--vrl-align-wide);
	--vrl-direction: var(--vrl-direction-wide);
	--vrl-flex-basis: var(--vrl-flex-basis-wide, 0);
	--vrl-flex-default-grow: var(--vrl-flex-default-grow-wide, 1);
	--vrl-row-text: var(--vrl-row-text-wide, left);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	text-align: var(--vrl-row-text);
}

.vrl-row:not(.vrl-width-custom):not(.alignwide):not(.alignfull) {
	--vrl-row-max: var(--wp--style--global--content-size, 100%);
	width: 100%;
	max-width: var(--vrl-row-max);
	margin-inline: auto;
}

.vrl-row:not(.vrl-width-custom).alignwide {
	--vrl-row-max: var(
		--wp--style--global--wide-size,
		var(--wp--style--global--content-size, 100%)
	);
	width: 100%;
	max-width: var(--vrl-row-max);
	margin-inline: auto;
}

.vrl-row.vrl-width-custom:not(.alignfull) {
	width: min(100%, var(--vrl-custom-width)) !important;
	max-width: var(--vrl-custom-width) !important;
	margin-inline: auto !important;
}

.vrl-row__inner {
	flex: 1 1 auto;
	box-sizing: border-box;
	display: flex;
	flex-flow: var(--vrl-direction) wrap;
	gap: var(--vrl-gap);
	justify-content: var(--vrl-justify);
	align-items: var(--vrl-align);
}

.vrl-row__inner > .vrl-section {
	/* Falls back to --vrl-flex-default-grow (not a bare 1) so a Section beyond
	   the six explicit nth-child slots below - or between the declared column
	   count and the sixth slot, once wrapping - still gets the right default
	   instead of always growing to fill leftover space. */
	flex-grow: var(--vrl-flex-default-grow, 1);
	flex-shrink: 1;
	flex-basis: var(--vrl-flex-basis, 0);
	min-width: 0;
	/* The inner flex box always wraps, and a wrapping column (a stacked breakpoint)
	   sizes its line to the widest Section's max-content width, so long text or a
	   table pushed the whole Section (and the page) far past the screen. */
	max-width: 100%;
}

.vrl-section {
	--vrl-content-gap: var(--vrl-content-gap-wide, 0);
	--vrl-text: var(--vrl-text-wide);
	--vrl-media-margin-left: var(--vrl-media-margin-left-wide, 0);
	--vrl-media-margin-right: var(--vrl-media-margin-right-wide, 0);
	--vrl-media-width: var(--vrl-media-width-wide, auto);
	--vrl-self: var(--vrl-self-wide);
	--vrl-justify-self: var(--vrl-justify-self-wide, auto);
	--vrl-order: var(--vrl-order-wide);
	--vrl-content-direction: var(--vrl-content-direction-wide, column);
	--vrl-content-justify: var(--vrl-content-justify-wide, start);
	--vrl-content-align: var(--vrl-content-align-wide, stretch);
	box-sizing: border-box;
	position: relative;
	min-width: 0;
	text-align: var(--vrl-text);
	align-self: var(--vrl-self);
	justify-self: var(--vrl-justify-self);
	order: var(--vrl-order);
}

/* Space between a Section's own stacked blocks. Zero by default (the block.json
   default is 0), so existing content is unaffected until an author sets a gap.
   Skipped for a Flex-layout Section (.vrl-content-flex below handles spacing via
   the `gap` property instead) to avoid stacking both margin and gap together. */
.vrl-section:not(.vrl-content-flex) > * + *,
.vrl-section:not(.vrl-content-flex) > .vrl-section-content > * + * {
	margin-top: var(--vrl-content-gap);
}

/* A Section's Content layout set to Flex: its own direct children (or, once
   wrapped for theme/wide Content alignment, .vrl-section-content's children)
   become flex items laid out per contentDirection/-Justify/-Align, instead of
   a plain vertical block stack. Background/slideshow/video layers are always
   position:absolute, so they're unaffected either way. */
.vrl-section.vrl-content-flex,
.vrl-section.vrl-content-flex > .vrl-section-content {
	display: flex;
	flex-flow: var(--vrl-content-direction) wrap;
	gap: var(--vrl-content-gap);
	justify-content: var(--vrl-content-justify);
	align-items: var(--vrl-content-align);
}

/* Same wrapping-column sizing issue as Sections in a Row: keep each child within the Section. */
.vrl-section.vrl-content-flex > *,
.vrl-section.vrl-content-flex > .vrl-section-content > * {
	max-width: 100%;
}

/* A Section's text alignment centers text lines, but a fixed-width image or
   button needs its own box pulled to match, or decorative effects anchored to
   that box (e.g. motion circles) land beside empty space instead of the media. */
.vrl-section > .wp-block-image,
.vrl-section-content > .wp-block-image,
.vrl-section > .wp-block-buttons,
.vrl-section-content > .wp-block-buttons,
.vrl-section > .wp-block-button,
.vrl-section-content > .wp-block-button {
	width: var(--vrl-media-width);
	max-width: 100%;
	margin-left: var(--vrl-media-margin-left);
	margin-right: var(--vrl-media-margin-right);
}

.vrl-row.vrl-responsive-style,
.vrl-section.vrl-responsive-style {
	--vrl-color: var(--vrl-color-wide, inherit);
	--vrl-link: var(--vrl-link-wide, currentColor);
	--vrl-bg-color: var(--vrl-bg-color-wide, transparent);
	--vrl-bg-image: var(--vrl-bg-image-wide, none);
	--vrl-bg-position: var(--vrl-bg-position-wide, 50% 50%);
	--vrl-bg-size: var(--vrl-bg-size-wide, cover);
	--vrl-slide-fit: var(--vrl-slide-fit-wide, cover);
	--vrl-bg-repeat: var(--vrl-bg-repeat-wide, no-repeat);
	--vrl-bg-attachment: var(--vrl-bg-attachment-wide, scroll);
	--vrl-bg-opacity: var(--vrl-bg-opacity-wide, 1);
	--vrl-border-color: var(--vrl-border-color-wide, currentColor);
	--vrl-border-style: var(--vrl-border-style-wide, solid);
	--vrl-border-width-top: var(--vrl-border-width-top-wide, 0);
	--vrl-border-width-right: var(--vrl-border-width-right-wide, 0);
	--vrl-border-width-bottom: var(--vrl-border-width-bottom-wide, 0);
	--vrl-border-width-left: var(--vrl-border-width-left-wide, 0);
	--vrl-radius-top: var(--vrl-radius-top-wide, 0);
	--vrl-radius-right: var(--vrl-radius-right-wide, 0);
	--vrl-radius-bottom: var(--vrl-radius-bottom-wide, 0);
	--vrl-radius-left: var(--vrl-radius-left-wide, 0);
	--vrl-padding-top: var(--vrl-padding-top-wide, 0);
	--vrl-padding-right: var(--vrl-padding-right-wide, 0);
	--vrl-padding-bottom: var(--vrl-padding-bottom-wide, 0);
	--vrl-padding-left: var(--vrl-padding-left-wide, 0);
	--vrl-margin-top: var(--vrl-margin-top-wide, 0);
	--vrl-margin-right: var(--vrl-margin-right-wide, 0);
	--vrl-margin-bottom: var(--vrl-margin-bottom-wide, 0);
	--vrl-margin-left: var(--vrl-margin-left-wide, 0);
	color: var(--vrl-color) !important;
	border-color: var(--vrl-border-color) !important;
	border-style: var(--vrl-border-style) !important;
	border-width: var(--vrl-border-width-top) var(--vrl-border-width-right)
		var(--vrl-border-width-bottom) var(--vrl-border-width-left) !important;
	border-radius: var(--vrl-radius-top) var(--vrl-radius-right) var(--vrl-radius-bottom)
		var(--vrl-radius-left) !important;
	padding: var(--vrl-padding-top) var(--vrl-padding-right) var(--vrl-padding-bottom)
		var(--vrl-padding-left) !important;
}

/* Margin is forced `!important` everywhere it's safe to (see the 0.20.3 fix
   below beating WordPress core's own margin-centering rule), but two Row width
   modes rely on THEIR OWN margin to position the Row at all: a full-bleed Row
   needs core's `.alignfull { margin-inline: calc(50% - 50vw) }` to escape the
   theme's padded container, and a Custom-width Row needs its own
   `margin-inline: auto` (below) to stay centered. Forcing our margin here for
   either - even the harmless "0px" default - cancels that out and either
   breaks full-bleed or snaps a centered custom-width Row to the left. Skip it
   for both. */
.vrl-row.vrl-responsive-style:not(.alignfull):not(.vrl-width-custom),
.vrl-section.vrl-responsive-style {
	margin: var(--vrl-margin-top) var(--vrl-margin-right) var(--vrl-margin-bottom)
		var(--vrl-margin-left) !important;
}

/* A Theme content / Theme wide Row is centred by `margin-inline: auto`, which
   the forced side margins above replace - so a Row with any side margin snapped
   to the left of the page. Instead the side margins act as a minimum gutter:
   the Row takes the theme width (or what is left after the gutters) and the
   leftover space is split evenly, keeping it centred on the full page width. */
.vrl-row.vrl-responsive-style:not(.alignfull):not(.vrl-width-custom) {
	--vrl-row-width: min(
		var(--vrl-row-max),
		var(--vrl-preview-max, 100%),
		100% - var(--vrl-margin-left) - var(--vrl-margin-right)
	);
	width: var(--vrl-row-width) !important;
	max-width: none !important;
	margin-left: calc(
		var(--vrl-margin-left) +
			(100% - var(--vrl-margin-left) - var(--vrl-margin-right) - var(--vrl-row-width)) / 2
	) !important;
	margin-right: calc(
		var(--vrl-margin-right) +
			(100% - var(--vrl-margin-left) - var(--vrl-margin-right) - var(--vrl-row-width)) / 2
	) !important;
}

/* Those two Row width modes still honour a top/bottom margin the author
   actually set - only the sides belong to the width mode. Gated on
   .vrl-custom-margin (added only when a margin was set) so existing full-width
   Rows keep the theme's own vertical block spacing. */
.vrl-row.vrl-responsive-style.vrl-custom-margin.alignfull,
.vrl-row.vrl-responsive-style.vrl-custom-margin.vrl-width-custom {
	margin-top: var(--vrl-margin-top) !important;
	margin-bottom: var(--vrl-margin-bottom) !important;
}

/* `color` on the Row/Section wrapper only reaches descendants that don't already
   have their own explicit color - which core block typography and many themes'
   global "Elements" styles set directly on tags like p/h1-h6/li, blocking plain
   inheritance. Naming those tags here (as already done for `a` below) makes the
   chosen Text/Link colour actually take over.
   Because these are `!important`, they would also beat a colour picked on an
   inner block in the editor (core's .has-*-color classes are less specific, and
   a custom colour is a non-important inline style). So anything carrying its
   own colour is excluded: blocks with .has-text-color, links inside a block with
   .has-link-color, and buttons, which take their colours from button styles. */
.vrl-responsive-style :where(p, h1, h2, h3, h4, h5, h6, li, dt, dd, blockquote, cite, figcaption, label, caption, th, td):not(.has-text-color) {
	color: var(--vrl-color) !important;
}

.vrl-responsive-style a:not(.wp-element-button, .wp-block-button__link, .has-text-color, .has-link-color a) {
	color: var(--vrl-link) !important;
}

.vrl-row::before,
.vrl-section::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--vrl-bg-color, transparent);
	background-image: var(--vrl-bg-image, none);
	background-position: var(--vrl-bg-position, center center);
	background-size: var(--vrl-bg-size, cover);
	background-repeat: var(--vrl-bg-repeat, no-repeat);
	background-attachment: var(--vrl-bg-attachment, scroll);
	opacity: var(--vrl-bg-opacity, 1);
	pointer-events: none;
}

.vrl-has-background-layer {
	background-color: transparent !important;
	background-image: none !important;
}

.vrl-section > *:first-child {
	margin-block-start: 0;
}
.vrl-section > *:last-child {
	margin-block-end: 0;
}

/* 0.8: use normal WordPress full alignment, including its root-padding margins. */
.vrl-row.alignfull {
	width: auto;
	max-width: none;
}
.vrl-row__inner {
	min-width: 0;
	align-items: var(--vrl-align, stretch);
}
.vrl-equal-height > .vrl-row__inner {
	align-items: stretch;
}
.vrl-equal-height > .vrl-row__inner > .vrl-section {
	align-self: stretch;
}
.vrl-responsive-height {
	--vrl-min: var(--vrl-min-wide, 0px);
	min-height: var(--vrl-min) !important;
}
.vrl-section {
	--vrl-sep-left: var(--vrl-sep-left-wide, 0);
	--vrl-sep-right: var(--vrl-sep-right-wide, auto);
}
.vrl-section
	> .wp-block-separator:not(.alignleft):not(.alignright):not(.aligncenter):not(
		[style*='margin']
	) {
	margin-left: var(--vrl-sep-left) !important;
	margin-right: var(--vrl-sep-right) !important;
}

.vrl-row__inner > .vrl-section:nth-child(1) {
	flex-grow: var(--vrl-flex-1, var(--vrl-flex-default-grow, 1));
}
.vrl-row {
	--vrl-flex-1: var(--vrl-flex-wide-1, var(--vrl-flex-default-grow, 1));
}

.vrl-row__inner > .vrl-section:nth-child(2) {
	flex-grow: var(--vrl-flex-2, var(--vrl-flex-default-grow, 1));
}
.vrl-row {
	--vrl-flex-2: var(--vrl-flex-wide-2, var(--vrl-flex-default-grow, 1));
}

.vrl-row__inner > .vrl-section:nth-child(3) {
	flex-grow: var(--vrl-flex-3, var(--vrl-flex-default-grow, 1));
}
.vrl-row {
	--vrl-flex-3: var(--vrl-flex-wide-3, var(--vrl-flex-default-grow, 1));
}

.vrl-row__inner > .vrl-section:nth-child(4) {
	flex-grow: var(--vrl-flex-4, var(--vrl-flex-default-grow, 1));
}
.vrl-row {
	--vrl-flex-4: var(--vrl-flex-wide-4, var(--vrl-flex-default-grow, 1));
}

.vrl-row__inner > .vrl-section:nth-child(5) {
	flex-grow: var(--vrl-flex-5, var(--vrl-flex-default-grow, 1));
}
.vrl-row {
	--vrl-flex-5: var(--vrl-flex-wide-5, var(--vrl-flex-default-grow, 1));
}

.vrl-row__inner > .vrl-section:nth-child(6) {
	flex-grow: var(--vrl-flex-6, var(--vrl-flex-default-grow, 1));
}
.vrl-row {
	--vrl-flex-6: var(--vrl-flex-wide-6, var(--vrl-flex-default-grow, 1));
}