/* SC Spots – frontend styles */

/* ── Wrapper (neutral class name — avoids "banner" keyword in filter lists) */

.sc-spot {
	width: 100%;
	margin: 0 auto;
}

/* ── Single item ─────────────────────────────────────────────────────────── */

.sc-spot-item {
	display: block;
}

.sc-spot-link {
	display: block;
}

.sc-spot-item img,
.sc-spot-item picture {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Rotating artwork ────────────────────────────────────────────────────── */
/* Every image of a rotating ad is in the markup; JS turns exactly one frame on.
   Without JS the first frame stays visible, so the ad degrades to a static image. */

.sc-rot {
	display: block;
}

.sc-rot-frame {
	display: none;
}

.sc-rot-frame.is-on {
	display: block;
}

/* Banner with a forced height — pass the height down to the visible frame so the
   image's own height:100%/object-fit:cover still has something to resolve against. */
.sc-rot--fill,
.sc-rot--fill > .sc-rot-frame.is-on {
	height: 100%;
}

/* ── Full-width scroll-snap carousel ────────────────────────────────────── */

.sc-carousel {
	position: relative;
}

/* Stage wraps track + nav buttons — receives the gradient overlays.
   Dots are outside the stage so they're never covered. */
.sc-carousel-stage {
	position: relative;
}

.sc-carousel-stage::before,
.sc-carousel-stage::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 10;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

/* Left fade — override --sc-fade-left on a parent to match your background */
.sc-carousel-stage::before {
	left: 0;
	background: var(--sc-fade-left, linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, transparent 100%));
}

/* Right fade */
.sc-carousel-stage::after {
	right: 0;
	background: var(--sc-fade-right, linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%));
}

/* Hide left gradient when on first slide, right when on last */
.sc-carousel.sc-at-start .sc-carousel-stage::before { opacity: 0; }
.sc-carousel.sc-at-end   .sc-carousel-stage::after  { opacity: 0; }

.sc-carousel-track {
	display: flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 12px;
}

.sc-carousel-track::-webkit-scrollbar {
	display: none;
}

/* Desktop: 3 by default, overridden by --sc-slides from inline style */
.sc-carousel-slide {
	flex: 0 0 calc((100% - (var(--sc-slides, 3) - 1) * 12px) / var(--sc-slides, 3));
	min-width: 0;
	scroll-snap-align: start;
}

/* Tablet: 2 by default */
@media (max-width: 767px) {
	.sc-carousel-slide {
		flex: 0 0 calc((100% - (var(--sc-slides, 2) - 1) * 12px) / var(--sc-slides, 2));
	}
}

/* Mobile: 1 by default */
@media (max-width: 480px) {
	.sc-carousel-slide {
		flex: 0 0 calc((100% - (var(--sc-slides, 1) - 1) * 12px) / var(--sc-slides, 1));
	}
}

/* ── Navigation arrows ───────────────────────────────────────────────────── */

.sc-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	background: rgba(255, 255, 255, 0.92);
	color: #1d2327;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	opacity: 0.3;
	transition: background 0.18s, box-shadow 0.18s, opacity 0.18s, transform 0.18s;
}

.sc-nav-btn svg {
	display: block;
	flex-shrink: 0;
}

/* Reveal arrows on interaction — hovering the carousel, the button itself, or
   focusing it via keyboard. On touch devices (no hover) they stay subtle. */
.sc-carousel:hover .sc-nav-btn:not(:disabled),
.sc-nav-btn:hover:not(:disabled),
.sc-nav-btn:focus-visible:not(:disabled) {
	opacity: 1;
}

.sc-nav-btn:hover:not(:disabled) {
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	transform: translateY(-50%) scale(1.07);
}

.sc-nav-btn:active:not(:disabled) {
	transform: translateY(-50%) scale(0.95);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.sc-nav-btn:disabled {
	cursor: default;
	opacity: 0.15;
}

.sc-nav-prev { left: 8px; }
.sc-nav-next { right: 8px; }

/* ── Mobile adjustments ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.sc-nav-btn {
		width: 28px;
		height: 28px;
		border-radius: 5px;
	}

	.sc-nav-prev { left: 5px; }
	.sc-nav-next { right: 5px; }
}

/* ── Equal heights across carousel slides ───────────────────────────────── */

/* Propagate flex height down the chain so all images fill the tallest slot  */

.sc-carousel-slide {
	display: flex;
	flex-direction: column;
}

.sc-carousel-slide .sc-spot-item {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sc-carousel-slide .sc-spot-link {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sc-carousel-slide .sc-spot-item picture {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Rotating artwork inside a slide: keep the flex chain unbroken so every frame
   stretches to the slide height like a plain image would. Frames that are off stay
   display:none — only the .is-on frame joins the chain. */
.sc-carousel-slide .sc-rot,
.sc-carousel-slide .sc-rot-frame.is-on {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* height:0 as flex-basis lets flex-grow fill the slide; object-fit preserves ratio */
.sc-carousel-slide .sc-spot-item img {
	flex: 1;
	height: 0;
	min-height: 0;
	object-fit: cover;
}

/* ── Mobile: single banner + peek of the next (swipe-first, no arrows) ───── */

@media (max-width: 600px) {
	/* Inset the track so the active banner sits off the edges and the
	   neighbouring banners peek in — swipe reveals there's more, like sts.pl. */
	.sc-carousel-track {
		gap: 10px;
		/* Brak bocznego insetu: pierwszy baner siada równo przy lewej krawędzi
		   (a ostatni przy prawej) dzięki naturalnemu clampowi scrolla.
		   Środkowe banery i tak centrują się z równym peekiem. */
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	/* One banner per view; the remaining sliver shows the next/previous one.
	   Lower the % for a bigger peek, raise it for a smaller peek. */
	.sc-carousel-slide {
		flex: 0 0 85%;
		/* Center alignment → środkowe banery mają RÓWNY peek z obu stron
		   ((100% − 85%) / 2 ≈ 7,5% na stronę). Pierwszy i ostatni baner
		   dochodzą do krawędzi (scroll clamp na 0 / max), więc pierwszy
		   jest dosunięty maksymalnie do lewej zaraz po wejściu. */
		scroll-snap-align: center;
	}

	/* Swipe replaces the arrows on touch. */
	.sc-nav-btn {
		display: none !important;
	}

	/* No darkening gradient on mobile — it would cover the peeking banner. */
	.sc-carousel-stage::before,
	.sc-carousel-stage::after {
		display: none;
	}
}