/* Depth carousel (zb-depth-carousel.js). Without the script it's a swipeable strip of captioned
   photos; with it (.is-3d) the photos stack in 3D and the focused one's caption shows underneath.
   The 3D rules are React Bits' DepthCarousel styles, recoloured to the site's gold. */
.zb-dc {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.zb-dc-slide {
  flex: 0 0 min(78%, 300px);
  margin: 0;
  scroll-snap-align: center;
}
.zb-dc-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 300 / 380;
  object-fit: cover;
  border-radius: 18px;
  background: #0b0d12;
}
.zb-dc-slide figcaption { margin-top: .6rem; }
.zb-dc-title {
  display: block;
  color: #E5E5E5;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.zb-dc-meta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
  color: #999;
  font-size: .82rem;
}
.zb-dc-meta svg { flex-shrink: 0; color: #D4A574; }

/* ---- 3D mode ---- */
.zb-dc.is-3d {
  position: relative;
  display: block;
  height: 490px; /* replaced by the script once it knows the width */
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  perspective: var(--dc-perspective, 1400px);
  perspective-origin: 50% 50%;
  touch-action: pan-y;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.zb-dc.is-3d:active { cursor: grabbing; }
.zb-dc.is-3d:focus-visible { outline: 2px solid rgba(212, 165, 116, .85); outline-offset: 4px; }
/* In 3D, hit-testing goes by depth: the stage's own (empty) box sits in front of the cards pushed
   back along Z and would swallow every click on them. Each card sets its own pointer-events. */
.zb-dc-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.zb-dc.is-3d .zb-dc-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  background: #0b0d12;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 8px 20px -10px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity, filter;
  cursor: pointer;
}
.zb-dc.is-3d .zb-dc-slide img {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
}
.zb-dc.is-3d .zb-dc-slide figcaption { display: none; }
.zb-dc-tint {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.zb-dc-arrow {
  position: absolute;
  top: 50%;
  z-index: 3000;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(212, 165, 116, .3);
  border-radius: 999px;
  background: rgba(15, 15, 15, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #E5E5E5;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.zb-dc-arrow:hover { background: rgba(26, 26, 26, .9); border-color: #D4A574; color: #D4A574; }
.zb-dc-arrow:active { transform: translateY(-50%) scale(.94); }
.zb-dc-arrow:focus-visible,
.zb-dc-dot:focus-visible { outline: 2px solid rgba(212, 165, 116, .85); outline-offset: 2px; }
.zb-dc-arrow--prev { left: 12px; }
.zb-dc-arrow--next { right: 12px; }
.zb-dc-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 3000;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 15, 15, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateX(-50%);
}
.zb-dc-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(229, 229, 229, .32);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.zb-dc-dot.is-active { width: 20px; background: #D4A574; }
.zb-dc-caption {
  min-height: 3rem;
  margin-top: 1rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .zb-dc.is-3d .zb-dc-slide { will-change: auto; }
  .zb-dc-arrow,
  .zb-dc-dot { transition: none; }
}