/* ============================================================
   NOSSOS PRATOS — fita horizontal de fotos.
   Cards do MESMO tamanho, lado a lado, sangrando para fora da
   moldura nas duas pontas. Sem profundidade e sem escala: a
   leitura é de filme fotográfico, não de baralho.
   Máscara: quadro-v.svg (retrato), a forma do designer.
   ============================================================ */
.fita-wrap { position: relative; }

/* A fita anda sozinha, em laço contínuo. As fotos são duplicadas no
   JS para a emenda ser invisível: quando a primeira cópia termina,
   a segunda já está exatamente no mesmo ponto.
   Pausa no hover e no foco, e para de vez com prefers-reduced-motion. */
.fita-wrap {
  position: relative;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.fita {
  display: flex;
  gap: var(--sp-sm);
  list-style: none; margin: 0; padding: 0;
  width: max-content;
  animation: fita-anda var(--fita-dur, 60s) linear infinite;
}
.fita-wrap:hover .fita,
.fita-wrap:focus-within .fita { animation-play-state: paused; }

@keyframes fita-anda {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--fita-volta, 0px) * -1)); }
}

.fita__item {
  flex: none;
  width: clamp(200px, 24vw, 280px);
  aspect-ratio: 315 / 367;          /* retrato, como quadro-v.svg */
  clip-path: var(--shape-card);
  overflow: hidden;
  background: var(--c-areia);
}
.fita__item picture,
.fita__item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}


.pratos__rodape { text-align: center; margin-top: clamp(32px, 4vw, 56px); }

.vazio {
  text-align: center; padding: var(--sp-4xl) var(--sp-lg);
  background: var(--c-areia); border-radius: var(--radius-md);
  border: 2px dashed #CBB795;
}
.vazio p { margin-bottom: var(--sp-lg); color: var(--c-texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .fita { animation: none; }
  .fita-wrap { overflow-x: auto; }
}