/* Photo gallery (home, below "Planning something special?"): horizontal infinite slider + lightbox. Replaces the Figma photo strip (1:681).
   Without JavaScript it is a plain scroll-snap strip; gallery.js adds the arrows, the endless loop, mouse drag and the lightbox.
   Visible photos: 5 on desktop (374 x 460 on a 1920 screen, as in Figma), fewer on narrower screens, with a peek of the next one on phones. */

.dn-gallery { --gal-n: 5; --gal-gap: 12px; position: relative; margin-top: 50px; }

.dn-gallery__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dn-gallery__viewport::-webkit-scrollbar { display: none; }
.dn-gallery__viewport.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.dn-gallery__viewport.is-dragging * { cursor: grabbing; }

.dn-gallery__track { display: flex; gap: var(--gal-gap); position: relative; }
.dn-gallery__item {
  flex: 0 0 calc((100% - (var(--gal-n) - 1) * var(--gal-gap)) / var(--gal-n));
  aspect-ratio: 374 / 460;
  scroll-snap-align: start;
}
.dn-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
}
.dn-gallery__open:focus-visible { outline-offset: -4px; }
.dn-gallery__open img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* Arrows: round yellow buttons on the edges (same hover as the other buttons) */
.dn-gallery__arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: var(--border-width) solid var(--button-primary);
  border-radius: 50%;
  background: var(--button-primary);
  color: var(--typography-primary);
  transition: background-color var(--transition), border-color var(--transition);
}
.dn-gallery__arrow .dn-icon { width: 18px; height: 18px; }
.dn-gallery__arrow--prev { left: var(--gutter); }
.dn-gallery__arrow--prev .dn-icon { transform: rotate(90deg); }
.dn-gallery__arrow--next { right: var(--gutter); }
.dn-gallery__arrow--next .dn-icon { transform: rotate(-90deg); }
.dn-gallery__arrow:hover, .dn-gallery__arrow:focus-visible { background: var(--button-hover); border-color: var(--button-hover); }
.dn-gallery:not(.is-ready) .dn-gallery__arrow { display: none; }

@media (max-width: 1439px) { .dn-gallery { --gal-n: 4; } }
@media (max-width: 1023px) { .dn-gallery { --gal-n: 3; } }
@media (max-width: 767px) {
  .dn-gallery { --gal-n: 2.3; margin-top: 32px; }
  .dn-gallery__arrow { width: 44px; height: 44px; margin-top: -22px; }
}
@media (max-width: 479px) { .dn-gallery { --gal-n: 1.5; } }

/* Lightbox: a modal <dialog> over the whole screen; the dialog itself is the dark backdrop, a click outside the photo closes it */
html.dn-lightbox-open { overflow: hidden; }
.dn-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--background-secondary) 96%, transparent);
  color: var(--typography-secondary);
  overflow: hidden;
}
.dn-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.dn-lightbox::backdrop { background: transparent; }
.dn-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: calc(100% - 200px); touch-action: pan-y; }
.dn-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.dn-lightbox__caption { display: flex; gap: 16px; align-items: baseline; justify-content: center; max-width: 640px; font-size: 16px; line-height: 1.3; text-align: center; }
.dn-lightbox__count { flex: none; color: var(--typography-tertiary); font-weight: 500; }
.dn-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: var(--border-width) solid var(--button-primary);
  border-radius: 50%;
  background: var(--button-primary);
  color: var(--typography-primary);
  transition: background-color var(--transition), border-color var(--transition);
}
.dn-lightbox__btn:hover, .dn-lightbox__btn:focus-visible { background: var(--button-hover); border-color: var(--button-hover); }
.dn-lightbox__btn:focus-visible { outline-color: var(--typography-tertiary); }
.dn-lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dn-lightbox__btn--close { top: 20px; right: 20px; }
.dn-lightbox__btn--prev { left: 20px; top: 50%; margin-top: -28px; }
.dn-lightbox__btn--next { right: 20px; top: 50%; margin-top: -28px; }
.dn-lightbox__btn--prev svg { transform: rotate(90deg); }
.dn-lightbox__btn--next svg { transform: rotate(-90deg); }
@media (max-width: 767px) {
  .dn-lightbox__figure { max-width: calc(100% - 32px); }
  .dn-lightbox__img { max-height: calc(100dvh - 190px); }
  .dn-lightbox__btn { width: 44px; height: 44px; }
  .dn-lightbox__btn--close { top: 12px; right: 12px; }
  .dn-lightbox__btn--prev, .dn-lightbox__btn--next { top: auto; bottom: 20px; margin-top: 0; }
  .dn-lightbox__btn--prev { left: calc(50% - 56px); }
  .dn-lightbox__btn--next { right: calc(50% - 56px); }
}