/*
 * JoNa | Software – Homepage WordPress Development (WS-5F)
 * ---------------------------------------------------------------
 * Helle, technische Split-Sektion direkt unterhalb der dunklen
 * AI-&-Automation-Sektion. Sie bringt nach dem Navy-Band bewusst
 * wieder Luft und Helligkeit und positioniert WordPress als
 * Softwareentwicklung – „über Standardplugins hinaus“.
 *
 * Inhalt:
 *   - scripts/content/home-wordpress-development.html (versioniertes
 *     Gutenberg-Markup: Linke Spalte als native Blöcke, rechte
 *     Capability-Komposition 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-wordpress-development.css    = Layout/Styling dieser Sektion.
 *   - Gutenberg                         = Group + native Blöcke + ein
 *                                         wp:html-Ausnahmeblock (Analogie
 *                                         zu WS-4/WS-5B/WS-5D/WS-5E,
 *                                         Fingerprint v1).
 *
 * Layout:
 *   - Desktop (>=1000 px): Split – links Eyebrow/H2/Subline/Text/CTA,
 *     rechts die technische Capability-Komposition in 2 Spalten mit
 *     ungleicher Gewichtung (Individuelle Plugins hoch, Custom Post
 *     Types/APIs gestapelt, Admin-Vereinfachung breit, JoNa Site Core
 *     als hervorgehobenes Navy-Modul über die volle Breite).
 *   - Tablet (690–999 px): Text oben, Komposition darunter (2 Spalten),
 *     keine gequetschte Split-Darstellung.
 *   - Mobile (<690 px): volle Breite, Reihenfolge Text/CTA, dann Module,
 *     JoNa Site Core zuletzt.
 *
 * 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.13.0 (WS-5F)
 */

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

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

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

/* Innere Breite begrenzen (Container), Gutters aus dem Designsystem. */
.jona-wordpress-development__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(var(--jona-space-6), 5vw, var(--jona-space-8));
	align-items: center;
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
}

/* ------------------------------------------------------------------
 * Linke Spalte: Eyebrow, H2, Subline, Erklärungstext, CTA.
 */
.jona-wordpress-development__lead {
	min-width: 0;
	max-width: 46ch;
}

.jona-wordpress-development .jona-wordpress-development__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-wordpress-development__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-wordpress-development__subline {
	font-size: var(--jona-font-size-lg);
	color: var(--jona-color-ink);
	margin-block: 0 var(--jona-space-3);
}

.jona-wordpress-development__text {
	color: var(--jona-color-text-secondary);
	margin-block: 0 var(--jona-space-6);
}

.jona-wordpress-development__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jona-space-3);
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Rechte Spalte: technische Capability-Komposition.
 * 2 Spalten, ungleiche Gewichtung über grid-template-areas:
 *   plugins (hoch, 2 Reihen) | cpt
 *   plugins                   | apis
 *   admin (breit)
 *   core  (breit, hervorgehoben)
 */
.jona-wpdev {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"plugins cpt"
		"plugins apis"
		"admin admin"
		"core core";
	gap: var(--jona-space-3);
}

.jona-wpdev__module--plugins {
	grid-area: plugins;
}
.jona-wpdev__module--cpt {
	grid-area: cpt;
}
.jona-wpdev__module--apis {
	grid-area: apis;
}
.jona-wpdev__module--admin {
	grid-area: admin;
}
.jona-wpdev__module--core {
	grid-area: core;
}

/* ------------------------------------------------------------------
 * Modul-Basiskarte: weiße Surface, feine Border, leichter Schatten.
 * Keine Links – rein informativ, daher kein Hover-Lift als
 * Schein-Affordanz.
 */
.jona-wpdev__module {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jona-space-3);
	min-width: 0;
	padding: var(--jona-space-4);
	background-color: var(--jona-color-surface);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-lg);
	box-shadow: var(--jona-shadow-sm);
}

/* Mono-Tag oben rechts („module“, „data“, „api“, „admin“, „core“) –
 * technische Studio-Anmutung, dekorativ.
 */
.jona-wpdev__tag {
	position: absolute;
	top: var(--jona-space-4);
	right: var(--jona-space-4);
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jona-color-border-strong);
}

/* Icon-Badge: 44 px, grün getönt (Default). */
.jona-wpdev__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--jona-radius-md);
	background-color: var(--jona-color-accent-tint);
}

.jona-wpdev__icon svg {
	width: 24px;
	height: 24px;
	color: var(--jona-color-accent-strong);
}

.jona-wpdev__module-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-wpdev__module-text {
	font-size: var(--jona-font-size-sm);
	line-height: 1.55;
	color: var(--jona-color-text-secondary);
	margin-block: 0;
}

/* Admin-Vereinfachung: breites Modul, Text darf über eine Zeile laufen. */
.jona-wpdev__module--admin .jona-wpdev__module-text {
	max-width: 70ch;
}

/* ------------------------------------------------------------------
 * JoNa Site Core: hervorgehobenes Navy-Modul über die volle Breite –
 * das reale eigene Plugin als technisches Beispiel. Titel/Text in
 * Weiß, Funktionen als Mono-Chips.
 */
.jona-wpdev__module--core {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--jona-space-4);
	align-items: start;
	padding: var(--jona-space-5);
	color: var(--jona-color-inverse-text);
	background-color: var(--jona-color-bg-navy);
	background-image: linear-gradient(
		135deg,
		var(--jona-color-bg-navy) 0%,
		var(--jona-color-bg-navy-deep) 100%
	);
	border-color: transparent;
	box-shadow: var(--jona-shadow-md);
}

.jona-wpdev__module--core .jona-wpdev__tag {
	color: rgba(255, 255, 255, 0.5);
}

.jona-wpdev__icon--core {
	width: 48px;
	height: 48px;
	background-color: var(--jona-color-light-surface);
	border: var(--jona-border-width) solid var(--jona-color-light-border);
}

.jona-wpdev__icon--core svg {
	width: 26px;
	height: 26px;
	color: var(--jona-color-inverse-text);
}

.jona-wpdev__core-body {
	min-width: 0;
}

.jona-wpdev__core-kicker {
	display: block;
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jona-color-accent);
	margin-block-end: var(--jona-space-2);
}

.jona-wpdev__module--core .jona-wpdev__module-title {
	color: var(--jona-color-inverse-text);
	font-size: var(--jona-font-size-lg);
	margin-block-end: var(--jona-space-2);
}

.jona-wpdev__module--core .jona-wpdev__module-text {
	color: rgba(255, 255, 255, 0.82);
	max-width: 62ch;
	margin-block-end: var(--jona-space-4);
}

.jona-wpdev__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jona-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jona-wpdev__chip {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	line-height: 1;
	color: var(--jona-color-inverse-text);
	background-color: var(--jona-color-light-surface);
	border: var(--jona-border-width) solid var(--jona-color-light-border);
	border-radius: var(--jona-radius-full);
	padding: var(--jona-space-2) var(--jona-space-4);
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): keine gequetschte Split-Darstellung –
 * Text zuerst, Capability-Komposition darunter (intern weiterhin
 * 2 Spalten).
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-wordpress-development__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jona-space-7);
		align-items: start;
		padding-inline: var(--jona-space-gutter-md);
	}

	.jona-wordpress-development__lead {
		max-width: 62ch;
	}
}

/* ------------------------------------------------------------------
 * Mobile (<690 px): volle Breite, eine Spalte. Reihenfolge:
 * Text/CTA, dann Module, JoNa Site Core zuletzt.
 */
@media (max-width: 689px) {
	.jona-wordpress-development__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jona-space-6);
		align-items: start;
		padding-inline: var(--jona-space-gutter-sm);
	}

	.jona-wordpress-development__lead {
		max-width: none;
	}

	.jona-wpdev {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"plugins"
			"cpt"
			"apis"
			"admin"
			"core";
	}

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

	.jona-wpdev__module--core {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jona-space-4);
		padding: var(--jona-space-5);
	}
}

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