/* Local, responsive slider styles. */
:root {
  --slider-background: #a7cde6;
  --slider-dot: #d7dbde;
  --slider-accent: var(--tw-primary);
  --slider-panel: var(--tw-surface);
}
.hero-slider { position: relative; overflow: hidden; background: var(--slider-background); }
.slider-viewport { touch-action: pan-y pinch-zoom; }
.hero-slide { position: relative; min-width: 0; }
.slide-link, .hero-slide picture { display: block; }
.slide-image { display: block; width: 100%; height: auto; max-width: 100%; user-select: none; }
.slider-controls { position: absolute; inset: auto 0 0; height: 55px; pointer-events: none; }
.slider-pagination { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: transparent; display: flex; align-items: center; padding: 3px 22px 0; border-radius: 30px 30px 0 0; pointer-events: auto; }
.slider-dot { display: grid; place-items: center; width: 32px; height: 40px; border: 0; background: transparent; padding: 0; }
.slider-dot::after { content: ''; width: 7px; height: 7px; border-radius: 8px; background: var(--slider-dot); transition: width .2s ease, background .2s ease; }
.slider-dot[aria-current="true"]::after { width: 23px; background: var(--slider-accent); }
.hero-slide.is-entering { animation: slider-reveal .32s ease-out; }
@keyframes slider-reveal { from { opacity: .45; } to { opacity: 1; } }
.preview-main h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 400; margin: 18px 0 10px; }
@media (max-width: 767px) {
  .slider-controls { position: relative; height: 50px; background: var(--slider-panel); }
}
@media (prefers-reduced-motion: reduce) { .hero-slide.is-entering { animation: none; } .slider-dot::after { transition: none; } }