/* Guest-page photo gallery (SPEC-spa-gallery.md §3). Only spa.css's tokens
   (and their rgba() forms, as spa.css itself uses) - no new colours or
   fonts. Nothing here applies until gallery.js shows #spa-gallery and sets
   body.has-gallery, so with no photos the page is exactly as before. */

:root {
  /* How far the gallery reaches up into the navy hero: about half of its
     height (3:2 photo, so a third of its width), capped on wide screens. */
  --gallery-overlap: min(150px, calc((100vw - 32px) / 3.2));
}

body.has-gallery header.hero { padding-bottom: calc(40px + var(--gallery-overlap)); }

.gallery {
  position: relative;
  z-index: 1;
  /* main's own 20px top padding + the overlap */
  margin-top: calc(-20px - var(--gallery-overlap));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--liv-mist);
  box-shadow: 0 10px 28px rgba(17, 63, 97, 0.18);
  min-width: 0;
}

.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -3px; }

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* reserved before the photo loads - nothing jumps */
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Previous / Next: 44px targets, on the reading-direction sides. */
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(249, 246, 240, 0.9);
  color: var(--liv-navy);
  box-shadow: 0 2px 8px rgba(17, 63, 97, 0.2);
  transition: opacity 0.15s;
}
.gallery__nav--prev { inset-inline-start: 10px; }
.gallery__nav--next { inset-inline-end: 10px; }
.gallery__nav:disabled { opacity: 0; pointer-events: none; }
.gallery__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The chevron points "forward": flip Previous, and both again in Hebrew. */
.gallery__nav--prev svg { transform: scaleX(-1); }
[dir="rtl"] .gallery__nav--next svg { transform: scaleX(-1); }
[dir="rtl"] .gallery__nav--prev svg { transform: none; }

.gallery__dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.gallery__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(249, 246, 240, 0.55);
  transition: background 0.15s, transform 0.15s;
}
.gallery__dot.is-current { background: var(--cream); transform: scale(1.25); }

.gallery__count {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(17, 63, 97, 0.72);
  color: var(--cream);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__nav, .gallery__dot { transition: none; }
}