/*
 * JoNa | Software – Homepage Abschluss-CTA (WS-5J)
 * ---------------------------------------------------------------
 * Ruhiger, hochwertiger Abschluss der Homepage direkt unterhalb der
 * Why-JoNa-Sektion. Nach den inhaltlichen Sektionen bietet sie nur noch
 * eine klare nächste Handlung an (Projekt anfragen) – bewusst keine
 * erneute Erklärung und kein zweites dunkles Band wie AI & Automation.
 *
 * Inhalt:
 *   - scripts/content/home-final-cta.html (versioniertes Gutenberg-Markup,
 *     ausschließlich native Core-Blöcke – Group/Paragraph/Heading/Buttons,
 *     KEIN wp:html-Block; Marker-Append via bootstrap.sh).
 *   - Diese Datei liefert ausschließlich das Styling.
 *
 * Verantwortung (strikte Trennung):
 *   - design-system.css     = Tokens (--jona-*), Referenz.
 *   - home-final-cta.css    = Layout/Styling dieser Sektion.
 *   - Gutenberg             = native Blöcke (kein Custom Block).
 *
 * Layout:
 *   - Desktop (>=1000 px): breite CTA-Fläche, Inhalt ruhig zentriert
 *     (Eyebrow, H2, Subline, Buttons darunter).
 *   - Tablet (690–999 px): zentriert, etwas kompakter.
 *   - Mobile (<690 px): zentriert, Buttons volle Breite, Touchhöhe >=44 px.
 *
 * Breakpoints FEST geschrieben (kein var() in @media – vgl. WS-4-Fix):
 *   --jona-breakpoint-sm = 690px  -> Mobile  max-width: 689px
 *   --jona-breakpoint-md = 1000px -> Desktop >= 1000px
 *
 * Version: 0.17.0 (WS-5J)
 */

/* ------------------------------------------------------------------
 * Sektion: sehr helles, gebrandetes Band als Abschluss. Sehr subtiler
 * Blau-/Grün-Verlauf, dezente technische Raster-Struktur (rein CSS),
 * feine Fläche. Bewusst kompakter als die Showcase-Sektionen.
 */
.jona-final-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--jona-space-7) var(--jona-space-section-gap-lg);
	background-color: var(--jona-color-bg);
	background-image:
		radial-gradient(
			120% 95% at 50% -10%,
			var(--jona-color-accent-tint) 0%,
			rgba(112, 165, 86, 0) 55%
		),
		linear-gradient(
			180deg,
			var(--jona-color-subtle-blue) 0%,
			var(--jona-color-bg) 72%
		);
}

/* Sehr subtile technische Deko: feines Raster, zur Mitte hin ausgeblendet.
 * Rein dekorativ (kein Inhalt), daher kein aria-Thema und pointer-events: none. */
.jona-final-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(to right, var(--jona-color-border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--jona-color-border) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: 0.5;
	-webkit-mask-image: radial-gradient(70% 90% at 50% 28%, #000 0%, transparent 70%);
	mask-image: radial-gradient(70% 90% at 50% 28%, #000 0%, transparent 70%);
	pointer-events: none;
}

/* Inhalt ruhig zentriert, schmalere Lesebreite für einen klaren Abschluss. */
.jona-final-cta__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--jona-container-content);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
	text-align: center;
}

/* ------------------------------------------------------------------
 * Typografie: Eyebrow (grüner Akzent), H2 (Navy), Subline.
 */
.jona-final-cta .jona-final-cta__eyebrow {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jona-color-accent-strong);
	margin-block: 0 var(--jona-space-3);
}

.jona-final-cta__title {
	font-size: var(--jona-font-size-2xl);
	line-height: var(--jona-line-height-tight);
	color: var(--jona-color-brand-blue);
	margin-block: 0 var(--jona-space-3);
}

.jona-final-cta__subline {
	max-width: 56ch;
	margin-inline: auto;
	font-size: var(--jona-font-size-lg);
	color: var(--jona-color-ink);
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Buttons: Primary zuerst (JoNa Blau, aus dem Designsystem), Secondary
 * optional als Outline. Zentriert, mit ruhigem Abstand zum Text.
 */
.jona-final-cta__actions {
	justify-content: center;
	gap: var(--jona-space-3);
	margin-block: var(--jona-space-6) 0;
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): zentriert, etwas kompakter.
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-final-cta {
		padding-block: var(--jona-space-7) var(--jona-space-section-gap-md);
	}

	.jona-final-cta__inner {
		padding-inline: var(--jona-space-gutter-md);
	}
}

/* ------------------------------------------------------------------
 * Mobile (<690 px): zentriert, Buttons volle Breite, Touchhöhe >=44 px.
 * Kein horizontaler Overflow.
 */
@media (max-width: 689px) {
	.jona-final-cta {
		padding-block: var(--jona-space-6) var(--jona-space-section-gap-sm);
	}

	.jona-final-cta__inner {
		padding-inline: var(--jona-space-gutter-sm);
	}

	.jona-final-cta__subline {
		font-size: var(--jona-font-size-base);
	}

	.jona-final-cta__actions {
		flex-direction: column;
		align-items: stretch;
		margin-block-start: var(--jona-space-5);
	}

	.jona-final-cta__actions .wp-block-button {
		width: 100%;
	}

	.jona-final-cta__actions .wp-block-button__link {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * Reduced Motion: keine animierte Informationsvermittlung.
 * (Diese Sektion ist statisch; die Regel hält die Konvention ein.)
 */
@media (prefers-reduced-motion: reduce) {
	.jona-final-cta__actions .wp-block-button__link {
		transition: none;
	}
}