/* ════════════════════════════════════════════════════════════
   11-responsive.css

   Responsive breakpointy, hover system a stisk. Prebijeji pravidla vys,
   takze tenhle soubor musi zustat AZ ZA nimi.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 980px) {
  .hero-split { flex-direction: column; text-align: center; justify-content: center; }
  .hero-split .hero-copy { max-width: 620px; }
  .hero-split .hero-title { max-width: 14ch; margin-inline: auto; }
  .hero-split .hero-sub { margin-inline: auto; }
  .hero-split .hero-actions { justify-content: center; }
  .hud { order: 2; max-width: 460px; }
  .phaser { order: 2; min-height: 340px; max-width: 520px; }
  /* Pod 980 px uz vedle sebe text a zbran nedavaji smysl — sloupec s textem
     by byl uzsi nez radek. Zbran jde pod text (grid ji nechava druhou v
     poradi) a drzi mensi vysku, aby netlacila CTA pod ohyb. */
  .hero-panel-grid { grid-template-columns: 1fr; }
  .hero-typo .phaser { min-height: 300px; max-width: 460px; margin-inline: auto; }
  .occasions { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gallery-tile.g-tall { grid-row: span 1; }
  .gallery-tile.g-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .occasions { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-tile.g-wide, .gallery-tile.g-tall { grid-column: auto; grid-row: auto; }
}

/* ── HOVER SYSTÉM ────────────────────────────────────
   Jeden zdvih, jedna doba, jedna křivka pro všechny karty.
   Za hover-gate, protože dotykový displej spustí :hover po tapnutí
   a karta pak zůstane trvale nadzvednutá. */
@media (hover: hover) and (pointer: fine) {
  .step-cell:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  /* Karta se zaricim ramecken nema `border`, na ktery by sel hover zavesit —
     zvedne se a pritvrdi zar (`--glow-filter` je silnejsi nez klidovy stav). */
  .occasion:hover, .feat-item:hover { transform: translateY(-3px); }
  .occasion:hover::before, .feat-item:hover::before,
  .neon-frame--open:hover::before {
    filter: drop-shadow(0 0 6px rgba(105, 188, 68, .85))
            drop-shadow(0 0 20px rgba(105, 188, 68, .45));
  }
  .gallery-tile:hover { transform: scale(1.02); z-index: 1; }
}
/* Dotyk: bez zdvihu, jen zpětná vazba na stisk */
@media (hover: none) {
  .step-cell:active,
  .occasion:active { transform: scale(.99); }
}

/* ── STISK ───────────────────────────────────────────
   Cokoliv, co jde zmáčknout, se pod prstem musí smrsknout.
   Ne translateY — scale zmenší i obsah, takže prvek působí
   opravdu stisknutě, ne jen posunutě. Vlastní transition má
   každý prvek u sebe (transform var(--d-press) var(--ease-out)). */
.cal-header button:active,
.cal-day:not(.disabled):not(.closed):not(.full):not(.empty):active,
.slot:not(:disabled):active,
.type-option:active,
.wiz-recap-item:active,
.lf-match:active,
.btn-finish:active,
.inquiry-close:active,
.admin-btn-secondary:active,
.admin-btn-danger:active { transform: scale(.97); }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .feat-grid, .price-grid, .steps-grid { grid-template-columns: 1fr; }
  .feat-grid > .feat-item:last-child:nth-child(3n+1):not(:first-child) { grid-column: auto; }
  /* Kroky na mobilu: cislo vlevo, text vpravo, spojnice se otoci na svislou
     kolejnici mezi kolecky (vodorovna by v jednom sloupci nedavala smysl). */
  .steps-flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .step-row { grid-template-columns: 40px 1fr; align-items: start; gap: 0 1rem; }
  .step-row:not(:last-child)::before {
    left: 19px; right: auto; top: 44px; bottom: -1.6rem;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--line-strong), transparent);
  }
  .step-body p { max-width: none; }
  .info-grid { grid-template-columns: 1fr; }
  .stats-showcase-grid { grid-template-columns: 1fr; }
  /* Flex-wrap tu zavisi na sirce textu, ktera roste behem count-up animace
     (0 -> 12 = 1 znak -> 2 znaky) - polozka pak uprostred animace prehodi
     radek. Pevna 2-sloupcova mrizka nezavisi na obsahu, takze se nic
     nehyba pod rukama. */
  .stat-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.6rem; }
  .arena-feature-grid { grid-template-columns: 1fr; }
  /* width: 100% je tu povinné, ne jen max-width: margin: 0 auto dává grid
     stretch pryč (auto marže vyhrávají nad justify-items: stretch), takže
     šířka se počítá shrink-to-fit z obsahu — a ten je celý position: absolute
     (canvas, HUD) nebo se skryje (.arena-map po .gear-ready), takže by z boxu
     zbyl jen 1px svislý proužek (jeho rámeček) a 3D model by nebyl vidět. */
  .arena-stage { order: -1; width: 100%; max-width: 460px; margin: 0 auto; }
  /* align-items: stretch je tu povinné: v řádku centruje .gear-showcase svoje
     sloupce svisle, ale po přepnutí na sloupec by centrovalo vodorovně a
     .gear-stage by se smrsklo na nulovou šířku — všechny jeho děti jsou
     position: absolute, takže nemá žádnou vlastní šířku. Zbyl by z něj
     1px svislý proužek (jeho rámeček) a 3D model by nebyl vidět. */
  .gear-showcase, .gear-showcase.rev { flex-direction: column; align-items: stretch; }
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(36px); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-burger { display: flex; }
  .nav-center { display: none; }
}
/* ── TLAČÍTKA NA TELEFONU NA STŘED (designer, kolo 9, 29. 9.) ──
   „Někde je nalevo a někde doprostřed, tak bych to univerzálně doprostřed."
   Na telefonu je obsah jeden sloupec a tlačítko u levé hrany v něm visí
   náhodně, podle toho, jestli jeho obal zrovna byl flex, nebo odstavec.
   Tři vrstvy, od obecné ke konkrétní:
   1. Obal, ve kterém jsou JEN tlačítka (odstavec, div i flexová řada), dostane
      `text-align` i `justify-content: center`. Celé pravidlo je v `:where()`,
      takže má specificitu jen `main` (0,0,1) — obal, který si zarovnání
      nastavuje sám (řádky průvodce se `space-between`), vyhraje a nic se mu
      nerozbije. Nový obal tlačítek se tím vycentruje sám.
   2. Řady, kde tlačítko sdílí místo s něčím jiným (výběr zastávky, pole
      kódu poukazu, výběr módů) nebo kde zarovnání vlevo nastavuje pravidlo
      s třídou (`.hero-typo .hero-actions`), jsou vyjmenované.
   3. Tlačítko pod textem ve stejném bloku (nadpis, perex, tlačítko) se
      vycentruje samo sebou, aby text zůstal zarovnaný vlevo.
   Kontrola: projít veřejné stránky na 390px okně a porovnat střed skupiny
   tlačítek se středem obsahu — odchylka nad 6 px je chyba. */
@media (max-width: 600px) {
  main :where(p, div):where(:has(> .btn):not(:has(> :not(.btn)))) {
    text-align: center; justify-content: center;
  }
  .hero-actions,
  :is(.hero-typo, .hero-photo-copy, .hero-split) .hero-actions,
  .doprava-row, .arena-walkbar, .offer-links,
  .pix-demo-actions, .pix-modes, .pix-q-opts,
  .vch-row, .vch-buy-links { justify-content: center; }
  /* Tlacitko s popiskem v jedne rade („Celý ceník" + věta o degresi,
     „Spustit ukázku" + jméno módu): vycentrovana byla rada jako celek, takze
     tlacitko samo stalo 50–85 px vlevo od osy. Popisek jde pod nej. */
  .price-more, .pix-demo-actions {
    display: flex; flex-direction: column; align-items: center;
    gap: .6rem; text-align: center;
  }
  .pix-demo-actions > :empty { display: none; }
  :is(.stats-intro, .arena-feature-grid > div) > :where(.btn) {
    display: flex; width: fit-content; margin-inline: auto;
  }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* Patička na telefonu už není na středové ose — rozvržení z počítače
     (logo vlevo, kontakt vpravo) je v 08-chrome.css. Logo se tam drží
     na ŠÍŘKU, ne výšce: lockup má poměr stran 3,34, takže pevná výška by
     na 375px displeji vyjela z okna. */
}
/* Reduced motion = méně a jemněji, ne nula.
   Opakovaná a poziční animace jde pryč (keyframes, reveal, parallax,
   tilt a scroll-driven věci vypíná motion.js), ale krátké přechody
   krytí a barvy zůstávají — ty pomáhají pochopit, co se změnilo,
   a nezpůsobují nevolnost. Pohyb v prostoru je problém, ne prolnutí. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal, [data-reveal], .hero-title .hl,
  .wiz-step, .reserve-success > *, .wiz-dot { opacity: 1 !important; transform: none !important; }
  /* Potvrzovací sekvence se přeskakuje celá — JS rovnou nastaví fázi done */
  .rs-dot { animation: none !important; }
  .rs-seal { opacity: 1 !important; transform: none !important; }
  .rs-seal-check { stroke-dashoffset: 0 !important; }
}