/* ===========================================================================
   cl-physio — home.css
   Front-page-only sections. Shared primitives (.card, .section__title,
   .media-row, .testimonials*) live in components.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Hero (FR-05)

   Five-image carousel behind the overline, H1, intro and CTA. The carousel is
   the shared component (FR-31) in a full-bleed modifier; the slide images fill
   the section via object-fit: cover.

   Layering inside .hero — .carousel--hero is positioned but carries no
   z-index, so it does NOT open a stacking context and its controls can layer
   above the scrim alongside the text:

     slides            (auto)   painted first
     .hero__scrim      z-index 1
     .hero__inner      z-index 2
     carousel controls z-index 3

   Scrim: not a uniform wash. A mild vertical base keeps tonal cohesion, and an
   elliptical focus concentrates density on the text column, falling away over
   the rest of the frame so the photographs stay open. Measured at the text's
   own position over each of the five slides at the desktop, tablet and mobile
   breakpoints, this holds AA (AC-35). Changing the stops below without
   re-measuring will invalidate that.
   --------------------------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(440px, 72vh, 760px);
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

.carousel--hero {
	position: absolute;
	inset: 0;
	/* No z-index: keeps the controls out of a trapped stacking context. */
	--carousel-fade: 1s; /* FR-05: 1000 ms transition */
}
.carousel--hero .carousel__viewport {
	position: absolute;
	inset: 0;
}
.carousel--hero .carousel__dots {
	z-index: 3;
	bottom: 1.25rem;
}
/* The hero is navigated by its dots alone. The side arrows of the in-flow
   carousels would sit on top of the H1 below the desktop breakpoint, where
   the container gutter is narrower than the arrow itself. The dots are
   buttons, so keyboard operation is unaffected (A11Y-02). */
.carousel--hero.is-enhanced .carousel__nav {
	display: none;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(
			ellipse 98% 85% at 50% 50%,
			rgba(33, 29, 68, 0.78) 0%,
			rgba(33, 29, 68, 0.74) 62%,
			rgba(33, 29, 68, 0.40) 100%,
			rgba(33, 29, 68, 0.16) 130%
		),
		linear-gradient(
			180deg,
			rgba(33, 29, 68, 0.26) 0%,
			rgba(33, 29, 68, 0.17) 45%,
			rgba(33, 29, 68, 0.34) 100%
		);
}
@media (min-width: 880px) {
	.hero__scrim {
		background:
			radial-gradient(
				ellipse 52% 85% at 24% 50%,
				rgba(33, 29, 68, 0.72) 0%,
				rgba(33, 29, 68, 0.66) 50%,
				rgba(33, 29, 68, 0.26) 82%,
				rgba(33, 29, 68, 0) 100%
			),
			linear-gradient(
				180deg,
				rgba(33, 29, 68, 0.26) 0%,
				rgba(33, 29, 68, 0.17) 45%,
				rgba(33, 29, 68, 0.34) 100%
			);
	}
}

.hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(3rem, 2rem + 6vw, 6rem);
}
.hero__overline {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}
.hero__title {
	margin: 0 0 1.25rem;
	max-width: 18ch;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem);
}
.hero__intro {
	max-width: 54ch;
	margin: 0 0 1.75rem;
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.92);
}
.hero__actions {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Mein therapeutisches Konzept
   --------------------------------------------------------------------------- */
.konzept__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 760px) {
	.konzept__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Physiotherapeutische Leistungen (seven plain text blocks, 3 + 4)

   Icon cards in the Konzept treatment, on the Cream band. The desktop grid
   runs on twelve columns so the first row can hold three wide cards (span 4)
   and the second row four narrower ones (span 3).
   --------------------------------------------------------------------------- */
.leistungen__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
/* Cards in a row share a height; centre the content so the shorter ones do
   not leave their text stranded at the top. */
.leistungen__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.leistungen__item .card__title {
	font-size: 1.1rem;
	margin: 0 0 0.6rem;
}
.leistungen__cta {
	text-align: center;
	margin: 2.5rem 0 0;
}

/* ---------------------------------------------------------------------------
   Kurse (four icon cards)
   --------------------------------------------------------------------------- */
.kurse__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
/* Cards share a row height; centre their content so a short card does not
   leave its text stranded at the top. */
.kurse__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (min-width: 560px) {
	.leistungen__grid,
	.kurse__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* A lone card must not sit half-width against the left edge. */
	.kurse__grid--count-1 {
		grid-template-columns: minmax(0, 340px);
		justify-content: center;
	}
}
@media (min-width: 900px) {
	.kurse__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	/* Fewer than four cards: fixed track widths so the row stays centred
	   in the band instead of filling it from the left. */
	.kurse__grid--count-1 {
		grid-template-columns: minmax(0, 340px);
		justify-content: center;
	}
	.kurse__grid--count-2 {
		grid-template-columns: repeat(2, minmax(0, 340px));
		justify-content: center;
	}
	.kurse__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 320px));
		justify-content: center;
	}
	.leistungen__grid {
		grid-template-columns: repeat(12, 1fr);
	}
	.leistungen__item {
		grid-column: span 3;
	}
	.leistungen__item:nth-child(-n + 3) {
		grid-column: span 4;
	}
}

/* ---------------------------------------------------------------------------
   Closing CTA band
   --------------------------------------------------------------------------- */
.cta-band {
	background: var(--c-indigo);
	color: #fff;
	text-align: center;
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.cta-band__title {
	margin: 0 auto 1rem;
	max-width: 24ch;
	color: #fff;
}
.cta-band__sub {
	margin: 0 auto 1.75rem;
	max-width: 48ch;
	color: rgba(255, 255, 255, 0.85);
}
.cta-band__actions {
	margin: 0;
}
.btn--light {
	background: #fff;
	color: var(--c-indigo);
}
.btn--light:hover {
	background: var(--c-cream-50);
	color: var(--c-indigo);
}