/**
 * Villa Antoinette – nur Frontend.
 * Seitenrahmen, fixierte Kopfleiste, Slider und Bühne. Im Editor bleiben
 * Galerie und Textbox bewusst statisch, damit sie sich gut bearbeiten lassen.
 */

/* ---------- Seitenrahmen: 75rem auf texturiertem Grund ---------- */

.wp-site-blocks {
	max-width: 75rem;
	margin-inline: auto;
	background: var(--wp--preset--color--creme);
	min-height: 100vh;
}

.wp-site-blocks > * {
	margin-block: 0;
}

.va-inhalt .wp-block-post-content > *,
.va-inhalt > * {
	margin-block: 0;
}

/* Abstände nur zwischen normalen Inhalten, nicht zwischen Abschnitten. */
.va-inhalt .wp-block-post-content > .alignfull {
	margin-block: 0 !important;
}

html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 3.5rem);
}

/* ---------- Kopfleiste fixiert ---------- */

header.va-seitenkopf {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* ---------- Slider (Galerie-Stil „Slider“) ---------- */

/* Ohne JavaScript: horizontal wischbare Bildleiste. */
.wp-block-gallery.has-nested-images.is-style-va-slider {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	position: relative;
	min-width: 0;
	max-width: 100%;
	--va-slider-format: 16 / 10;
}

.wp-block-column:has(> .is-style-va-slider) {
	min-width: 0;
}

.wp-block-gallery.has-nested-images.is-style-va-slider.va-slider-hoch {
	--va-slider-format: 2 / 3;
}

.wp-block-gallery.has-nested-images.is-style-va-slider figure.wp-block-image:not(#va-slide) {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: start;
	position: relative;
}

.wp-block-gallery.has-nested-images.is-style-va-slider figure.wp-block-image:not(#va-slide) img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--va-slider-format);
	object-fit: cover;
}

@media (max-width: 40rem) {
	.wp-block-gallery.has-nested-images.is-style-va-slider {
		--va-slider-format: 6 / 7;
	}
}

/* Bildunterschrift links unten, Schreibmaschinenschrift wie im Original. */
.wp-block-gallery.has-nested-images.is-style-va-slider figure.wp-block-image:not(#va-slide) figcaption {
	position: absolute;
	inset: auto auto 1.75rem 7%;
	max-width: 19rem;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--pitch);
	font-size: 0.78rem;
	line-height: 1.25;
	text-align: left;
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (max-width: 40rem) {
	.wp-block-gallery.has-nested-images.is-style-va-slider figure.wp-block-image:not(#va-slide) figcaption {
		inset: auto 1rem 3.5rem;
		max-width: none;
		text-align: center;
	}
}

/* Mit JavaScript: Swiper */
.wp-block-gallery.is-style-va-slider.va-slider--aktiv {
	display: block;
	overflow: hidden;
	scroll-snap-type: none;
}

.va-slider__knopf {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 2.5rem;
	height: 3rem;
	margin-top: -1.5rem;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: center / 1.1rem 1.8rem no-repeat;
	filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5));
}

.va-slider__zurueck {
	left: 0.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22 22 0l2.1 2.1L4.2 22l19.9 19.9L22 44z' fill='%23fff'/%3E%3C/svg%3E");
}

.va-slider__weiter {
	right: 0.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22 5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0z' fill='%23fff'/%3E%3C/svg%3E");
}

.va-slider__pause {
	top: auto;
	bottom: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	margin: 0;
	opacity: 0.75;
	background-size: 0.8rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0h3v12H0zM7 0h3v12H7z' fill='%23fff'/%3E%3C/svg%3E");
}

.va-slider__pause.is-pausiert {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E");
}

.va-slider__knopf:hover,
.va-slider__knopf:focus-visible {
	opacity: 1;
	outline-color: #fff;
}

/* ---------- Bühne: Slider mit überlagerter Textbox ---------- */

.is-style-va-buehne {
	position: relative;
}

.is-style-va-buehne > * {
	margin-block: 0 !important;
}

@media (min-width: 64rem) {
	.is-style-va-buehne > [class*="is-style-va-rahmen"] {
		position: absolute;
		z-index: 20;
		top: 2rem;
		left: 3.75rem;
		width: 29%;
		max-width: 22rem;
		max-height: calc(100% - 4rem);
		overflow: auto;
	}
}

@media (max-width: 63.99rem) {
	.is-style-va-buehne {
		padding-bottom: 2rem;
	}

	.is-style-va-buehne > [class*="is-style-va-rahmen"] {
		position: relative;
		z-index: 20;
		width: min(90%, 36rem);
		margin: -1.5rem auto 0 !important;
	}
}