/* Responsive Miracle — inline 3D gradient carousel (related themes).
   Bazirano na gradientslider (Clément Grellier), scope-ovano iz full-screen u sekciju. */

.rm-carousel-wrap { --perspective: 1800px; --ease: cubic-bezier(0.22,1,0.36,1); margin: 6px 0 0; }

/* Stage -> inline (umesto 100vw/100vh) */
.rm-carousel-wrap .stage {
	position: relative;
	width: 100%;
	height: 700px;
	background: #eef0f4;
	overflow: hidden;
	perspective: var(--perspective);
	overscroll-behavior: auto;
	-webkit-user-select: none; user-select: none;
}
.rm-carousel-wrap .stage.carousel-mode { touch-action: pan-y; cursor: grab; }
.rm-carousel-wrap .stage.carousel-mode.dragging { cursor: grabbing; }

.rm-carousel-wrap .loader { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; background: #f3f4f7; transition: opacity .25s var(--ease), visibility .25s linear; }
.rm-carousel-wrap .loader--hide { opacity: 0; visibility: hidden; }
.rm-carousel-wrap .loader__ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #ddd; border-top-color: #ff5656; animation: rmspin 1s linear infinite; }
@keyframes rmspin { to { transform: rotate(360deg); } }

.rm-carousel-wrap #bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; filter: blur(28px) saturate(1.1); pointer-events: none; }

.rm-carousel-wrap .cards { position: absolute; inset: 0; z-index: 10; transform-style: preserve-3d; }

.rm-carousel-wrap .card {
	position: absolute; top: 50%; left: 50%;
	width: min(32vw, 540px);
	aspect-ratio: 25 / 18;
	transform-style: preserve-3d; backface-visibility: hidden;
	will-change: transform, filter; transform-origin: 90% center; contain: layout paint;
}
.rm-carousel-wrap .card__link { display: block; width: 100%; height: 100%; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(15,17,21,.22); }
.rm-carousel-wrap .card__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transform: translateZ(0); pointer-events: none; -webkit-user-drag: none; }
.rm-carousel-wrap .card__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 26px 16px 14px; color: #fff;
	background: linear-gradient(to top, rgba(10,12,16,.82), rgba(10,12,16,0));
	font-family: inherit;
}
.rm-carousel-wrap .card__title { font-size: 15px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.rm-carousel-wrap .card__price { font-size: 14px; font-weight: 800; background: #ff5656; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.rm-carousel-hint { text-align: center; margin: 14px 0 0; font-size: 13px; color: #6b7280; }

@media (prefers-reduced-motion: reduce) { .rm-carousel-wrap .card { transition: none !important; animation: none !important; } }
@media (max-width: 700px) {
	.rm-carousel-wrap .stage { height: 340px; }
	.rm-carousel-wrap .card { width: min(70vw, 340px); }
}