/*
 * JoNa | Software – Homepage Why JoNa / Arbeitsprinzipien (WS-5I)
 * ---------------------------------------------------------------
 * Kompakte, ruhige Sektion direkt unterhalb der Tech-Stack-Übersicht.
 * Sie erklärt anhand von vier konkreten Arbeitsprinzipien, wie JoNa |
 * Software arbeitet – bewusst keine austauschbaren Agenturwerte und
 * keine Service-Werte-Karten, sondern knappe, technische Statements.
 *
 * Inhalt:
 *   - scripts/content/home-why-jona.html (versioniertes Gutenberg-
 *     Markup: Kopf als native Blöcke, die vier Prinzipien als ein
 *     atomarer 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-why-jona.css     = Layout/Styling dieser Sektion.
 *   - Gutenberg             = Group + native Blöcke + ein wp:html-
 *                             Ausnahmeblock (Analogie zu WS-4/WS-5B/
 *                             WS-5D/WS-5E/WS-5F/WS-5G/WS-5H,
 *                             Fingerprint v1).
 *
 * Layout:
 *   - Desktop (>=1000 px): vier kompakte Prinzip-Module nebeneinander.
 *   - Tablet (690–999 px): 2×2.
 *   - Mobile (<690 px): 1 Spalte, Module untereinander, volle Breite.
 *
 * 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.16.0 (WS-5I)
 */

/* ------------------------------------------------------------------
 * Sektion: helles, neutrales Band nach der Tech-Stack-Übersicht. Die
 * vorherige Sektion trägt unten bereits den vollen Section-Gap; hier
 * ein bewusst kleinerer Abstand zur Abschluss-CTA (WS-5K) – Why JoNa
 * bleibt ruhig, die CTA schließt natürlicher an.
 */
.jona-why-jona {
	padding-block: 0 var(--jona-space-8);
	background-color: var(--jona-color-bg);
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-why-jona {
		padding-block: 0 var(--jona-space-7);
	}
}

@media (max-width: 689px) {
	.jona-why-jona {
		padding-block: 0 var(--jona-space-6);
	}
}

/* Innere Breite begrenzen (Container), Gutters aus dem Designsystem. */
.jona-why-jona__inner {
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
}

/* ------------------------------------------------------------------
 * Sektionskopf: Eyebrow (grüner Akzent), H2 (Navy), Subline.
 */
.jona-why-jona .jona-why-jona__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-2);
}

.jona-why-jona__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-why-jona__subline {
	max-width: 64ch;
	font-size: var(--jona-font-size-lg);
	color: var(--jona-color-ink);
	margin-block: 0 var(--jona-space-6);
}

/* ------------------------------------------------------------------
 * Prinzip-Module – Desktop (>=1000 px): vier kompakte Spalten.
 * Sehr leichte Surface-Abstufung, feine Border, kein Shadow.
 */
.jona-why {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jona-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jona-why__item {
	display: flex;
	flex-direction: column;
	gap: var(--jona-space-2);
	min-width: 0;
	padding: var(--jona-space-5);
	background-color: var(--jona-color-surface-muted);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-md);
}

/* Kleine Mono-Nummer – grüner Akzent (kontrastreich, AA auf hellem Grund). */
.jona-why__index {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--jona-color-accent-strong);
}

.jona-why__title {
	font-size: var(--jona-font-size-base);
	font-weight: var(--jona-font-weight-semibold);
	line-height: var(--jona-line-height-tight);
	color: var(--jona-color-ink);
	margin-block: 0;
}

.jona-why__text {
	font-size: var(--jona-font-size-sm);
	line-height: 1.55;
	color: var(--jona-color-text-secondary);
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Kleinere Desktops + Tablet (<1152 px): 2×2. Vier Karten werden unter
 * ca. 1152 px zu eng – früher auf zwei Spalten wechseln (WS-5K).
 */
@media (max-width: 1151px) {
	.jona-why-jona__inner {
		padding-inline: var(--jona-space-gutter-md);
	}

	.jona-why {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * Mobile (<690 px): 1 Spalte, Module untereinander, volle Breite.
 * Kompakte Höhe, kein horizontaler Overflow.
 */
@media (max-width: 689px) {
	.jona-why-jona__inner {
		padding-inline: var(--jona-space-gutter-sm);
	}

	.jona-why-jona__subline {
		margin-block-end: var(--jona-space-5);
	}

	.jona-why {
		grid-template-columns: minmax(0, 1fr);
	}

	.jona-why__item {
		padding: var(--jona-space-4);
	}
}

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