/* ==========================================================================
   Dive Theme — Carousel
   3D carousel on all screen sizes — radius and item width scale with viewport.
   Mobile flat carousel hidden (3D handles all sizes).
   ========================================================================== */

/* ---------- Views wrapper pass-through ---------- */

.dive-carousel-wrapper,
.dive-carousel-wrapper > div,
.dive-carousel-wrapper > div > div {
  height: 100%;
}

/* ---------- Hide mobile flat carousel — 3D handles all sizes ---------- */

.dive-carousel-mobile {
  display: none;
}

/* ---------- 3D Carousel ---------- */

.dive-carousel-3d {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 2800px;
}

.dive-carousel-3d__track {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.dive-carousel-3d__item {
  position: absolute;
  width: 240px;
  left: -120px;
  backface-visibility: hidden;
  cursor: grab;
}

.dive-carousel-3d__item--dragging {
  cursor: grabbing;
}

.dive-carousel-3d__item img {
  transition: transform 500ms;
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.dive-carousel-3d__item:hover img {
  transform: scale(1.05);
}

/* ---------- No-JS Fallback Grid ---------- */

.dive-carousel-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.dive-carousel-fallback__item img {
  width: 100%;
  height: auto;
  display: block;
}