/* Galerie gril-centrum.cz — tři řady fotek jedou dokola.

   Roman 15. 9. 2026: „pro média změň na galerie a udělej stránku, kde budou
   běhat fotky." Každá řada má fotky dvakrát za sebou a posouvá se přesně
   o polovinu své šířky, takže smyčka navazuje bez skoku. Prostřední řada
   jede opačně, po najetí myší se řada zastaví. Vlastní soubor, patička
   a hlavička se berou ze zbozi-weber.css a paticka-grilcentrum.css. */

.galerie {
  padding: 0 0 clamp(48px, 7vw, 96px);
  background: #0c0c0d;
  color: #fff;
  overflow: hidden;
}

.galerie-hlava {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 3.5vw, 44px);
}

.galerie-drobek {
  margin: 0 0 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}
.galerie-drobek a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.galerie-drobek a:hover { color: #fff; text-decoration: underline; }

.galerie h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.galerie-perex {
  max-width: 60ch;
  margin: 16px 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.galerie-plocha {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
}

.galerie-rada {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.galerie-pas {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  width: max-content;
  animation: galerie-doleva 70s linear infinite;
}
.galerie-doprava .galerie-pas { animation-name: galerie-doprava; animation-duration: 80s; }
.galerie-pomalu .galerie-pas { animation-duration: 95s; }
.galerie-rada:hover .galerie-pas { animation-play-state: paused; }

.galerie-pas img {
  display: block;
  flex: none;
  height: clamp(170px, 20vw, 300px);
  width: auto;
  border-radius: 6px;
  object-fit: cover;
  transition: transform .4s ease, filter .4s ease;
}
.galerie-pas img:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* Posun o polovinu pásu (+ polovinu mezery), tedy o jednu sadu fotek. */
@keyframes galerie-doleva {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - clamp(5px, .6vw, 8px))); }
}
@keyframes galerie-doprava {
  from { transform: translateX(calc(-50% - clamp(5px, .6vw, 8px))); }
  to { transform: translateX(0); }
}

.galerie-vyzva {
  margin: clamp(32px, 5vw, 56px) 0 0;
  text-align: center;
}
.galerie-cudlik {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 999px;
  background: #e30613;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease;
}
.galerie-cudlik:hover { background: #ff1a28; }

/* Kdo má vypnuté animace, dostane fotky jako posuvnou řadu. */
@media (prefers-reduced-motion: reduce) {
  .galerie-pas { animation: none; }
  .galerie-rada { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .galerie-pas img[aria-hidden="true"] { display: none; }
}

@media (max-width: 700px) {
  .galerie-hlava { width: calc(100% - 32px); }
  .galerie-pas { animation-duration: 45s; }
  .galerie-doprava .galerie-pas { animation-duration: 52s; }
  .galerie-pomalu .galerie-pas { animation-duration: 60s; }
}

/* ---- Stopa fotek za kurzorem (galerie-stopa.js) ----------------------
   Roman 15. 9. 2026, efekt „Mouse Image Trail" z hover.dev. Fotky leží
   neviditelné v ploše a skript je podle pohybu myši ukazuje. */
.galerie-stopa {
  position: relative;
  display: grid;
  place-content: center;
  height: clamp(420px, 70vh, 720px);
  margin: 0 0 clamp(28px, 4vw, 48px);
  overflow: hidden;
  background: #fff;
  color: #111;
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
}
.galerie-stopa-vyzva {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  pointer-events: none;
}
.galerie-stopa-vyzva svg { width: 1em; height: 1em; flex: none; }
.galerie-stopa-foto {
  position: absolute;
  left: 0;
  top: 0;
  height: clamp(130px, 14vw, 192px);
  width: auto;
  border: 2px solid #000;
  border-radius: 12px;
  background: #171717;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .galerie-stopa { display: none; }
}