/*
 * JoNa | Software – Homepage Tech Stack (WS-5H)
 * ---------------------------------------------------------------
 * Kompakte, technische Technologie-Übersicht direkt unterhalb der
 * Entwicklungsprozess-Sektion. Sie zeigt die tatsächlich eingesetzten
 * Technologien, logisch nach Aufgabe gruppiert – bewusst keine Logo-
 * Wand, keine Skill-Matrix und keine Bento-Kartenwand: eher eine
 * dichte „Stack-Übersicht“ mit kleinen Gruppen-Panels und Chips.
 *
 * Inhalt:
 *   - scripts/content/home-tech-stack.html (versioniertes
 *     Gutenberg-Markup: Kopf als native Blöcke, die Gruppen-Übersicht
 *     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-tech-stack.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,
 *                                    Fingerprint v1).
 *
 * Layout:
 *   - Desktop (>=1000 px): 3 kompakte Gruppen oben, 2 breitere unten
 *     (Automation / AI · Infrastructure). Die unteren Panels laufen
 *     horizontal (Label links, Chips fließend rechts) – dichter und
 *     technischer als die oberen, bewusst kein Bento-Raster.
 *   - Tablet (690–999 px): 2 Spalten, Gruppen sinnvoll umgebrochen.
 *   - Mobile (<690 px): 1 Spalte, Gruppen untereinander, Chips brechen um.
 *
 * 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.15.0 (WS-5H)
 */

/* ------------------------------------------------------------------
 * Sektion: helles, neutrales Band nach dem Entwicklungsprozess. Die
 * vorherige Sektion trägt unten bereits den vollen Section-Gap; hier
 * nur der Gap zur nächsten (noch folgenden) Sektion. Bewusst kompakt.
 */
.jona-tech-stack {
	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-tech-stack {
		padding-block: 0 var(--jona-space-section-gap-md);
	}
}

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

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

/* ------------------------------------------------------------------
 * Gruppen-Übersicht – Desktop (>=1000 px): 3 Gruppen oben, 2 unten.
 * 6-Spalten-Grundraster; obere Panels je 2 Spalten, unten Automation /
 * AI 4 Spalten und Infrastructure 2 Spalten.
 */
.jona-stack {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--jona-space-3);
	grid-template-areas:
		"backend backend frontend frontend platforms platforms"
		"automation automation automation automation infrastructure infrastructure";
}

.jona-stack-group--backend {
	grid-area: backend;
}
.jona-stack-group--frontend {
	grid-area: frontend;
}
.jona-stack-group--platforms {
	grid-area: platforms;
}
.jona-stack-group--automation {
	grid-area: automation;
}
.jona-stack-group--infrastructure {
	grid-area: infrastructure;
}

/* Panel: helle Surface, feine Border, kompakter Radius, kein Shadow. */
.jona-stack-group {
	display: flex;
	flex-direction: column;
	gap: var(--jona-space-4);
	min-width: 0;
	padding: var(--jona-space-5);
	background-color: var(--jona-color-surface);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-md);
}

/* Untere Panels: horizontale Anordnung (Label links, Chips rechts) –
 * dichter und klar anders als die oberen Gruppen, bewusst keine Karten.
 */
.jona-stack-group--automation,
.jona-stack-group--infrastructure {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--jona-space-4) var(--jona-space-5);
}

.jona-stack-group--automation .jona-stack-group__label,
.jona-stack-group--infrastructure .jona-stack-group__label {
	flex: none;
}

/* Mono-Gruppenlabel mit kleinem grünen Node (dekorativ, rein CSS). */
.jona-stack-group__label {
	display: flex;
	align-items: center;
	gap: var(--jona-space-2);
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--jona-color-brand-blue);
	margin-block: 0;
}

.jona-stack-group__label::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--jona-radius-full);
	background-color: var(--jona-color-accent);
}

/* Technologie-Chips – kompakt, umbruchfähig, kein Hover (nicht interaktiv). */
.jona-stack-group__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jona-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jona-stack-chip {
	font-size: var(--jona-font-size-sm);
	line-height: 1;
	color: var(--jona-color-ink);
	background-color: var(--jona-color-bg-muted);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-full);
	padding: var(--jona-space-2) var(--jona-space-3);
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): 2 Spalten, Gruppen sinnvoll umgebrochen.
 * Untere Panels wieder vertikal (kein gequetschtes Horizontal-Layout).
 */
@media (max-width: 999px) {
	.jona-stack-group--automation,
	.jona-stack-group--infrastructure {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-tech-stack__inner {
		padding-inline: var(--jona-space-gutter-md);
	}

	.jona-stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"backend frontend"
			"platforms automation"
			"infrastructure infrastructure";
	}
}

/* ------------------------------------------------------------------
 * Mobile (<690 px): 1 Spalte, Gruppen untereinander, Chips brechen um.
 * Kein horizontaler Scrollbereich, keine Mini-Schrift.
 */
@media (max-width: 689px) {
	.jona-tech-stack__inner {
		padding-inline: var(--jona-space-gutter-sm);
	}

	.jona-tech-stack__subline {
		margin-block-end: var(--jona-space-5);
	}

	.jona-stack {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"backend"
			"frontend"
			"platforms"
			"automation"
			"infrastructure";
	}

	.jona-stack-group {
		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-stack-group {
		transition: none;
	}
}