/* ============================================================
   BYDOP — Gallery Reel (B0)
   Standalone styles. Drop into any page after kit.css/mobile.css.
   Uses BYDOP variables (--bydop-orange, --font-display, etc.)
   with safe fallbacks.
   ============================================================ */

.bydop-reel {
  width: 100%;
  background: #FFFCF7;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--light-fg-1, #2B1E16);
  padding: 48px 22px;
  position: relative;
  overflow: hidden;
}
.bydop-reel--dark { background: #0F0A06; color: #fff; }

/* Decorative aurora glow at section seam */
.bydop-reel::before {
  content: "";
  position: absolute; top: -160px; right: -120px;
  width: 320px; height: 320px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle at center, rgba(255,122,0,.14), transparent 65%);
  filter: blur(8px);
}
.bydop-reel--dark::before {
  background: radial-gradient(circle at center, rgba(255,122,0,.24), transparent 65%);
}
.bydop-reel > * { position: relative; z-index: 1; }

/* Eyebrow pill (REALIZÁCIE · REEL) */
.bydop-reel__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,122,0,.18), rgba(232,91,0,.08));
  box-shadow:
    inset 0 0 0 1px rgba(255,122,0,.32),
    0 4px 16px -6px rgba(255,122,0,.32);
  color: #E85B00;
  font: 600 10px/1 var(--font-ui, "DM Sans", "DM Sans nahrada", sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bydop-reel__eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #FFB347, #FF7A00);
  box-shadow: 0 0 8px rgba(255,122,0,.7);
  animation: bydop-reel-pulse 2.4s ease-in-out infinite;
}
@keyframes bydop-reel-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .7; }
}

/* H2 with italic accent */
.bydop-reel__h2 {
  font: 500 26px/1.15 var(--font-display, "Bricolage Grotesque", "Bricolage nahrada", sans-serif);
  font-variation-settings: "opsz" 96;
  letter-spacing: -.5px;
  color: var(--light-fg-1, #2B1E16);
  margin: 0 0 8px;
}
.bydop-reel--dark .bydop-reel__h2 { color: #fff; }
.bydop-reel__h2 em {
  font-family: "Instrument Serif", "Instrument nahrada", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #FFB347 0%, #FF7A00 50%, #C24800 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bydop-reel--dark .bydop-reel__h2 em {
  background: linear-gradient(135deg, #FFD08A 0%, #FF9540 50%, #FF7A00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bydop-reel__lead {
  font: 400 14px/1.6 var(--font-body, system-ui, sans-serif);
  color: rgba(40,28,20,.7);
  margin: 0 0 22px;
  max-width: 38ch;
}
.bydop-reel--dark .bydop-reel__lead { color: rgba(229,213,197,.72); }

/* Marquee rows */
.bydop-reel__rows {
  margin: 0 -22px;   /* bleed past frame padding */
  padding: 4px 0;
  position: relative;
}
.bydop-reel__rows::before,
.bydop-reel__rows::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 5;
}
.bydop-reel__rows::before {
  left: 0;
  background: linear-gradient(90deg, #FFFCF7 0%, rgba(255,252,247,0) 100%);
}
.bydop-reel__rows::after {
  right: 0;
  background: linear-gradient(-90deg, #FFFCF7 0%, rgba(255,252,247,0) 100%);
}
.bydop-reel--dark .bydop-reel__rows::before {
  background: linear-gradient(90deg, #0F0A06 0%, rgba(15,10,6,0) 100%);
}
.bydop-reel--dark .bydop-reel__rows::after {
  background: linear-gradient(-90deg, #0F0A06 0%, rgba(15,10,6,0) 100%);
}

.bydop-reel__row {
  display: flex; gap: 10px;
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
}
.bydop-reel__track {
  display: flex; gap: 10px;
  flex-shrink: 0;
  animation: bydop-reel-left 320s linear infinite; /* posun horného radu — vyššie číslo = pomalšie (pôvodne 32s, teraz 10 % rýchlosti) */
  will-change: transform;
}
.bydop-reel__row--right .bydop-reel__track {
  animation-name: bydop-reel-right;
  animation-duration: 380s; /* posun dolného radu — vyššie číslo = pomalšie (pôvodne 38s, teraz 10 % rýchlosti) */
}
.bydop-reel__row:hover .bydop-reel__track {
  animation-play-state: paused;
}
/* Pas stoji, kym sa navstevnik prvy raz nepohne (30.8.2026): pas je pod ohybom
   obrazovky, takze stojaci ho nikto nevidi - ale prehliadac vdaka tomu nedotahuje
   fotky pasu donekonecna (branilo to meraniu rychlosti a mrhalo datami). Triedu
   je-v-pohybe prida bydop-gallery-reel-webp.js pri prvom scrolle/dotyku/mysi. */
html:not(.je-v-pohybe) .bydop-reel__track {
  animation-play-state: paused;
}

@keyframes bydop-reel-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bydop-reel-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Individual tile */
.bydop-reel__tile {
  position: relative;
  flex-shrink: 0;
  width: 190px; height: 312px; /* výška +30 % (pôvodne 240px) */
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(40,28,20,.25);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s;
}
.bydop-reel__row--right .bydop-reel__tile {
  width: 220px; height: 312px; /* výška +30 % (pôvodne 240px) */
}
.bydop-reel__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .4s;
}
.bydop-reel__tile::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
}
.bydop-reel__tile::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(255,122,0,0) 0%, rgba(255,122,0,.5) 100%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .4s;
}
.bydop-reel__tile:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 22px 40px -12px rgba(255,122,0,.45);
  z-index: 4;
}
.bydop-reel__tile:hover .bydop-reel__img {
  transform: scale(1.12);
  filter: saturate(1.15) contrast(1.05);
}
.bydop-reel__tile:hover::after {
  opacity: 1;
}

/* Caption inside tile */
.bydop-reel__cap {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  z-index: 3;
}
.bydop-reel__lbl {
  font: 600 12px/1.25 var(--font-display, "Bricolage Grotesque", "Bricolage nahrada", sans-serif);
  color: #fff;
  letter-spacing: -.2px;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.bydop-reel__loc {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 9px/1 var(--font-ui, "DM Sans", "DM Sans nahrada", sans-serif);
  color: #FFD08A;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
}
.bydop-reel__loc::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bydop-orange, #FF7A00);
  box-shadow: 0 0 6px rgba(255,122,0,.9);
}

/* Footer row (count + link) */
.bydop-reel__foot {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.bydop-reel__count {
  font: 500 11px/1 var(--font-ui, "DM Sans", "DM Sans nahrada", sans-serif);
  color: rgba(40,28,20,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bydop-reel--dark .bydop-reel__count { color: rgba(229,213,197,.55); }
.bydop-reel__count b { color: var(--light-fg-1, #2B1E16); font-weight: 700; }
.bydop-reel--dark .bydop-reel__count b { color: #fff; }

.bydop-reel__link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-display, "Bricolage Grotesque", "Bricolage nahrada", sans-serif);
  color: #FF7A00;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,122,0,.08);
  border: 1px solid rgba(255,122,0,.25);
  transition: background .25s, transform .25s;
}
.bydop-reel__link:hover {
  background: rgba(255,122,0,.16);
  transform: translateX(2px);
}
.bydop-reel__link svg {
  width: 12px; height: 12px;
  transition: transform .3s;
}
.bydop-reel__link:hover svg { transform: translateX(2px); }

/* ============================================================
   Lightbox
   ============================================================ */
.bydop-reel-lb {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(8,5,3,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.bydop-reel-lb.is-open { opacity: 1; pointer-events: auto; }
.bydop-reel-lb__inner {
  position: relative;
  max-width: 100%; max-height: 100%;
  width: min(620px, 96vw);
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow:
    0 30px 80px -20px rgba(255,122,0,.4),
    0 0 0 1px rgba(255,255,255,.08);
  transform: scale(.96);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.bydop-reel-lb.is-open .bydop-reel-lb__inner { transform: scale(1); }
.bydop-reel-lb__inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
}
.bydop-reel-lb__cap {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  z-index: 2; color: #fff;
}
.bydop-reel-lb__title {
  font: 600 18px/1.2 var(--font-display, "Bricolage Grotesque", "Bricolage nahrada", sans-serif);
  margin: 0 0 4px;
}
.bydop-reel-lb__loc {
  font: 400 13px/1.4 var(--font-body, system-ui, sans-serif);
  color: rgba(255,255,255,.78);
}
.bydop-reel-lb__close,
.bydop-reel-lb__nav {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s, transform .25s;
}
.bydop-reel-lb__close {
  top: 12px; right: 12px;
  width: 36px; height: 36px;
}
.bydop-reel-lb__close:hover { background: rgba(255,122,0,.3); transform: rotate(90deg); }
.bydop-reel-lb__close svg { width: 16px; height: 16px; }
.bydop-reel-lb__nav {
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
}
.bydop-reel-lb__nav--prev { left: 12px; }
.bydop-reel-lb__nav--next { right: 12px; }
.bydop-reel-lb__nav:hover { background: rgba(255,122,0,.3); }
.bydop-reel-lb__nav svg { width: 16px; height: 16px; }

/* ============================================================
   BYDOP Gallery Reel — doplnok pre integráciu do webu BYDOP
   (1) mapovanie fontových premenných na fonty webu
   (2) varianta --home: sekcia na celú šírku, obsah vycentrovaný
   (3) varianta --page: mriežka galérie pre stránku /galeria/
   ============================================================ */

:root{
  --font-body: "DM Sans", "DM Sans nahrada", system-ui, sans-serif;
  --font-ui: "DM Sans", "DM Sans nahrada", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Bricolage nahrada", "DM Sans", "DM Sans nahrada", system-ui, sans-serif;
}

/* —— Varianta --home: sekcia na celú šírku, obsah vycentrovaný —— */
.bydop-reel--home{ padding: clamp(58px,8vw,104px) 0; }
.bydop-reel--home::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(199,132,79,.4) 50%, transparent);
  z-index:2;
  pointer-events:none;
}
.bydop-reel--home .bydop-reel__wrap{
  max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
}
.bydop-reel--home .bydop-reel__rows{ margin: 0; }
.bydop-reel--home .bydop-reel__h2{
  max-width:680px;
  font-family:var(--font-display, "Bricolage Grotesque", sans-serif);
  font-weight:500;
  font-size:clamp(36px,4.6vw,68px);
  font-variation-settings:normal;
  line-height:1;
  letter-spacing:-.025em;
  color:#1A1108;
  margin:0 0 18px;
  text-wrap:balance;
}
.bydop-reel--home .bydop-reel__h2 em{
  font-family:"Instrument Serif", Georgia, serif;
  font-style:italic;
  font-weight:400;
  color:#8A5133;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
.bydop-reel--home .bydop-reel__lead{ font-size: 15px; max-width: 58ch; }

/* dlaždice väčšie na desktope, nech reel nepôsobí drobne */
@media (min-width:1024px){
  .bydop-reel--home .bydop-reel__tile{ width: 248px; height: 403px; } /* výška +30 % (pôvodne 310px) */
  .bydop-reel--home .bydop-reel__row--right .bydop-reel__tile{ width: 290px; height: 403px; } /* výška +30 % (pôvodne 310px) */
  .bydop-reel--home .bydop-reel__lbl{ font-size: 14px; }
  .bydop-reel--home .bydop-reel__loc{ font-size: 10px; }
}

/* tlačidlo/dlaždica je klikateľná — kurzor + fokus */
.bydop-reel__tile{ cursor: pointer; }
.bydop-reel__tile:focus-visible{
  outline: 2px solid #FF7A00; outline-offset: 3px;
}

/* ============================================================
   Varianta --page: statická mriežka pre stránku /galeria/
   (rovnaký vzhľad dlaždíc, bez marquee animácie)
   ============================================================ */
.bydop-reel--page{ background: transparent; padding: 0; overflow: visible; }
.bydop-reel--page::before{ display: none; }

.bydop-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.bydop-grid .bydop-reel__tile{
  width: 100%; height: 300px;
}
@media (max-width: 600px){
  .bydop-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bydop-grid .bydop-reel__tile{ height: 210px; }
}

/* filter taby */
.bydop-gfilter{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 26px;
}
.bydop-gfilter__btn{
  font: 600 12px/1 var(--font-ui,"DM Sans","DM Sans nahrada",sans-serif);
  letter-spacing: .04em;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(249,115,22,.28);
  background: rgba(249,115,22,.06);
  color: #C2410C;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.bydop-gfilter__btn:hover{ background: rgba(249,115,22,.14); }
.bydop-gfilter__btn.is-active{
  background: linear-gradient(135deg,#FF7A00,#EA580C);
  border-color: transparent;
  color: #fff;
}
.bydop-grid .bydop-reel__tile.is-hidden{ display: none; }