/*
 * Cassandras Klebeband
 * Vier gekippte Streifen mit gerissenen Kanten. Farben und Schriften kommen
 * aus dem Theme; die Werte dahinter sind nur Rückfallpositionen.
 */

.csk {
	--csk-signal: var( --wp--preset--color--kalt, #3fd0e0 );
	--csk-grund: var( --wp--preset--color--papier, #0b0b0c );
	--csk-hell: var( --wp--preset--color--tinte, #f2f0eb );
	--csk-anton: var( --wp--preset--font-family--display, Anton, "Arial Narrow", ui-sans-serif, sans-serif );
	--csk-lesetext: var( --wp--preset--font-family--lesetext, "Space Grotesk", ui-sans-serif, system-ui, sans-serif );
	--csk-mono: var( --wp--preset--font-family--protokoll, "Space Mono", ui-monospace, Menlo, monospace );

	display: block;
	text-decoration: none;
	color: inherit;
	max-width: 100%;
}

.csk--kalt   { --csk-signal: var( --wp--preset--color--kalt, #3fd0e0 ); }
.csk--aktion { --csk-signal: var( --wp--preset--color--aktion, #ff4d0f ); }
.csk--tinte  { --csk-signal: var( --wp--preset--color--tinte, #f2f0eb ); }

/* ---------- Der Stapel ---------- */

.csk__bands {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.csk--links .csk__bands {
	align-items: flex-start;
}

.csk__band {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	transform: rotate( var( --csk-dreh, 0deg ) ) translateX( var( --csk-schub, 0px ) );
	transition: transform 0.18s ease;
}

.csk__text {
	overflow-wrap: break-word;
}

/* Oberzeile – heller Streifen, Schreibmaschinenschrift */
.csk__band--ober {
	--csk-dreh: -5deg;

	background: var( --csk-hell );
	color: var( --csk-grund );
	font-family: var( --csk-mono );
	font-weight: 700;
	font-size: 0.6875rem;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.6rem 1.15rem;
	clip-path: polygon( 1% 0%, 100% 5%, 99% 100%, 0% 93% );
	margin-inline-end: 2.25rem;
}

/* Schlagzeile – der große Streifen in Signalfarbe */
.csk__band--kopf {
	--csk-dreh: -3deg;

	background: var( --csk-signal );
	color: var( --csk-grund );
	font-family: var( --csk-anton );
	font-weight: 400;
	font-size: clamp( 1.45rem, 0.95rem + 1.9vw, 2.375rem );
	line-height: 1.04;
	letter-spacing: 0.012em;
	text-transform: uppercase;
	white-space: nowrap;

	/* Rechts liegt der Überstand, der aus dem Bild läuft – da darf keine Schrift stehen. */
	padding: 0.42em 7rem 0.46em 0.78em;
	clip-path: polygon( 0.4% 3%, 100% 0%, 99.6% 97%, 0% 100% );
	margin-block-start: -0.35rem;
	margin-inline-end: -1.75rem;
}

/* Zeile – dunkler Streifen, Signalfarbe als Schrift */
.csk__band--zeile {
	--csk-dreh: -1.4deg;

	background: var( --csk-hell );
	color: var( --csk-grund );
	font-family: var( --csk-lesetext );
	font-size: clamp( 0.8125rem, 0.74rem + 0.25vw, 0.9375rem );
	line-height: 1.35;
	padding: 0.85rem 1.3rem;
	clip-path: polygon( 0% 6%, 100% 0%, 100% 94%, 1% 100% );
	margin-block-start: -0.3rem;
	margin-inline-end: 1.25rem;
}

/* Knopf – zweiter Streifen in Signalfarbe */
.csk__band--knopf {
	--csk-dreh: -3.6deg;

	gap: 0.55em;
	background: var( --csk-signal );
	color: var( --csk-grund );
	font-family: var( --csk-anton );
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.9rem 1.35rem;
	clip-path: polygon( 2% 0%, 100% 6%, 98% 100%, 0% 94% );
	margin-block-start: -0.25rem;
	margin-inline-end: 3.5rem;
}

/* ---------- Bewegung beim Überfahren ---------- */

.csk:hover .csk__band--ober  { --csk-schub: 5px; }
.csk:hover .csk__band--kopf  { --csk-schub: -7px; }
.csk:hover .csk__band--zeile { --csk-schub: 4px; }
.csk:hover .csk__band--knopf { --csk-schub: -5px; }

.csk:focus-visible {
	outline: 3px solid var( --csk-signal );
	outline-offset: 8px;
}

@media ( prefers-reduced-motion: reduce ) {

	.csk__band {
		transition: none;
	}

	.csk:hover .csk__band {
		--csk-schub: 0px;
	}
}

/* ---------- Sitz: auf dem Bild liegend ---------- */

.csk--overlay {
	position: absolute;
	z-index: 6;
	inset-block-end: var( --csk-unten, clamp( 1.5rem, 4vw, 3rem ) );
	max-width: min( 760px, 64% );
}

.csk--overlay.csk--rechts { inset-inline-end: var( --csk-rand, -2rem ); }
.csk--overlay.csk--links  { inset-inline-start: var( --csk-rand, -2rem ); }

/*
 * Steckt der Störer in einer Bühne (Cover-Block), richtet er sich sonst am
 * schmalen Textbereich darin aus – oder an einer Gruppe, in die man ihn gelegt
 * hat. Diese beiden Regeln machen jede Hülle zwischen Bühne und Störer
 * positionslos, sodass er den Rand der Bühne findet. Betroffen ist nur die
 * Kette, in der er wirklich steckt.
 */
.wp-block-cover__inner-container:has( .csk--overlay ),
.wp-block-cover__inner-container :has( .csk--overlay ) {

	/*
	 * Mit Nachdruck, weil Themes den Textbereich der Bühne oft selbst
	 * positionieren – im Theme "cassandras" etwa über .cs-buehne. Diese
	 * Regel trifft nur Hüllen, in denen wirklich ein Störer steckt.
	 */
	position: static !important;
}

/* ---------- Sitz: im Textfluss ---------- */

.csk--fluss {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: clamp( 2rem, 5vw, 3.5rem );
}

.csk--fluss .csk__bands {
	margin-inline: -2rem;
}

/* ---------- Unter 782 Pixeln ---------- */

@media ( max-width: 781px ) {

	.csk--overlay {
		position: static;
		max-width: none;
		margin-block-start: clamp( 1.5rem, 6vw, 2.5rem );
	}

	.csk--overlay.csk--rechts,
	.csk--overlay.csk--links {
		inset-inline-end: auto;
		inset-inline-start: auto;
	}

	.csk__bands,
	.csk--fluss .csk__bands {
		align-items: stretch;
		margin-inline: 0;
	}

	.csk--fluss {
		padding-block: clamp( 1.5rem, 6vw, 2.5rem );
	}

	.csk__band {
		width: auto;
		white-space: normal;
	}

	.csk__band--ober  { margin-inline-end: 3rem; }

	.csk__band--kopf {
		margin-inline-end: 0;
		padding-inline-end: 1.5rem;
	}
	.csk__band--zeile { margin-inline-end: 2rem; }

	.csk__band--knopf {
		justify-content: center;
		margin-inline-end: 4rem;
	}
}

/* ---------- Nur im Editor ---------- */

.csk__hinweis {
	display: block;
	margin-block-end: 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px dashed var( --csk-signal );
	font-family: var( --csk-mono );
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --csk-signal );
}