/* ==========================================================================
   Photo strips — full-bleed, two-row zigzag, infinite leftward flow.
   Motion is driven by scrollLeft in strips.js (no CSS transform on the wide
   track: Safari drops tiles of huge composited layers under GPU load).
   Tile width: 241px at 1728 (scales), 3 visible on tablet, 2 on mobile.
   ========================================================================== */
.strips { padding-bottom: 250px; }

.strip-group + .strip-group { margin-top: 120px; }   /* the label's 24px top margin collapses into this */
.strip-group .label { margin-top: 24px; text-align: center; } /* same rule→label distance as Video Gallery */

.strip {
  --tile-w: calc(241 * var(--s));
  --tile-h: calc(var(--tile-w) / var(--ratio, 0.817));
  position: relative;
  width: 100%;
  height: calc(var(--tile-h) * 2);
  margin-top: 40px;
  overflow: hidden;
}
.strip__track {
  display: flex;
  width: max-content;
  height: 100%;
}
.strip__cell {
  position: relative;
  flex: 0 0 auto;
  width: var(--tile-w);
  height: 100%;
}
.strip__cell button {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--tile-h);
  display: block;
  overflow: hidden;
}
.strip__cell:nth-child(even) button { top: var(--tile-h); }
.strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  .strip__cell button:hover img { transform: scale(1.03); }
}

@media (max-width: 1024px) {
  .strip { --tile-w: calc(100vw / 3); }
  .strips { padding-bottom: 205px; }
}
@media (max-width: 767px) {
  .strip { --tile-w: 50vw; }
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal.is-open { display: flex; }
.modal__backdrop {
  position: absolute;
  inset: 0;
}

/* Video modal — 60% black backdrop, 9:16 player sized to the viewport */
.modal--video .modal__backdrop { background: rgba(0, 0, 0, 0.6); }
.modal__player {
  position: relative;
  height: min(90svh, calc(90vw * 16 / 9));
  aspect-ratio: var(--ratio, 9 / 16);
  max-width: 100vw;
  background: #000;
}
.modal__player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.modal__close {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  z-index: 2;
}
.modal__close img { width: 100%; height: 100%; }

/* Lightbox — white full screen */
.modal--photo .modal__backdrop { background: var(--c-white); }
.lightbox__img {
  position: relative;
  max-width: calc(100vw - 260px);
  max-height: 80svh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 59px;
  opacity: 0.9;
  transition: opacity 0.2s var(--ease);
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 100px; }
.lightbox__nav--next { right: 100px; }
.lightbox__nav img { width: 100%; height: 100%; }
.lightbox__close {
  position: absolute;
  right: 60px;
  top: 48px;
  width: 30px;
  height: 30px;
}
.lightbox__close img { width: 100%; height: 100%; }

@media (max-width: 1024px) {
  .modal--video .modal__player {
    height: 100svh;
    max-height: 100svh;
  }
  .modal--video .modal__backdrop { background: #000; }

  .lightbox__img {
    width: 100vw;                 /* edge to edge, no sub-pixel gap */
    max-width: none;
    height: auto;
    max-height: calc(100svh - 200px);
    object-fit: cover;
  }
  .lightbox__nav {
    top: auto;
    bottom: 46px;
    transform: none;
    width: 20px;
    height: 37px;
  }
  .lightbox__nav--prev { left: calc(50% - 85.5px); }
  .lightbox__nav--next { right: calc(50% - 85.5px); }
  .lightbox__close { right: var(--gutter); top: var(--header-top); }
}