/*
 * JoNa Digital Solutions – Homepage Ausgewählte Projekte (JDS-9)
 * ===========================================================================
 * Helle Sektion unter der dunklen KI-Sektion: Intro + drei Project-Cards
 * (JoNa Protect, AtlasJoe, JoNa Content Agent) mit CSS-/HTML-Visual, Tags
 * und öffentlicher Kurzbeschreibung. Ausschließlich Design-Tokens (--jds-*).
 * Nur HTML + CSS, kein JavaScript, keine externen Assets/Bilder.
 *
 * Card-Basis kommt aus dem Designsystem (.jds-card / .jds-card--project):
 *   weiße Fläche, Border, Radius, Shadow, Media mit 16:10
 *   (--jds-card-project-media-ratio). Hier nur Sektion, Grid, Tags und die
 *   dekorativen Projektvisuals.
 *
 * Layout:
 *   Desktop >= 1000px : 3 Cards nebeneinander
 *   Tablet 690–999px  : 2 Cards pro Reihe (2 + 1)
 *   Mobile   < 690px  : 1 Card pro Reihe
 *
 * Version: 0.8.0
 */

/* ===========================================================================
 * DIVI-NEUTRALISIERUNG (nur wenn die Sektion vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-projects) {
	padding: 0;
	background-color: var(--jds-bg);
}

.et_pb_section:has(.jds-projects) > .et_pb_row {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-projects) .et_pb_column {
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-projects) .et_pb_code_inner {
	width: 100%;
}

/* ===========================================================================
 * SEKTION
 * =========================================================================== */
.jds-projects {
	background-color: var(--jds-bg);
	color: var(--jds-text);
	padding-block: var(--jds-section-space);
}

.jds-projects *,
.jds-projects *::before,
.jds-projects *::after {
	box-sizing: border-box;
}

/* ===========================================================================
 * INTRO
 * =========================================================================== */
.jds-projects__intro {
	max-width: var(--jds-content-text);
	/* JDS-12: etwas kompakter, da die Einordnung darunter eine zusätzliche
	 * Zeile belegt; Tablet/Mobile bleiben ohnehin bei --jds-space-xl. */
	margin: 0 0 var(--jds-space-xl);
}

.jds-projects__eyebrow {
	margin: 0 0 var(--jds-space-md);
}

.jds-projects__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-projects__lead {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-projects__note {
	/* JDS-12: enger an die Lead-Zeile gerückt (bleibt eine eigene Einordnung,
	 * wirkt aber als Zusatz zum Intro statt als eigener Block). */
	margin: var(--jds-space-sm) 0 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-sm);
}

/* ===========================================================================
 * GRID
 * =========================================================================== */
.jds-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
	align-items: stretch;
}

/* ===========================================================================
 * PROJECT CARD (erweitert .jds-card / .jds-card--project)
 * =========================================================================== */
.jds-project-card {
	/* Fläche/Border/Radius/Shadow/Padding(0) kommen aus .jds-card--project. */
	transition: transform var(--jds-transition-base),
		box-shadow var(--jds-transition-base),
		border-color var(--jds-transition-base);
}

.jds-project-card__media {
	position: relative;
	display: flex;
	overflow: hidden;
}

.jds-project-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
	padding: var(--jds-card-padding);
}

/* --- Tags --- */
.jds-project-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-project-card__tag {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--jds-space-sm);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-bg-soft);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-eyebrow);
	font-weight: var(--jds-font-weight-medium);
	line-height: var(--jds-line-height-ui);
	letter-spacing: 0.01em;
}

.jds-project-card__title {
	/* Farbe (--jds-heading) kommt aus .jds-card__title. */
	margin: 0;
}

.jds-project-card__text {
	/* Farbe (--jds-text-muted) kommt aus .jds-card__text. */
	margin: 0;
}

/* Dezenter Hover (Desktop) */
@media (hover: hover) and (pointer: fine) {
	.jds-project-card:hover,
	.jds-project-card:focus-within {
		transform: translateY(var(--jds-card-translate-hover));
		box-shadow: var(--jds-card-shadow-hover);
		border-color: var(--jds-border-strong);
	}
}

/* ===========================================================================
 * PROJEKTVISUALS (dekorativ, aria-hidden)
 * =========================================================================== */
.jds-project-visual {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--jds-space-sm);
	padding: var(--jds-space-md);
	background-color: var(--jds-bg-soft);
}

/* --- Gemeinsame Bausteine --- */
.jds-project-visual .jpv-window,
.jds-project-visual .jpv-trip,
.jds-project-visual .jpv-board__card,
.jds-project-visual .jpv-thumb {
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-medium);
	background-color: var(--jds-white);
	box-shadow: var(--jds-shadow-subtle);
}

.jds-project-visual .jpv-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--jds-space-xs);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-white);
	border: var(--jds-border-width) solid var(--jds-border);
	color: var(--jds-navy);
	font-size: var(--jds-font-size-xs);
	line-height: var(--jds-line-height-ui);
	white-space: nowrap;
}

.jds-project-visual .jpv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-xs);
}

/* --- 1) JoNa Protect: Dashboard + Monitoring-Linie --- */
.jds-project-visual--protect .jpv-window {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-xs);
	padding: var(--jds-space-sm);
}

.jds-project-visual .jpv-window__bar {
	display: flex;
	gap: 5px;
}

.jds-project-visual .jpv-window__dot {
	width: 7px;
	height: 7px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-border);
}

.jds-project-visual--protect .jpv-window__dot:first-child {
	background-color: var(--jds-green);
}

.jds-project-visual .jpv-window__rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px var(--jds-space-sm);
}

.jds-project-visual .jpv-row {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-xs);
	line-height: var(--jds-line-height-ui);
}

.jds-project-visual .jpv-row__dot {
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-navy);
}

.jds-project-visual .jpv-line {
	width: 100%;
	height: 34px;
}

.jds-project-visual .jpv-line polyline {
	fill: none;
	stroke: var(--jds-green);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- 2) AtlasJoe: Trip-/Zahlungs-/Dokumentkarte --- */
.jds-project-visual--atlasjoe .jpv-trip {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
	padding: var(--jds-space-md);
}

.jds-project-visual .jpv-trip__route {
	display: block;
	height: 3px;
	border-radius: var(--jds-radius-pill);
	background-image: linear-gradient(
		90deg,
		var(--jds-navy) 0%,
		var(--jds-navy) 45%,
		var(--jds-green) 45%,
		var(--jds-green) 100%
	);
}

.jds-project-visual .jpv-timeline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 2px;
}

.jds-project-visual .jpv-timeline__node {
	width: 10px;
	height: 10px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-bg-blue-soft);
	border: 2px solid var(--jds-navy);
}

.jds-project-visual .jpv-timeline__node:last-child {
	border-color: var(--jds-green);
	background-color: var(--jds-bg-green-soft);
}

/* --- 3) JoNa Content Agent: Media -> Analyse -> Storyboard --- */
.jds-project-visual--content-agent {
	align-items: stretch;
}

.jds-project-visual .jpv-media {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jds-space-xs);
}

.jds-project-visual .jpv-thumb {
	display: block;
	height: 34px;
	background-color: var(--jds-bg-blue-soft);
	border-color: var(--jds-white);
}

.jds-project-visual .jpv-thumb:nth-child(2) {
	background-color: var(--jds-bg-green-soft);
}

.jds-project-visual .jpv-arrow {
	align-self: center;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--jds-green);
	border-right: 2px solid var(--jds-green);
	transform: rotate(135deg);
}

.jds-project-visual .jpv-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-space-xs);
}

.jds-project-visual .jpv-board__card {
	display: block;
	height: 26px;
	background-color: var(--jds-white);
}

/* ===========================================================================
 * SECTION-CTA
 * =========================================================================== */
.jds-projects__action {
	margin-top: var(--jds-space-2xl);
}

.jds-projects__cta {
	min-height: var(--jds-btn-min-height);
}

.jds-projects__cta-arrow {
	display: inline-block;
	transition: transform var(--jds-transition-fast);
}

.jds-projects__cta:hover .jds-projects__cta-arrow,
.jds-projects__cta:focus-visible .jds-projects__cta-arrow {
	transform: translateX(2px);
}

/* ===========================================================================
 * TABLET (690–999px): 2 Cards pro Reihe (2 + 1)
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-projects {
		padding-block: var(--jds-section-space);
	}

	.jds-projects__intro {
		margin-bottom: var(--jds-space-xl);
	}

	.jds-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--jds-space-lg);
	}
}

/* ===========================================================================
 * MOBILE (< 690px): 1 Card pro Reihe
 * =========================================================================== */
@media (max-width: 689px) {
	.jds-projects {
		padding-block: var(--jds-space-2xl);
	}

	.jds-projects__intro {
		margin-bottom: var(--jds-space-xl);
	}

	.jds-projects__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-lg);
	}

	.jds-project-card__body {
		padding: var(--jds-card-padding);
	}

	.jds-projects__action,
	.jds-projects__cta {
		width: 100%;
	}

	.jds-projects__cta {
		justify-content: center;
		min-height: 48px;
	}
}

/* ===========================================================================
 * REDUCED MOTION
 * =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.jds-project-card,
	.jds-projects__cta-arrow {
		transition: none;
	}
}