/* Mobile photo slider (Swiper) for the home page gallery and /gallery. Hidden until the controller mounts
   it on narrow screens, so the grid remains the fallback without JavaScript and on wider screens. Photos
   keep their own proportions (no letterboxing) and run edge to edge; tap a photo to open the full-screen
   viewer. On the home page it replaces three stacked photographs with one swipeable row.
   .swiper in the selector outranks Swiper's own `.swiper { display: block }`, which loads after this file
   (deferred) and would otherwise show the unmounted slider, native buttons and all, under the desktop grid. */
.gallery-slider.swiper { display: none; }

@media (max-width: 767px) {
  .gallery-slider.is-active {
    display: block;
    position: relative;
    margin-inline: calc(var(--gutter, 1rem) * -1);
    --swiper-navigation-size: 18px;
    --swiper-navigation-color: #ffffff;
  }
  .gallery:has(.gallery-slider.is-active) .gallery__grid { display: none; }

  .gallery-slider__slide { height: auto; }
  .gallery-slider__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
  .gallery-slider__image { display: block; width: 100%; height: auto; }
  .gallery-slider__caption {
    margin: 0;
    padding: 0.6rem 1rem 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-muted, #555);
  }
  .gallery-slider__counter.swiper-pagination-fraction {
    top: 0.6rem;
    bottom: auto;
    left: auto;
    right: 0.6rem;
    width: auto;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: var(--font-ui, var(--font-body));
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
  .gallery-slider__nav { display: none; }
  .gallery--curated .gallery-slider__caption { padding-inline: var(--gutter, 1rem); }
}

/* Phones with JavaScript (html.js, set first thing in the site layout's head) start in the slider's own first
   frame: the grid is hidden and only the first photo shows, so Swiper mounting later moves nothing on screen.
   If Swiper can't load, the controller marks the slider unavailable and the grid comes back. */
@media (max-width: 767px) {
  html.js .gallery-slider:not(.is-unavailable) { display: block; position: relative; overflow: hidden; margin-inline: calc(var(--gutter, 1rem) * -1); }
  html.js .gallery:has(.gallery-slider:not(.is-unavailable)) .gallery__grid { display: none; }
  html.js .gallery-slider:not(.swiper-initialized) .swiper-wrapper { display: flex; align-items: flex-start; }
  html.js .gallery-slider:not(.swiper-initialized) .swiper-slide { flex: 0 0 100%; }
  html.js .gallery-slider:not(.swiper-initialized) .swiper-slide ~ .swiper-slide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-slider .swiper-wrapper { transition-duration: 0ms !important; }
}

.gallery__count { margin: 0 0 1rem; font-size: 0.9rem; color: var(--color-muted); }

@media (max-width: 767px) {
  /* One scrollable row of filter chips instead of several wrapped rows. */
  .gallery--full .gallery__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter, 1rem) * -1); padding-inline: var(--gutter, 1rem); -webkit-overflow-scrolling: touch; }
  .gallery--full .gallery__filters::-webkit-scrollbar { display: none; }
  .gallery--full .gallery__filters .chip { flex: none; }
  .gallery--full .gallery__count { margin-bottom: 0.6rem; }
}

@media (max-width: 767px) {
  .section:has(.gallery--full) { padding-top: 1.25rem; }
}