/* =============================================
   GALLERY - 3-row infinite horizontal scroll
   Pinterest-style: portrait + landscape mixed
   Aspect ratios preserved, 4px gap
============================================= */
.gallery-section {
  /* Reduced top padding to tighten gap after Timeline */
  padding: clamp(32px, 4vw, 48px) 0 var(--section-pad-v);
  background: var(--bg-light);
}

.gallery-section .container {
  padding: 0 var(--section-pad-h);
  margin-bottom: clamp(28px, 3vw, 40px);
}

/* ── Strip wrapper - full width, edge fade ── */
.gallery-strip-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  height: 82vh;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
}

/* ── Each row - fills 1/3 of the wrapper ── */
.gs-row {
  display: flex;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* ── Inner track - doubled for seamless loop ── */
.gs-row-inner {
  display: flex;
  gap: 4px;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.gs-row-inner--fwd { animation: rowFwd 40s linear infinite; }
.gs-row-inner--rev { animation: rowRev 36s linear infinite; }

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

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

/* ── Pause all rows on any hover ── */
.gallery-strip-wrapper:hover .gs-row-inner {
  animation-play-state: paused;
}

/* ── Individual photo ── */
.gs-item {
  height: 100%;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-pale) 0%, var(--blue-soft) 100%);
}

.gs-item img {
  height: 100%;
  width: auto;
  min-width: 60px;
  object-fit: cover;
  display: block;
  transition: transform 0.65s var(--ease);
}

.gs-item:hover img {
  transform: scale(1.06);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gs-row-inner {
    animation: none;
  }
  .gs-row {
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* ── Mobile scroll hint dots ── */
.gallery-scroll-hint { display: none; }

@media (max-width: 1024px) {
  .gallery-scroll-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
  }
  .gallery-scroll-hint span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(93, 127, 219, 0.25);
    transition: background 0.3s ease;
  }
  .gallery-scroll-hint span.active {
    width: 18px;
    border-radius: 3px;
    background: var(--blue-vivid);
  }
}