/* ============================================================
   POST CAROUSEL — Instagram-style multi-image posts.
   Only applies to posts that carry 2+ images; single-image posts
   never render these classes, so nothing existing is affected.
   ============================================================ */

.pcar {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;      /* let vertical feed scrolling through */
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  background: #000;
}

.pcar[data-pcar-rounded="1"] { border-radius: 14px; }

.pcar-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.pcar-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pcar-slide img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;     /* drags belong to the track, not the image */
}

/* "2/5" pill, top-right — matches the app's dark translucent chips. */
.pcar-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(15, 23, 42, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 3px 9px;
  border-radius: 99px;
  pointer-events: none;
  font-family: 'DM Sans', sans-serif;
}

/* Dot indicators, bottom-centre. */
.pcar-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.pcar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  flex-shrink: 0;
}

.pcar-dot.active {
  background: #fff;
  transform: scale(1.18);
}

/* Many images: keep the dot row from overflowing narrow phones. */
.pcar[data-pcar-count="8"] .pcar-dot,
.pcar[data-pcar-count="9"] .pcar-dot,
.pcar[data-pcar-count="10"] .pcar-dot {
  width: 5px;
  height: 5px;
}

/* Inside the spotlight-detail hero the bottom holds the name/meta overlay,
   so lift the dots above it and keep the counter clear of the back button. */
.sd-hero .pcar { position: absolute; inset: 0; }
.sd-hero .pcar-dots { bottom: 78px; }
.sd-hero .pcar-counter { top: 14px; right: 14px; }

/* ── "Multiple photos" badge on grid thumbnails (profile / saved /
      search), mirroring Instagram's stacked-squares marker. ── */
.pcar-multi-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.pcar-multi-badge svg {
  width: 17px;
  height: 17px;
  display: block;
}