/*
 * Súbor: css/pages/havarie/reference-proof.css
 * Obsah: Dvojradový pohyblivý pás dodaných realizácií, úvod a mobilné rozloženie.
 * Použitie: sluzba-havarie.html, #referencie-firmy.
 * Zapojenie: <link rel="stylesheet" href="css/pages/havarie/reference-proof.css"> za components/reference-logos.css.
 * Závislosti: components/shared-sections.css (karty a galéria), js/components/references-gallery.js (posúvanie a galéria), paleta havárií.
 */
#referencie-firmy .references-heading h2 {
  margin-bottom: 16px;
}

#referencie-firmy .references-heading__promise {
  margin-top: 16px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
}

#referencie-firmy .reference-marquee {
  overflow: hidden;
  width: 100%;
  padding-block: 4px;
}

#referencie-firmy .reference-track {
  display: flex;
  width: max-content;
  animation: emergency-reference-belt var(--belt-duration, 200s) linear infinite;
}

#referencie-firmy .reference-sequence {
  display: grid;
  grid-auto-columns: 240px;
  grid-template-rows: repeat(2, 190px);
  grid-auto-flow: column dense;
  gap: 12px;
  padding-right: 12px;
  flex: 0 0 auto;
}

#referencie-firmy .reference-project {
  grid-area: auto;
  aspect-ratio: auto;
}

#referencie-firmy .reference-project:nth-child(5n + 1) {
  grid-row: span 2;
}

#referencie-firmy .reference-project__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#referencie-firmy .reference-track:focus-within {
  animation-play-state: paused;
}

@keyframes emergency-reference-belt {
  to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  #referencie-firmy .reference-sequence {
    grid-auto-columns: 180px;
    grid-template-rows: repeat(2, 150px);
    gap: 8px;
    padding-right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #referencie-firmy .reference-marquee { overflow-x: auto; }
  #referencie-firmy .reference-track { animation: none; }
  #referencie-firmy .reference-sequence[aria-hidden="true"] { display: none; }
}