/*
 * strips.css — Strisce di pannelli in marquee (home 236:447/454, work 236:1167, studio 236:2095).
 * Spec: 01-home.md §6, 03-studio.md §4. Pannelli 324x182 radius 10 gap 13 (grande: 600x338 radius 18
 * gap 24). La striscia arriva ai bordi della finestra. Animazione CSS lineare infinita; la pista e'
 * duplicata da marquee.js finche' copre due volte la finestra. prefers-reduced-motion: ferma.
 * Durata: --marquee-duration inline da strip.php, default 40s come la fascia loghi della home.
 */
.strips { display: grid; gap: 14px; }
.site-main > .strips--single { padding-block: var(--section-gap); background: var(--color-paper); }
.strip { width: 100%; overflow: hidden; }
.strip__track { display: flex; align-items: center; gap: 13px; width: max-content; animation: sb-strip var(--marquee-duration) linear infinite; }
.strip--right .strip__track { animation-direction: reverse; }
.strip__panel { flex: none; width: clamp(220px, 22.5vw, 324px); aspect-ratio: 324 / 182; border-radius: var(--radius); overflow: hidden; background: var(--color-card); }
.strip__panel:last-child { margin-right: 13px; }
.strip__img { width: 100%; height: 100%; object-fit: cover; }
.strip--strip-large .strip__track { gap: var(--space-md); }
.strip--strip-large .strip__panel { width: clamp(280px, 41.6vw, 600px); aspect-ratio: 600 / 338; border-radius: 18px; }
.strip--strip-large .strip__panel:last-child { margin-right: var(--space-md); }
@keyframes sb-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}