/*
 * JoNa Digital Solutions – Homepage Hero (JDS-5)
 * ===========================================================================
 * Styling des Startseiten-Hero. Ausschließlich Design-Tokens (--jds-*).
 * Keine externen Assets, keine Animation-Library, keine Videos.
 *
 * Layout:
 *   Desktop >= 1000px : zweispaltig (Text ~52 % | technisches Visual ~48 %)
 *   Tablet 690–999px  : gestapelt (Text zuerst, kompakteres Visual darunter)
 *   Mobile   < 690px  : gestapelt, CTAs untereinander, Visual reduziert
 *
 * Full-Bleed: Der Hero liegt in einem Divi-Abschnitt. Damit der Navy-Hintergrund
 * randlos wirkt und Header/Hero-Inhalt exakt fluchten, wird der Divi-Abschnitt
 * skopiert über `:has(.jds-hero)` neutralisiert (Divi-Padding auf 0). Fällt
 * `:has()` weg, bleibt der Hero als Navy-Fläche in Containerbreite nutzbar.
 *
 * Version: 0.4.0
 */

/* ===========================================================================
 * FULL-BLEED + DIVI-NEUTRALISIERUNG (nur wenn der Hero vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-hero) {
	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-hero) > .et_pb_row {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

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

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

/* ===========================================================================
 * HERO-GRUNDFLAECHE
 * =========================================================================== */
.jds-hero {
	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);
	padding-block: var(--jds-space-3xl);
}

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

.jds-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
	gap: var(--jds-space-2xl);
	align-items: center;
}

/* ===========================================================================
 * TEXTSEITE
 * =========================================================================== */
.jds-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--jds-space-lg);
	min-width: 0;
}

.jds-hero__eyebrow {
	color: var(--jds-text-inverse-muted);
	margin: 0;
}

.jds-hero__title {
	margin: 0;
	max-width: 24ch;
	color: var(--jds-text-inverse);
	text-wrap: balance;
}

.jds-hero__title-line {
	display: block;
}

.jds-hero__accent {
	display: block;
	color: var(--jds-green);
}

.jds-hero__subline {
	margin: 0;
	max-width: 46ch;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

/* ===========================================================================
 * CTA-BEREICH
 * =========================================================================== */
.jds-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jds-space-md);
	margin-top: var(--jds-space-sm);
}

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

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

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

/* ===========================================================================
 * TRUST POINTS
 * =========================================================================== */
.jds-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jds-space-md) var(--jds-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--jds-border-width) solid var(--jds-border-on-dark);
	padding-top: var(--jds-space-lg);
	width: 100%;
	max-width: 44rem;
}

.jds-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--jds-space-2xs);
	color: var(--jds-text-inverse);
	font-size: var(--jds-font-size-body-sm);
	line-height: var(--jds-line-height-ui);
}

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

.jds-hero__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);
}

/* ===========================================================================
 * TECHNISCHES VISUAL (dekorativ, aria-hidden)
 * =========================================================================== */
.jds-hero__visual {
	min-width: 0;
}

.jds-hero-visual {
	display: grid;
	gap: var(--jds-space-lg);
}

/* --- Fenster mit Codepanel --- */
.jds-hero-window {
	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-elevated);
	overflow: hidden;
}

.jds-hero-window__bar {
	display: flex;
	align-items: center;
	gap: var(--jds-space-2xs);
	padding: var(--jds-space-sm) var(--jds-space-md);
	border-bottom: var(--jds-border-width) solid var(--jds-border-on-dark);
	background-color: var(--jds-surface-on-dark-strong);
}

.jds-hero-window__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-border-on-dark);
}

.jds-hero-window__title {
	margin-left: var(--jds-space-sm);
	font-family: var(--jds-font-mono);
	font-size: var(--jds-font-size-xs);
	letter-spacing: 0.02em;
	color: var(--jds-text-inverse-muted);
}

.jds-hero-code {
	padding: var(--jds-space-lg);
}

.jds-hero-code__line {
	margin: 0 0 var(--jds-space-2xs);
	font-family: var(--jds-font-mono);
	font-size: var(--jds-font-size-mono);
	line-height: 1.6;
	color: var(--jds-text-inverse-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jds-hero-code__line:last-child {
	margin-bottom: 0;
}

.jds-hero-code__key {
	color: var(--jds-green);
}

/* --- Status-/Automation-Chips (neutral, ohne Kennzahlen) --- */
.jds-hero-dashboard {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-sm);
}

.jds-hero-status {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 var(--jds-space-md);
	border: var(--jds-border-width) solid var(--jds-border-on-dark);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-surface-on-dark);
	color: var(--jds-text-inverse);
	font-family: var(--jds-font-mono);
	font-size: var(--jds-font-size-mono);
	letter-spacing: 0.01em;
}

.jds-hero-status:first-child {
	border-color: var(--jds-green);
	color: var(--jds-green);
}

/* ===========================================================================
 * DESKTOP-MINDESTWIRKUNG
 * =========================================================================== */
@media (min-width: 1000px) {
	.jds-hero {
		min-height: clamp(540px, 62vh, 680px);
		display: flex;
		align-items: center;
		padding-block: var(--jds-section-space-lg);
	}

	.jds-hero__inner {
		width: 100%;
	}
}

/* ===========================================================================
 * TABLET (690–999px): gestapelt, kompakteres Visual
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-hero {
		padding-block: var(--jds-section-space);
	}

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

	.jds-hero__title {
		max-width: 30ch;
	}

	.jds-hero__trust {
		max-width: none;
	}

	.jds-hero-code {
		padding: var(--jds-space-md);
	}
}

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

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

	.jds-hero__title {
		max-width: none;
	}

	.jds-hero__subline {
		max-width: none;
	}

	/* CTAs untereinander, nahezu volle Breite */
	.jds-hero__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.jds-hero__cta {
		width: 100%;
	}

	/* Trust Points gestapelt */
	.jds-hero__trust {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jds-space-sm);
		max-width: none;
	}

	/* Visual reduziert: Codezeilen begrenzen */
	.jds-hero-code__line:nth-child(n + 4) {
		display: none;
	}

	.jds-hero-status {
		min-height: 30px;
		font-size: var(--jds-font-size-xs);
	}
}

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