/* Inline photo carousel for a catalog card (.bido-traveler-card-media). The
   card is a stretched-link click target (.bido-card-link, z-index 1); the
   controls below sit at z-index 2 — the same escape hatch .bido-card-actions
   uses — so an arrow click pages the photos while a click on the photo itself
   still opens the listing. carousel_controller.js sets --carousel-index and
   toggles the active dot / boundary [hidden]; this file owns presentation. */
.bido-card-carousel {
  position: relative;
  overflow: hidden;
}

.bido-card-carousel-track {
  display: flex;
  transform: translateX(calc(var(--carousel-index, 0) * -100%));
  transition: transform .3s ease;
}

.bido-card-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.bido-card-carousel-control {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--bx-control-h-sm);
  block-size: var(--bx-control-h-sm);
  border-radius: var(--bx-r-pill);
  border: 1px solid rgba(var(--bx-navy-rgb), 0.12);
  background: rgba(var(--bx-white-rgb), 0.92);
  color: var(--bido-navy);
  box-shadow: var(--bx-shadow-soft);
  cursor: pointer;
  transition: background .15s, opacity .15s;
}

.bido-card-carousel-control[hidden] { display: none; }

.bido-card-carousel-prev { inset-inline-start: 8px; }
.bido-card-carousel-next { inset-inline-end: 8px; }

.bido-card-carousel-dots {
  position: absolute;
  z-index: 2;
  inset-block-end: 8px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  /* Decorative position indicator — never intercept the card's click target. */
  pointer-events: none;
}

.bido-card-carousel-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--bx-r-pill);
  background: rgba(var(--bx-white-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--bx-navy-rgb), 0.18);
  transition: background .15s, transform .15s;
}

.bido-card-carousel-dot.is-active {
  background: rgba(var(--bx-white-rgb), 1);
  transform: scale(1.25);
}

/* Hover affordance: reveal the arrows only when pointing at the card. The
   reveal is keyed off .bido-clickable-card, not .bido-card-carousel: the card's
   stretched link (.bido-card-link) is the hit-test target over the photo and is
   a child of the card but NOT a descendant of the carousel, so a
   .bido-card-carousel:hover would never match while the cursor is on the photo.
   The card IS an ancestor of that link, so its :hover does. */
@media (any-hover: hover) {
  .bido-card-carousel-control { opacity: 0; }

  .bido-clickable-card:hover .bido-card-carousel-control,
  .bido-card-carousel-control:focus-visible {
    opacity: 1;
  }

  .bido-card-carousel-control:hover {
    background: rgba(var(--bx-white-rgb), 1);
    border-color: rgba(var(--bx-navy-rgb), 0.24);
  }
}

/* Touch: no hover to reveal arrows, so keep them visible and grow the tap
   target. */
@media (pointer: coarse) {
  .bido-card-carousel-control {
    inline-size: var(--bx-control-h);
    block-size: var(--bx-control-h);
  }
}