/*
 * JoNa | Software – Homepage Bento Services (WS-5D)
 * ---------------------------------------------------------------
 * Darstellung der Leistungsübersicht direkt unterhalb der Featured
 * Projects: asymmetrisches Bento-Grid mit sechs Leistungsbereichen.
 * Die Lead-Kachel (Individuelle Softwareentwicklung) ist das dunkle
 * 2×2-Panel, die übrigen Kacheln sind helle Surface-Karten – keine
 * sechs identischen Fliesen, klare optische Hierarchie.
 *
 * Inhalt:
 *   - scripts/content/home-bento-services.html (versioniertes
 *     Gutenberg-Markup: Head mit nativen Blöcken + ein atomarer
 *     wp:html-Block für das Grid, Marker-Append via bootstrap.sh).
 *   - Diese Datei liefert ausschließlich das Styling.
 *
 * Verantwortung (strikte Trennung, WS-5D):
 *   - design-system.css            = Tokens (--jona-*), Referenz.
 *   - home-bento-services.css      = Layout/Styling dieses Grids.
 *   - Gutenberg                    = Group + native Blöcke + ein
 *                                    wp:html-Ausnahmeblock (Analogie
 *                                    zur Hero-Visual-/Strip-Ausnahme,
 *                                    vgl. WS-4/WS-5B, Fingerprint v1).
 *
 * Link-Entscheidung (dokumentiert, offen in HOMEPAGE-CONCEPT):
 *   Alle sechs Kacheln führen aktuell auf /leistungen/ – Detailseiten
 *   je Bereich existieren (noch) nicht. Kachel-Links sind 1:1 gegen
 *   spätere Detail-URLs austauschbar; kein toter Link im Bestands-
 *   Zustand.
 *
 * Kachel-Optik:
 *   - Lead (2×2): dunkles Navy-Panel (Blueprint-Muster: grüner Glow,
 *     feines 24 px-Raster, Brand-Blue-Gradient), weißer Text, 56 px
 *     Icon-Badge auf lichtem Tint – die „Anker“-Leistung.
 *   - KI-Kachel (2×1): subtle-blue-Gradiente, visuell stärker als
 *     die 1×1-Karten (Themen-Akzent).
 *   - 1×1- und 2×1-Karten: weiße Surface, 1 px Border, radius-lg,
 *     shadow-sm; Icon-Badges 44 px (grün = accent-tint/strong,
 *     blue-Mod = subtle-blue/brand-blue); Hover = shadow-md + 2 px
 *     Lift (dekorativ – Information steht nie nur im Hover).
 *   - Kachel-Label: Mono, xs, uppercase in accent-strong (~5,1 :1
 *     auf Weiß); auf dem dunklen Lead in weiß (inverse-text).
 *
 * 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.11.0 (WS-5D)
 */

/* ------------------------------------------------------------------
 * Sektion: Featured Projects trägt oben bereits den vollen
 * Section-Gap (112/72/56 px) – hier also kein Top-Abstand (wie bei
 * WS-5C), darunter der volle Gap zur nächsten Sektion.
 */
.jona-bento-services {
	padding-block: 0 var(--jona-space-section-gap-lg);
}

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

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

/* ------------------------------------------------------------------
 * Head: Eyebrow + H2 + Subline (native Gutenberg-Blöcke).
 * Die Eyebrow-Regel ist lokal scope-haft neu definiert, damit die
 * Sektion nicht von der Enqueue-Reihenfolge anderer home-*.css-
 * Dateien abhängt (Werte identisch zu WS-5C).
 */
.jona-bento-services__head {
	margin-block-end: var(--jona-space-6);
}

.jona-bento-services .jona-section-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-brand-blue);
	margin-block: 0 var(--jona-space-2);
}

.jona-bento-services__title {
	font-size: var(--jona-font-size-2xl);
	color: var(--jona-color-brand-blue);
	margin-block: 0 var(--jona-space-3);
}

.jona-bento-services__subline {
	color: var(--jona-color-text-secondary);
	max-width: 62ch;
	margin-block: 0;
}

/* ------------------------------------------------------------------
 * Bento-Grid (Desktop): 4 Spalten, 6 Kacheln, 3 Reihen.
 *   Reihe 1/2: Lead 2×2 links, KI 2×1 rechtshoch,
 *              Web-Apps 1×1 + WordPress-Plugins 1×1 rechtsunten.
 *   Reihe 3:   APIs & Schnittstellen 2×1 links, Automatisierung 2×1 rechts.
 * Festes auto-rows-Minimum sorgt für gleichhohe Kacheln je Reihe;
 * Textbruch darf die Reihe organic wachsen lassen (auto).
 */
.jona-bento-services__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(150px, auto);
	gap: var(--jona-space-4);
}

.jona-bento-card--lead {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.jona-bento-card--ai {
	grid-column: 3 / 5;
	grid-row: 1 / 2;
}

.jona-bento-card--webapps {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.jona-bento-card--wordpress {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}

.jona-bento-card--apis {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
}

.jona-bento-card--automation {
	grid-column: 3 / 5;
	grid-row: 3 / 4;
}

/* ------------------------------------------------------------------
 * Basiskarte (ganze Kachel ist ein Link – große Trefferfläche,
 * A11y: Titel/Text sind die eigentliche Information). Doppelter
 * Selektor zur Spezifität gegenüber `.entry-content a` (0,1,1).
 */
.jona-bento-services .jona-bento-card {
	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);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow var(--jona-transition-base),
		transform var(--jona-transition-base);
}

.jona-bento-card:hover,
.jona-bento-card:focus-visible {
	box-shadow: var(--jona-shadow-md);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------
 * Icon-Badge: Kreis-Tint 44 px, Icon 24 px.
 * Grün (Default) = accent-tint + accent-strong; blue-Mod für die
 * „System/Verbindung“-Bereiche: subtle-blue + brand-blue.
 */
.jona-bento-card__visual {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--jona-radius-full);
	background-color: var(--jona-color-accent-tint);
}

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

.jona-bento-card__visual--blue {
	background-color: var(--jona-color-subtle-blue);
}

.jona-bento-card__visual--blue svg {
	color: var(--jona-color-brand-blue);
}

/* ------------------------------------------------------------------
 * Kachel-Text: Titel (H3) + ein Satz Text.
 */
.jona-bento-card__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;
	overflow-wrap: normal;
	hyphens: auto;
}

.jona-bento-card__text {
	font-size: var(--jona-font-size-sm);
	line-height: 1.5;
	color: var(--jona-color-text-secondary);
	margin-block: 0;
	overflow-wrap: normal;
	hyphens: auto;
}

/* Kachel-Label (Referenz-Sprache: Mono, uppercase, klein).
 * Farbe = accent-strong (~5,1 :1 auf Weiß) – nicht Brand-Grün,
 * dessen Weißkontrast nur dekorative Flächen trägt. */
.jona-bento-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--jona-space-2);
	margin-block-start: auto;
	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);
}

/* ------------------------------------------------------------------
 * Lead-Kachel: dunkles Navy-Panel mit Blueprint-Muster (analog
 * zum Featured-Projects-Platzhalter), 56 px Icon-Badge, mehr Luft.
 */
.jona-bento-card--lead {
	gap: var(--jona-space-3);
	padding: var(--jona-space-5);
	background-color: var(--jona-color-bg-dark);
	border-color: var(--jona-color-light-border);
	background-image:
		radial-gradient(
			closest-side circle at 78% 12%,
			rgba(112, 165, 86, 0.16),
			rgba(19, 23, 28, 0) 100%
		),
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(160deg, var(--jona-color-brand-blue) 0%, var(--jona-color-bg-dark) 70%);
	background-size: auto, 24px 24px, 24px 24px, auto;
}

.jona-bento-card--lead:hover,
.jona-bento-card--lead:focus-visible {
	box-shadow: var(--jona-shadow-md);
}

.jona-bento-card--lead .jona-bento-card__visual {
	width: 56px;
	height: 56px;
	background-color: var(--jona-color-light-surface);
	border: var(--jona-border-width) solid var(--jona-color-light-border);
}

.jona-bento-card--lead .jona-bento-card__visual svg {
	width: 30px;
	height: 30px;
}

.jona-bento-card--lead .jona-bento-card__title {
	font-size: var(--jona-font-size-xl);
	color: var(--jona-color-inverse-text);
}

.jona-bento-card--lead .jona-bento-card__text {
	color: rgba(255, 255, 255, 0.82);
}

/* Label auf dunklem Grund: weiß (Keine grüne Akzent-Farbe, die auf
 * Navy nicht kontraststark wäre). Auf dunklen Flächen ist der
 * helle Focus-Ring die sichtbare Auszeichnung. */
.jona-bento-card--lead .jona-bento-card__link {
	color: var(--jona-color-inverse-text);
}

.jona-bento-card--lead:focus-visible {
	outline-color: var(--jona-color-focus-ring-dark-bg);
}

/* KI-Kachel: dezent stärker getönt (subtle-blue -> surface) –
 * Themen-Akzent, ohne eigene Kartenfarbe einzuführen. */
.jona-bento-card--ai {
	background-image: linear-gradient(
		160deg,
		var(--jona-color-subtle-blue) 0%,
		var(--jona-color-surface) 68%
	);
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): 2 Spalten. Full-Width-Reihen in DOM-Reihen-
 * folge: Lead -> KI -> (Web-Apps | WordPress) -> APIs -> Auto-
 * matisierung. Desktop-Spans werden zurückgesetzt, Auto-Placement
 * übernimmt (deshalb Reihenfolge im DOM = Tablet-Reihenfolge).
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-bento-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(160px, auto);
		gap: var(--jona-space-4);
	}

	.jona-bento-card--lead,
	.jona-bento-card--ai,
	.jona-bento-card--webapps,
	.jona-bento-card--wordpress,
	.jona-bento-card--apis,
	.jona-bento-card--automation {
		grid-column: auto;
		grid-row: auto;
	}

	.jona-bento-card--lead,
	.jona-bento-card--ai,
	.jona-bento-card--apis,
	.jona-bento-card--automation {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------
 * Mobile (< 690 px): 1 Spalte, DOM-Reihenfolge (Lead zuerst).
 * Keine impliziten Spalten durch Desktop-Span-Reste (grid-column/
 * grid-row = auto), Kachel-Label mit 44 px Mindest-Trefferhöhe.
 */
@media (max-width: 689px) {
	.jona-bento-services__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: minmax(160px, auto);
		gap: var(--jona-space-4);
	}

	.jona-bento-card--lead,
	.jona-bento-card--ai,
	.jona-bento-card--webapps,
	.jona-bento-card--wordpress,
	.jona-bento-card--apis,
	.jona-bento-card--automation {
		grid-column: auto;
		grid-row: auto;
	}

	.jona-bento-card--lead {
		padding: var(--jona-space-5);
	}

	.jona-bento-card__link {
		min-height: 44px;
		align-items: center;
	}
}

/* ------------------------------------------------------------------
 * Accessibility & Reduced Motion
 * - Der globale :focus-visible-Ring aus design-system.css greift
 *   (dunkles Lead: heller Ring, siehe oben).
 * - Globales prefers-reduced-motion (design-system.css) setzt
 *   Transitionen auf Minimum; Lift/Shade hier nur dekorativ.
 */
@media (prefers-reduced-motion: reduce) {
	.jona-bento-services *,
	.jona-bento-services *::before,
	.jona-bento-services *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}