/* ============================================
   Gallery Slider Block — Frontend Styles
   „Weißer Raum"-Fassung: an die Theme-Tokens gebunden.
   Nutzt --color-accent, --font-sans usw. mit Rückfall,
   sodass Rosa/Gold, Schrift und Dark-Mode automatisch mitlaufen.
   ============================================ */

.gallery-slider-block {
	--gs-aspect-ratio: 1/1;
	--gs-border-radius: 0;                 /* eckig wie alle Theme-Bilder */
	--gs-arrow-size: 32px;
	--gs-dot-size: 7px;
	--gs-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

	/* Theme-Anbindung (mit Rückfall, falls das Theme fehlt) */
	--gs-ink:          var(--color-text, #1F1B14);
	--gs-paper:        var(--color-bg, #ffffff);
	--gs-warm:         var(--color-bg-warm, #F9F7F3);
	--gs-accent:       var(--color-accent, #9E4A5A);
	--gs-accent-hover: var(--color-accent-hover, #853C49);
	--gs-border:       var(--color-border, #DBD4C8);
	--gs-muted:        var(--color-text-muted, #6B6254);
	--gs-font:         var(--font-sans, 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif);
	--gs-shadow:       0 10px 40px rgba(31, 27, 20, 0.14);

	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 0 auto 2rem;
	font-family: var(--gs-font);
	-webkit-user-select: none;
	user-select: none;
}

/* ── Track Wrapper ── */
.gs-track-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: var(--gs-aspect-ratio);
	border-radius: 0;               /* fest eckig, ignoriert die Block-Rundung */
	overflow: hidden;
	background: var(--gs-ink);
	box-shadow: var(--gs-shadow);
}

/* ── Track (sliding rail) ── */
.gs-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform var(--gs-transition);
	will-change: transform;
}

/* ── Slides ── */
.gs-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; }
.gs-slide-inner { width: 100%; height: 100%; position: relative; }
.gs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Caption — im UI-Register des Themes (Work Sans, ruhig) ── */
.gs-caption {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 2.25rem 1.25rem 1rem;
	background: linear-gradient(to top, rgba(31, 27, 20, 0.55) 0%, transparent 100%);
	color: #fff;
	font-family: var(--gs-font);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.5;
	pointer-events: none;
}

/* ── Navigation Arrows — Rosa = interaktiv, wie im Theme ── */
.gs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: var(--gs-arrow-size);
	height: var(--gs-arrow-size);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(249, 247, 243, 0.92);   /* warmes Off-White */
	color: var(--gs-ink);
	box-shadow: 0 2px 14px rgba(31, 27, 20, 0.22);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.25s ease;
	opacity: 0;
	pointer-events: none;
}

.gallery-slider-block:hover .gs-arrow { opacity: 1; pointer-events: auto; }

.gs-arrow:hover {
	background: var(--gs-accent);            /* Hover ins Rosa */
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.gs-arrow:active { transform: translateY(-50%) scale(0.96); }
.gs-arrow svg { width: 15px; height: 15px; }
.gs-arrow-prev { left: 14px; }
.gs-arrow-next { right: 14px; }
.gs-arrow.is-hidden { opacity: 0 !important; pointer-events: none !important; }

/* ── Dots — aktiver Punkt in Rosa ── */
.gs-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 14px 0 4px;
}

.gs-dot {
	width: var(--gs-dot-size);
	height: var(--gs-dot-size);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	padding: 0;
	background: var(--gs-border);
	transition: background 0.25s ease, width 0.3s ease, border-radius 0.3s ease;
}

.gs-dot:hover { background: var(--gs-muted); }

.gs-dot.is-active {
	background: var(--gs-accent);
	width: 20px;
	border-radius: 4px;
}

/* ── Counter — leise, Work Sans, Versalzahlen ── */
.gs-counter {
	position: absolute;
	top: 12px;
	right: 12px;
	font-family: var(--gs-font);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #fff;
	background: rgba(31, 27, 20, 0.5);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 3px 9px;
	border-radius: 0;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}

/* ── Drag feedback ── */
.gallery-slider-block.is-dragging .gs-track { transition: none; }
.gallery-slider-block.is-dragging img { pointer-events: none; }

/* ── Responsive ── */
@media (max-width: 600px) {
	.gs-arrow { width: 28px; height: 28px; }
	.gs-arrow svg { width: 13px; height: 13px; }
	.gs-arrow-prev { left: 8px; }
	.gs-arrow-next { right: 8px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.gs-track, .gs-arrow, .gs-dot { transition: none !important; }
}