/* Preview walls (homepage: caption styles, Title Pack): rows of preview tiles sliding
   sideways, the way template stores show a pack. Each row holds its tiles twice (the
   second set in .pwall-copy, hidden from assistive tech) and slides half its width per
   loop, so the motion never jumps; .reverse rows slide the other way. Hovering a row
   pauses it; with reduced motion nothing slides. The wall is full-bleed, faded at both
   edges. Sections style their own tiles. */

.pwall { display: grid; gap: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.pwall-row { overflow: hidden; }
.pwall-track { display: flex; gap: 14px; width: max-content; animation: pwall-slide var(--speed, 64s) linear infinite; }
.pwall-row.reverse .pwall-track { animation-direction: reverse; }
.pwall-row:hover .pwall-track, .pwall-row:focus-within .pwall-track { animation-play-state: paused; }
.pwall-copy { display: contents; }
@keyframes pwall-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }

.pwall-tile { width: clamp(210px, 21vw, 300px); aspect-ratio: 16 / 9; margin: 0; flex: none; border-radius: 12px; overflow: hidden; }

@media (max-width: 600px) {
  .pwall, .pwall-track { gap: 10px; }
  .pwall-tile { width: 62vw; border-radius: 10px; }
  @keyframes pwall-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .pwall-track { animation: none; }
}