.block-section {
	background-color: var(--block-bg, transparent);
	color: var(--block-text, inherit);
}

/* ── Inner Grid + Width Constraint ── */

.block-section > .acf-innerblocks-container {
	width: calc(var(--jw-wrapper-width) * var(--section-w-d, 1));
	max-width: calc(var(--jw-wrapper-max) * var(--section-w-d, 1));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(var(--cols-d, 1), minmax(0, 1fr));
	gap: var(--grid-gap, var(--wp--preset--spacing--s));
	align-items: var(--grid-align, stretch);
}

.block-section--auto-d > .acf-innerblocks-container {
	grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 240px), 1fr));
}

/* ── Ausrichtung der Columns ──
   Bewegt nicht den Inhaltsbereich, sondern gibt schmaleren Columns
   (block-column--sized) die Position in ihrer Spalte vor. Per Custom
   Property, damit die Ausrichtung an der Column selbst ohne
   Spezifitätskampf Vorrang hat (column/style.css). */

.block-section--align-left > .acf-innerblocks-container {
	--col-margin-start: 0;
	--col-margin-end: auto;
}

.block-section--align-right > .acf-innerblocks-container {
	--col-margin-start: auto;
	--col-margin-end: 0;
}

/* ── Equal Height: Columns als Flex-Container ── */

.block-section--equal-height .block-column {
	display: flex;
	flex-direction: column;
}

/* ── Sticky Column ──
   align-self: start ist zwingend – sonst streckt align-items: stretch die
   Spalte auf volle Zeilenhöhe und es bleibt kein Sticky-Spielraum.
   Eigener, überlappungsfreier Media-Block je Breakpoint: sticky ist nur
   aktiv, wenn die Spaltenzahl an genau diesem Breakpoint > 1 ist
   (block-section--sticky-off-d/-t/-m via render.php je nach cols_d/t/m). */

@media (min-width: 1025px) {
	.block-section--sticky-first:not(.block-section--sticky-off-d) > .acf-innerblocks-container > .block-column:first-child,
	.block-section--sticky-last:not(.block-section--sticky-off-d) > .acf-innerblocks-container > .block-column:last-child {
		position: sticky;
		top: calc(var(--header-height, 0px) + var(--wp--preset--spacing--s));
		align-self: start;
	}
}

@media (min-width: 577px) and (max-width: 1024px) {
	.block-section--sticky-first:not(.block-section--sticky-off-t) > .acf-innerblocks-container > .block-column:first-child,
	.block-section--sticky-last:not(.block-section--sticky-off-t) > .acf-innerblocks-container > .block-column:last-child {
		position: sticky;
		top: calc(var(--header-height, 0px) + var(--wp--preset--spacing--s));
		align-self: start;
	}
}

@media (max-width: 576px) {
	.block-section--sticky-first:not(.block-section--sticky-off-m) > .acf-innerblocks-container > .block-column:first-child,
	.block-section--sticky-last:not(.block-section--sticky-off-m) > .acf-innerblocks-container > .block-column:last-child {
		position: sticky;
		top: calc(var(--header-height, 0px) + var(--wp--preset--spacing--s));
		align-self: start;
	}
}

/* ── Tablet ── */

@media (max-width: 1024px) {
	.block-section > .acf-innerblocks-container {
		width: calc(var(--jw-wrapper-width) * var(--section-w-t, var(--section-w-d, 1)));
		max-width: calc(var(--jw-wrapper-max) * var(--section-w-t, var(--section-w-d, 1)));
		grid-template-columns: repeat(var(--cols-t, var(--cols-d, 1)), minmax(0, 1fr));
	}

	.block-section--auto-t > .acf-innerblocks-container {
		grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 200px), 1fr));
	}

}

/* ── Mobile ── */

@media (max-width: 576px) {
	/* Fallback bewusst auf Desktop, nicht Tablet – die Option heißt „Wie Desktop". */
	.block-section > .acf-innerblocks-container {
		width: calc(var(--jw-wrapper-width) * var(--section-w-m, var(--section-w-d, 1)));
		max-width: calc(var(--jw-wrapper-max) * var(--section-w-m, var(--section-w-d, 1)));
		grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
		padding-inline: var(--jw-space-24);
	}

	.block-section--auto-m > .acf-innerblocks-container {
		grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 160px), 1fr));
	}
}

/*# sourceURL=/wp-content/themes/jw-base/blocks/section/style.css */