/* Photo slider (template-parts/object-gallery-carousel.php): a horizontal
   scroll strip with scroll-snap — two photos side by side with a wide gap,
   and a sliver of the third peeking in at the right edge (the cue that it
   drags). On narrow screens one photo plus the peek. Mouse dragging, the
   counter and prev/next live in assets/js/object-gallery-carousel.js. */

.object-gallery-carousel {
  --gallery-gap: var(--theme-space-xl);
  --gallery-peek: 8%;
  --gallery-per-view: 2;
  --gallery-slide-width: calc((100% - var(--gallery-peek) - var(--gallery-gap) * var(--gallery-per-view)) / var(--gallery-per-view));
}

.object-gallery-carousel__viewport {
  display: flex;
  gap: var(--gallery-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

.object-gallery-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.object-gallery-carousel__viewport:focus-visible {
  outline: var(--theme-line-width) solid var(--theme-color-accent);
  outline-offset: 4px;
}

/* While dragging with the mouse: no snapping mid-drag (it fights the
   pointer), no text/image selection. JS snaps to the nearest slide on
   release. */
.object-gallery-carousel__viewport.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.object-gallery-carousel__slide {
  flex: 0 0 var(--gallery-slide-width);
  margin: 0;
  scroll-snap-align: start;
  /* border: var(--theme-line-width) solid var(--theme-line-color); */
  background-color: var(--brand-color-dark);
}

.object-gallery-carousel__slide img {
  display: block;
  width: 100%;
  /* height: auto so the width/height attributes on the <img> don't
     override the aspect ratio. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  pointer-events: none;
}

/* Counter left, prev/next right, below the strip. */
.object-gallery-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--theme-space-xs);
  margin-top: var(--theme-space-xs);
}

.object-gallery-carousel__counter {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.object-gallery-carousel__controls {
  display: flex;
}

/* Square, hairline-bordered — the borders collapse between the two. */
.object-gallery-carousel__control {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--theme-line-width) solid var(--theme-line-color);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s var(--theme-ease-signature), color 0.2s var(--theme-ease-signature), opacity 0.2s var(--theme-ease-signature);
}

.object-gallery-carousel__control + .object-gallery-carousel__control {
  margin-left: calc(-1 * var(--theme-line-width));
}

.object-gallery-carousel__control svg {
  width: 1.25rem;
  height: 1.25rem;
}

.object-gallery-carousel__control:not(:disabled):is(:hover, :focus-visible) {
  background-color: var(--theme-color-accent);
  color: var(--theme-color-primary);
}

.object-gallery-carousel__control:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (width <= 768px) {
  .object-gallery-carousel {
    --gallery-gap: var(--theme-space-xs);
    --gallery-peek: 12%;
    --gallery-per-view: 1;
  }

  .object-gallery-carousel__control {
    width: 2.5rem;
    height: 2.5rem;
  }
}