/* VAYA Post Slide – Karussell, ein oder mehrere Beiträge nebeneinander */

/*
 * Block-Editor-Canvas (WP ≥ 6.3): Gutenberg filtert per styleSheetsCompat
 * Stylesheets ohne Regel mit .editor-styles-wrapper oder .wp-block aus dem
 * Iframe. Diese Zeile genügt, damit die folgenden .vaya-postslide-*-Regeln
 * geladen werden; Werte sind mit den Hauptregeln abgestimmt.
 */
.editor-styles-wrapper .vaya-postslide,
.block-editor-block-list__layout .wp-block .vaya-postslide {
	box-sizing: border-box;
}

.vaya-postslide {
	--vaya-postslide-dot-size: 0.55rem;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.vaya-postslide *,
.vaya-postslide *::before,
.vaya-postslide *::after {
	box-sizing: inherit;
}

.vaya-postslide__inner {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: 0;
	width: 100%;
	max-width: 100%;
}

.vaya-postslide__viewport {
	position: relative;
	order: 1;
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.vaya-postslide__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: var(--vaya-postslide-column-gap, 0);
	width: max-content;
	max-width: none;
	will-change: transform;
}

/* Bis JS Layout + Startposition gesetzt hat (kein Klon-Rand links). */
.vaya-postslide__track:not(.vaya-postslide__track--ready) {
	visibility: hidden;
}

/* Messphase: jede Slide mit eigener natürlicher Höhe (kein Flex-Stretch). */
.vaya-postslide--measuring .vaya-postslide__track {
	align-items: flex-start !important;
}

.vaya-postslide--measuring .vaya-postslide__slide {
	align-self: auto !important;
	min-height: 0 !important;
	height: auto !important;
}

.vaya-postslide__slide {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	min-width: 0;
	min-height: 100%;
	padding: var(--vaya-postslide-column-padding, 0);
	margin: 0;
	border-style: var(--vaya-postslide-column-border-style, none);
	border-color: var(--vaya-postslide-column-border-color, transparent);
	border-radius: var(--vaya-postslide-column-border-radius, 0);
	border-width: var(--vaya-postslide-column-border-width, 0);
}

.vaya-postslide__slide-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	width: 100%;
}

/* Gleichhöhe aktiv: Inhalt füllt die per JS gesetzte Spaltenhöhe. */
.vaya-postslide--columns-equalized .vaya-postslide__slide-body {
	flex: 1 1 auto;
	min-height: 0;
}

.vaya-postslide__column-fill {
	flex: 1 1 auto !important;
	min-height: 100% !important;
	height: 100% !important;
	box-sizing: border-box;
}

.vaya-postslide__slide-body > .elementor.vaya-postslide__column-fill,
.vaya-postslide__slide-body .elementor > .e-con.vaya-postslide__column-fill {
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
}

/* Elementor: mehrere Top-Container (je Abschnitt ein .e-con) — nicht einzeln strecken. */
.vaya-postslide--columns-equalized .vaya-postslide__slide-body > .elementor.vaya-postslide__column-fill > .e-con {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	width: 100%;
}

.vaya-postslide__slide-body .e-con-inner.vaya-postslide__column-fill {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}

/*
 * Elementor-Spacer: flexibel wachsen/schrumpfen (0 % Basis), sonst bleibt die im
 * Editor gesetzte Spacer-Höhe (z. B. 10–20 px) auf langen Beiträgen stehen und
 * der Button sitzt tiefer als bei kürzeren Slides.
 */
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .elementor-widget-spacer {
	flex: 1 1 0% !important;
	min-height: 0 !important;
	align-self: stretch !important;
}

.vaya-postslide--columns-equalized .vaya-postslide__slide-body .elementor-widget-spacer .elementor-widget-container,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .elementor-widget-spacer .elementor-spacer,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .elementor-widget-spacer .elementor-spacer-inner {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
}

.vaya-postslide--columns-equalized .vaya-postslide__slide-body .elementor-widget-spacer [style*="flex-grow: 1"],
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .elementor-widget-spacer [style*="flex-grow:1"] {
	flex: 1 1 0% !important;
	min-height: 0 !important;
}

/* Button am Spaltenende, wenn Spacer davor nicht vollständig schrumpft. */
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-button:last-child {
	margin-top: auto !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

/* Virtueller Abstand nur am Spaltenende (per JS, wenn kein Elementor-Spacer). */
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .vaya-postslide__bottom-spacer {
	flex: 1 1 0% !important;
	min-height: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	align-self: stretch !important;
	pointer-events: none;
}

/*
 * Bild, Überschrift, Text usw. nicht strecken — verhindert „Luft“ um den Titel,
 * wenn Elementor flex-grow auf Widgets setzt.
 */
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-image,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-heading,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-text-editor,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-icon,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-icon-box,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-image-box,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-video,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-gallery,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-divider,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-shortcode,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-html,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-wp-widget-text,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-theme-post-title,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-theme-post-content,
.vaya-postslide--columns-equalized .vaya-postslide__slide-body .e-con-inner > .elementor-widget-theme-post-featured-image {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

.vaya-postslide__slide-body.vaya-postslide__flex-chain {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.vaya-postslide__flex-chain:not(.vaya-postslide__slide-body) {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.vaya-postslide--column-border-none .vaya-postslide__slide {
	border-width: 0;
	border-style: none;
}

.vaya-postslide:not(.vaya-postslide--column-border-none) .vaya-postslide__viewport {
	padding: var(--vaya-postslide-column-border-width, 0);
	padding-inline-end: calc(var(--vaya-postslide-column-border-width, 0px) + 2px);
}

.vaya-postslide--column-border-none .vaya-postslide__viewport {
	padding: 0;
}

.vaya-postslide__post-title {
	flex-shrink: 0;
	margin: 0 0 0.5em;
	padding: 0;
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
}

.vaya-postslide__slide > :first-child {
	margin-top: 0;
}

.vaya-postslide__slide > :last-child {
	margin-bottom: 0;
}

/* Pfeile: kein Theme-Button-Hintergrund; Transparenz nur am Strich (SVG) */
.vaya-postslide__arrow-layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 8;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 0;
	padding: 0 var(--vaya-postslide-arrow-edge-inset, 10px);
	pointer-events: none;
	background: transparent !important;
}

.vaya-postslide--no-arrows .vaya-postslide__arrow-layer {
	display: none !important;
}

.vaya-postslide__arrow {
	pointer-events: auto;
	flex: 0 0 auto;
	box-sizing: border-box;
	height: var(--vaya-postslide-arrow-size, 50px);
	width: auto;
	aspect-ratio: 10 / 16;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	color: var(--vaya-postslide-arrow, #2271b1) !important;
	transition: none;
}

.vaya-postslide__arrow:hover,
.vaya-postslide__arrow:focus,
.vaya-postslide__arrow:focus-visible,
.vaya-postslide__arrow:active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none;
}

.vaya-postslide__arrow:hover .vaya-postslide__arrow-svg,
.vaya-postslide__arrow:focus .vaya-postslide__arrow-svg,
.vaya-postslide__arrow:focus-visible .vaya-postslide__arrow-svg {
	color: var(--vaya-postslide-arrow, #2271b1) !important;
	opacity: 1;
}

.vaya-postslide__arrow-svg {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	transition: opacity 0.2s ease;
	opacity: var(--vaya-postslide-nav-idle-opacity, 0.5);
}

/* Punkte: Abstand und Opazität per Variablen; oben/unten per Root-Modifikator */
.vaya-postslide__dots {
	position: absolute;
	left: 50%;
	right: auto;
	top: auto;
	bottom: var(--vaya-postslide-dots-edge-inset, 10px);
	transform: translateX(-50%);
	z-index: 9;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	pointer-events: auto;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0;
}

.vaya-postslide--dots-top .vaya-postslide__dots {
	top: var(--vaya-postslide-dots-edge-inset, 10px);
	bottom: auto;
}

.vaya-postslide--no-dots .vaya-postslide__dots {
	display: none !important;
}

.vaya-postslide .vaya-postslide__dot {
	width: var(--vaya-postslide-dot-size, 0.55rem);
	height: var(--vaya-postslide-dot-size, 0.55rem);
	padding: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(var(--vaya-postslide-dots-edge-inset, 10px) * 0.5);
	margin-right: calc(var(--vaya-postslide-dots-edge-inset, 10px) * 0.5);
	border: 0;
	border-radius: 50%;
	background-color: var(--vaya-postslide-dot-inactive, #c0c0c0) !important;
	cursor: pointer;
	opacity: var(--vaya-postslide-nav-idle-opacity, 0.5);
	transition: background-color 0.15s ease, opacity 0.2s ease;
}

.vaya-postslide .vaya-postslide__dot.is-active {
	background-color: var(--vaya-postslide-dot-active, #1a1a1a) !important;
	opacity: var(--vaya-postslide-nav-idle-opacity, 0.5);
}

.vaya-postslide .vaya-postslide__dot:not(.is-active):hover,
.vaya-postslide .vaya-postslide__dot:not(.is-active):focus,
.vaya-postslide .vaya-postslide__dot:not(.is-active):focus-visible {
	opacity: 1;
}

.vaya-postslide .vaya-postslide__dot.is-active:hover {
	background-color: var(--vaya-postslide-dot-active, #1a1a1a) !important;
	opacity: 1;
}

.vaya-postslide .vaya-postslide__dot:focus,
.vaya-postslide .vaya-postslide__dot:focus-visible,
.vaya-postslide .vaya-postslide__dot:active {
	outline: none !important;
	box-shadow: none !important;
}

.vaya-postslide--empty,
.vaya-postslide__empty-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.vaya-postslide__empty-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	padding: 1rem;
	text-align: center;
}

.vaya-postslide__empty-heading {
	margin: 0;
	width: 100%;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}