/*
 * JoNa | Software – Homepage Entwicklungsprozess (WS-5G)
 * ---------------------------------------------------------------
 * Helle, neutrale Prozesssektion direkt unterhalb der WordPress-
 * Development-Sektion. Sie zeigt das Vorgehen in fünf Schritten als
 * technische Prozesslinie (Timeline) – bewusst kein Karten-Grid und
 * keine Checkliste, sondern ein nachvollziehbarer Engineering-Ablauf
 * von der Anforderung bis zur sauberen Übergabe.
 *
 * Inhalt:
 *   - scripts/content/home-development-process.html (versioniertes
 *     Gutenberg-Markup: Kopf als native Blöcke, die Prozesslinie 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-development-process.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,
 *                                         Fingerprint v1).
 *
 * Layout:
 *   - Desktop (>=1000 px): horizontale Prozesslinie. Fünf gleich-
 *     berechtigte Schritte, runde nummerierte Nodes auf einer
 *     durchgehenden Verbindungslinie; Titel/Einzeiler darunter.
 *   - Tablet (690–999 px): vertikale Timeline (bewusst kein
 *     gequetschtes 5-Spalten-Raster).
 *   - Mobile (<690 px): vertikale Timeline, jeder Schritt 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.14.0 (WS-5G)
 */

/* ------------------------------------------------------------------
 * Sektion: helles, neutrales Band nach der WordPress-Development-
 * Sektion. Die vorherige Sektion trägt unten bereits den vollen
 * Section-Gap; hier nur der Gap zur nächsten (noch folgenden) Sektion.
 */
.jona-development-process {
	padding-block: 0 var(--jona-space-section-gap-lg);
	background-color: var(--jona-color-bg);
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-development-process {
		padding-block: 0 var(--jona-space-section-gap-md);
	}
}

@media (max-width: 689px) {
	.jona-development-process {
		padding-block: 0 var(--jona-space-section-gap-sm);
	}
}

/* Innere Breite begrenzen (Container), Gutters aus dem Designsystem. */
.jona-development-process__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-development-process .jona-development-process__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-development-process__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-development-process__subline {
	max-width: 64ch;
	font-size: var(--jona-font-size-lg);
	color: var(--jona-color-ink);
	margin-block: 0 var(--jona-space-6);
}

/* ------------------------------------------------------------------
 * Prozesslinie – Desktop (>=1000 px): horizontale Timeline.
 * Fünf gleichberechtigte Schritte; die Verbindungslinie wird je Schritt
 * als Segment vom eigenen Node zum nächsten Node gezeichnet (dezenter
 * 1-px-Trenner), der letzte Schritt hat kein Segment.
 */
.jona-process {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--jona-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jona-process__step {
	position: relative;
	min-width: 0;
}

/* Runder, nummerierter Step-Marker (technischer Node). */
.jona-process__node {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--jona-radius-full);
	background-color: var(--jona-color-surface);
	border: var(--jona-border-width) solid var(--jona-color-border);
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-sm);
	font-weight: var(--jona-font-weight-semibold);
	line-height: 1;
	color: var(--jona-color-brand-blue);
}

/* Verbindungssegment zum nächsten Schritt (nicht am letzten Schritt). */
.jona-process__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 40px;
	right: calc(-1 * var(--jona-space-5));
	height: var(--jona-border-width);
	background-color: var(--jona-color-border);
}

.jona-process__body {
	margin-block-start: var(--jona-space-4);
}

.jona-process__step-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 var(--jona-space-2);
}

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

/* ------------------------------------------------------------------
 * Optionaler Qualitätshinweis – eine Zeile, kein zusätzlicher Block.
 * Dezenter grüner Akzent als schmale Leiste, kein Kartenlook.
 */
.jona-development-process__note {
	margin-block: var(--jona-space-6) 0;
	padding-inline-start: var(--jona-space-4);
	border-inline-start: 2px solid var(--jona-color-accent);
	font-size: var(--jona-font-size-sm);
	color: var(--jona-color-text-secondary);
}

/* ------------------------------------------------------------------
 * Tablet + Mobile + kleinere Desktops (<1152 px): vertikale Timeline.
 * Node links, Inhalt rechts, durchgehende Verbindungslinie an der
 * Node-Spalte. Bewusst früher als 1000 px umgeschaltet, damit die
 * fünf Spalten bei 1152/1024/999 px nicht gequetscht wirken (WS-5K).
 */
@media (max-width: 1151px) {
	.jona-process {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.jona-process__step {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: var(--jona-space-5);
		padding-block-end: var(--jona-space-6);
	}

	.jona-process__step:last-child {
		padding-block-end: 0;
	}

	/* Vertikales Segment vom Node zum nächsten Node. */
	.jona-process__step:not(:last-child)::before {
		top: 40px;
		left: 19px;
		right: auto;
		bottom: 0;
		width: var(--jona-border-width);
		height: auto;
	}

	.jona-process__body {
		grid-column: 2;
		margin-block-start: 0;
	}
}

/* Tablet (690–999 px): etwas mehr Luft zwischen den Schritten. */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-development-process__inner {
		padding-inline: var(--jona-space-gutter-md);
	}

	.jona-process__step {
		padding-block-end: var(--jona-space-7);
	}
}

/* Mobile (<690 px): volle Breite, kompaktere Abstände, keine Mini-Schrift. */
@media (max-width: 689px) {
	.jona-development-process__inner {
		padding-inline: var(--jona-space-gutter-sm);
	}

	.jona-development-process__subline {
		margin-block-end: var(--jona-space-6);
	}

	.jona-process__step {
		column-gap: var(--jona-space-4);
		padding-block-end: var(--jona-space-6);
	}

	.jona-development-process__note {
		margin-block-start: var(--jona-space-6);
	}
}

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