/* Image carousel (IG and TikTok slide posts), video embeds, photo lightbox */
.carousel {
  position: relative; width: 100%; margin: 1.5em 0; overflow: hidden;
  border-radius: var(--r); background: var(--ink); border: 1px solid var(--line);
  touch-action: pan-y; outline-offset: 3px;
}
.carousel-track { display: flex; transition: transform .45s var(--ease); will-change: transform; }
.carousel-slide { min-width: 100%; display: flex; align-items: center; justify-content: center; }
video.carousel-img, .carousel-img {
  display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 0;
}
.carousel-img { cursor: zoom-in; }

.carousel-nav {
  position: absolute; z-index: 2; top: 50%; margin-top: -22px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.carousel-nav svg.i { width: 20px; height: 20px; stroke-width: 2; }
.carousel-nav:hover { transform: scale(1.06); }
.carousel-nav:active { transform: scale(.92); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

.carousel-dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 8px 12px 10px;
}
.carousel-dot { position: relative; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; }
.carousel-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.5);
  transition: width var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.carousel-dot.active { width: 22px; }
.carousel-dot.active::before { width: 16px; background: #fff; }
.carousel-dots:has(.carousel-dot:nth-child(13)) .carousel-dot { width: 11px; }
.carousel-dots:has(.carousel-dot:nth-child(13)) .carousel-dot::before { width: 5px; height: 5px; }
.carousel-dots:has(.carousel-dot:nth-child(13)) .carousel-dot.active::before { width: 10px; }

.carousel-counter {
  position: absolute; z-index: 2; top: 10px; right: 10px; padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(14,17,22,.62); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Video embeds (TikTok, IG Reels) */
.video-embed { position: relative; width: 100%; margin: 0 0 1.6em; border-radius: var(--r); overflow: hidden; background: #000; }
.tiktok-embed, .ig-reel-embed { max-width: 340px; margin-inline: auto; aspect-ratio: 9 / 16; max-height: 620px; }

/* Lightbox: photos zoom in on a spring */
.lightbox { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(94vw, 1100px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10,10,14,.78); }
.lightbox img { display: block; max-width: min(94vw, 1100px); max-height: 88vh; width: auto; height: auto; border-radius: var(--r-sm); background: #000; }
.lightbox[open] { animation: zoomIn .38s var(--spring); }
.lightbox[open]::backdrop { animation: fadeIn var(--t-base) var(--ease); }
@keyframes zoomIn { from { opacity: 0; transform: scale(.86); } }
.lightbox form { position: absolute; top: 10px; right: 10px; }
.lightbox-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--spring); }
.lightbox-close:hover { background: rgba(0,0,0,.8); }
.lightbox-close:active { transform: scale(.94); }

@media (max-width: 860px) {
  .carousel { border-radius: var(--r-sm); }
  .carousel-nav { width: 40px; height: 40px; margin-top: -20px; }
  .carousel-prev { left: 6px; }
  .carousel-next { right: 6px; }
  .tiktok-embed, .ig-reel-embed { max-width: 100%; max-height: 72vh; }
}