/* Phone/tablet photo strip (Drue 111126).
   Under 980px the right-hand .gallery column is hidden (styles.css), so the same
   photos drift slowly to the right in a strip under the brand, above the nav tabs.
   At 980px and wider this strip is hidden and the desktop layout is unchanged.
   Used by index.html and videos.html. */

.gallery-strip { display: none; }

@media (max-width: 979.98px) {
  .gallery-strip {
    display: block;
    margin: 14px 0 0;
    overflow: hidden;
  }
  .gallery-strip-track {
    display: flex;
    width: max-content;
    animation: gallery-strip-right 140s linear infinite;
    will-change: transform;
  }
  /* margin (not gap) so both halves are exactly equal and the -50% loop is seamless */
  .gallery-strip-track img {
    display: block;
    flex: 0 0 auto;
    height: 96px;
    width: auto;
    margin-right: 6px;
    border-radius: 4px;
  }
}

@media (max-width: 979.98px) and (min-width: 600px) {
  .gallery-strip-track img { height: 120px; }
}

@keyframes gallery-strip-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Reduced motion: no drift; swipe the strip by hand, without the duplicate set. */
@media (max-width: 979.98px) and (prefers-reduced-motion: reduce) {
  .gallery-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .gallery-strip-track { animation: none; will-change: auto; }
  .gallery-strip-track img { scroll-snap-align: start; }
  .gallery-strip-track img.dup { display: none; }
}

/* Back-to-home links on videos.html */
.back-link { margin: 0 0 14px; }
.back-link a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); }
.back-link a:hover { color: #fff; }
.back-link--bottom { margin: 22px 0 0; }

/* Phone: strip sits above the nav tabs (it is inside the header, before nav).
   Desktop is unchanged because the strip stays display:none from 980px up. */
#tabs { scroll-margin-top: 0; }

@media (max-width: 979.98px) {
  /* Keep the drifting track clipped to the strip, not the header box. */
  .site-header { overflow-x: hidden; }
}