/*
 * emo2026, Dienstleistungen one-pager (page-dienstleistungen.php).
 *
 * Third layout iteration (owner 2026-08-31, "change the entire page
 * layout to work better for this type of showcase"): full-bleed
 * alternating BANDS, the same language the product-line pages and
 * their CTA stripe speak. Each service owns a full-width band with its
 * own background (warm tint / white alternating), the content sits in
 * a readable inner column, and the photo fills a fixed panel inside
 * the band, so nothing floats in open space no matter how wide the
 * window is. A dark stripe closes the page, mirroring the
 * product-line CTA stripe.
 *
 * The earlier iterations failed structurally: cards read as clutter,
 * and bare photos in a 70vw container floated in voids. Bands own
 * their whitespace.
 *
 * Plain CSS, no preprocessor, no nesting. Tokens from tokens.css; the
 * :root block below only aliases them or captures page-local geometry.
 */

:root {
	/* Readability column INSIDE a band; deliberately narrower than
	 * --layout-content-max-width: bands carry the full width, the text
	 * does not have to. */
	--dl-inner:        1200px;
	--dl-gutter:       var(--layout-gutter);

	--dl-band-pad-y:   var(--space-11);   /* 96px desktop */
	--dl-split-gap:    var(--space-9);    /* 64px between text and photo */
	--dl-topic-gap:    var(--space-8);    /* 48px between topic columns */

	--dl-easing:       var(--motion-ease-standard);
	--dl-duration:     var(--motion-duration-base);
}

/* ============================================================
 * Page shell
 * ============================================================ */

.content-dienstleistungen {
	background-color: var(--color-bg-base);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
}

/* ============================================================
 * Bands: full-bleed sections, alternating grounds
 * ============================================================ */

.dl-band {
	padding-block: var(--dl-band-pad-y);
	background: var(--color-bg-base);
	/* Old deep links land here via URL fragment; without this the
	 * sticky header covers the section the visitor was sent to. */
	scroll-margin-top: var(--space-8);
}

.dl-band--tint {
	background: var(--color-bg-elevated);
}

.dl-band__inner {
	max-width: var(--dl-inner);
	margin-inline: auto;
	padding-inline: var(--dl-gutter);
}

/* ---- Split: body beside the photo panel ---- */

.dl-band__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: var(--dl-split-gap);
	align-items: center;
}

/* Flip: photo left, text right. order alone would hand the photo the
 * wide 1fr track (auto-placement follows order), so the tracks swap
 * with it: photo keeps its fixed 460px on either side. */
.dl-band__split--flip {
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
}

.dl-band__split--flip .dl-band__media {
	order: -1;
}

.dl-band__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.dl-band__lead {
	margin: var(--space-5) 0 0;
	max-width: 62ch;
	font-size: var(--font-size-21);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-secondary);
}

/* The photo panel: the photography is shot on white, so the image is
 * its own white plate. On the tinted bands that plate reads as a
 * deliberate card; rounded like every other panel in the theme, no
 * border (owner: no extra outlines). */
.dl-band__media {
	margin: 0;
}

.dl-band__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-panel);
}

/* ---- Topic columns: capability lists under the split ---- */

.dl-band__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dl-topic-gap);
	margin-top: var(--space-8);
}

.dl-topic {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* A topic block can also sit inside the split's body column. */
.dl-band__body .dl-topic {
	margin-top: var(--space-6);
}

.dl-topic__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.dl-topic__desc {
	margin: 0;
	max-width: 62ch;
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.dl-topic__list {
	margin: 0;
	padding: 0 0 0 1.25em;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.dl-topic__list ::marker {
	color: var(--color-accent);
}

/* ============================================================
 * Closing stripe: dark ground, white type, EMO HARMONY action. Mirrors
 * the product-line CTA stripe (deep neutral so the type pops).
 * ============================================================ */

.dl-cta {
	padding-block: var(--space-10);
	background: var(--grey-900);
	text-align: center;
}

.dl-cta__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-inverse);
}

.dl-cta__desc {
	margin: var(--space-4) auto 0;
	max-width: 40ch;
	font-size: var(--font-size-21);
	line-height: var(--line-height-base);
	color: var(--color-text-inverse-muted);
}

.dl-cta__button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding: var(--space-3) var(--space-7);
	border-radius: var(--radius-control);
	background: var(--color-cta);
	color: var(--color-cta-ink);
	font-size: var(--font-size-18);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
	text-decoration: none;
	transition:
		background-color var(--dl-duration) var(--dl-easing),
		transform var(--dl-duration) var(--dl-easing);
}

.dl-cta__button:hover,
.dl-cta__button:focus-visible {
	background: var(--color-cta-hover);
}

.dl-cta__button:focus-visible {
	outline: 2px solid var(--color-cta);
	outline-offset: 4px;
}

/* Press feedback under 100ms (DESIGN-SPEC.md section 1). */
.dl-cta__button:active {
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 1024px) {
	.dl-band__split {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Single column: the photo follows the text at a restrained size. */
	.dl-band__split--flip .dl-band__media {
		order: 0;
	}

	.dl-band__media {
		max-width: 480px;
	}
}

@media (max-width: 833px) {
	:root {
		--dl-band-pad-y: var(--space-9);
	}

	.dl-band__title {
		font-size: var(--font-size-28);
	}

	/* Topic titles step down WITH the band titles so h2 and h3 never
	 * render identically (same two-level step content.css takes). */
	.dl-topic__title {
		font-size: var(--font-size-18);
	}

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

	.dl-cta {
		padding-block: var(--space-8);
	}

	.dl-cta__title {
		font-size: var(--font-size-28);
	}
}

/* ============================================================
 * Preference fallbacks
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.dl-cta__button {
		transition: none;
	}

	/* Press feedback survives as a colour step, darker than hover so
	 * it stays visible while the pointer hovers (content.css submit
	 * precedent). */
	.dl-cta__button:active {
		transform: none;
		background: color-mix(in srgb, var(--color-cta) 88%, #000);
	}
}

@media (prefers-contrast: more) {
	/* The tinted bands are a faint warm tint on white; promote the
	 * boundary so the section structure survives a forced palette. */
	.dl-band--tint {
		border-block: 1px solid var(--color-text-primary);
	}
}