/**
 * Slider + Slide – Frontend- und Editor-Stile.
 *
 * Aufbau:
 *   .wp-block-twid-slider           Container (Höhe über --twid-slider-height)
 *     .twid-slider__track           Alle Slides liegen übereinander (CSS-Grid, eine Zelle)
 *       .wp-block-twid-slide        Einzelner Slide
 *         .twid-slide__image        Hintergrundbild
 *         .twid-slide__overlay      Farb-Overlay
 *         .twid-slide__content      Inhalt (Blöcke)
 *     .twid-slider__nav / __dots    Werden von view.js erzeugt
 *
 * Smartphone & Tablet hochkant: siehe Abschnitt „Smartphone-Ansicht“ am Ende.
 */

.wp-block-twid-slider {
	--twid-slider-height: 72vh;
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.twid-slider__track {
	display: grid;
}

/* ---------- Slides ---------- */

.wp-block-twid-slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	min-height: var(--twid-slider-height);
	padding-block: clamp(3rem, 8vw, 6rem);
	padding-inline: max(var(--wp--style--root--padding-left, 1.5rem), calc((100% - var(--wp--style--global--wide-size, 1240px)) / 2));
	color: var(--wp--preset--color--white);
	box-sizing: border-box;
	isolation: isolate;
}

.twid-slide__image,
.twid-slide__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.twid-slide__image {
	object-fit: cover;
	max-width: none;
	border-radius: 0;
}

/* Mit eigenem Smartphone-Bild steckt das <img> in einem <picture> – dieses soll das Layout nicht beeinflussen. */
.twid-slide__picture {
	display: contents;
}

.twid-slide__content {
	position: relative;
	width: 100%;
}

.twid-slide__content > * {
	margin-block: 0;
}

.twid-slide__content > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.25rem);
}

/* Doppelte Klasse, damit die globale Überschriftenfarbe (:root :where(h1…)) überschrieben wird. */
.wp-block-twid-slide .twid-slide__content :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.wp-block-twid-slide h2 {
	font-size: var(--wp--preset--font-size--huge);
}

/* Inhaltsposition: vertikal … */
.wp-block-twid-slide[class*="is-position-top-"] { align-items: flex-start; }
.wp-block-twid-slide[class*="is-position-center-"] { align-items: center; }
.wp-block-twid-slide[class*="is-position-bottom-"] { align-items: flex-end; }

/* … und horizontal */
.wp-block-twid-slide[class*="-left"] { justify-content: flex-start; }
.wp-block-twid-slide[class*="-center"]:not(.is-position-center-left):not(.is-position-center-right) { justify-content: center; text-align: center; }
.wp-block-twid-slide[class*="-right"] { justify-content: flex-end; }

.wp-block-twid-slide[class*="-center"]:not(.is-position-center-left):not(.is-position-center-right) .wp-block-buttons {
	justify-content: center;
}

/* ---------- Slider-Zustände (Frontend, gesteuert von view.js) ---------- */

/* Ohne JavaScript: nur der erste Slide ist sichtbar. */
.wp-block-twid-slider:not(.is-editor-preview) .wp-block-twid-slide {
	visibility: hidden;
	opacity: 0;
}

.wp-block-twid-slider:not(.is-initialized):not(.is-editor-preview) .wp-block-twid-slide:first-child,
.wp-block-twid-slider.is-initialized .wp-block-twid-slide.is-active {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}

/* Effekt: Überblenden */
.wp-block-twid-slider.is-effect-fade.is-initialized .wp-block-twid-slide {
	transition: opacity 0.8s ease, visibility 0.8s;
}

/* Effekt: Schieben */
.wp-block-twid-slider.is-effect-slide.is-initialized .wp-block-twid-slide {
	opacity: 1;
	transform: translateX(100%);
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.7s;
}

.wp-block-twid-slider.is-effect-slide.is-initialized .wp-block-twid-slide.is-prev {
	transform: translateX(-100%);
}

.wp-block-twid-slider.is-effect-slide.is-initialized .wp-block-twid-slide.is-active {
	transform: none;
}

/* ---------- Navigation ---------- */

.twid-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(15, 26, 43, 0.45);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.twid-slider__nav:hover,
.twid-slider__nav:focus-visible {
	background: var(--wp--preset--color--amber);
	border-color: var(--wp--preset--color--amber);
}

.twid-slider__nav:focus-visible,
.twid-slider__dot:focus-visible,
.twid-slider__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

.twid-slider__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.twid-slider__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

.twid-slider__controls {
	position: absolute;
	bottom: clamp(1rem, 3vw, 1.75rem);
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	transform: translateX(-50%);
}

.twid-slider__dots {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.twid-slider__dot,
.twid-slider__toggle {
	display: block;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.twid-slider__dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	transition: width 0.25s ease, background 0.25s ease;
}

.twid-slider__dot[aria-current="true"] {
	width: 2rem;
	background: var(--wp--preset--color--amber);
}

.twid-slider__toggle {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgba(15, 26, 43, 0.45);
	color: var(--wp--preset--color--white);
	font-size: 0.7rem;
	line-height: 1;
}

@media (max-width: 781px) {
	.twid-slider__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-twid-slider .wp-block-twid-slide {
		transition: none !important;
	}
}

/* ---------- Smartphone-Ansicht ---------- */

/*
 * Problem: Auf Smartphones ist der Slider hochkant (z. B. 375 × 585 px), die
 * Fotos sind meist Querformat (z. B. 2:1). Als Hintergrund mit „cover“ bleibt
 * davon nur ein schmaler Streifen aus der Bildmitte übrig.
 *
 * Standard deshalb: Bild oben in voller Breite (Format einstellbar, 16:9),
 * Text darunter auf dunklem Grund. Gilt für Smartphones (bis 781 px) und
 * Tablets im Hochformat (bis 1024 px).
 *
 * Abweichende Einstellungen des Sliders (nur gespeichert, wenn gesetzt):
 *   .is-mobile-cover          altes Verhalten: Bild als Hintergrund (Höhe über --twid-m-height)
 *   .is-mobile-fit-contain    Bild ganz zeigen, ohne Zuschnitt
 *   .is-mobile-ratio-original jedes Bild im eigenen Format
 *   --twid-m-ratio            Bildformat, z. B. 4/3
 * Je Slide: --twid-pos-m (eigener Fokuspunkt) und <picture> (eigenes Bild).
 */
/* Gleiche Bedingung wie MOBILE_MEDIA in blocks/slide/index.js (eigenes Smartphone-Bild). */
@media (max-width: 781px), (max-width: 1024px) and (orientation: portrait) {

	/* Eigener Bildausschnitt für Smartphones (überschreibt den Desktop-Fokuspunkt). */
	.wp-block-twid-slide .twid-slide__image[style*="--twid-pos-m"] {
		object-position: var(--twid-pos-m) !important;
	}

	/* --- Standard: Bild oben, Text darunter --- */

	.wp-block-twid-slider:not(.is-mobile-cover) .wp-block-twid-slide {
		flex-direction: column;
		justify-content: flex-start !important;
		align-items: stretch !important;
		min-height: 0;
		padding: 0 !important;
		background-color: var(--wp--preset--color--ink);
	}

	.wp-block-twid-slider:not(.is-mobile-cover) .twid-slide__image {
		position: relative;
		inset: auto;
		z-index: 0;
		flex: 0 0 auto;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--twid-m-ratio, 16 / 9);
	}

	/* Jedes Bild im eigenen Format – sehr hohe Hochformat-Bilder werden begrenzt. */
	.wp-block-twid-slider.is-mobile-ratio-original:not(.is-mobile-cover) .twid-slide__image {
		aspect-ratio: auto;
		max-height: 75vh;
	}

	/* Ganz zeigen, ohne Zuschnitt (Ränder in der Hintergrundfarbe). */
	.wp-block-twid-slider.is-mobile-fit-contain:not(.is-mobile-cover) .twid-slide__image {
		object-fit: contain;
		background-color: rgba(255, 255, 255, 0.04);
	}

	/* Das Overlay liegt nur beim Hintergrundbild über dem Foto; hier steht der Text auf eigenem Grund. */
	.wp-block-twid-slider:not(.is-mobile-cover) .twid-slide__overlay {
		display: none;
	}

	.wp-block-twid-slider:not(.is-mobile-cover) .twid-slide__content {
		box-sizing: border-box;
		width: 100%;
		max-width: none !important;
		padding: clamp(1.5rem, 5vw, 2.5rem) var(--wp--style--root--padding-left, 1rem) 4.25rem;
	}

	/* Pfeile würden über dem Text liegen – Bedienung über Punkte und Wischen. */
	.wp-block-twid-slider:not(.is-mobile-cover) .twid-slider__nav {
		display: none;
	}

	.wp-block-twid-slider:not(.is-mobile-cover) .twid-slider__controls {
		bottom: 1.25rem;
	}

	/* --- Alternative: Bild als Hintergrund (eigene Höhe für Smartphones) --- */

	.wp-block-twid-slider.is-mobile-cover[style*="--twid-m-height"] .wp-block-twid-slide {
		min-height: var(--twid-m-height);
	}
}