/*
 * JoNa Digital Solutions – Homepage Leistungen im Überblick (JDS-7)
 * ===========================================================================
 * Sektion direkt unter den Markenbereichen: Intro + sechs kompakte
 * Service-Cards + zentraler CTA. Ausschließlich Design-Tokens (--jds-*).
 * Nur HTML/CSS, kein JavaScript, keine externen Assets.
 *
 * Layout (Grid-Entscheidung: 3 × 2 statt 6 × 1 – siehe docs/HOMEPAGE-SERVICES.md):
 *   Desktop >= 1000px : 3 Spalten × 2 Reihen (Cards ~357px, Titel lesbar)
 *   Tablet 690–999px  : 2 Spalten
 *   Mobile   < 690px  : 1 Spalte
 *
 * Version: 0.6.0
 */

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

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

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

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

/* ===========================================================================
 * SEKTION
 * =========================================================================== */
.jds-services {
	background-color: var(--jds-bg-soft);
	color: var(--jds-text);
	/* Kompakter als Hero/Markenbereiche (§27). */
	padding-block: var(--jds-section-space-sm);
}

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

/* ===========================================================================
 * INTRO (Titel + Kurztext links, CTA rechts)
 * =========================================================================== */
.jds-services__intro {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--jds-space-xl);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-services__intro-text {
	max-width: var(--jds-content-text);
}

.jds-services__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-services__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-services__intro-cta {
	flex: 0 0 auto;
}

.jds-services__cta {
	min-height: var(--jds-btn-min-height);
	white-space: nowrap;
}

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

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

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

/* ===========================================================================
 * SERVICE-CARD (erweitert .jds-card / .jds-card--service aus dem Designsystem)
 * =========================================================================== */
.jds-service-card {
	/* Hintergrund/Border/Radius/Shadow/Padding kommen aus .jds-card. */
	padding: var(--jds-card-padding);
}

.jds-service-card__icon {
	width: var(--jds-card-icon-container);
	height: var(--jds-card-icon-container);
	margin-bottom: var(--jds-space-md);
}

.jds-service-card__svg {
	width: var(--jds-card-icon-size);
	height: var(--jds-card-icon-size);
}

.jds-service-card__title {
	/* Farbe (--jds-heading) kommt aus .jds-card__title. */
	margin: 0 0 var(--jds-space-xs);
}

.jds-service-card__text {
	/* Farbe (--jds-text-muted) kommt aus .jds-card__text. */
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * TABLET (690–999px): 2 Spalten
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-services {
		padding-block: var(--jds-section-space-sm);
	}

	.jds-services__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jds-space-lg);
		margin-bottom: var(--jds-space-xl);
	}

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

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

	.jds-services__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jds-space-lg);
		margin-bottom: var(--jds-space-xl);
	}

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

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

	.jds-service-card__icon {
		margin-bottom: var(--jds-space-sm);
	}

	/* CTA mobil gut erreichbar und breit */
	.jds-services__intro-cta,
	.jds-services__cta {
		width: 100%;
	}

	.jds-services__cta {
		justify-content: center;
		white-space: normal;
		min-height: 48px;
	}
}

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