/* ===================================================================
   Mlyn a pekáreň ŠKOLUDA — úvodné video riadené scrollom
   Patrí k js/hero-video.js. Ostatné štýly webu ostávajú nedotknuté
   v style.css, tento súbor sa len pridáva navrch.
   =================================================================== */

.vhero { position: relative; }

.vhero.is-ready {
  /* Táto výška je dráha, po ktorej je rozložených 291 snímok.
     Vyššia = video beží pomalšie a lepšie sa ovláda scrollom. */
  height: 800vh;
  background: #16100a;
}

/* Bez JavaScriptu video nemá ako bežať. Aby sa nadpis a tlačidlá nestratili,
   sekcia sa vtedy zobrazí ako obyčajný svetlý úvod bez videa. */
.vhero:not(.is-ready) { background: var(--cream); }
.vhero:not(.is-ready) .vhero-sticky {
  position: static;
  height: auto;
  background: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.1rem, 5vw, 2rem);
}
.vhero:not(.is-ready) .vhero-frame,
.vhero:not(.is-ready) .vhero-stages,
.vhero:not(.is-ready) .vhero-hint { display: none; }
.vhero:not(.is-ready) .vhero-overlay { position: static; padding: 0; }
.vhero:not(.is-ready) .vhero-eyebrow,
.vhero:not(.is-ready) .vhero-title span { color: var(--gold-dark); text-shadow: none; }
.vhero:not(.is-ready) .vhero-title { color: var(--ink); text-shadow: none; }
.vhero:not(.is-ready) .vhero-lead { color: var(--ink-soft); text-shadow: none; }
.vhero:not(.is-ready) .vhero-actions .btn-ghost {
  border-color: rgba(124, 79, 34, 0.35);
  color: var(--crust);
}

.vhero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #16100a;
}

/* Na širokej obrazovke vypĺňa video celú plochu (prebytok sa oreže). */
.vhero-frame {
  position: absolute;
  inset: 0;
}

.vhero-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.vhero-veil,
.vhero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Tmavé filmové závoje — udržia text čitateľný a pritom nezabijú obraz. */
.vhero-shade {
  background:
    linear-gradient(104deg, rgba(18, 11, 5, 0.68) 0%, rgba(18, 11, 5, 0.38) 34%, rgba(18, 11, 5, 0) 66%),
    linear-gradient(to top, rgba(18, 11, 5, 0.78) 0%, rgba(18, 11, 5, 0.3) 30%, rgba(18, 11, 5, 0) 58%),
    linear-gradient(to bottom, rgba(18, 11, 5, 0.55) 0%, rgba(18, 11, 5, 0) 20%);
}

.vhero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(1.25rem, 5vw, 4rem);
  pointer-events: none;
}

.vhero-intro {
  max-width: 780px;
  will-change: transform, opacity;
}

.vhero-eyebrow,
.vhero-stage-id {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e3b978;
  text-shadow: 0 1px 16px rgba(18, 11, 5, 0.85);
}
.vhero-eyebrow { margin-bottom: 1.2rem; }
.vhero-stage-id { margin-bottom: 0.55rem; }

.vhero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff8ec;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 40px rgba(18, 11, 5, 0.55);
}
.vhero-title span {
  color: #e3b978;
  font-style: italic;
}

.vhero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
  pointer-events: auto;   /* prekrytie kliky neprepúšťa, tlačidlá musia */
}
/* Nad tmavým videom by hnedé „duchové" tlačidlo nebolo vidieť. */
.vhero-actions .btn-ghost {
  border-color: rgba(255, 249, 240, 0.5);
  color: #fff8ec;
}
.vhero-actions .btn-ghost:hover {
  background: rgba(255, 249, 240, 0.14);
  color: #fff;
}

.vhero-lead {
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  color: #ede3d6;
  max-width: 430px;
  text-shadow: 0 1px 20px rgba(18, 11, 5, 0.7);
}

.vhero-stages {
  position: absolute;
  left: clamp(1.25rem, 5vw, 4rem);
  right: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(4.5rem, 11vh, 8rem);
  height: 6.5rem;
}

.vhero-stage {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 520px;
  will-change: transform, opacity;
}

.vhero-stage-text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  color: #fff8ec;
  text-shadow: 0 2px 26px rgba(18, 11, 5, 0.8);
}

.vhero-hint {
  position: absolute;
  right: clamp(1.25rem, 5vw, 4rem);
  bottom: 2.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d8cbbb;
  text-shadow: 0 1px 14px rgba(18, 11, 5, 0.85);
}

.vhero-hint-line {
  width: 54px;
  height: 1px;
  background: rgba(255, 249, 240, 0.32);
  position: relative;
  overflow: hidden;
}
.vhero-hint-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  animation: vhero-hint 2.6s cubic-bezier(0.25, 0, 0, 1) infinite;
}
@keyframes vhero-hint {
  0%        { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---------- mobil / zvislá obrazovka ----------

   Širokouhlé video (16:9) sa do zvislého displeja na celú plochu nezmestí —
   orezalo by ho to zhruba na štvrtinu šírky a z deja by nebolo vidieť skoro
   nič. Preto na mobile skladáme obsah pod seba: text hore, celý neorezaný
   záber v strede a popis etapy pod ním.                                     */

@media (max-width: 768px) {
  /* Na telefóne nechávame svetlé pozadie webu a bežné farby textu —
     text tu neleží na videu, takže tmavé plátno netreba. */
  .vhero.is-ready {
    height: 640vh;
    background: var(--cream);
  }

  .vhero-sticky {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* všetko hore pod hlavičku, žiadne diery */
    gap: clamp(0.7rem, 2.2vh, 1.15rem);
    /* Lepíme sa tesne pod hlavičku webu (jej výšku meria hero-video.js),
       nie pod vrch okna — inak by nad textom ostal prázdny pruh. */
    top: var(--vhero-top, 84px);
    /* Blok je vysoký presne toľko, koľko zaberá obsah — nie celú obrazovku.
       Vďaka tomu naskočí ďalšia sekcia hneď pod tlačidlá a nie až o obrazovku
       nižšie. */
    height: auto;
    /* Presne na výšku obrazovky — obsah ostane hore, tlačidlo
       „Preskočiť video“ sa odtlačí na spodnú hranu. */
    min-height: calc(100vh - var(--vhero-top, 84px));
    max-height: calc(100vh - var(--vhero-top, 84px));
    padding: 0.75rem 0 1.1rem;
    background: var(--cream);
  }

  .vhero-eyebrow,
  .vhero-stage-id,
  .vhero-title span { color: var(--gold-dark); text-shadow: none; }
  .vhero-title     { color: var(--ink);      text-shadow: none; }
  .vhero-lead      { color: var(--ink-soft); text-shadow: none; }
  .vhero-stage-text { color: var(--ink);     text-shadow: none; }

  /* Tlačidlá idú až pod meniaci sa popis, tam vypĺňajú spodok obrazovky. */
  .vhero-actions {
    order: 4;
    margin-top: 0.1rem;
    padding-inline: clamp(1.1rem, 5vw, 2rem);
  }
  .vhero-actions .btn-ghost {
    border-color: rgba(124, 79, 34, 0.35);
    color: var(--crust);
  }
  /* O kúsok drobnejšie, nech sa zmestia vedľa seba aj na 360 px displeji. */
  .vhero-actions .btn {
    padding: 0.78rem 1.35rem;
    font-size: 0.9rem;
  }

  /* Pás s videom v pomere strán zdroja — nič sa neoreže. Ide od kraja
     po kraj, nech je obraz na malom displeji čo najväčší. */
  .vhero-frame {
    position: relative;
    inset: auto;
    order: 2;
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(60, 38, 10, 0.18);
  }

  /* Odsadenie od okrajov si nesie text, nie video. */
  .vhero-intro {
    padding-inline: clamp(1.1rem, 5vw, 2rem);
  }

  /* Text už neleží na videu, tmavé závoje pod ním netreba. */
  .vhero-shade { display: none; }

  /* Deti prekrytia sa stanú priamymi položkami stĺpca. */
  .vhero-overlay {
    display: contents;
  }

  .vhero-intro {
    order: 1;
    max-width: none;
  }
  .vhero-title {
    font-size: clamp(1.7rem, 7.6vw, 2.7rem);
    margin-bottom: 0.8rem;
  }
  .vhero-eyebrow { margin-bottom: 0.8rem; }
  .vhero-lead { max-width: 36ch; }

  /* Popisky ležia na sebe v jednej mriežkovej bunke, takže box je presne taký
     vysoký ako najdlhší z nich — žiadne rezervované prázdno pred tlačidlami. */
  .vhero-stages {
    position: relative;
    order: 3;
    left: auto;
    right: auto;
    bottom: auto;
    height: auto;
    display: grid;
    flex: none;
  }
  /* Popisky sú v boxe naskladané na sebe (mení sa len priehľadnosť), takže
     odsadenie musí byť na nich — padding rodiča by absolútne umiestnené
     deti ignorovali. */
  .vhero-stage {
    position: static;
    grid-area: 1 / 1;
    padding-inline: clamp(1.1rem, 5vw, 2rem);
    max-width: none;
  }

  .vhero-hint { display: none; }
}

/* Veľmi nízke displeje — nech sa stĺpec zmestí aj tak. */
@media (max-width: 768px) and (max-height: 700px) {
  .vhero-title { font-size: clamp(1.55rem, 6.6vw, 2.2rem); }
  .vhero-lead { display: none; }
}

/* Najužšie telefóny (320 px) — inak by sa druhé tlačidlo zlomilo pod prvé
   a vypadlo pod spodný okraj. */
@media (max-width: 380px) {
  .vhero-actions {
    gap: 0.6rem;
  }
  .vhero-actions .btn {
    padding: 0.7rem 1.05rem;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero-hint-line::after { animation: none; }
}

/* ---------- tlačidlo "Preskočiť video" ----------
   Sedí v pravom dolnom rohu; nápoveda o rolovaní sa mu uhne o kus vyššie. */

.vhero-hint { bottom: 4.9rem; }

.vhero-skip {
  position: absolute;
  right: clamp(1.25rem, 5vw, 4rem);
  bottom: 1.15rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 249, 240, 0.3);
  background: rgba(18, 11, 5, 0.45);
  backdrop-filter: blur(6px);
  color: #f2e7d7;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, opacity 0.3s ease;
}
.vhero-skip:hover {
  background: rgba(18, 11, 5, 0.72);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.vhero-skip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Na mobile je .vhero-sticky stĺpec s automatickou výškou — absolútne
   umiestnené tlačidlo by padlo cez tlačidlá pod videom. Preto z neho robíme
   bežnú položku stĺpca, ktorá sa zaradí úplne naspodok a zarovná doprava. */
@media (max-width: 768px) {
  .vhero-skip {
    position: static;
    order: 5;
    align-self: flex-end;
    /* margin-top: auto odtlačí tlačidlo na spodok stĺpca — vďaka min-height
       nižšie je stĺpec vysoký presne na obrazovku, takže sedí pri jej hrane. */
    margin: auto clamp(1.1rem, 5vw, 2rem) 0;
    padding: 0.48rem 0.95rem;
    font-size: 0.74rem;
    border-color: rgba(124, 79, 34, 0.32);
    background: rgba(124, 79, 34, 0.08);
    color: var(--crust);
    backdrop-filter: none;
  }
  .vhero-skip:hover {
    background: rgba(124, 79, 34, 0.16);
    border-color: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vhero-skip { transition: opacity 0.3s ease; }
  .vhero-skip:hover { transform: none; }
}