/* ===== Fix: classe lg:grid-cols-2 ausente no build do Tailwind (styles.css) =====
   Sem essa regra, o card do vídeo da lancha e o card do combo Jet Ski
   ficam empilhados em vez de lado a lado a partir de 1024px, porque essa
   combinação de utilitário não foi gerada no styles.css. */
@media (width >= 64rem) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Sliders de fotos (roteiros + combo Jet Ski) ===== */
.roteiro-slider {
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.roteiro-slider::-webkit-scrollbar {
  display: none;
}

.roteiro-slider.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.roteiro-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Fundo atrás das fotos dos sliders (roteiros e combo Jet Ski): como agora
   mostramos a foto inteira (object-fit: contain) em vez de cortada, as fotos
   verticais e horizontais deixam faixas vazias nas laterais ou em cima/baixo.
   Esse gradiente preenche essas faixas combinando com o azul da marca. */
.roteiro-slider {
  background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--aqua) 14%, var(--ocean-deep)), var(--ocean-deep) 72%);
}

/* ===== Tamanho dos quadros de foto dos sliders =====
   O card era aspect-[4/3] (mais largo que alto), o que cortava demais as
   fotos verticais quando exibidas inteiras. Deixamos um quadro mais
   quadrado — um meio-termo que funciona bem tanto para fotos verticais
   quanto horizontais — e um pouco maior para as imagens não ficarem
   pequenas demais. */
.aspect-\[4\/3\] {
  aspect-ratio: 1 / 1;
}

@media (min-width: 1024px) {
  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3.6;
  }
}

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: rgba(11, 43, 66, 0.65);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, background-color 0.2s ease, transform 0.2s ease;
}

.slider-arrow:hover {
  background: rgba(11, 43, 66, 0.9);
}

.group:hover .slider-arrow,
.slider-arrow:focus-visible {
  opacity: 1;
}

.slider-arrow-prev {
  left: 0.6rem;
}

.slider-arrow-next {
  right: 0.6rem;
}

.slider-dots {
  position: absolute;
  bottom: 0.85rem;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;
}

.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.slider-dot.is-active {
  background: #fff;
  transform: scale(1.4);
}

@media (max-width: 640px) {
  /* No mobile o gesto de arrastar (swipe) já é natural; as setas ficam no caminho do dedo. */
  .slider-arrow {
    display: none;
  }
}

@media (hover: none) {
  .roteiro-slider {
    cursor: default;
  }
}

/* ===== Vídeo vertical da lancha ===== */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 2.25rem;
  border: 6px solid rgba(255, 255, 255, 0.18);
  background: #000;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.55);
}

.video-frame video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .video-frame {
    max-width: 320px;
  }
}

/* Variante compacta usada no card "Veja a lancha por dentro" dentro da seção de roteiros */
.video-frame--compact {
  max-width: 250px;
  border-radius: 1.5rem;
  border-width: 4px;
}

@media (min-width: 640px) {
  .video-frame--compact {
    max-width: 275px;
  }
}

@media (min-width: 1024px) {
  .video-frame--compact {
    max-width: 300px;
  }
}

/* Galeria: bayboos.jpeg — foco mais embaixo, não no centro */
#galeria img[src*="bayboos.jpeg"] {
  object-position: center 65%;
}