/* ==========================================================================
   BANNER SLIDER
   Five styles: hero · split · card · minimal · overlay
   Built on CSS scroll-snap — works without JS as a swipeable strip.
   ========================================================================== */

.gps-slider {
	position: relative;
	--slide-h: clamp(260px, 34vw, 420px);
}

.gps-slider--h-compact { --slide-h: clamp(190px, 24vw, 300px); }
.gps-slider--h-normal  { --slide-h: clamp(260px, 34vw, 420px); }
.gps-slider--h-tall    { --slide-h: clamp(340px, 46vw, 560px); }

.gps-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.gps-slider__track::-webkit-scrollbar { display: none; }

.gps-slider__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	min-height: var(--slide-h);
	display: flex;
	overflow: hidden;
}

.gps-slider__media { position: absolute; inset: 0; }
.gps-slider__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gps-slider__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 100%;
	padding: clamp(24px, 4vw, 56px);
}
.gps-slider__inner { width: min(680px, 100%); }

.gps-slider__slide.align-center .gps-slider__content { justify-content: center; text-align: center; }
.gps-slider__slide.align-center .gps-slider__inner   { margin-inline: auto; }
.gps-slider__slide.align-right  .gps-slider__content { justify-content: flex-end; text-align: right; }

.gps-slider__eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 10px;
	opacity: .85;
}

.gps-slider__heading {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	line-height: 1.12;
	margin: 0 0 12px;
}

.gps-slider__text {
	font-size: clamp(.95rem, 1.3vw, 1.06rem);
	line-height: 1.55;
	margin: 0 0 18px;
	opacity: .92;
}

.gps-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
.gps-slider__slide.align-center .gps-slider__actions { justify-content: center; }
.gps-slider__slide.align-right  .gps-slider__actions { justify-content: flex-end; }

/* ── Style: hero ─────────────────────────────────────────── */
.gps-slider--hero .gps-slider__slide { background: var(--ink); color: var(--cream); }
.gps-slider--hero .gps-slider__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(22,19,32,.78) 0%, rgba(124,58,237,.42) 100%);
}
.gps-slider--hero .gps-slider__heading { color: var(--cream); }

/* ── Style: split ────────────────────────────────────────── */
.gps-slider--split .gps-slider__slide {
	background: var(--cream);
	color: var(--ink);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.gps-slider--split .gps-slider__media { position: relative; grid-column: 2; }
.gps-slider--split .gps-slider__content { grid-row: 1; grid-column: 1; text-align: left; }
.gps-slider--split .gps-slider__slide.align-center .gps-slider__content { text-align: left; justify-content: flex-start; }
@media (max-width: 780px) {
	.gps-slider--split .gps-slider__slide { grid-template-columns: 1fr; }
	.gps-slider--split .gps-slider__media { grid-column: 1; min-height: 180px; }
	.gps-slider--split .gps-slider__content { grid-row: 2; }
}

/* ── Style: card ─────────────────────────────────────────── */
.gps-slider--card { padding: clamp(16px, 3vw, 32px); }
.gps-slider--card .gps-slider__track { gap: 16px; }
.gps-slider--card .gps-slider__slide {
	border-radius: var(--radius, 18px);
	border: 2px solid var(--ink);
	background: var(--ink);
	color: var(--cream);
	box-shadow: 6px 8px 0 var(--ink);
}
.gps-slider--card .gps-slider__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22,19,32,.35) 0%, rgba(22,19,32,.8) 100%);
}
.gps-slider--card .gps-slider__heading { color: var(--cream); }

/* ── Style: minimal ──────────────────────────────────────── */
.gps-slider--minimal .gps-slider__slide {
	background: color-mix(in srgb, var(--violet) 7%, var(--cream));
	color: var(--ink);
	border-block: 2px solid var(--ink);
}
.gps-slider--minimal .gps-slider__eyebrow { color: var(--violet); }

/* ── Style: overlay ──────────────────────────────────────── */
.gps-slider--overlay .gps-slider__slide { background: var(--ink); color: var(--cream); }
.gps-slider--overlay .gps-slider__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22,19,32,0) 30%, rgba(22,19,32,.9) 100%);
}
.gps-slider--overlay .gps-slider__content { align-items: flex-end; }
.gps-slider--overlay .gps-slider__heading { color: var(--cream); }

/* ── Controls ────────────────────────────────────────────── */
.gps-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--cream);
	color: var(--ink);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.gps-slider__arrow:hover,
.gps-slider__arrow:focus-visible { background: var(--violet); color: #fff; border-color: var(--violet); }
.gps-slider__arrow svg { width: 20px; height: 20px; }
.gps-slider__arrow--prev { left: clamp(8px, 2vw, 20px); }
.gps-slider__arrow--next { right: clamp(8px, 2vw, 20px); }

.gps-slider__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(10px, 2vw, 18px);
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}
.gps-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--cream);
	cursor: pointer;
	transition: width .2s ease, background .2s ease;
}
.gps-slider__dot.is-active { width: 26px; border-radius: 999px; background: var(--violet); border-color: var(--violet); }

/* Light controls where the slide is dark */
.gps-slider--hero .gps-slider__dot,
.gps-slider--overlay .gps-slider__dot,
.gps-slider--card .gps-slider__dot { border-color: var(--cream); background: transparent; }
.gps-slider--hero .gps-slider__dot.is-active,
.gps-slider--overlay .gps-slider__dot.is-active,
.gps-slider--card .gps-slider__dot.is-active { background: var(--gold); border-color: var(--gold); }

/* A single slide needs no controls */
.gps-slider.is-single .gps-slider__arrow,
.gps-slider.is-single .gps-slider__dots { display: none; }

@media (max-width: 600px) {
	.gps-slider__arrow { display: none; }   /* swipe instead */
}

@media (prefers-reduced-motion: reduce) {
	.gps-slider__track { scroll-behavior: auto; }
	.gps-slider__arrow, .gps-slider__dot { transition: none; }
}
