/*
 * JoNa | Software – Homepage Featured Projects (WS-5C)
 * ---------------------------------------------------------------
 * Darstellung der dynamischen Projektsektion direkt nach dem
 * Capability Strip: asymmetrisches Showcase statt drei gleicher
 * Karten – das erste Featured-Projekt (AtlasJoe) ist visuell
 * dominant (Lead), die übrigen Projekte sind kompakte Sekundärkarten.
 *
 * Inhalt:
 *   - Section-Wrapper + Head (Eyebrow, H2, Subline, Gesamt-CTA):
 *     scripts/content/home-featured-projects.html (versioniertes
 *     Gutenberg-Markup, Marker-Append via bootstrap.sh).
 *   - Karten-Grid: dynamisch per Shortcode [jona_featured_projects]
 *     (Renderer: inc/home-featured-projects.php) aus dem CPT
 *     jona_project + Featured-Meta aus JoNa Site Core.
 *
 * Verantwortung (strikte Trennung, WS-5C):
 *   - design-system.css          = Tokens (--jona-*), Referenz.
 *   - JoNa Site Core             = Datenmodell (Featured-Meta/-Query).
 *   - home-featured-projects.css = Layout/Styling dieser Datei.
 *   - Gutenberg                  = Group + native Blöcke + core/shortcode.
 *
 * Karten-Optik:
 *   - Surface-Karte (L2): weiße Fläche, 1px Border, radius-lg, shadow-sm;
 *     Hover = shadow-md + 2 px Lift (Information NIE nur per hover).
 *   - Medienfläche 16:10/16:9: echtes Beitragsbild (responsive <img>)
 *     oder abstrakter Platzhalter-Kopf (dunkler Tech-Look, Blueprint-
 *     Raster, Monogramm) – klar Platzhalter, KEIN Fake-UI. Später 1:1
 *     über das Beitragsbild (Mediathek) austauschbar.
 *   - Tech-Chips: Mono, uppercase, Pill (Referenz-Sprache).
 *
 * 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.10.0 (WS-5C)
 */

/* ------------------------------------------------------------------
 * Sektion: nach oben trägt der Capability Strip bereits den vollen
 * Section-Gap (112/72/56 px) – hier also kein zusätzlicher Top-Abstand
 * (kein Aneinanderkleben, aber auch keine Doppel-Lücke). Nach unten
 * der volle Gap zur nächsten Sektion (WS-5D).
 */
.jona-featured-projects {
	padding-block: 0 var(--jona-space-section-gap-lg);
}

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

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

/* Projekte-Seite /projekte/ (WS-6): nutzt dieselbe Sektion und dasselbe
 * Karten-Grid wie die Startseite, braucht aber einen Top-Abstand, weil
 * darüber keine Sektion den Section-Gap trägt (es folgt direkt der
 * Seitentitel). Startseite bleibt unberührt (dortiges 0 bleibt 0). */
.jona-projects-page {
	padding-block-start: var(--jona-space-section-md);
}

@media (max-width: 689px) {
	.jona-projects-page {
		padding-block-start: var(--jona-space-7);
	}
}

/* ------------------------------------------------------------------
 * Head: Titel + Subline links, Gesamt-CTA rechts (Desktop/Tablet).
 */
.jona-featured-projects__head {
	margin-block-end: var(--jona-space-6);
}

.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-featured-projects__title {
	font-size: var(--jona-font-size-2xl);
	color: var(--jona-color-brand-blue);
	margin-block: 0 var(--jona-space-3);
}

.jona-featured-projects__subline {
	color: var(--jona-color-text-secondary);
	max-width: 58ch;
	margin-block: 0;
}

.jona-featured-projects__cta {
	margin-block: var(--jona-space-4) 0;
}

@media (min-width: 690px) {
	.jona-featured-projects__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--jona-space-6);
		align-items: center;
	}

	.jona-featured-projects__head .jona-section-eyebrow,
	.jona-featured-projects__title,
	.jona-featured-projects__subline {
		grid-column: 1;
	}

	.jona-featured-projects__cta {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		justify-self: end;
		margin-block: 0;
	}
}

/* ------------------------------------------------------------------
 * Karten-Grid (Desktop): 2 Spalten. Das Lead-Projekt läuft vollbreit
 * als große Quer-Karte (Reihe 1), die Sekundär-Projekte stapeln sich
 * darunter je als kompakte Quer-Karte (Reihe 2). Klare Hierarchie
 * ohne drei identische Karten; ein viertes Projekt (falls gepflegt)
 * läuft ebenfalls vollbreit.
 */
.jona-featured-projects__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jona-space-5);
}

.jona-featured-projects__grid > .jona-project-card:nth-child(n + 4) {
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------------
 * Basiskarte
 */
.jona-project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	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);
	overflow: hidden;
	transition: box-shadow var(--jona-transition-base),
		transform var(--jona-transition-base);
}

.jona-project-card:hover {
	box-shadow: var(--jona-shadow-md);
	transform: translateY(-2px);
}

/* Medienfläche: festes Seitenverhältnis, Bild füllt die Fläche. */
.jona-project-card__media {
	position: relative;
	flex-shrink: 0;
	background-color: var(--jona-color-bg-dark);
}

.jona-project-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Abstrakter Platzhalter-Kopf (nur ohne Beitragsbild): dunkler
 * Tech-Look mit Blueprint-Raster + dezenter Monogramm-Chiffre.
 * Dekorativ, aria-hidden im Markup – alle Infos stehen im Karten-Text. */
.jona-project-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:
		radial-gradient(
			closest-side circle at 72% 18%,
			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) 78%);
	background-size: auto, 24px 24px, 24px 24px, auto;
}

.jona-project-card__monogram {
	font-family: var(--jona-font-mono);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.28);
}

/* Kartenkörper */
.jona-project-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jona-space-3);
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--jona-space-5);
}

.jona-project-card__title {
	font-size: var(--jona-font-size-xl);
	margin-block: 0;
}

/* Titel-Link: ohne Unterstreichung als Karten-Headline. Die Selektoren
 * führen die Kartenklasse – sonst gewinnt die generische
 * `.entry-content a`-Regel (design-system.css) und unterstreicht. */
.jona-project-card .jona-project-card__title-link {
	color: var(--jona-color-brand-blue);
	text-decoration: none;
}

.jona-project-card .jona-project-card__title-link:hover {
	color: var(--jona-color-brand-blue-dark);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jona-project-card__excerpt {
	color: var(--jona-color-text-secondary);
	font-size: var(--jona-font-size-sm);
	margin-block: 0;
}

/* Tech-Chips (Referenz-Sprache: Mono, uppercase, Pill) */
.jona-project-card__tech {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jona-space-2);
	list-style: none;
	margin-block: 0;
	padding: 0;
}

.jona-project-card__tech-item {
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jona-color-text-secondary);
	background-color: var(--jona-color-bg-muted);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-full);
	padding: 3px 10px;
}

/* Karten-Link: bewusst unterstrichen (nicht nur Farbe), große Trefferfläche.
 * Mit Kartenklasse zur Spezifität gegenüber `.entry-content a`. */
.jona-project-card .jona-project-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--jona-space-1);
	margin-block-start: auto;
	padding-block: var(--jona-space-2);
	font-size: var(--jona-font-size-sm);
	font-weight: var(--jona-font-weight-semibold);
	color: var(--jona-color-brand-blue);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.jona-project-card .jona-project-card__link:hover {
	color: var(--jona-color-brand-blue-dark);
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------
 * Lead-Karte (Desktop): vollbreite Quer-Karte – großes Visual links
 * (55 %), Text rechts mit mehr Luft und größerer Typo. Visuell
 * dominant, ohne erzwungene Zeilen-Überhöhe (kein Leerraum).
 */
.jona-project-card--lead {
	grid-column: 1 / -1;
	flex-direction: row;
}

.jona-project-card--lead .jona-project-card__media {
	width: 52%;
	aspect-ratio: 16 / 9;
}

.jona-project-card--lead .jona-project-card__body {
	padding: var(--jona-space-6);
	gap: var(--jona-space-4);
}

.jona-project-card--lead .jona-project-card__title {
	font-size: var(--jona-font-size-2xl);
}

.jona-project-card--lead .jona-project-card__excerpt {
	font-size: var(--jona-font-size-base);
	max-width: 46ch;
}

.jona-project-card--lead .jona-project-card__link {
	font-size: var(--jona-font-size-base);
}

/* Sekundärkarte (Desktop): kompakte Quer-Karte – Medienfläche links
 * (40 %), Text rechts. Bewusst kleiner/leiser als das Lead-Projekt. */
.jona-project-card--secondary {
	flex-direction: row;
}

.jona-project-card--secondary .jona-project-card__media {
	width: 40%;
	aspect-ratio: 16 / 10;
}

.jona-project-card--secondary .jona-project-card__body {
	padding: var(--jona-space-5);
	gap: var(--jona-space-2);
}

/* Nur ein Sekundärprojekt (WS-5K, z. B. JoNa Site Core nach dem Entfernen
 * von CampaignSentinel): Die Karte läuft vollbreit, bleibt aber durch die
 * kleinere Medienfläche (1/3) klar dem Lead untergeordnet – keine leere
 * Rasterspalte, keine zweite Lead-Optik. */
.jona-project-card--secondary:last-child:nth-child(2) {
	grid-column: 1 / -1;
}

.jona-project-card--secondary:last-child:nth-child(2) .jona-project-card__media {
	width: 33%;
}

/* Status-Badge (WS-5K): sachlicher Zustandshinweis auf der Karte
 * (z. B. „In Entwicklung“). Ruhig, mit kleinem Punkt – Status statt
 * bunter Auszeichnung; als Text auch ohne Farbe lesbar. */
.jona-project-card__status {
	display: inline-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.06em;
	text-transform: uppercase;
	color: var(--jona-color-text-secondary);
	background-color: var(--jona-color-bg-muted);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-full);
	padding: 3px 10px;
}

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

/* Kleines Typ-Label (WS-8), z. B. „Interne Business-Anwendung". */
.jona-project-card__type {
	margin: 0;
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--jona-color-text-secondary);
}

/* ------------------------------------------------------------------
 * Medienmodus (WS-8): echte UI-/Produkt-Screenshots werden NICHT
 * beschnitten, sondern vollständig sichtbar auf ruhiger Fläche gezeigt.
 * Der grafische Platzhalter bleibt unverändert (object-fit: cover wird
 * hier nur für echte Screenshots durch contain ersetzt).
 */
.jona-project-card__media--screenshot {
	background-color: var(--jona-color-bg-muted);
}

.jona-project-card__img--contain {
	object-fit: contain;
	padding: var(--jona-space-3);
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): gleiche Struktur, etwas kompaktere Visuals.
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-featured-projects__grid {
		gap: var(--jona-space-4);
	}

	.jona-project-card--lead .jona-project-card__media {
		width: 50%;
	}

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

/* ------------------------------------------------------------------
 * Mobile (< 690 px): komplett stapeln, Reihenfolge = Featured-
 * Reihenfolge (AtlasJoe -> CampaignSentinel -> JoNa Site Core).
 * Screenshot/Visual immer oberhalb des Textes, volle Breite,
 * Tech-Chips umbrechen, kein horizontaler Overflow.
 */
@media (max-width: 689px) {
	.jona-featured-projects__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jona-space-4);
	}

	.jona-project-card--lead,
	.jona-project-card--secondary {
		grid-column: auto;
		grid-row: auto;
		flex-direction: column;
	}

	.jona-project-card--lead .jona-project-card__media,
	.jona-project-card--secondary .jona-project-card__media {
		width: 100%;
		min-width: 0;
		aspect-ratio: 16 / 10;
	}

	/* Einzelne Sekundärkarte mobil ebenfalls volle Breite. */
	.jona-project-card--secondary:last-child:nth-child(2) .jona-project-card__media {
		width: 100%;
	}

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

	.jona-project-card .jona-project-card__link {
		min-height: 44px;
	}

	.jona-featured-projects__cta .wp-block-button__link {
		min-width: 220px;
	}
}