/* LE GOLD Kleiderständer – [lg_rack]
 *
 * Geometrie: jedes Teil ist ein freigestelltes Foto (Breite --fw). Pro Produkt kommen aus PHP
 * die Ausdehnungen links/rechts vom Haken (--sl/--sr Seitenansicht, --fl/--fr Vorderansicht,
 * Anteil der Bildbreite) und pro Bild Hakenposition (--hx) und oberer Leerraum (--top).
 * Ein Platz an der Stange ist so breit wie die Seitenansicht; der Haken sitzt bei --hxp.
 * --s skaliert ein Teil (Socken kleiner als ein Hoodie), --fwi ist seine tatsächliche Bildbreite.
 */

.lgr {
	--fw: clamp(230px, 21vw, 360px);   /* Breite eines Fotos */
	--gap: clamp(4px, 0.8vw, 14px);    /* Luft zwischen zwei Teilen */
	--rod-y: 30px;                     /* Abstand Stange ↔ Oberkante */
	--rod-h: 7px;
	--turn: 700ms;                     /* Dauer der Drehung */
	--ink: var(--color-primary, #000);
	--muted: var(--color-on-surface-variant, #4c4546);

	position: relative;
	padding-block: clamp(36px, 6vw, 88px) clamp(28px, 4vw, 56px);
	overflow-x: clip; /* nichts ragt seitlich aus der Seite (kein horizontales Scrollen) */
}

/* ---------- Zeile über der Stange ---------- */

.lgr-caption {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 0 0 clamp(20px, 3.5vw, 44px);
	padding-inline: 16px;
	min-height: 1.5em;
	font-family: var(--font-label-caps, inherit);
	font-size: clamp(12px, 1vw, 15px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.lgr-caption.is-swap { opacity: 0; transform: translateY(4px); }
.lgr-caption__a { color: var(--ink); }
.lgr-caption__b { color: var(--muted); }
.lgr-caption__sep { width: 1px; height: 1.1em; background: var(--color-outline-variant, #cfc4c5); }

/* ---------- Stange ---------- */

.lgr-stage { position: relative; }

.lgr-rack {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: var(--rod-y) 0 0;
	list-style: none;
}

.lgr-rack::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--rod-y);
	height: var(--rod-h);
	border-radius: var(--rod-h);
	background: linear-gradient(180deg, #f2f2f2 0%, #b9b9b9 38%, #7d7d7d 70%, #5a5a5a 100%);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
	z-index: 0;
}

/* ---------- ein Teil ---------- */

.lgr-item {
	--fwi: calc(var(--fw) * var(--s, 1)); /* Bildbreite dieses Teils (Größe am Ständer) */
	--hxp: calc(var(--fwi) * var(--sl) + var(--gap) / 2); /* Hakenpunkt im Platz */
	position: relative;
	flex: none;
	width: calc(var(--fwi) * (var(--sl) + var(--sr)) + var(--gap));
	height: calc(var(--fwi) * var(--ratio) * 0.97);
	margin: 0;
	padding: 0;
	transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.24, 1);
	z-index: 1;
}
.lgr-item.is-active { z-index: 3; }

.lgr-hit {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.75s cubic-bezier(0.34, 1.5, 0.64, 1) var(--delay, 0ms), opacity 0.35s ease var(--delay, 0ms);
}
.lgr-hit:focus { outline: none; }
.lgr-hit:focus-visible .lgr-tag { outline: 2px solid var(--ink); outline-offset: 3px; }

.lgr-garment,
.lgr-turn {
	position: absolute;
	inset: 0;
	transform-origin: var(--hxp) 0;
	pointer-events: none;
}
.lgr-garment { will-change: transform; }

/* Schatten an der Kontur – am Rahmen um die Bilder statt am einzelnen <img>: Safari (iOS) berechnet
   drop-shadow an Bildern, die noch laden, als Rechteck und korrigiert erst beim nächsten Neuzeichnen.
   rack.js stößt das nach jedem geladenen Bild zusätzlich an (repaintShadow). */
.lgr-turn { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.1)); }
.lgr-turn.is-repaint { filter: none; }

/* Mobil und alle iOS-Geräte (iPhone, iPad): kein drop-shadow – Safari zeichnet ihn dort teils als graues
   Rechteck. Stattdessen ein weicher Bodenschatten unter jedem Teil, der überall gleich aussieht.
   (-webkit-touch-callout gibt es nur in Safari auf iOS/iPadOS.) */
@media (max-width: 639.98px) {
	.lgr-turn, .lgr-turn.is-repaint { filter: none; }
}
@supports (-webkit-touch-callout: none) {
	.lgr-turn, .lgr-turn.is-repaint { filter: none; }
}
@media (max-width: 639.98px) {
	.lgr-hit::after {
		content: "";
		position: absolute;
		left: 18%;
		right: 18%;
		bottom: -6px;
		height: 22px;
		background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), transparent);
		pointer-events: none;
		z-index: -1;
	}
}

.lgr .lgr-view {
	position: absolute;
	left: calc(var(--hxp) - var(--fwi) * var(--hx));
	top: calc(var(--fwi) * var(--ratio) * var(--top) * -1 - var(--rod-h) * 0.6);
	width: var(--fwi) !important;
	max-width: none !important;
	height: auto !important;
	margin: 0;
	transition: opacity calc(var(--turn) * 0.3) ease calc(var(--turn) * 0.32);
	user-select: none;
	-webkit-user-drag: none;
}
.lgr-view--front { opacity: 0; }
.lgr-item.is-active .lgr-view--side:not(:only-child) { opacity: 0; }
.lgr-item.is-active .lgr-view--front { opacity: 1; }

/* ---------- Preisschild ---------- */

.lgr-tag {
	position: absolute;
	left: calc(var(--hxp) + var(--fwi) * 0.03);
	top: calc(var(--fwi) * var(--ratio) * var(--tag-y, 0.1));
	padding: 4px 8px 3px;
	background: #fff;
	border: 1.5px solid var(--ink);
	color: var(--ink);
	font-family: var(--font-utility-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transform: rotate(-4deg);
	transform-origin: 0 0;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}
.lgr-tag::before { /* Loch fürs Bändchen */
	content: "";
	position: absolute;
	left: 5px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	border: 1px solid var(--ink);
}
.lgr-tag { padding-left: 15px; }
.lgr-item.is-active .lgr-tag { background: var(--color-signal-yellow, #fce38a); }

.lgr-item.is-soldout .lgr-tag { color: var(--muted); border-style: dashed; }

/* ---------- Einfall-Animation (Klasse setzt das Script) ---------- */

.lgr.is-pre .lgr-hit { opacity: 0; transform: translateY(-56px); transition: none; }

/* ---------- Handy: Vorderansicht, wischen ---------- */

@media (max-width: 639.98px) {
	.lgr { --fw: 66vw; --gap: 0px; --rod-y: 22px; }

	.lgr-stage {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 28px; /* Platz für den Schatten */
	}
	.lgr-stage::-webkit-scrollbar { display: none; }

	.lgr-rack { justify-content: flex-start; padding-inline: calc((100vw - var(--fw) * 0.92) / 2); }

	.lgr-item {
		--hxp: calc(var(--fwi) * var(--fl));
		width: calc(var(--fwi) * (var(--fl) + var(--fr)) * 0.92);
		scroll-snap-align: center;
		transition: none;
	}
	.lgr .lgr-view--side:not(:only-child) { opacity: 0; }
	.lgr .lgr-view--front { opacity: 1; }
	.lgr-tag { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.lgr-item, .lgr-hit, .lgr .lgr-view, .lgr-caption { transition: none !important; }
	.lgr.is-pre .lgr-hit { opacity: 1; transform: none; }
}

@supports (-webkit-touch-callout: none) {
	.lgr-hit::after {
		content: "";
		position: absolute;
		left: 18%;
		right: 18%;
		bottom: -6px;
		height: 22px;
		background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), transparent);
		pointer-events: none;
		z-index: -1;
	}
}