/* /menu „Vyskúšajte si to" — živá ukážka Qivelo Menu (casti/ukazka-menu.html, logika build/web/ukazka-okno.js).
 *
 * Hosť aj admin sú dve okná (iframe) v tom istom telefóne, prepínač ich strieda. Okno má vnútri šírku
 * skutočného displeja (402 pt) a zmenší sa na telefón na stránke (--mierka, --sirka-appky z JS) —
 * appka vyzerá presne ako v iPhone. Na počítači text, prepínač a kroky vľavo, telefón vpravo.
 *
 * Plocha Grafit (sekcia--noc), text Hmla, tlmený #BDB3DD, aktívny prvok Levanduľa s textom Atrament.
 * Všetko pod #ukazka — .iphone, .krok, .kroky a .cislo má aj styles.css.
 */

/* Skok na #ukazka: na počítači sekcia hneď pod lištou (48 px) — pri 72 px zo styles.css by nad ňou
   ostal pás bielej sekcie Správa menu. Telefón je potom celý v okne aj pod plávajúcou pilulkou. */
@media (min-width: 734px) { #ukazka { scroll-margin-top: 48px; } }

#ukazka .ukazka-obal {
  /* Telefón sa zmestí do okna pod lištu a plávajúcu pilulku, no nikdy nie menší ako 560 px —
     na nízkom notebooku by appka v ňom mala drobné písmo. Najviac 660 px ako na qivelo.sk. */
  --tel-h: clamp(560px, calc(100svh - 190px), 660px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--m-stlpce);
  grid-template-areas: ". zariadenie" "text zariadenie" "prepinac zariadenie" "pod zariadenie" ". zariadenie";
  grid-template-rows: 1fr auto auto auto 1fr;
}
#ukazka .ukazka-text { grid-area: text; }
#ukazka .ukazka-text .perex { max-width: 30em; }
#ukazka .ukazka-prepinac { grid-area: prepinac; justify-self: start; margin-top: var(--m-6); }
#ukazka .ukazka-zariadenie { grid-area: zariadenie; justify-self: center; }
#ukazka .ukazka-pod { grid-area: pod; }

/* ── Prepínač: pilulka na čiernej, vybraná voľba = jazdec v Levanduli ── */
#ukazka .ukazka-prepinac {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px;
  border-radius: var(--r-pilulka); background: var(--tma); box-shadow: inset 0 0 0 1px var(--linka);
}
#ukazka .ukazka-prepinac::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pilulka);
  background: var(--levandula); transition: transform var(--cas-stredny) var(--ease-out);
}
#ukazka .ukazka-prepinac:has(> button:nth-of-type(2)[aria-selected="true"])::before { transform: translateX(100%); }
#ukazka .ukazka-prepinac button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 22px;
  border-radius: var(--r-pilulka); white-space: nowrap; text-align: center;
  color: var(--tlmeny); font-size: var(--fs-maly); font-weight: 600; line-height: 20px;
  transition: color var(--cas-rychly) var(--ease);
}
#ukazka .ukazka-prepinac button::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }   /* dotyková plocha 44 px */
#ukazka .ukazka-prepinac button[aria-selected="true"] { color: var(--atrament); }

/* ── Tri kroky — aktuálny podľa stavu ukážky, klik prepne na správne okno ── */
#ukazka .ukazka-kroky { margin-top: var(--m-6); border-top: 1px solid var(--linka); }
#ukazka .ukazka-kroky li { border-bottom: 1px solid var(--linka); }
#ukazka .ukazka-kroky button {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--m-4); align-items: baseline;
  width: 100%; padding: var(--m-4) 0; text-align: left; border-radius: 0;
}
#ukazka .ukazka-kroky button::before {
  content: attr(data-cislo); grid-row: span 2; align-self: start;   /* pevné číslo, hotový krok dostane fajku */
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-maly);
  background: var(--tma); color: var(--tlmeny); font-size: var(--fs-maly); font-weight: 700; line-height: 1;
  transition: background-color var(--cas-stredny) var(--ease), color var(--cas-stredny) var(--ease);
}
#ukazka .ukazka-kroky b {
  font-family: var(--font-nadpis); font-weight: 600; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.3; letter-spacing: var(--tr-h3);
  color: var(--tlmeny); transition: color var(--cas-stredny) var(--ease);
}
#ukazka .ukazka-kroky span { margin-top: 2px; font-size: var(--fs-maly); line-height: 1.4; color: var(--tlmeny); text-wrap: pretty; }
#ukazka .ukazka-kroky li.je-aktivny b { color: var(--hmla); }
#ukazka .ukazka-kroky li.je-aktivny button::before { background: var(--levandula); color: var(--atrament); }
#ukazka .ukazka-kroky li.je-hotovy button::before { content: "✓"; color: var(--levandula); }
#ukazka .ukazka-kroky button:focus-visible { outline-offset: 2px; border-radius: var(--r-maly); }

#ukazka .ukazka-znova {
  display: inline-flex; align-items: center; gap: var(--m-2); min-height: 44px; margin-top: var(--m-4);
  color: var(--tlmeny); font-size: var(--fs-maly); font-weight: 500; transition: color var(--cas-rychly) var(--ease);
}
/* Hover len s myšou — na dotyku by po ťuknutí ostal svietiť. */
@media (hover: hover) {
  #ukazka .ukazka-prepinac button:not([aria-selected="true"]):hover, #ukazka .ukazka-kroky button:hover b, #ukazka .ukazka-znova:hover { color: var(--hmla); }
}

/* ── Telefón: rám ako v celom webe (styles.css .iphone), displej je živá appka ── */
#ukazka .iphone--ukazka { height: var(--tel-h); width: calc(var(--tel-h) * 439 / 906); }
#ukazka .ukazka-plocha { position: absolute; left: 0; right: 0; top: 6.1785%; bottom: 0; overflow: hidden; background: var(--biela); }   /* pod stavovým riadkom (54 / 874 pt) */
#ukazka .ukazka-okno {
  position: absolute; left: 0; top: 0; border: 0; background: var(--biela);
  width: var(--sirka-appky, 402px); height: calc(100% / var(--mierka, 1));
  transform: scale(var(--mierka, 1)); transform-origin: 0 0;
  opacity: 0; visibility: hidden; transition: opacity var(--cas-stredny) var(--ease), visibility 0s var(--cas-stredny);
}
#ukazka .ukazka-okno.je-aktivna { opacity: 1; visibility: visible; transition: opacity var(--cas-stredny) var(--ease); }

/* Na výšku (iPad, skladací iPhone): pod sebou, hlava a prepínač v strede, telefón s rámom pod nimi. */
@media (max-aspect-ratio: 11/10) {
  #ukazka .ukazka-obal {
    --tel-h: clamp(560px, calc(100svh - 220px), 660px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "text" "prepinac" "zariadenie" "pod";
  }
  #ukazka .ukazka-text { text-align: center; }
  #ukazka .ukazka-text .perex { margin-left: auto; margin-right: auto; }
  #ukazka .ukazka-prepinac { justify-self: center; }
  #ukazka .ukazka-zariadenie { margin-top: var(--m-6); }
  #ukazka .ukazka-pod { width: 100%; max-width: 640px; justify-self: center; margin-top: var(--m-3); text-align: center; }   /* kroky sa čítajú zľava, Začať odznova v strede */
}

/* Telefón: bez rámu — telefón v telefóne by bol drobný. Okno takmer cez celú šírku (12 px od kraja),
   nižšie než obrazovka, aby sa dalo chytiť stránku nad ním aj pod ním. Appka v ňom má šírku
   iPhonu (402 pt) a na užšom telefóne sa len úmerne zmenší (--mierka). */
@media (max-width: 733px) {
  #ukazka .ukazka-text { text-align: left; }   /* ako Správa menu a Platby okolo — perex sa číta zľava */
  #ukazka .ukazka-text .perex { margin-left: 0; }
  #ukazka .ukazka-pod { text-align: left; }
  #ukazka .ukazka-prepinac { justify-self: stretch; margin-top: var(--m-5); }
  #ukazka .ukazka-prepinac button { padding: 0 12px; }
  #ukazka .ukazka-zariadenie { justify-self: stretch; margin: var(--m-4) calc(var(--m-3) - var(--okraj)) 0; }
  #ukazka .iphone--ukazka { width: 100%; height: clamp(380px, calc(100svh - 176px), 720px); aspect-ratio: auto; }
  #ukazka .iphone--ukazka::before, #ukazka .iphone--ukazka .iphone-ram, #ukazka .iphone--ukazka .iphone-stav { display: none; }
  #ukazka .iphone--ukazka .iphone-displej { left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--r-karta); box-shadow: 0 0 0 1px var(--linka); }
  #ukazka .ukazka-plocha { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #ukazka .ukazka-prepinac::before, #ukazka .ukazka-prepinac button, #ukazka .ukazka-kroky button::before, #ukazka .ukazka-kroky b,
  #ukazka .ukazka-okno, #ukazka .ukazka-okno.je-aktivna { transition: none; }
}