/* ==========================================================================
   Kunstpalast "Sprechblase" style for core/media-text
   ==========================================================================
   One block style (is-style-sprechblase). The notch is cut into the media
   edge that faces the text, so the pointer always points from the text into
   the image:
   - side by side: derived from core's media position
       media left  (default)                 -> notch on the media's right edge
       media right (.has-media-on-the-right) -> notch on the media's left edge
   - stacked: set via the editor panel ("Textposition")
       .is-sprechblase-text-oben  -> text above, notch on the media's top edge
       .is-sprechblase-text-unten -> text below, notch on the media's bottom edge
   - side-by-side blocks stacked on mobile get the bottom-edge notch.

   The notch itself is transparent (both layers are clipped away there), so it
   always shows the block's own background - any color, gradient or none.

   How the shape is drawn:
   The media's ::before is filled with the stroke color and clipped to the
   OUTER outline (media box minus the triangular notch). The image is clipped
   to the INNER outline (the same outline inset by the stroke width). The
   strip between the two is the visible line. Both clips use the same box, so
   they always line up, at any size.

   Each direction only sets --kp-outer / --kp-inner (and its offset) on the
   block; the two clip-path declarations further down never change.
   ========================================================================== */

.wp-block-media-text.is-style-sprechblase {
	/* Design tokens */
	--kp-bubble-color: var(--wp--preset--color--contrast, #3b3b3c);
	--kp-bubble-stroke: 4px;
	--kp-bubble-depth: 28px;   /* how far the notch cuts into the media */
	--kp-bubble-length: 31px;  /* how long the notch opening is along the edge */
	--kp-bubble-offset: 15%;   /* position of the notch along its edge */
	--kp-bubble-min-height: 250px; /* side by side: minimum media height */

	/* Corner offsets of the inner outline. They follow from depth, length and
	   stroke (perpendicular 4px offset of the 28/31 diagonal) - recompute only
	   if one of those three values changes. */
	--kp-bubble-mx: 9px;
	--kp-bubble-my: 1.54px;

	/* Short aliases, only to keep the polygons below readable */
	--kp-s: var(--kp-bubble-stroke);
	--kp-d: var(--kp-bubble-depth);
	--kp-l: var(--kp-bubble-length);
	--kp-o: var(--kp-bubble-offset);
	--kp-mx: var(--kp-bubble-mx);
	--kp-my: var(--kp-bubble-my);

	position: relative;
	box-sizing: border-box;
	border: var(--kp-bubble-stroke) solid var(--kp-bubble-color);
	/* Fill the column when the parent Columns block stretches its items. */
	height: 100%;
}

/* --------------------------------------------------------------------
   Directions
   Specificity and source order decide which one wins:
   right (base) < left < mobile stacked < top < bottom
   -------------------------------------------------------------------- */

/* Text right - media left (default), notch on the media's right edge */
.wp-block-media-text.is-style-sprechblase {
	--kp-outer: polygon(
		0 0, 100% 0,
		100% var(--kp-o),
		calc(100% - var(--kp-d)) var(--kp-o),
		100% calc(var(--kp-o) + var(--kp-l)),
		100% 100%, 0 100%
	);
	--kp-inner: polygon(
		0 0, calc(100% - var(--kp-s)) 0,
		calc(100% - var(--kp-s)) calc(var(--kp-o) - var(--kp-s)),
		calc(100% - var(--kp-d) - var(--kp-mx)) calc(var(--kp-o) - var(--kp-s)),
		calc(100% - var(--kp-s)) calc(var(--kp-o) + var(--kp-l) + var(--kp-my)),
		calc(100% - var(--kp-s)) 100%, 0 100%
	);
}

/* Text left - media right, notch on the media's left edge */
.wp-block-media-text.is-style-sprechblase.has-media-on-the-right {
	--kp-outer: polygon(
		0 0, 100% 0, 100% 100%, 0 100%,
		0 calc(var(--kp-o) + var(--kp-l)),
		var(--kp-d) var(--kp-o),
		0 var(--kp-o)
	);
	--kp-inner: polygon(
		var(--kp-s) 0, 100% 0, 100% 100%, var(--kp-s) 100%,
		var(--kp-s) calc(var(--kp-o) + var(--kp-l) + var(--kp-my)),
		calc(var(--kp-d) + var(--kp-mx)) calc(var(--kp-o) - var(--kp-s)),
		var(--kp-s) calc(var(--kp-o) - var(--kp-s))
	);
}

/* Mobile: side-by-side blocks that stack (same breakpoint as core) get the
   bottom-edge notch, so it still points from the text below into the image.
   Must stay between "left" and "top" (equal specificity, source order). */
@media (max-width: 600px) {
	.wp-block-media-text.is-style-sprechblase.is-stacked-on-mobile {
		--kp-bubble-offset: 80%;
		--kp-outer: polygon(
			0 0, 100% 0, 100% 100%,
			calc(var(--kp-o) + var(--kp-l)) 100%,
			var(--kp-o) calc(100% - var(--kp-d)),
			var(--kp-o) 100%,
			0 100%
		);
		--kp-inner: polygon(
			0 0, 100% 0,
			100% calc(100% - var(--kp-s)),
			calc(var(--kp-o) + var(--kp-l) + var(--kp-my)) calc(100% - var(--kp-s)),
			calc(var(--kp-o) - var(--kp-s)) calc(100% - var(--kp-d) - var(--kp-mx)),
			calc(var(--kp-o) - var(--kp-s)) calc(100% - var(--kp-s)),
			0 calc(100% - var(--kp-s))
		);
	}
}

/* Text above - media below, notch on the media's top edge */
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben {
	--kp-bubble-offset: 80%;
	--kp-outer: polygon(
		0 0,
		var(--kp-o) 0,
		var(--kp-o) var(--kp-d),
		calc(var(--kp-o) + var(--kp-l)) 0,
		100% 0, 100% 100%, 0 100%
	);
	--kp-inner: polygon(
		0 var(--kp-s),
		calc(var(--kp-o) - var(--kp-s)) var(--kp-s),
		calc(var(--kp-o) - var(--kp-s)) calc(var(--kp-d) + var(--kp-mx)),
		calc(var(--kp-o) + var(--kp-l) + var(--kp-my)) var(--kp-s),
		100% var(--kp-s), 100% 100%, 0 100%
	);
}

/* Text below - media above, notch on the media's bottom edge */
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten {
	--kp-bubble-offset: 80%;
	--kp-outer: polygon(
		0 0, 100% 0, 100% 100%,
		calc(var(--kp-o) + var(--kp-l)) 100%,
		var(--kp-o) calc(100% - var(--kp-d)),
		var(--kp-o) 100%,
		0 100%
	);
	--kp-inner: polygon(
		0 0, 100% 0,
		100% calc(100% - var(--kp-s)),
		calc(var(--kp-o) + var(--kp-l) + var(--kp-my)) calc(100% - var(--kp-s)),
		calc(var(--kp-o) - var(--kp-s)) calc(100% - var(--kp-d) - var(--kp-mx)),
		calc(var(--kp-o) - var(--kp-s)) calc(100% - var(--kp-s)),
		0 calc(100% - var(--kp-s))
	);
}

/* --------------------------------------------------------------------
   Shape
   -------------------------------------------------------------------- */

.wp-block-media-text.is-style-sprechblase .wp-block-media-text__media {
	position: relative;
	width: 100%;
	/* Side by side: no fixed ratio. The media stretches to the row height, so
	   the block is as tall as the text (but at least the minimum height) and
	   the divider line always spans the whole block. */
	min-height: var(--kp-bubble-min-height);
	align-self: stretch;
}

/* Side-by-side blocks that stack on mobile: back to a fixed 4:3 ratio,
   since there is no text next to the media to take the height from. */
@media (max-width: 600px) {
	.wp-block-media-text.is-style-sprechblase.is-stacked-on-mobile .wp-block-media-text__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

/* Stroke layer - only when there is media (not on the editor placeholder) */
.wp-block-media-text.is-style-sprechblase .wp-block-media-text__media:has(img, video)::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--kp-bubble-color);
	clip-path: var(--kp-outer);
	pointer-events: none;
}

.wp-block-media-text.is-style-sprechblase .wp-block-media-text__media :is(img, video) {
	/* Absolutely positioned: the image never adds its own height to the
	   media box, and it paints above the ::before stroke layer. */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: var(--kp-inner);
}

/* --------------------------------------------------------------------
   Stacked layouts (text above / below)
   !important is only needed for the columns: core stores a custom media
   width as an inline grid-template-columns style.
   -------------------------------------------------------------------- */

.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben,
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten {
	grid-template-columns: 100% !important;
}

.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben .wp-block-media-text__media,
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten .wp-block-media-text__media {
	min-height: 0;
	aspect-ratio: 1 / 1;
}

.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben .wp-block-media-text__media,
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten .wp-block-media-text__media,
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben .wp-block-media-text__content,
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten .wp-block-media-text__content {
	grid-column: 1;
}

/* Text above: the text row absorbs extra height, the media keeps its ratio */
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben {
	grid-template-rows: 1fr auto;
}
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben .wp-block-media-text__content {
	grid-row: 1;
}
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-oben .wp-block-media-text__media {
	grid-row: 2;
}

/* Text below */
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten {
	grid-template-rows: auto 1fr;
}
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten .wp-block-media-text__media {
	grid-row: 1;
}
.wp-block-media-text.is-style-sprechblase.is-sprechblase-text-unten .wp-block-media-text__content {
	grid-row: 2;
}