/* hol-mosaic.css — past-sale snapshots: a drifting strip of polaroids (5 or more) or a photo mosaic. */

/* The strip: two identical tracks slide left; when the first has gone by, the second is in place. */
.snaps-strip { overflow: hidden; }
.strip { display: flex; width: max-content; padding: 26px 0 18px; }
.strip-track { display: flex; gap: clamp(18px, 2.6vw, 34px); padding-right: clamp(18px, 2.6vw, 34px); animation: strip-drift 75s linear infinite; }
.strip:hover .strip-track, .strip:focus-within .strip-track, .strip.is-off .strip-track { animation-play-state: paused; }
@keyframes strip-drift { to { transform: translateX(-100%); } }
.pola {
  flex: none; width: clamp(200px, 22vw, 300px); padding: 10px 10px 40px;
  background: #fff; border-radius: 3px; box-shadow: 0 14px 30px rgba(28, 50, 39, .16);
  transform: rotate(-1.6deg);
}
.strip-track .pola:nth-child(even) { transform: rotate(1.8deg) translateY(10px); }
.strip-track .pola:nth-child(3n) { transform: rotate(-.6deg) translateY(4px); }
.pola img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pola figcaption { margin: 10px 2px 0; text-align: center; font: 500 20px/1.1 var(--hand); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The mosaic (fewer than five photos) */
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.mosaic-item { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--kraft); box-shadow: var(--shadow); }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  font: 600 13.5px/1.3 var(--sans); letter-spacing: .02em; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55));
}
.mosaic-n-1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.mosaic-n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
.mosaic-n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .pola { width: 62vw; max-width: 280px; padding: 8px 8px 32px; }
  .pola figcaption { font-size: 18px; }
  .strip-track { animation-duration: 60s; }
  .mosaic, .mosaic-n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mosaic-item { border-radius: 12px; }
  .mosaic-item figcaption { font-size: 12.5px; padding: 22px 10px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .snaps-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .strip-track { animation: none; }
  .strip-track[aria-hidden] { display: none; }
}