.wp-block-cni-blocks-auto-grid {
	--cni-grid-card-current-padding-x: var(--cni-grid-card-padding-h-pc, var(--cni-grid-card-padding-pc, 24px));
	--cni-grid-card-current-padding-y: var(--cni-grid-card-padding-v-pc, var(--cni-grid-card-padding-pc, 24px));
	--cni-grid-min-width-current: var(--cni-grid-min-width-pc, 280px);
	display: grid;
	border: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cni-grid-min-width-pc, 280px)), 1fr));
	column-gap: var(--cni-grid-gap-x, 24px);
	row-gap: var(--cni-grid-gap-y, 24px);
	align-items: stretch;
}

.wp-block-cni-blocks-auto-grid[data-equal-height="0"] {
	align-items: start;
}

.wp-block-cni-blocks-auto-grid[data-card-width-mode="fixed"],
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-card-width-mode="fixed"] > .block-editor-inner-blocks > .block-editor-block-list__layout {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cni-grid-min-width-current, 280px)), var(--cni-grid-card-max-width, 280px)));
	justify-content: var(--cni-grid-card-track-alignment, start);
}

/* Cell grid mode: the container background becomes the shared grid line.
 * A spanning cell covers the gap between its tracks, so lines never double. */
.wp-block-cni-blocks-auto-grid.cni-grid--cell {
	display: block;
	border: 0;
	background: transparent;
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell > .cni-cell-grid-scroll {
	width: 100%;
	border-radius: var(--cni-cell-radius, 0);
	overflow: hidden;
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell .cni-cell-grid-content {
	display: grid;
	grid-template-columns: repeat(var(--cni-cell-columns-pc, 3), minmax(0, 1fr));
	column-gap: var(--cni-cell-vertical-border-width, 1px);
	row-gap: var(--cni-cell-horizontal-border-width, 1px);
	padding: var(--cni-cell-outer-border-width, 2px);
	border-radius: inherit;
	background: var(--cni-cell-border-color, #ddd);
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] .cni-cell-grid-content {
	position: relative;
	gap: 0;
	padding: 0;
	border: var(--cni-cell-outer-border-width, 0) solid var(--cni-cell-border-color, #ddd);
	background: transparent;
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] .cni-cell-grid-content::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: var(--cni-cell-vertical-line-gradient-pc, none);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	content: '';
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] .wp-block-cni-blocks-grid-card {
	position: relative;
	z-index: 1;
	border-bottom: var(--cni-cell-horizontal-border-width, 0) solid var(--cni-cell-border-color, #ddd);
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] .wp-block-cni-blocks-grid-card.cni-grid-card--cell-last-row {
	border-bottom-width: 0;
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-first-column] .cni-cell-grid-content {
	grid-template-columns: minmax(0, var(--cni-cell-first-column)) repeat(var(--cni-cell-columns-after-first), minmax(0, 1fr));
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card {
	min-width: 0;
	height: auto;
	padding: var(--cni-cell-padding-top, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-right, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-bottom, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-left, var(--cni-cell-padding, 24px));
	border: 0;
	border-radius: 0;
	background: var(--cni-cell-background, #fff);
	color: var(--cni-cell-text-color, inherit);
	box-shadow: none;
	grid-column: span var(--cni-cell-column-span, 1);
	grid-row: span var(--cni-cell-row-span, 1);
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card > .cni-grid-card__inner {
	justify-content: var(--cni-cell-content-align, flex-start);
	text-align: var(--cni-cell-text-align, left);
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card.has-cni-grid-card-link:hover {
	transform: none;
}

.wp-block-cni-blocks-auto-grid.cni-grid--cell .cni-cell-grid-scroll-hint {
	display: none;
	margin: 8px 0 0;
	font-size: .85em;
	color: #5b6470;
}

.cni-grid-card--last-row-centered {
	position: relative;
	left: var(--cni-grid-last-row-offset, 0px);
}

.wp-block-cni-blocks-grid-card {
	position: relative;
	display: flex;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	padding: var(--cni-grid-card-padding-v-pc, var(--cni-grid-card-padding-pc, 24px)) var(--cni-grid-card-padding-h-pc, var(--cni-grid-card-padding-pc, 24px));
	border: var(--cni-grid-card-border-width, 0) solid var(--cni-grid-card-border-color, #ddd);
	border-radius: var(--cni-grid-card-radius, 8px);
	background: var(--cni-grid-card-background, #fff);
	box-shadow: var(--cni-grid-card-shadow, none);
}

/* Flow arrows are attached to the actual card sequence by view.js/editor JS.
 * This keeps arrows out of a wrapped row's empty edge in auto-fit grids. */
.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before {
	position: absolute;
	z-index: 6;
	display: grid;
	width: var(--cni-grid-flow-arrow-size, 24px);
	height: var(--cni-grid-flow-arrow-size, 24px);
	color: var(--cni-grid-flow-arrow-color, #1e73be);
	font-family: sans-serif;
	font-size: var(--cni-grid-flow-arrow-size, 24px);
	font-weight: 700;
	line-height: 1;
	place-items: center;
	pointer-events: none;
	content: '→';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="chevron"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="chevron"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before {
	box-sizing: border-box;
	width: calc(var(--cni-grid-flow-arrow-size, 24px) * .62);
	height: calc(var(--cni-grid-flow-arrow-size, 24px) * .62);
	border: solid currentColor;
	border-width: 0 calc(var(--cni-grid-flow-arrow-size, 24px) * .14) calc(var(--cni-grid-flow-arrow-size, 24px) * .14) 0;
	background: transparent;
	content: '';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="arrow"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="arrow"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before {
	width: var(--cni-grid-flow-arrow-size, 24px);
	height: calc(var(--cni-grid-flow-arrow-size, 24px) * .56);
	background: currentColor;
	clip-path: polygon(0 38%, 58% 38%, 58% 0, 100% 50%, 58% 100%, 58% 62%, 0 62%);
	content: '';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="circle"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="circle"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow]::before {
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: calc(var(--cni-grid-flow-arrow-size, 24px) * .72);
	content: '→';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="right"]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="right"]::before {
	top: var(--cni-grid-flow-arrow-y, 50%);
	left: calc(100% + (var(--cni-grid-gap-x, 24px) / 2));
	transform: translate(calc(-50% + var(--cni-grid-flow-arrow-offset-x, 0px)), calc(-50% + var(--cni-grid-flow-arrow-offset-y, 0px)));
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="chevron"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="right"]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="chevron"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="right"]::before {
	transform: translate(calc(-50% + var(--cni-grid-flow-arrow-offset-x, 0px)), calc(-50% + var(--cni-grid-flow-arrow-offset-y, 0px))) rotate(-45deg);
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before {
	bottom: calc((var(--cni-grid-gap-y, 24px) + var(--cni-grid-flow-arrow-size, 24px)) / -2);
	left: 50%;
	transform: translateX(calc(-50% + var(--cni-grid-flow-arrow-offset-x, 0px)));
	content: '↓';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="arrow"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="arrow"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before {
	transform: translateX(calc(-50% + var(--cni-grid-flow-arrow-offset-x, 0px))) rotate(90deg);
	content: '';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="chevron"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="chevron"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before {
	transform: translateX(calc(-50% + var(--cni-grid-flow-arrow-offset-x, 0px))) rotate(45deg);
	content: '';
}

.wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="circle"] > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-cni-flow-arrows="circle"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card[data-cni-flow-arrow="down"]::before {
	content: '↓';
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link {
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link:not(.cni-grid-card--hover-none):not(.cni-grid-card--hover-darken):hover {
	transform: translateY(-8px);
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__link {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: inherit;
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link::after {
	position: absolute;
	z-index: 3;
	inset: 0;
	border-radius: inherit;
	background: rgba( 0, 0, 0, 0.24 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
	content: '';
}

.wp-block-cni-blocks-grid-card.cni-grid-card--hover-darken:hover::after,
.wp-block-cni-blocks-grid-card.cni-grid-card--hover-lift-darken:hover::after {
	opacity: 1;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__link-arrow {
	position: absolute;
	z-index: 4;
	right: max( 16px, var(--cni-grid-card-current-padding-x, 24px) );
	bottom: max( 16px, var(--cni-grid-card-current-padding-y, 24px) );
	display: grid;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	color: inherit;
	font-size: 22px;
	line-height: 1;
	place-items: center;
	pointer-events: none;
	transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link:hover > .cni-grid-card__link-arrow {
	transform: translateX( 4px );
}

.wp-block-cni-blocks-grid-card.cni-grid-card--hover-darken:hover > .cni-grid-card__link-arrow,
.wp-block-cni-blocks-grid-card.cni-grid-card--hover-lift-darken:hover > .cni-grid-card__link-arrow {
	background: rgba( 255, 255, 255, 0.98 );
	color: #111;
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

/* Reserve room for the arrow only in the final text/content block.  Padding
 * the whole inner wrapper would make every preceding block look left-aligned. */
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link:has(> .cni-grid-card__link-arrow) > .cni-grid-card__inner > :not(.wp-block-image):last-child {
	padding-inline-end: 48px;
}

.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner a,
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner button,
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner input,
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner select,
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner textarea,
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner summary,
.wp-block-cni-blocks-grid-card.has-cni-grid-card-link > .cni-grid-card__inner [role="button"] {
	position: relative;
	z-index: 3;
	pointer-events: auto;
}

.wp-block-cni-blocks-auto-grid[data-equal-height="0"] > .wp-block-cni-blocks-grid-card {
	height: auto;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}

/* Floats do not align flex items. Preserve image sizing while making the
 * standard left/right alignment work in the card's vertical content stack. */
.wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image.alignleft,
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image.alignleft {
	align-self: flex-start;
	margin-left: 0;
	margin-right: 1em;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image.alignright,
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image.alignright {
	align-self: flex-end;
	margin-left: auto;
	margin-right: 0;
}

/* A card badge stays outside InnerBlocks, so it remains a decorative layer
 * and never changes the user's block order. The media-anchor variables are
 * only filled by the targeted editor/front-end observer when needed. */
.wp-block-cni-blocks-grid-card > .cni-grid-card__badge {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 1.8em;
	padding: .35em .7em;
	background: var(--cni-grid-badge-background, #1e73be);
	color: var(--cni-grid-badge-text-color, #fff);
	font-size: var(--cni-grid-badge-text-size, 14px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	pointer-events: none;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--preset-rounded {
	border-radius: .45em;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--preset-pill {
	border-radius: 999px;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--preset-outline {
	border: 1px solid currentColor;
	background: transparent;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--preset-circle {
	min-width: 2.4em;
	min-height: 2.4em;
	padding: .35em;
	border-radius: 50%;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--icon {
	font-size: var(--cni-grid-badge-icon-size, 16px);
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge-icon {
	/* Lightning applies a generic right margin to every <i>. Badge spacing is
	 * controlled by the wrapper's gap, so reset only this decorative icon. */
	margin: 0 !important;
	font-size: var(--cni-grid-badge-icon-size, 16px);
	line-height: 1;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--image {
	min-height: 0;
	padding: 0;
	background: transparent;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--image > img {
	display: block;
	width: var(--cni-grid-badge-image-width, 80px);
	height: auto;
	max-width: none;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge-placeholder {
	display: grid;
	width: var(--cni-grid-badge-image-width, 80px);
	min-height: 2.4em;
	border: 1px dashed currentColor;
	place-items: center;
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--top-left {
	left: var(--cni-grid-badge-anchor-left, 0px);
	top: var(--cni-grid-badge-anchor-top, 0px);
	transform: translate(var(--cni-grid-badge-offset-x), var(--cni-grid-badge-offset-y));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--top-center {
	left: calc(var(--cni-grid-badge-anchor-left, 0px) + (var(--cni-grid-badge-anchor-width, 100%) / 2));
	top: var(--cni-grid-badge-anchor-top, 0px);
	transform: translate(calc(-50% + var(--cni-grid-badge-offset-x)), var(--cni-grid-badge-offset-y));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--top-right {
	left: calc(var(--cni-grid-badge-anchor-left, 0px) + var(--cni-grid-badge-anchor-width, 100%));
	top: var(--cni-grid-badge-anchor-top, 0px);
	transform: translate(calc(-100% + var(--cni-grid-badge-offset-x)), var(--cni-grid-badge-offset-y));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--middle-left {
	left: var(--cni-grid-badge-anchor-left, 0px);
	top: calc(var(--cni-grid-badge-anchor-top, 0px) + (var(--cni-grid-badge-anchor-height, 100%) / 2));
	transform: translate(var(--cni-grid-badge-offset-x), calc(-50% + var(--cni-grid-badge-offset-y)));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--middle-center {
	left: calc(var(--cni-grid-badge-anchor-left, 0px) + (var(--cni-grid-badge-anchor-width, 100%) / 2));
	top: calc(var(--cni-grid-badge-anchor-top, 0px) + (var(--cni-grid-badge-anchor-height, 100%) / 2));
	transform: translate(calc(-50% + var(--cni-grid-badge-offset-x)), calc(-50% + var(--cni-grid-badge-offset-y)));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--middle-right {
	left: calc(var(--cni-grid-badge-anchor-left, 0px) + var(--cni-grid-badge-anchor-width, 100%));
	top: calc(var(--cni-grid-badge-anchor-top, 0px) + (var(--cni-grid-badge-anchor-height, 100%) / 2));
	transform: translate(calc(-100% + var(--cni-grid-badge-offset-x)), calc(-50% + var(--cni-grid-badge-offset-y)));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--bottom-left {
	left: var(--cni-grid-badge-anchor-left, 0px);
	top: calc(var(--cni-grid-badge-anchor-top, 0px) + var(--cni-grid-badge-anchor-height, 100%));
	transform: translate(var(--cni-grid-badge-offset-x), calc(-100% + var(--cni-grid-badge-offset-y)));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--bottom-center {
	left: calc(var(--cni-grid-badge-anchor-left, 0px) + (var(--cni-grid-badge-anchor-width, 100%) / 2));
	top: calc(var(--cni-grid-badge-anchor-top, 0px) + var(--cni-grid-badge-anchor-height, 100%));
	transform: translate(calc(-50% + var(--cni-grid-badge-offset-x)), calc(-100% + var(--cni-grid-badge-offset-y)));
}

.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--bottom-right {
	left: calc(var(--cni-grid-badge-anchor-left, 0px) + var(--cni-grid-badge-anchor-width, 100%));
	top: calc(var(--cni-grid-badge-anchor-top, 0px) + var(--cni-grid-badge-anchor-height, 100%));
	transform: translate(calc(-100% + var(--cni-grid-badge-offset-x)), calc(-100% + var(--cni-grid-badge-offset-y)));
}

.editor-styles-wrapper .cni-grid-card__badge-position-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	margin: 0 0 16px;
}

.editor-styles-wrapper .cni-grid-card__badge-position-grid .components-button {
	justify-content: center;
	min-height: 32px;
	padding: 4px;
	font-size: 11px;
}

.editor-styles-wrapper .cni-grid-card__badge-control-label {
	margin-bottom: 8px;
	font-weight: 600;
}

.editor-styles-wrapper .cni-grid-card__badge-image-preview {
	display: block;
	width: 96px;
	height: auto;
	margin: 0 0 10px;
}

.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child {
	width: calc(100% + (2 * var(--cni-grid-card-current-padding-x))) !important;
	min-width: calc(100% + (2 * var(--cni-grid-card-current-padding-x))) !important;
	max-width: none !important;
	align-self: stretch;
	/* Keep the aspect-ratio height in the card's normal flex layout. */
	flex: 0 0 auto !important;
	box-sizing: border-box;
	line-height: 0;
	float: none !important;
	margin-top: calc(-1 * var(--cni-grid-card-current-padding-y)) !important;
	margin-right: calc(-1 * var(--cni-grid-card-current-padding-x));
	margin-left: calc(-1 * var(--cni-grid-card-current-padding-x));
	margin-block-start: calc(-1 * var(--cni-grid-card-current-padding-y)) !important;
	margin-inline-end: calc(-1 * var(--cni-grid-card-current-padding-x));
	margin-inline-start: calc(-1 * var(--cni-grid-card-current-padding-x));
}

.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > img,
.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > a,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > img,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > a,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > .components-resizable-box__container {
	display: block;
	width: 100% !important;
	max-width: none !important;
	overflow: hidden;
	border-radius: var(--cni-grid-card-radius, 8px) var(--cni-grid-card-radius, 8px) 0 0;
}

/* Use a grid pseudo-element as the media frame. Unlike a replaced <img>, it
 * always honours the selected ratio, including linked images and empty captions. */
.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: 'media';
}

.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child::before,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child::before {
	grid-area: media;
	aspect-ratio: var(--cni-grid-first-image-ratio, 4 / 3);
	content: '';
}

.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > img,
.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > a > img,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: var(--cni-grid-first-image-fit, cover);
	object-position: center var(--cni-grid-first-image-position, center);
}

.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > img,
.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > a,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > img,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > a,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > .components-resizable-box__container {
	grid-area: media;
}

.wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .wp-block-image:first-child > figcaption,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--flush-first-image > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:first-child > figcaption {
	grid-area: auto;
	line-height: normal;
	margin-right: var(--cni-grid-card-current-padding-x);
	margin-left: var(--cni-grid-card-current-padding-x);
}

.wp-block-cni-blocks-auto-grid[data-align-buttons-bottom="1"] .cni-grid-card__inner > .wp-block-buttons:last-child {
	margin-top: auto;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid {
	display: block;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .block-editor-inner-blocks,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .cni-cell-grid-scroll > .block-editor-inner-blocks {
	width: 100%;
	max-width: none;
	min-width: 0;
}

/* Editor .wp-block auto margins otherwise shrink cards to their contents.
 * Only the card wrappers stretch: inner blocks keep their own alignment. */
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	justify-self: stretch;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cni-grid-min-width-pc, 280px)), 1fr));
	column-gap: var(--cni-grid-gap-x, 24px);
	row-gap: var(--cni-grid-gap-y, 24px);
	align-items: stretch;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-equal-height="0"] > .block-editor-inner-blocks > .block-editor-block-list__layout {
	align-items: start;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-equal-height="0"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
	height: auto;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks,
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	/* Keep the card width constrained while allowing child blocks to set height. */
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	min-height: 48px;
}

/* Editor auto inline margins shrink text blocks and Columns to their content
 * inside the card's column flex layout. Give their outer boxes the public
 * content width, preserving text alignment, column ratios and inline widths.
 * Image dimensions/alignment are handled separately below. */
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > p,
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-heading-plus,
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-outer:not(.alignwide):not(.alignfull):not([data-align="wide"]):not([data-align="full"]),
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-columns {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Normal Image boxes stretch like their public counterparts, but the img and
 * Gutenberg's resizer keep their intrinsic/explicit sizes. Aligned figures
 * retain their own auto margins; never force the resizer or img to 100%. */
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:where(:not(.alignwide):not(.alignfull)),
.editor-styles-wrapper .wp-block-cni-blocks-grid-card .wp-block-cni-blocks-outer > .cni-outer__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:where(:not(.alignwide):not(.alignfull)) {
	max-width: 100%;
	min-width: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-image:where(:not(.alignleft):not(.aligncenter):not(.alignright):not(.alignwide):not(.alignfull)) {
	margin-left: 0;
	margin-right: 0;
}

/* Older editor markup has a separate full-width block/alignment wrapper. */
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/image"]:not(.wp-block-image):not([data-align="wide"]):not([data-align="full"]) {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/image"][data-align="left"] > .wp-block-image {
	float: none;
	margin-left: 0;
	margin-right: 1em;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/image"][data-align="right"] > .wp-block-image {
	float: none;
	margin-left: auto;
	margin-right: 0;
}

/* Retain Gutenberg's inserter, but give it its own compact row, not an
 * absolute overlay on the card's last paragraph or button. */
.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender {
	position: static;
	display: flex;
	flex: 0 0 auto;
	align-self: stretch;
	justify-content: flex-end;
	width: 100%;
	max-width: none;
	margin: 8px 0 0;
	padding: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:only-child {
	margin-top: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card:not(.is-selected):not(.has-child-selected):not(:focus-within) > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender:not(:only-child):not(.is-drag-over) {
	display: none;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender .block-editor-inserter {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender .block-editor-button-block-appender {
	flex: 0 0 auto;
	width: 32px;
	min-width: 32px;
	max-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 4px;
	box-sizing: border-box;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-align-buttons-bottom="1"] .cni-grid-card__inner .block-editor-block-list__layout > .wp-block-buttons:last-child {
	margin-top: auto;
}

.editor-styles-wrapper .cni-grid-add-card {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.editor-styles-wrapper .cni-grid-add-card__button.components-button {
	justify-content: center;
	width: auto;
	max-width: 100%;
	min-height: 32px;
	padding: 4px 12px;
	border-style: dashed;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(var(--cni-cell-columns-pc, 3), minmax(0, 1fr));
	column-gap: var(--cni-cell-vertical-border-width, 1px);
	row-gap: var(--cni-cell-horizontal-border-width, 1px);
	padding: var(--cni-cell-outer-border-width, 2px);
	border-radius: var(--cni-cell-radius, 0);
	background: var(--cni-cell-border-color, #ddd);
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
	position: relative;
	gap: 0;
	padding: 0;
	border: var(--cni-cell-outer-border-width, 0) solid var(--cni-cell-border-color, #ddd);
	background: transparent;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: var(--cni-cell-vertical-line-gradient-pc, none);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	content: '';
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
	position: relative;
	z-index: 1;
	border-bottom: var(--cni-cell-horizontal-border-width, 0) solid var(--cni-cell-border-color, #ddd);
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card.cni-grid-card--cell-last-row {
	border-bottom-width: 0;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-first-column] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
	grid-template-columns: minmax(0, var(--cni-cell-first-column)) repeat(var(--cni-cell-columns-after-first), minmax(0, 1fr));
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
	min-width: 0;
	height: auto;
	padding: var(--cni-cell-padding-top, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-right, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-bottom, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-left, var(--cni-cell-padding, 24px));
	border: 0;
	border-radius: 0;
	background: var(--cni-cell-background, #fff);
	color: var(--cni-cell-text-color, inherit);
	box-shadow: none;
	grid-column: span var(--cni-cell-column-span, 1);
	grid-row: span var(--cni-cell-row-span, 1);
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card > .cni-grid-card__inner,
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card > .cni-grid-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	justify-content: var(--cni-cell-content-align, flex-start);
	text-align: var(--cni-cell-text-align, left);
}

@media (min-width: 768px) and (max-width: 1024px) {
	.wp-block-cni-blocks-auto-grid {
		--cni-grid-card-current-padding-x: var(--cni-grid-card-padding-h-tablet, var(--cni-grid-card-padding-tablet, 20px));
		--cni-grid-card-current-padding-y: var(--cni-grid-card-padding-v-tablet, var(--cni-grid-card-padding-tablet, 20px));
		--cni-grid-min-width-current: var(--cni-grid-min-width-tablet, 280px);
	}

	.wp-block-cni-blocks-auto-grid,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cni-grid-min-width-tablet, 280px)), 1fr));
	}

	.wp-block-cni-blocks-grid-card {
		padding: var(--cni-grid-card-padding-v-tablet, var(--cni-grid-card-padding-tablet, 20px)) var(--cni-grid-card-padding-h-tablet, var(--cni-grid-card-padding-tablet, 20px));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell .cni-cell-grid-content,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(var(--cni-cell-columns-tablet, 2), minmax(0, 1fr));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-first-column] .cni-cell-grid-content,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-first-column] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(var(--cni-cell-columns-tablet, 2), minmax(0, 1fr));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
		padding: var(--cni-cell-padding-top, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-right, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-bottom, var(--cni-cell-padding, 24px)) var(--cni-cell-padding-left, var(--cni-cell-padding, 24px));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] .cni-cell-grid-content::before {
		background-image: var(--cni-cell-vertical-line-gradient-tablet, none);
	}
}

@media (max-width: 767px) {
	.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--mobile-hidden {
		display: none;
	}

	.wp-block-cni-blocks-grid-card > .cni-grid-card__badge--mobile-custom:not(.cni-grid-card__badge--mobile-hidden) {
		--cni-grid-badge-text-size: var(--cni-grid-badge-mobile-text-size, 14px);
		--cni-grid-badge-icon-size: var(--cni-grid-badge-mobile-icon-size, 16px);
		--cni-grid-badge-image-width: var(--cni-grid-badge-mobile-image-width, 80px);
		--cni-grid-badge-offset-x: var(--cni-grid-badge-mobile-offset-x, 0px);
		--cni-grid-badge-offset-y: var(--cni-grid-badge-mobile-offset-y, 0px);
	}

	.wp-block-cni-blocks-auto-grid {
		--cni-grid-card-current-padding-x: var(--cni-grid-card-padding-h-mobile, var(--cni-grid-card-padding-mobile, 16px));
		--cni-grid-card-current-padding-y: var(--cni-grid-card-padding-v-mobile, var(--cni-grid-card-padding-mobile, 16px));
		--cni-grid-min-width-current: var(--cni-grid-min-width-mobile, 280px);
	}

	.wp-block-cni-blocks-auto-grid,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cni-grid-min-width-mobile, 280px)), 1fr));
	}

	.wp-block-cni-blocks-grid-card {
		padding: var(--cni-grid-card-padding-v-mobile, var(--cni-grid-card-padding-mobile, 16px)) var(--cni-grid-card-padding-h-mobile, var(--cni-grid-card-padding-mobile, 16px));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="stack"] .cni-cell-grid-content,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="stack"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: 1fr;
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"] .cni-cell-grid-content::before {
		background-image: var(--cni-cell-vertical-line-gradient-mobile, none);
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="compact"] .cni-cell-grid-content,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="compact"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"][data-cell-mobile-layout="compact"] .cni-cell-grid-content::before {
		background-image: var(--cni-cell-vertical-line-gradient-compact, none);
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"] > .cni-cell-grid-scroll {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"] .cni-cell-grid-content,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
		min-width: var(--cni-cell-scroll-min-width, 660px);
		grid-template-columns: repeat(var(--cni-cell-columns-pc, 3), minmax(0, 1fr));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"][data-cell-first-column] .cni-cell-grid-content,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"][data-cell-first-column] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: minmax(0, var(--cni-cell-first-column)) repeat(var(--cni-cell-columns-after-first), minmax(0, 1fr));
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-transparent-background="1"][data-cell-mobile-layout="scroll"] .cni-cell-grid-content::before {
		background-image: var(--cni-cell-vertical-line-gradient-pc, none);
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"] .cni-cell-grid-scroll-hint {
		display: block;
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell .wp-block-cni-blocks-grid-card,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
		padding: var(--cni-cell-padding-top, min(var(--cni-cell-padding, 24px), 16px)) var(--cni-cell-padding-right, min(var(--cni-cell-padding, 24px), 16px)) var(--cni-cell-padding-bottom, min(var(--cni-cell-padding, 24px), 16px)) var(--cni-cell-padding-left, min(var(--cni-cell-padding, 24px), 16px));
		grid-column: auto;
		grid-row: auto;
	}

	.wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"] .wp-block-cni-blocks-grid-card,
	.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-cell-mobile-layout="scroll"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-cni-blocks-grid-card {
		grid-column: span var(--cni-cell-column-span, 1);
		grid-row: span var(--cni-cell-row-span, 1);
	}
}

/* The editor canvas can be narrower than the selected Gutenberg preview.
 * Match separator lines to the preview device, not to the admin viewport. */
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-editor-device="Tablet"][data-cell-transparent-background="1"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout::before {
	background-image: var(--cni-cell-vertical-line-gradient-tablet, none);
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-editor-device="Mobile"][data-cell-transparent-background="1"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout::before {
	background-image: var(--cni-cell-vertical-line-gradient-mobile, none);
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-editor-device="Mobile"][data-cell-transparent-background="1"][data-cell-mobile-layout="compact"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout::before {
	background-image: var(--cni-cell-vertical-line-gradient-compact, none);
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid.cni-grid--cell[data-editor-device="Mobile"][data-cell-transparent-background="1"][data-cell-mobile-layout="scroll"] > .cni-cell-grid-scroll > .block-editor-inner-blocks > .block-editor-block-list__layout::before {
	background-image: var(--cni-cell-vertical-line-gradient-pc, none);
}

/* Gutenberg's device preview can keep the editor canvas wider than the
 * selected device. Mirror the badge's mobile values from Grid+'s existing
 * device marker so its preview stays aligned with the front-end CSS. */
.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-editor-device="Mobile"] .wp-block-cni-blocks-grid-card > .cni-grid-card__badge--mobile-hidden {
	display: none;
}

.editor-styles-wrapper .wp-block-cni-blocks-auto-grid[data-editor-device="Mobile"] .wp-block-cni-blocks-grid-card > .cni-grid-card__badge--mobile-custom:not(.cni-grid-card__badge--mobile-hidden) {
	--cni-grid-badge-text-size: var(--cni-grid-badge-mobile-text-size, 14px);
	--cni-grid-badge-icon-size: var(--cni-grid-badge-mobile-icon-size, 16px);
	--cni-grid-badge-image-width: var(--cni-grid-badge-mobile-image-width, 80px);
	--cni-grid-badge-offset-x: var(--cni-grid-badge-mobile-offset-x, 0px);
	--cni-grid-badge-offset-y: var(--cni-grid-badge-mobile-offset-y, 0px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cni-blocks-grid-card.has-cni-grid-card-link {
		transition: none;
	}

	.wp-block-cni-blocks-grid-card.has-cni-grid-card-link:hover {
		transform: none;
	}

	.wp-block-cni-blocks-grid-card.has-cni-grid-card-link::after,
	.wp-block-cni-blocks-grid-card > .cni-grid-card__link-arrow {
		transition: none;
	}

	.wp-block-cni-blocks-grid-card.has-cni-grid-card-link:hover > .cni-grid-card__link-arrow {
		transform: none;
	}
}