/* ===========================================================================
   Farma Jerusalem — globální styly
   Přeneseno 1:1 z předaného návrhu (Claude Design). Barvy/fonty/layout
   nezměněny. Přidány jen: responzivní breakpointy, styly pro <video> a
   drobná oprava hera (top padding pod fixní hlavičkou).
   =========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F3ECDF; }
::selection { background: #B5572E; color: #F3ECDF; }
input, select, textarea, button { font-family: inherit; }

@keyframes fj-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes fj-reveal {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Obsah je viditelný defaultně; scroll-driven fade-in jen tam, kde je podpora.
   Nikdy nezakrývá viditelnost. */
[data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: fj-reveal .9s cubic-bezier(.2,.6,.2,1) both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
  }
}

/* ===========================================================================
   VIDEO komponenta — nahrazuje placeholdery z návrhu.
   Vyplní rodičovský box přesně jako původní placeholder (1:1 layout).
   =========================================================================== */
.fj-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.fj-video > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #16222f;
}

/* tlačítko pro zapnutí/vypnutí zvuku (titulky jsou vypálené v obraze) */
.fj-sound {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  padding: 7px 11px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #F3ECDF;
  background: rgba(28,42,58,0.62);
  border: 1px solid rgba(201,162,75,0.55);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
.fj-sound:hover { background: rgba(28,42,58,0.82); border-color: #C9A24B; }
.fj-sound svg { display: block; width: 15px; height: 15px; fill: #C9A24B; }
.fj-sound__label { line-height: 1; }

/* dokud se video nenačte (lazy-load), drží placeholder gradient pozadí */
.fj-video[data-loaded="false"] > video { background: linear-gradient(160deg,#22344a,#16222f); }

/* hero video na pozadí — vyplní celou sekci, fallback barva pod posterem */
.fj-hero-video { background: #16222f; }

/* Dvě hero videa: desktop (na šířku) defaultně, mobilní (na výšku 9:16) skryté.
   Přepnutí v mobilním breakpointu níže (max-width:860px). */
.fj-hero-video--mobile { display: none; }

/* karty „Život na farmě" — jemné přiblížení fotky při najetí */
.fj-farm-card > img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
@media (hover: hover) {
  .fj-farm-card:hover > img { transform: scale(1.05); }
}

/* galerie apartmánu — na PC grid 3 sloupce, na mobilu vodorovný swipe carousel */
.fj-apartman-rail {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.fj-apartman-card {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 24px 50px -28px rgba(28, 42, 58, 0.5);
}
.fj-apartman-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
@media (hover: hover) {
  .fj-apartman-card:hover > img { transform: scale(1.05); }
}

/* tečky carouselu (skryté na PC, zobrazí se v mobilním breakpointu) */
.fj-apartman-dots { display: none; }

/* ===========================================================================
   KROKY „Jak probíhá pobyt" — zvýraznění aktivního kroku
   =========================================================================== */
.fj-step {
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.fj-step__num {
  transition: color .45s ease, transform .45s cubic-bezier(.2,.6,.2,1);
  transform-origin: left center;
}
.fj-step.is-active {
  transform: translateY(-6px);
  border-top-color: #B5572E !important;
}
.fj-step.is-active .fj-step__num {
  color: #B5572E !important;
  transform: scale(1.14);
}
/* na PC reaguje i na najetí myší */
@media (hover: hover) {
  .fj-step:hover { transform: translateY(-6px); }
  .fj-step:hover { border-top-color: #B5572E !important; }
  .fj-step:hover .fj-step__num { color: #B5572E !important; transform: scale(1.14); }
}

/* ===========================================================================
   RESPONZIVITA — pouze mobil/tablet. Desktop layout z návrhu se nemění.
   Přepisujeme inline grid-template-columns přes utility třídy s !important.
   =========================================================================== */
@media (max-width: 860px) {
  /* hero video: na mobilu prohodíme za verzi na výšku (9:16) */
  .fj-hero-video--desktop { display: none; }
  .fj-hero-video--mobile  { display: block; }

  /* obecné: dvou/tří-sloupcové mřížky → jeden sloupec */
  .fj-stack       { grid-template-columns: 1fr !important; }
  .fj-stack-3     { grid-template-columns: 1fr !important; }

  /* sekce „Život na farmě" — 4 svislé fotky → 2 sloupce na tabletu/mobilu */
  .fj-farm-grid   { grid-template-columns: 1fr 1fr !important; }

  /* karta s video sloupcem (Susanna u koně) → video pod text, plný portrét 9:16 */
  .fj-card-video  { grid-template-columns: 1fr !important; }
  .fj-card-video .fj-card-video__media {
    aspect-ratio: 9 / 16;
    max-height: 78vh;
    border-left: none !important;
    border-top: 1px solid rgba(201,162,75,0.3);
  }

  /* karta biorezonance: úzký obrázek + text */
  .fj-card-list   { grid-template-columns: 1fr !important; }
  .fj-card-list__img { min-height: 200px; }

  /* Susanna Marie sekce: video 360px + text */
  .fj-susanna-grid { grid-template-columns: 1fr !important; justify-items: center; }

  /* formulář: dvojsloupec → jeden sloupec */
  .fj-form-grid   { grid-template-columns: 1fr !important; }

  /* galerie apartmánu: grid → vodorovný swipe carousel */
  .fj-apartman-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 8px;
    scroll-padding-inline: clamp(24px, 6vw, 80px);
    scrollbar-width: none;
  }
  .fj-apartman-rail::-webkit-scrollbar { display: none; }
  .fj-apartman-card {
    flex: 0 0 76%;
    scroll-snap-align: center;
  }

  /* tečky pod carouselem */
  .fj-apartman-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 0 clamp(24px, 6vw, 80px);
  }
  .fj-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(28, 42, 58, 0.22);
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
  }
  .fj-dot.is-active {
    width: 22px;
    background: #B5572E;
  }
}