/*
 * Block Style "angled" auf core/group
 *
 * Technik: skewY() auf ::before statt clip-path auf der Section selbst.
 * → Keine Lücken, Hintergrundfarbe frei im Editor wählbar.
 *
 * Im Editor: Group-Block → Stil "Schräg" → Hintergrundfarbe aus der Palette.
 * WordPress setzt dann die Klasse has-{slug}-background-color, die hier
 * auf die Custom Property --section-bg gemappt wird.
 */

/* Gradient-Mapping: Palette → --section-bg */
.wp-block-group.is-style-angled.has-angular-overlay-secondary-gradient-background { --section-bg: var(--wp--preset--gradient--angular-overlay-secondary); }
.wp-block-group.is-style-angled.has-linear-contrast-to-secondary-gradient-background { --section-bg: var(--wp--preset--gradient--linear-contrast-to-secondary); }

/* Farb-Mapping: Palette → --section-bg */
.wp-block-group.is-style-angled.has-base-background-color       { --section-bg: var(--wp--preset--color--base); }
.wp-block-group.is-style-angled.has-base-2-background-color     { --section-bg: var(--wp--preset--color--base-2); }
.wp-block-group.is-style-angled.has-base-3-background-color     { --section-bg: var(--wp--preset--color--base-3); }
.wp-block-group.is-style-angled.has-contrast-background-color   { --section-bg: var(--wp--preset--color--contrast); }
.wp-block-group.is-style-angled.has-tertiary-background-color   { --section-bg: var(--wp--preset--color--tertiary); }
.wp-block-group.is-style-angled.has-accent-1-background-color     { --section-bg: var(--wp--preset--color--accent); }
.wp-block-group.is-style-angled.has-accent-2-background-color   { --section-bg: var(--wp--preset--color--accent-2); }
.wp-block-group.is-style-angled.has-accent-3-background-color   { --section-bg: var(--wp--preset--color--accent-3); }
.wp-block-group.is-style-angled.has-accent-4-background-color   { --section-bg: var(--wp--preset--color--accent-4); }
.wp-block-group.is-style-angled.has-primary-background-color    { --section-bg: var(--wp--preset--color--primary); }
.wp-block-group.is-style-angled.has-secondary-background-color  { --section-bg: var(--wp--preset--color--secondary); }

/* Section */
.wp-block-group.is-style-angled {
	--section-bg: var(--wp--preset--color--secondary); /* Fallback */
	position: relative;
	isolation: isolate; /* Eigener Stacking-Context: ::before mit z-index:-1 bleibt sichtbar im Editor */
	/* Extra-Padding kompensiert den Diagonalversatz — gleicher clamp-Wert wie inset und margin */
	padding-block: calc(var(--wp--preset--spacing--30) + clamp(3rem, 4vw, 8rem));
	/* Abstand nach außen: ::before ragt 5vw über die Box hinaus – margin ≥ 5vw verhindert, dass der Hintergrund der nächsten Section über den Inhalt der vorherigen ragt.
	   Max-Wert 8rem (≈ 5vw bei ~2560px) damit auch auf sehr breiten Screens kein Überlappen entsteht. */
	margin-block: clamp(3rem, 4vw, 8rem);
	background: transparent !important;
}

/* Schräger Hintergrund */
.wp-block-group.is-style-angled::before {
	content: '';
	position: absolute;
	/* Leicht über die Sektion hinaus — Diagonale reicht ohne Lücke bis zu den Rändern.
	   Negatives Äquivalent zu clamp(2rem, 6vw, 8rem): min/max vertauscht, Vorzeichen negiert. */
	inset: clamp(-8rem, -3vw, -2rem) 0;
	background: var(--section-bg);
	transform: skewY(-3deg);
	z-index: -1;
}

/* Inhalte über dem schrägen Hintergrund */
.wp-block-group.is-style-angled > * {
	position: relative;
	z-index: 1;
}

/* Gruppen ohne schräg-Style: kein vertikales Padding */
.wp-block-group:not(.is-style-angled) {
	padding-block: 0;
}

/* Gestapelte Spalten auf Mobil: mehr Padding */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column {
		padding-block: var(--wp--preset--spacing--30);
	}
}