/* Weber Verpackung – Produkt Gestaltung Slider
 * Ausgelagert aus Element_Produkt_Gestaltung::render() (P-1).
 * Lädt via enqueue_scripts() – dedupliziert bei mehreren Instanzen.
 * Wird auch von Element_Weber_Carousel verwendet.
 */

/* ── Outer shell ─────────────────────────────────────────────────────────── */
.wpg-slider {
	position: relative;
	width: 100%;
	background: #fff;
	overflow: hidden;
	user-select: none;
	/* Proportional height (Figma-Reference: 1920×640).
	   JS setzt el.style.height = (640 * sc()) + 'px' auf dem Frontend – identischer Wert.
	   Im Builder erhält die Canvas die korrekte Höhe ohne JS. */
	aspect-ratio: 1920 / 640;
}

/* ── Header (Titel + Pfeile) ─────────────────────────────────────────────── */
.wpg-slider__header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/* CSS-Fallback: 63/1920 ≈ 3.3% – identisch mit JS header.style.padding = '0 '+(63*s)+'px'. */
	padding: 0 3.3%;
}

.wpg-slider__text {
	pointer-events: none;
}

.wpg-slider__title {
	color: #1b2321;
	margin: 0;
}

.wpg-slider__desc {
	color: #000;
	white-space: pre-wrap;
	margin: 0;
	max-width: 557px;
	margin-top: 40px;
}

/* ── Pfeile ──────────────────────────────────────────────────────────────── */
.wpg-slider__arrows {
	display: flex;
	pointer-events: auto;
	flex-shrink: 0;
	/* CSS-Fallback: JS setzt arrows.style.gap = (32*s)+'px'. */
	gap: 32px;
}

.wpg-slider__arrow {
	background: #eee;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	/* CSS-Fallback: JS setzt width/height = 54*s px, borderRadius = 12*s px, padding = 12*s px.
	   54px = Icon(30) + Padding(12) × 2 bei 1920px-Referenz. */
	width: 54px;
	height: 54px;
	border-radius: 12px;
	padding: 12px;
	box-sizing: border-box;
}

.wpg-slider__arrow:hover {
	background: #e0e0e0;
}

.wpg-slider__arrow svg {
	/* CSS-Fallback: JS setzt svg.style.width=(30*s)+'px', height=(23*s)+'px'. */
	width: 30px;
	height: 23px;
	flex-shrink: 0;
}

.wpg-slider__arrow--next svg {
	transform: rotate(180deg);
}

/* ── Viewport (Frontend-Carousel) ────────────────────────────────────────── */
.wpg-slider__viewport {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
	/* Versteckt bis JS .wpg-slider--active setzt. */
	display: none;
}

/* ── Track ───────────────────────────────────────────────────────────────── */
.wpg-slider__track {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	will-change: transform;
}

/* ── Slides ──────────────────────────────────────────────────────────────── */
/* will-change:width,height wird per JS nur auf dem aktiven Slide gesetzt (P-2). */
.wpg-slider__slide {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	cursor: pointer;
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
	            height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wpg-slider__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	display: block;
}

.wpg-slider__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(208deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 93%);
}

/* ── Statische Preview (Builder-Canvas + Mobile-Fallback) ────────────────── */

/* Zeigt Bilder in Carousel-Optik als statische Vorschau. */
.wpg-slider__mobile-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 32px;
	padding: 0 3.3% 32px;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

/* Kleine Bilder (inaktiv) – Figma: 424×396 bei Container-H 640px → 22% / 62% */
.wpg-slider__mobile-grid img {
	flex: 0 0 22%;
	height: 62%;
	object-fit: cover;
	border-radius: 32px;
	display: block;
}

/* Aktives (großes) Bild – Figma: 728×628 bei Container-H 640px → 38% / 98% */
.wpg-slider__mobile-grid img.wpg-preview-active {
	flex: 0 0 38%;
	height: 98%;
}

.wpg-slider__placeholder {
	flex: 0 0 38%;
	height: 98%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EFEFEF;
	border-radius: 32px;
}

.wpg-slider__placeholder span {
	font-size: 18px;
	color: #036048;
}

/* JS hat Carousel aktiviert: Grid ausblenden, Viewport einblenden. */
.wpg-slider--active .wpg-slider__mobile-grid {
	display: none;
}

.wpg-slider--active .wpg-slider__viewport {
	display: block;
}

/* ── Mobile ≤767px: immer 2-Spalten-Grid, nie Carousel ──────────────────── */
@media (max-width: 767px) {
	.wpg-slider {
		/* Kein festes Seitenverhältnis auf Mobile – Höhe durch Inhalt bestimmt. */
		aspect-ratio: unset;
	}

	/* Header: nicht mehr absolut – liegt im normalen Fluss über dem Grid. */
	.wpg-slider__header {
		position: static;
		pointer-events: auto;
		padding: 24px 16px 16px;
	}

	.wpg-slider__desc {
		margin-top: 16px;
	}

	/* Pfeile auf Mobile verstecken. */
	.wpg-slider__arrows {
		display: none;
	}

	/* Grid auf Mobile: 2 Spalten, quadratische Bilder. */
	.wpg-slider__mobile-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		padding: 0 16px 24px;
		height: auto;
	}

	.wpg-slider__mobile-grid img,
	.wpg-slider__mobile-grid img.wpg-preview-active {
		flex: unset;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 16px;
	}

	/* Carousel-Viewport auf Mobile immer versteckt (auch wenn JS läuft). */
	.wpg-slider--active .wpg-slider__mobile-grid {
		display: grid;
	}

	.wpg-slider--active .wpg-slider__viewport {
		display: none;
	}
}