/* =============================================================
   .gallery — swipe, dots, thumb strip
   ============================================================= */
.gallery { display: flex; flex-direction: column; gap: var(--space-sm); }

.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg-muted) 80%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-surface) 50%, var(--color-bg-muted)) 100%
  );
  box-shadow: var(--elevation-soft);
}

.gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}

.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
}

.gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
}
.gallery__dot.is-active { background: var(--color-accent); width: 18px; border-radius: 3px; transition: width var(--duration-base) var(--ease-out); }

.gallery__thumbs {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 1024px) {
  .gallery { flex-direction: row; }
  .gallery__thumbs { display: flex; order: -1; width: 88px; }
  .gallery__thumb {
    width: 88px;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
  }
  .gallery__thumb.is-active { border-color: var(--color-accent); }
  .gallery__main { flex: 1; }
  .gallery__dots { display: none; }
}