/*
 * Card photo carousel and its full-screen viewer (blocks/event.js
 * renderCardGallery, frontend/public/js/vw-card-gallery.js). Linked only by a
 * page that renders one (renderer.js), so cms.css stays on its CWV budget.
 *
 * The card keeps every cms.css rule it had: .vw-card, .vw-card-media (4:3,
 * rounded, clipped) and .vw-card-body. What is added here is the strip inside
 * the photo frame and the controls over it. Without the script the strip
 * still scrolls sideways; arrows and dots wait for .is-ready.
 */

/* The body is the link now (arrows cannot sit inside an <a>); keep it
   reading exactly like the card body did inside the linked card. */
.vw-card-gallery .vw-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .vw-card-gallery {
    transition:
      box-shadow 200ms ease-out,
      transform 200ms ease-out;
  }
  .vw-card-gallery:hover {
    box-shadow: var(--vw-effect-elevation2);
    transform: translateY(-2px);
  }
}

.vw-carousel {
  position: relative;
}
.vw-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vw-carousel-track::-webkit-scrollbar {
  display: none;
}
.vw-carousel-track:focus-visible {
  outline: 2px solid var(--vw-color-brand, currentColor);
  outline-offset: -2px;
}
.vw-carousel .vw-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.vw-carousel.is-ready .vw-carousel-slide {
  cursor: zoom-in;
}

.vw-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1f1f1f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
}
.vw-carousel-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vw-carousel-prev {
  left: 0.75rem;
}
.vw-carousel-next {
  right: 0.75rem;
}
.vw-carousel-arrow:hover {
  transform: scale(1.06);
}
.vw-carousel-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Arrows are a pointer affordance: shown on hover where there is one,
   left to the swipe on a touch screen. */
@media (hover: hover) {
  .vw-carousel.is-ready .vw-carousel-arrow {
    display: flex;
  }
  .vw-card-gallery:hover .vw-carousel-arrow {
    opacity: 1;
  }
}
.vw-carousel.is-start .vw-carousel-prev,
.vw-carousel.is-end .vw-carousel-next,
.vw-lightbox.is-start .vw-carousel-prev,
.vw-lightbox.is-end .vw-carousel-next {
  visibility: hidden;
}

.vw-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  z-index: 2;
  display: none;
  gap: 0.35rem;
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.vw-carousel.is-ready .vw-carousel-dots {
  display: flex;
}
.vw-carousel-dots span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition:
    transform 180ms ease-out,
    background-color 180ms ease-out;
}
.vw-carousel-dots span.is-active {
  background: #fff;
  transform: scale(1.3);
}

/* FULL-SCREEN VIEWER — one room's photos, edge to edge, with the way out
   always in the same corner and the booking button one tap away. */
.vw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: #0f0f0f;
  color: #fff;
  font-family: var(--vw-font-sans, system-ui, sans-serif);
}
@media (prefers-reduced-motion: no-preference) {
  .vw-lightbox {
    animation: vw-lightbox-in 200ms ease-out;
  }
  @keyframes vw-lightbox-in {
    from {
      opacity: 0;
    }
  }
}
.vw-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  min-height: 3.5rem;
}
.vw-lightbox-count {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.vw-lightbox-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.vw-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.vw-lightbox-close svg,
.vw-lightbox .vw-carousel-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vw-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.vw-lightbox .vw-carousel-track {
  height: 100%;
}
.vw-lightbox-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.vw-lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--vw-radius-md, 6px);
}
@media (min-width: 48rem) {
  .vw-lightbox-slide {
    padding: 0 5.5rem;
  }
  .vw-lightbox-slide img {
    width: 100%;
    height: 100%;
  }
}
.vw-lightbox .vw-carousel-arrow {
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
  opacity: 1;
}
.vw-lightbox .vw-carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.26);
}
.vw-lightbox .vw-carousel-prev {
  left: 1rem;
}
.vw-lightbox .vw-carousel-next {
  right: 1rem;
}
@media (hover: hover) {
  .vw-lightbox .vw-carousel-arrow {
    display: flex;
  }
}
.vw-lightbox-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.25rem 1.25rem;
  text-align: center;
}
.vw-lightbox-title {
  margin: 0;
  font-family: var(--vw-font-title, var(--vw-font-display, inherit));
  font-size: 1.15rem;
  font-weight: 700;
}
.vw-lightbox-foot .vw-btn {
  text-decoration: none;
}
.vw-lightbox-open {
  overflow: hidden;
}