/* ──────────────────────────────────────────────
   SLIDESHOW — crossfade + subtle Ken Burns
   Used as the media background of service cards and the boat feature.
─────────────────────────────────────────────── */
.slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--grad-ocean);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity;
}
.slide.is-active { opacity: 1; }
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Slow zoom on whichever slide is showing — gives it life without being gaudy */
.slide.is-active img { animation: kenburns 7s ease-out both; }
@keyframes kenburns {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

/* Boat feature: keep the crossfade but no zoom (per request) */
.boat__media .slide.is-active img { animation: none; }

/* Arrows (boat feature) */
.slideshow__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: rgba(6, 26, 43, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--t-base), background var(--t-fast);
}
.slideshow:hover .slideshow__nav,
.slideshow:focus-within .slideshow__nav { opacity: 1; }
.slideshow__nav:hover { background: var(--c-coral); border-color: var(--c-coral); }
.slideshow__nav svg { width: 22px; height: 22px; }
.slideshow__prev { left: var(--sp-4); }
.slideshow__next { right: var(--sp-4); }

/* Dots */
.slideshow__dots {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 2;
}
.slideshow__dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--t-fast), transform var(--t-fast);
}
.slideshow__dot.is-active {
  background: #fff;
  transform: scale(1.35);
}

/* Touch devices: keep arrows visible since there's no hover */
@media (hover: none) {
  .slideshow__nav { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .slide.is-active img { animation: none; }
}