/* ============================================
 * Block: CTA
 * Three.js-Partikelwellen-Hintergrund (shared particle-waves.js)
 * Glasmorphismus-Content-Karte + optionaler Slogan
 * ============================================ */

.block-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--datacenter);
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--primary-dark),
		transparent
	);
	color: var(--wp--preset--color--white);
}

/* ── Canvas (Three.js-Mount) ── */

.block-cta__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 1s ease;
}

.block-cta__canvas canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* ── Inner / Content ── */

/* Header · Content · Slogan gestapelt */
.block-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--s);
}

/* Header: 66 %, linksbündig */
.block-cta__header {
	inline-size: 66%;
}

/* Content/CTA: 33 %, rechtsbündig */
.block-cta__content {
	inline-size: 33%;
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--s);
	/* Glasmorphismus wie .header__primary (overrides.css) */
	/* Glasmorphismus identisch zu .header__primary (overrides.css) */
	background-color: oklch(from var(--wp--preset--color--primary-dark) l c h / 0.0);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ── Typografie ── */

.block-cta__headline {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	color: inherit;
	margin: 0;
}

.block-cta__text {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}

.block-cta__text p {
	margin: 0;
}

.block-cta__text p + p {
	margin-top: var(--wp--preset--spacing--xs);
}

/* theme.json setzt elements.link auf primary (= datacenter) – identisch zur
   Block-Hintergrundfarbe. Weiß (5.87:1); Link-Erkennung über die Unterstreichung
   aus .block-richtext, nicht über die Farbe.
   .block-cta vorangestellt: schlägt die gleich spezifische jw-base-Hover-Regel
   unabhängig von der Stylesheet-Reihenfolge. */
.block-cta .block-cta__text a:not(.button) {
	color: var(--wp--preset--color--white);
}

/* Hover ohne Farbwechsel – jede hellere Palette-Farbe fällt unter 4.5:1 */
.block-cta .block-cta__text a:not(.button):hover {
	color: var(--wp--preset--color--white);
	text-decoration-thickness: 2px;
}

/* Globaler Focus-Ring ist secondary (1.41:1 auf diesem Hintergrund) */
.block-cta .block-cta__text a:not(.button):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.block-cta__button {
	align-self: flex-start;
}

/* ── Slogan ── */

.block-cta__slogan {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	margin: 0;
}

/* ── Responsive: volle Breite (<=768px) ── */

@media (max-width: 768px) {
	.block-cta__header,
	.block-cta__content {
		inline-size: 100%;
		align-self: stretch;
	}
}

/* ── Reduced Motion: Animation deaktivieren ── */

@media (prefers-reduced-motion: reduce) {
	.block-cta__canvas {
		display: none;
	}
}

/*# sourceURL=/wp-content/themes/jw-conova/blocks/cta/style.css */