/*
 * JoNa Digital Solutions – Homepage KI & Automatisierung (JDS-8)
 * ===========================================================================
 * Dunkle Sektion unter den Leistungen: Intro, dreistufige Prozesskette
 * (Daten & Events → KI-Agent → Automatisierte Aktionen), kompakte
 * Einsatzmöglichkeiten und CTA. Ausschließlich Design-Tokens (--jds-*).
 * Nur HTML + CSS, kein JavaScript, keine externen Assets.
 *
 * Kontrast (geprüft, siehe docs/HOMEPAGE-AI-AUTOMATION.md):
 *   Weiß auf Navy Deep        15.04:1
 *   Inverse-Muted auf Navy    9.61:1
 *   Green (Eyebrow) auf Navy  5.16:1
 *   Weiß auf Dark Surface    12.63:1
 *   Green auf Dark Surface    4.33:1  -> nur Nicht-Text (Akzentbalken, Pfeile, Haken)
 *
 * Layout:
 *   Desktop >= 1000px : Intro, Prozesskette 3-spaltig mit horizontalen Pfeilen,
 *                       darunter Einsatzmöglichkeiten + CTA
 *   Tablet 690–999px  : Intro, Prozesskette gestapelt mit Pfeilen nach unten
 *   Mobile   < 690px  : wie Tablet, kompakter, CTA volle Breite
 *
 * Version: 0.7.0
 */

/* ===========================================================================
 * DIVI-NEUTRALISIERUNG (nur wenn die Sektion vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-ai) {
	padding: 0;
	background-color: var(--jds-navy-deep);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-band) 0%,
		var(--jds-navy-deep) 100%
	);
}

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

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

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

/* ===========================================================================
 * SEKTION
 * =========================================================================== */
.jds-ai {
	background-color: var(--jds-navy-deep);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-band) 0%,
		var(--jds-navy-deep) 100%
	);
	color: var(--jds-text-inverse);
	/* Großzügiger als die Leistungen, kompakter als der Hero. */
	padding-block: var(--jds-section-space);
}

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

/* ===========================================================================
 * INTRO
 * =========================================================================== */
.jds-ai__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-ai__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green);
}

.jds-ai__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-text-inverse);
	text-wrap: balance;
}

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

/* ===========================================================================
 * PROZESSKETTE
 * =========================================================================== */
.jds-ai__process {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--jds-grid-gap);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-ai-step {
	position: relative;
	display: flex;
	/* Dark-Surface-Variante (bewusst NICHT die weiße Service-Card). */
	flex-direction: column;
	gap: var(--jds-space-xs);
	padding: var(--jds-card-padding);
	background-color: var(--jds-surface-on-dark);
	border: var(--jds-border-width) solid var(--jds-border-on-dark);
	border-radius: var(--jds-radius-large);
	box-shadow: var(--jds-shadow-sm);
	transition: transform var(--jds-transition-base),
		box-shadow var(--jds-transition-base),
		border-color var(--jds-transition-base);
}

/* Grüner Akzentbalken oben (Markenakzent, kein Text) */
.jds-ai-step::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: var(--jds-space-md);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-green);
}

/* Verbindungspfeil zwischen den Schritten – rein dekorativ, per CSS.
 * Desktop: horizontaler Chevron rechts; < 1000px: Chevron zeigt nach unten. */
.jds-ai-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-1 * var(--jds-grid-gap) / 2 - 5px);
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--jds-green);
	border-right: 2px solid var(--jds-green);
	transform: translateY(-50%) rotate(45deg);
}

.jds-ai-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jds-card-icon-container);
	height: var(--jds-card-icon-container);
	flex: 0 0 auto;
	border-radius: var(--jds-radius-medium);
	background-color: var(--jds-surface-on-dark-strong);
	border: var(--jds-border-width) solid var(--jds-border-on-dark);
	color: var(--jds-text-inverse);
}

.jds-ai-step__svg {
	width: var(--jds-card-icon-size);
	height: var(--jds-card-icon-size);
}

.jds-ai-step__title {
	margin: var(--jds-space-md) 0 0;
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	font-weight: var(--jds-font-weight-semibold);
	color: var(--jds-text-inverse);
}

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

/* Dezente Hover-Reaktion (Desktop, optional) */
@media (hover: hover) and (pointer: fine) {
	.jds-ai-step:hover,
	.jds-ai-step:focus-within {
		transform: translateY(var(--jds-card-translate-hover));
		box-shadow: var(--jds-shadow-elevated);
		border-color: var(--jds-green);
	}
}

/* ===========================================================================
 * EINSATZMÖGLICHKEITEN + CTA
 * =========================================================================== */
.jds-ai__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jds-space-xl);
	margin-top: var(--jds-space-2xl);
	padding-top: var(--jds-space-xl);
	border-top: var(--jds-border-width) solid var(--jds-border-on-dark);
}

.jds-ai__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-space-sm) var(--jds-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-ai__feature {
	display: flex;
	align-items: flex-start;
	gap: var(--jds-space-xs);
	color: var(--jds-text-inverse);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* Grüner Haken – rein per CSS, keine Icon-Library. */
.jds-ai__check {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-accent-tint);
}

.jds-ai__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--jds-green);
	border-bottom: 2px solid var(--jds-green);
	transform: rotate(-45deg);
}

.jds-ai__cta-wrap {
	flex: 0 0 auto;
}

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

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

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

/* Auf dunklem Grund: heller Fokusring */
.jds-ai :focus-visible {
	outline-color: var(--jds-focus-ring-color-dark-bg);
}

/* ===========================================================================
 * TABLET (690–999px): Prozess gestapelt, Pfeile nach unten
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-ai {
		padding-block: var(--jds-section-space);
	}

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

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

	.jds-ai-step:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: calc(-1 * var(--jds-space-xl) / 2 - 2px);
		left: 50%;
		border-top: 0;
		border-right: 2px solid var(--jds-green);
		border-bottom: 2px solid var(--jds-green);
		transform: translateX(-50%) rotate(45deg);
	}

	.jds-ai__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jds-space-lg);
	}
}

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

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

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

	.jds-ai-step {
		padding: var(--jds-card-padding);
	}

	.jds-ai-step:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: calc(-1 * var(--jds-space-xl) / 2 - 2px);
		left: 50%;
		border-top: 0;
		border-right: 2px solid var(--jds-green);
		border-bottom: 2px solid var(--jds-green);
		transform: translateX(-50%) rotate(45deg);
	}

	.jds-ai__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jds-space-lg);
	}

	.jds-ai__features {
		grid-template-columns: minmax(0, 1fr);
	}

	.jds-ai__cta-wrap,
	.jds-ai__cta {
		width: 100%;
	}

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

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