/* ELEVATOR STUDIOS — landing page + rezervačný portál
   Hodnoty berie z tokens.css (BRIEF §4.1). Tu sú iba komponenty a rozloženie.
   Breakpointy: 480 · 768 · 1024 · 1280 px. Mobile first. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: calc(var(--z-modal) + 1); background: var(--es-led); color: var(--es-ink);
  font-weight: 700; padding: 12px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip-link:focus { top: var(--sp-3); }

.wrap { width: 100%; max-width: calc(var(--grid-max) + 2 * var(--page-pad)); margin-inline: auto; padding-inline: var(--page-pad); }
.section { padding-block: var(--section-pad); position: relative; }
.section--panel { background: var(--es-panel); border-block: 1px solid var(--es-line); }
.section--checker { background: var(--es-checker-lo); }

/* — Typografia — */
h1, h2, h3 { font-family: var(--ff-display); font-weight: var(--fw-display); line-height: var(--lh-display-multi);
  letter-spacing: var(--ls-display); margin: 0; text-wrap: balance; }
h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-display-alt); line-height: var(--lh-heading); }
.eyebrow { font: var(--fw-mono) var(--fs-label)/var(--lh-label) var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--es-led); margin: 0 0 var(--sp-3); }
.lead { font-size: var(--fs-lead); font-weight: var(--fw-body-medium); color: var(--text-2); line-height: 1.5; max-width: 62ch; }
.small { font-size: var(--fs-small); color: var(--text-2); }
.fineprint { font: var(--fw-mono) var(--fs-label)/1.4 var(--ff-mono); letter-spacing: .06em; color: var(--text-2); }
.section-head { margin-bottom: var(--sp-7); max-width: 820px; }
.section-head .lead { margin-top: var(--sp-3); }
.nums { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* — Ikony (tvary podľa Lucide, licencia ISC) — */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }
.ic--lg { width: 28px; height: 28px; }

/* — Tlačidlá — */
.btn-cta { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--btn-cta-h); padding: 8px 24px 8px 8px;
  border-radius: var(--r-pill); border: 0; background: var(--es-led); color: var(--es-ink); font: var(--fw-body-bold) 1.0625rem/1.2 var(--ff-body);
  text-decoration: none; cursor: pointer; transition: box-shadow var(--dur-ui), transform var(--dur-ui); text-align: left; }
.btn-cta:hover { box-shadow: 0 0 22px 2px var(--es-led-glow); }
.btn-cta:active { transform: translateY(1px); }
.btn-cta .knob { width: 36px; height: 36px; border-radius: var(--r-round); background: var(--es-ink); display: grid; place-items: center; flex: none; }
.btn-cta .knob::before { content: ""; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 12px solid var(--es-led); transform: translateY(-1px); }
.btn-cta--sm { min-height: var(--btn-min); padding: 0 18px; font-size: .9375rem; white-space: nowrap; }
.btn-cta[disabled], .btn-cta[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-min); padding: 8px 20px;
  border-radius: var(--r-pill); border: 2px solid var(--es-steel); background: transparent; color: var(--es-paper);
  font: var(--fw-body-bold) 1rem/1.2 var(--ff-body); text-decoration: none; cursor: pointer; transition: border-color var(--dur-ui), background var(--dur-ui); }
.btn-sec:hover { border-color: var(--es-steel-light); background: var(--es-panel-raised); }
.btn-sec--lg { min-height: var(--btn-cta-h); padding-inline: 24px; }
.btn-mini { display: inline-flex; align-items: center; gap: 6px; min-height: var(--btn-min); padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--es-steel-dark); background: var(--es-panel-raised); color: var(--es-paper); font: var(--fw-body-medium) .875rem/1.2 var(--ff-body); cursor: pointer; }
.btn-mini:hover { border-color: var(--es-steel); }
.btn-mini.is-done { border-color: var(--es-led); color: var(--es-led); }

/* — Tlačidlo poschodia (§4.7 b) — */
.es-floor { width: var(--btn-floor); height: var(--btn-floor); min-width: var(--btn-min); min-height: var(--btn-min);
  border-radius: var(--r-round); border: 0; cursor: pointer; display: inline-grid; place-items: center; flex: none;
  background: radial-gradient(circle at 50% 35%, #34383F 0%, var(--es-panel) 70%);
  box-shadow: inset 0 0 0 var(--ring) var(--es-steel), inset 0 2px 0 4px rgba(255,255,255,.06), 0 2px 0 #000;
  color: var(--es-paper); font: var(--fw-display) calc(var(--btn-floor) * .5)/1 var(--ff-display); transition: box-shadow var(--dur-ui), color var(--dur-ui); }
.es-floor[aria-pressed="true"], .es-floor[aria-current="true"], .is-lit > .es-floor { color: var(--es-led); box-shadow: var(--glow-led); }
.es-floor-label { font: var(--fw-mono) var(--fs-label)/var(--lh-label) var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.es-floor--sm { --btn-floor: 44px; }
.es-floor--md { --btn-floor: 56px; }
.es-floor--static { cursor: default; }

/* — 7-segmentový displej (§4.7 a) — */
.seg { height: var(--seg-h-hero); width: auto; filter: var(--seg-glow); overflow: visible; }
.seg .on { fill: var(--es-led); }
.seg .off { fill: var(--es-led-off); }
.seg-fallback { font: var(--fw-mono) 1.5rem/1 var(--ff-mono); color: var(--es-led); }
.display { display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--es-shaft); padding: 12px 16px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 2px var(--es-line), inset 0 6px 18px rgba(0,0,0,.8); }
.display-frame { display: inline-block; padding: 3px; border-radius: calc(var(--r-lg) + 3px); background: var(--es-steel-brushed); box-shadow: 0 12px 32px rgba(0,0,0,.45); max-width: 100%; }
.display-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: 12px; border-radius: var(--r-lg); background: var(--es-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.5); }
.display-labels { display: flex; flex-direction: column; gap: var(--sp-2); padding-right: var(--sp-2); }
.lbl { font: var(--fw-mono) var(--fs-label)/var(--lh-label) var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.lbl--led { color: var(--es-led); }
.tri { height: calc(var(--seg-h-hero) * .42); width: auto; }
.tri polygon { fill: var(--es-led-off); transition: fill var(--dur-ui); }
.tri.is-on polygon { fill: var(--es-led); }
.tri.is-on { filter: drop-shadow(0 0 8px var(--es-led-glow)); }

/* — LED rámček, ceny — */
.led-frame { border: var(--bw-frame) solid var(--es-led); border-radius: var(--r-md); box-shadow: inset 0 0 18px rgba(255,122,31,.10), 0 0 14px rgba(255,122,31,.12); }
.chip-led { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; border: var(--bw-frame) solid var(--es-led); border-radius: var(--r-sm);
  font: var(--fw-mono) .9375rem/1.35 var(--ff-mono); color: var(--es-led); font-variant-numeric: tabular-nums; }
.chip-led .muted { color: var(--text-2); font-weight: var(--fw-mono-regular); }
.price { font: var(--fw-mono) var(--fs-price)/1.05 var(--ff-mono); color: var(--es-led); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-u { font-size: .6em; }   /* „€ s DPH“ = 60 % ceny (§4.1 --fs-price-unit) */

/* — Režimy: kontrolky (§4.7 c) — */
.mode { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: .08em; }
.mode::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px 1px currentColor; flex: none; }
.mode--ticho { color: var(--es-quiet); }
.mode--nahlas { color: var(--es-loud); }
.mode--noc { color: var(--es-quiet); }
/* EDUKÁCIA (tútor–žiak, Po–Pi 14–17): nie je ticho ani nahlas → neutrálna oceľ, hranatá kontrolka bez žiary */
.mode--edu { color: var(--es-steel-light); }
.mode--edu::before { border-radius: 2px; box-shadow: none; background: var(--es-steel-brushed); }
.mode .t { color: var(--text-2); font-weight: var(--fw-mono-regular); letter-spacing: .02em; }

/* ================= HLAVIČKA ================= */
.site-header { position: sticky; top: 0; z-index: var(--z-header); height: 64px; background: rgba(11,12,14,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--es-line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--sp-3); }
.brand { display: flex; align-items: center; flex: none; min-height: var(--btn-min); text-decoration: none; border-radius: var(--r-sm); }
.brand .logo-h { width: 144px; height: 42px; }
.brand .logo-s { width: 40px; height: 40px; display: none; }
@media (max-width: 359px) { .brand .logo-h { display: none; } .brand .logo-s { display: block; } }
.mini-display { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--es-shaft);
  box-shadow: inset 0 0 0 2px var(--es-line), inset 0 6px 18px rgba(0,0,0,.8); flex: none; }
.mini-display .seg { height: var(--seg-h-mini); filter: none; }
.mini-display .tri { height: 12px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav a { display: flex; align-items: center; min-height: var(--btn-min); padding: 0 12px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--text-2); font-weight: var(--fw-body-medium); font-size: .9375rem; transition: color var(--dur-ui); }
.main-nav a:hover { color: var(--es-paper); }
.main-nav a { white-space: nowrap; }
/* 7 položiek menu (od 2026-10-15 aj „Memes“): na užších desktopoch tesnejšie, nech sa nič nezalamuje */
@media (min-width: 1024px) and (max-width: 1359px) { .main-nav a { padding: 0 7px; font-size: .875rem; } }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.header-cta { display: none; }
.menu-btn { display: inline-grid; place-items: center; width: var(--btn-min); height: var(--btn-min); border-radius: var(--r-sm);
  border: 1px solid var(--es-line); background: var(--es-panel); color: var(--es-paper); cursor: pointer; }
.menu-btn .ic-close { display: none; }
.menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: inline-block; }
@media (max-width: 1023px) {
  .main-nav { position: absolute; top: 64px; left: 0; right: 0; background: var(--es-shaft); border-bottom: 1px solid var(--es-line); display: none;
    box-shadow: 0 18px 32px rgba(0,0,0,.5); }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; padding: var(--sp-2) var(--page-pad) var(--sp-4); }
  .main-nav a { min-height: 52px; font-size: 1.0625rem; color: var(--es-paper); border-bottom: 1px solid var(--es-line); border-radius: 0; }
}
@media (min-width: 768px) { .header-cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .site-header .wrap { gap: var(--sp-4); }
  .main-nav { flex: 1; display: flex; justify-content: center; }
  .header-actions { margin-left: 0; }
  .menu-btn { display: none; }
}

/* ================= HERO ================= */
.hero { position: relative; min-height: calc(100svh - 64px); display: flex; align-items: center; padding-block: var(--sp-7) calc(var(--sp-8) + 12px); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--es-checker-hi); background-size: 24px 24px; }
.hero-grid { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero h1 { font-size: var(--fs-display); margin: var(--sp-6) 0 var(--sp-5); }
.hero .lead { margin-bottom: var(--sp-5); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); align-items: center; }
.live { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--es-panel);
  border: 1px solid var(--es-line); font: var(--fw-mono) var(--fs-label)/1.35 var(--ff-mono); letter-spacing: .06em; color: var(--es-quiet); margin: 0; }
.live .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px 2px currentColor; flex: none; }
.live[data-mode="nahlas"] { color: var(--es-loud); }
.live[data-mode="edu"] { color: var(--es-steel-light); }
.live[data-mode="edu"] .dot { border-radius: 2px; box-shadow: none; }
.live[data-mode="static"] { color: var(--text-2); }
.live[data-mode="static"] .dot, .live[data-mode="static"] .ic { display: none !important; }
.live .ic { display: none; }
.live[data-mode="nahlas"] .ic-loud, .live[data-mode="edu"] .ic-edu, .live:not([data-mode="nahlas"]):not([data-mode="edu"]) .ic-quiet { display: inline-block; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cta-note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-2); }

.hero-visual { display: flex; flex-direction: column; gap: var(--sp-4); }
.shaft { position: relative; padding: 6px; border: var(--bw-frame) solid var(--es-line); border-radius: calc(var(--r-md) + 6px); background: var(--es-panel); overflow: hidden; }
.shaft .hero-photo { border-radius: var(--r-md); }
.door { position: absolute; top: 6px; bottom: 6px; width: calc(50% - 6px); z-index: 3; background: var(--es-steel-brushed);
  transition: transform var(--dur-door) var(--ease-door); }
.door-l { left: 6px; border-radius: var(--r-md) 0 0 var(--r-md); box-shadow: inset -2px 0 0 var(--es-steel-light), inset -5px 0 0 rgba(0,0,0,.25); transform: translateX(calc(-100% - 8px)); }
.door-r { right: 6px; border-radius: 0 var(--r-md) var(--r-md) 0; box-shadow: inset 2px 0 0 var(--es-steel-light), inset 5px 0 0 rgba(0,0,0,.25); transform: translateX(calc(100% + 8px)); }
.js .shaft:not(.is-open) .door { transform: none; }
.seam-mark { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 4; font: var(--fw-mono) .8125rem/1 var(--ff-mono);
  color: var(--es-ink); letter-spacing: .1em; padding: 4px 6px; background: var(--es-steel-light); border-radius: 4px; opacity: 0; transition: opacity var(--dur-ui); }
.js .shaft:not(.is-open) .seam-mark { opacity: 1; }
.floor-panel { display: flex; justify-content: space-around; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); border-radius: var(--r-lg);
  background: var(--es-panel); border: 1px solid var(--es-line); box-shadow: var(--shadow-panel); }
.floor-link { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-decoration: none; border-radius: var(--r-md); padding: 4px; }
.floor-link:hover .es-floor { box-shadow: inset 0 0 0 var(--ring) var(--es-steel-light), 0 2px 0 #000; }
.floor-link.is-lit:hover .es-floor { box-shadow: var(--glow-led); }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .hero-copy { grid-column: 1 / span 7; padding-right: var(--sp-4); }
  .hero h1 { font-size: var(--fs-h1); }   /* desktop: H1 na 2 riadky, aby CTA ostalo nad zlomom pri 900 px výšky */
  .hero-visual { grid-column: 8 / span 5; flex-direction: row; align-items: center; }
  .shaft { flex: 1; min-width: 0; }
  .floor-panel { flex-direction: column; padding: var(--sp-5) var(--sp-2); gap: var(--sp-5); }
}

/* ================= LOKÁTOR −1 ================= */
.locator { background: var(--es-panel); border-block: 1px solid var(--es-line); padding-block: var(--sp-5); }
.locator .wrap { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: center; }
.locator-main { display: flex; align-items: center; gap: var(--sp-4); }
.locator .display { padding: 8px 10px; }
.locator .seg { height: 36px; }
.locator-text { font-weight: var(--fw-body-medium); }
.locator-text strong { color: var(--es-led); font-family: var(--ff-mono); }
.locator-note { font-size: var(--fs-small); color: var(--text-2); margin: 4px 0 0; }
@media (min-width: 768px) { .locator .wrap { grid-template-columns: minmax(0, 1fr) auto; } }

/* ================= KARTY POSCHODÍ ================= */
.cards { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.floor-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--es-panel);
  border: 1px solid var(--es-line); box-shadow: var(--shadow-panel); min-width: 0; }
.card-head { display: flex; align-items: center; gap: var(--sp-4); }
.card-head .lbl { display: block; margin-bottom: 4px; }
.price-box { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-3); }
.price-row + .price-row { border-top: 1px solid var(--es-line); padding-top: var(--sp-3); }
.price-k { font: var(--fw-mono) var(--fs-label)/1.2 var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.price-text { font: var(--fw-mono) 1.125rem/1.3 var(--ff-mono); color: var(--es-led); }
.price-box .price { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.modes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.modes .ic { width: 18px; height: 18px; }
.modes .mode { flex-wrap: wrap; row-gap: 2px; }
.modes .mode .t { flex-basis: 100%; padding-left: 44px; }
.gear-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gear-list li { position: relative; padding-left: 20px; color: var(--text-1); }
.gear-list li::before { content: "▸"; position: absolute; left: 0; color: var(--es-led); }
.card-more { font-size: var(--fs-small); color: var(--text-2); }
.card-more a { color: var(--es-paper); text-underline-offset: 3px; }
.card-cta { margin-top: auto; padding-top: var(--sp-2); }
.card-cta .btn-cta, .card-cta .btn-sec { width: 100%; justify-content: flex-start; }
.card-cta .btn-sec { justify-content: center; }
.term { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: .06em; }
/* Karty majú rôzne dlhý obsah: bez natiahnutia na rovnakú výšku (inak v kartách 2 a 3 ostane ~330 px prázdna plocha) */
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

/* mini 24h pás: riadok Po–Pi a So–Ne */
.band-mini { --bm-k: 42px; position: relative; padding-bottom: 22px; display: grid; gap: 6px; }
.bm-row { display: grid; grid-template-columns: var(--bm-k) minmax(0, 1fr); gap: 6px; align-items: center; }
.bm-k { font: var(--fw-mono) .6875rem/1 var(--ff-mono); color: var(--text-2); letter-spacing: .02em; }
.band-mini .cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 14px; }
.band-mini .cells span { border-radius: 2px; }
.band-mini .axis { position: absolute; left: calc(var(--bm-k) + 6px); right: 0; bottom: 0; height: 16px; font: var(--fw-mono) .6875rem/1 var(--ff-mono); color: var(--text-2); }
.band-mini .axis span { position: absolute; transform: translateX(-50%); }
.band-mini .axis span:first-child { transform: none; }
.band-mini .axis span:last-child { transform: translateX(-100%); }
.c-ticho { background: var(--es-quiet); }
.c-nahlas { background: var(--es-loud); }
.c-noc { background: var(--es-hatch-night); }
.c-edu { background: var(--es-steel-brushed); }

/* ================= REŽIMY / 24 h ================= */
.hours-panel { background: var(--es-panel); border: 1px solid var(--es-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-panel); }
.hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); }
.hours-head .lbl { margin: 0; }
/* Prepínač rozvrhu Po–Pi | So–Ne */
.day-toggle { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-pill); background: var(--es-shaft); box-shadow: inset 0 0 0 1px var(--es-line); }
.dt-btn { min-height: var(--btn-min); min-width: 80px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2);
  font: var(--fw-mono) .9375rem/1 var(--ff-mono); letter-spacing: .04em; cursor: pointer; transition: background var(--dur-ui), color var(--dur-ui); }
.dt-btn:hover { color: var(--es-paper); }
.dt-btn[aria-pressed="true"] { background: var(--es-led); color: var(--es-ink); }
.hours-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 22px 2px 8px; margin: 0 -2px; scrollbar-width: thin; }
.hours { display: flex; gap: 4px; width: max-content; }
.hr { position: relative; width: 44px; min-height: 76px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; scroll-snap-align: start; border-radius: var(--r-sm); }
.hr-cell { height: 48px; border-radius: var(--r-sm); transition: box-shadow var(--dur-ui); }
.hr-num { font: var(--fw-mono) .8125rem/1 var(--ff-mono); color: var(--text-2); text-align: center; }
.hr--ticho .hr-cell { background: var(--es-quiet); }
.hr--nahlas .hr-cell { background: var(--es-loud); }
.hr--noc .hr-cell { background: var(--es-hatch-night); }
.hr--edu .hr-cell { background: var(--es-steel-brushed); }
.hr.is-now .hr-cell { outline: 2px solid var(--es-led); outline-offset: 2px; }
.hr.is-now::before { content: "▲"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); color: var(--es-led); font-size: 12px; line-height: 1; }
.hr[aria-pressed="true"] .hr-cell { box-shadow: 0 0 0 3px var(--es-shaft), 0 0 0 6px var(--es-paper); }
.hr[aria-pressed="true"] .hr-num { color: var(--es-paper); }
.hours-info { margin: var(--sp-4) 0 0; padding: var(--sp-4); border-radius: var(--r-md); background: var(--es-shaft); border: 1px solid var(--es-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: 64px; }
.hours-info .time { font: var(--fw-mono) 1.5rem/1 var(--ff-mono); color: var(--es-led); }
.hours-note { margin: var(--sp-4) 0 0; }
.mode-cards { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-6); }
.mode-card { position: relative; overflow: hidden; padding: calc(var(--sp-5) + 6px) var(--sp-5) var(--sp-5); border-radius: var(--r-lg); background: var(--es-panel); border: 1px solid var(--es-line); }
.mode-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--mc, var(--es-quiet)); }
.mode-card .range { font: var(--fw-display) var(--fs-h3)/1.1 var(--ff-display); margin: var(--sp-3) 0 var(--sp-2); }
.mode-card p { color: var(--text-2); }
.mode-card--nahlas { --mc: var(--es-loud); }
.mode-card--noc { --mc: var(--es-hatch-night); }
.mode-card--edu { --mc: var(--es-steel-brushed); }
.mode-card .range--split { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); margin: var(--sp-2) 0 0; }
.mode-card .range--split + p:not(.range) { margin-top: var(--sp-3); }
.mode-card .rk { font: var(--fw-mono) var(--fs-label)/1 var(--ff-mono); letter-spacing: var(--ls-label); color: var(--text-2); margin-right: 4px; }
.mode-card a { color: var(--es-paper); text-underline-offset: 3px; }
@media (min-width: 768px) { .mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mode-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .hours-scroll { overflow: visible; padding-top: 22px; }
  .hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); width: 100%; }
  .hr { width: auto; }
}

/* ================= EDUKÁCIA (tútori a ich žiaci) ================= */
.edu-card { position: relative; overflow: hidden; display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); padding: calc(var(--sp-6) + 6px) var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg); background: var(--es-panel); border: 1px solid var(--es-line); box-shadow: var(--shadow-panel); }
.edu-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--es-steel-brushed); }
.edu-copy h2 { margin-bottom: var(--sp-3); }
.edu-copy .lead { margin-bottom: var(--sp-5); }
.edu-copy .btn-sec .ic { color: var(--es-steel-light); }
.edu-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); align-content: start; }
.edu-facts li { display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--r-md); background: var(--es-shaft); border: 1px solid var(--es-line); }
.edu-facts strong { font: var(--fw-display) 1.75rem/1.1 var(--ff-display); color: var(--es-paper); }
.edu-facts .small { margin: 0; }
.edu-more { margin: 0; }
.edu-more a { color: var(--es-paper); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .edu-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-inline: var(--sp-7); column-gap: var(--sp-7); }
  .edu-more { grid-column: 1 / -1; }
}

/* ================= CENNÍK ================= */
.price-displays { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.pd { --pd-h: 52px; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--es-shaft); border: 1px solid var(--es-line); }
.pd .display { align-self: flex-start; gap: var(--sp-3); align-items: flex-end; }
.pd .seg { height: var(--pd-h); }
.pd-u { font: var(--fw-mono) calc(var(--pd-h) * .6)/1 var(--ff-mono); color: var(--es-led); white-space: nowrap; }
.pd-k { font: var(--fw-display) var(--fs-h3)/1 var(--ff-display); }
.pd--night .pd-text { font: var(--fw-mono) 1.375rem/1.3 var(--ff-mono); color: var(--es-led); }
.pd--edu { position: relative; overflow: hidden; padding-top: calc(var(--sp-5) + 6px); }
.pd--edu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--es-steel-brushed); }
.pd--edu .pd-text { font: var(--fw-mono) 1.375rem/1.3 var(--ff-mono); color: var(--es-steel-light); margin: 0; }
.pd--edu a, .pd--night a { color: var(--es-paper); text-underline-offset: 3px; }
.price-text--edu { color: var(--es-steel-light); }
.price-notes { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); max-width: 760px; }
.price-notes .big { font-size: var(--fs-lead); font-weight: var(--fw-body-medium); }
@media (min-width: 480px) { .pd { --pd-h: 60px; } }
@media (min-width: 768px) { .price-displays { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd--night, .pd--edu { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .price-displays { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd--night { grid-column: auto; } .pd { --pd-h: 64px; } }

/* ================= VÝBAVA ================= */
.gear-groups { display: grid; gap: var(--sp-7); }
.gear-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.plates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.plates li { position: relative; padding: 14px 18px 14px 36px; border-radius: var(--r-sm); background: var(--es-steel-brushed); color: var(--es-ink);
  font: var(--fw-mono) .9375rem/1.4 var(--ff-mono); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 0 rgba(0,0,0,.5); }
.plates li::before { content: "▸"; position: absolute; left: 16px; top: 14px; }
.plates li::after { content: ""; position: absolute; inset: 5px; pointer-events: none;
  background:
    radial-gradient(circle, var(--es-steel-dark) 0 2px, transparent 2.6px) left top / 6px 6px no-repeat,
    radial-gradient(circle, var(--es-steel-dark) 0 2px, transparent 2.6px) right top / 6px 6px no-repeat,
    radial-gradient(circle, var(--es-steel-dark) 0 2px, transparent 2.6px) left bottom / 6px 6px no-repeat,
    radial-gradient(circle, var(--es-steel-dark) 0 2px, transparent 2.6px) right bottom / 6px 6px no-repeat; }
.gear-own { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-4) 0 0; }
.gear-own .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--es-steel); }
.gear-photos { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-7); }
.gear-photos figure { margin: 0; max-width: 480px; }
.gear-photos figcaption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-2); }
@media (min-width: 640px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gear-photos { grid-template-columns: repeat(2, minmax(0, 480px)); } }
@media (min-width: 1024px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= SÍNUS ================= */
.sinus { background: var(--es-panel); border-block: 1px solid var(--es-line); padding-block: var(--sp-8); overflow: hidden; }
.sinus-inner { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
.sinus h2 { margin-bottom: var(--sp-2); }
.sinus .claim { font: var(--fw-mono) 1rem/1.3 var(--ff-mono); color: var(--es-quiet); letter-spacing: .06em; margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.sine-wave { height: 72px; border-radius: var(--r-md); background: var(--es-shaft); box-shadow: inset 0 0 0 2px var(--es-line); overflow: hidden; display: flex; align-items: center; }
.sine-wave svg { width: 100%; height: 48px; }
.sine-wave g { animation: sine 2.4s linear infinite; }
@keyframes sine { to { transform: translateX(-100px); } }
@media (prefers-reduced-motion: reduce) { .sine-wave g { animation: none; } }
@media (min-width: 1024px) { .sinus-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-8); } }

/* ================= REZERVÁCIA ================= */
.steps3 { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); counter-reset: s; }
.steps3 li { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--es-panel); border: 1px solid var(--es-line); }
.steps3 .es-floor { --btn-floor: 48px; }
.steps3 p { margin: 6px 0 0; }
@media (min-width: 768px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-sm); background: var(--es-paper); color: var(--es-ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.4); font-weight: var(--fw-body-medium); }
.notice .ic { color: var(--es-ink); margin-top: 2px; }
.notice strong { font-family: var(--ff-display); font-weight: var(--fw-display); font-size: 1.25rem; letter-spacing: .02em; display: block; line-height: 1.1; margin-bottom: 4px; }
.notice--compact { font-size: var(--fs-small); padding: var(--sp-3); }

.booking { margin-top: var(--sp-6); display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.booking-fields { display: grid; gap: var(--sp-5); min-width: 0; }
.step { margin: 0; padding: var(--sp-5); border: 1px solid var(--es-line); border-radius: var(--r-lg); background: var(--es-panel); min-width: 0; }
.step legend, .step-title { padding: 0; margin: 0 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-3);
  font: var(--fw-display) var(--fs-h3)/1.1 var(--ff-display); }
.step legend { float: left; width: 100%; }
.step legend ~ * { clear: both; }   /* všetko za legendou, nielen prvý prvok: skrytý kalendár (#cal) by inak nechal polia vedľa legendy */
.step-n { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--es-shaft);
  box-shadow: inset 0 0 0 2px var(--es-steel); font: var(--fw-mono) .9375rem/1 var(--ff-mono); color: var(--es-led); }
.step-hint { font-size: var(--fs-small); color: var(--text-2); margin: var(--sp-3) 0 0; }
.fields > .step-hint { margin: calc(var(--sp-2) * -1) 0 0; }

.opt-floors { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.opt-floor { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); cursor: pointer; min-width: 80px; }
.opt-floor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-floor input:checked + .es-floor { color: var(--es-led); box-shadow: var(--glow-led); }
.opt-floor input:checked ~ .es-floor-label { color: var(--es-paper); }
.opt-floor input:focus-visible + .es-floor { outline: 3px solid var(--focus); outline-offset: 4px; }

.opt-pkgs { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.opt-pkg { position: relative; display: grid; align-content: start; gap: 4px; padding: var(--sp-4); padding-left: 52px; border-radius: var(--r-md); background: var(--es-panel-raised);
  border: 2px solid var(--es-line); cursor: pointer; transition: border-color var(--dur-ui), box-shadow var(--dur-ui); }
.opt-pkg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-pkg::before { content: ""; position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--es-steel); }
.opt-pkg:has(input:checked) { border-color: var(--es-led); box-shadow: 0 0 16px rgba(255,122,31,.22); }
.opt-pkg:has(input:checked)::before { box-shadow: inset 0 0 0 2px var(--es-led), inset 0 0 0 6px var(--es-panel-raised), inset 0 0 0 12px var(--es-led); }
.opt-pkg:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.opt-pkg .k { font: var(--fw-display) 1.75rem/1 var(--ff-display); }
.opt-pkg .v { font: var(--fw-mono) 1rem/1.3 var(--ff-mono); color: var(--es-led); }
.opt-pkg .d { font-size: var(--fs-small); color: var(--text-2); }
.opt-pkg--edu .v { color: var(--es-steel-light); }
@media (min-width: 640px) { .opt-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fields { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field .label { font-weight: var(--fw-body-medium); font-size: .9375rem; }
.field .opt { color: var(--text-2); font-weight: var(--fw-body); }
.input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--es-steel-dark); background: var(--es-panel-raised);
  color: var(--es-paper); font-size: var(--fs-body); }
.input::placeholder { color: var(--es-steel-dark); }
textarea.input { min-height: 104px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--es-steel) 50%), linear-gradient(135deg, var(--es-steel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.input[aria-invalid="true"] { border-color: var(--es-loud); }
.err { display: flex; gap: 6px; align-items: flex-start; color: var(--es-loud); font-size: var(--fs-small); font-weight: var(--fw-body-medium); margin: 0; }
.err .ic { width: 16px; height: 16px; margin-top: 2px; }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--es-led); }
.policy { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-2); }
.policy summary { cursor: pointer; color: var(--es-paper); min-height: 44px; display: flex; align-items: center; }
/* Číslo karty a fakturačné údaje (iba s CONFIG.apiBase, balíky 3 h / 5 h) */
.field > .step-hint { margin: 0; }
.input--card { max-width: 14ch; letter-spacing: .12em; }
.bill > summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: var(--fw-body-medium); font-size: .9375rem; list-style: none; border-radius: var(--r-sm); }
.bill > summary::-webkit-details-marker { display: none; }
.bill > summary::before { content: "▸"; display: inline-block; margin-right: var(--sp-2); color: var(--es-led); transition: transform var(--dur-ui); }
.bill[open] > summary::before { transform: rotate(90deg); }
.bill > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bill > .step-hint { margin: 0 0 var(--sp-4); }
/* Kalendár obsadenosti skúšobne (balíky 3 h / 5 h). Pás pod číslom = koľko začiatkov je voľných; vybraný deň = LED. */
.cal { max-width: 420px; margin: 0 0 var(--sp-5); padding: var(--sp-3); border: 1px solid var(--es-line); border-radius: var(--r-md); background: var(--es-panel); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cal-title { margin: 0; font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cal-nav { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-sm); border: 1px solid var(--es-line);
  background: var(--es-panel-raised); color: var(--text-1); cursor: pointer; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.cal-wd { margin-bottom: var(--sp-1); }
.cal-wd span { text-align: center; font: var(--fw-mono) .75rem/1.6 var(--ff-mono); color: var(--text-3); }
.cal-day { position: relative; min-height: 44px; min-width: 0; padding: 0 0 8px; border-radius: var(--r-sm); border: 1px solid var(--es-line);
  background: var(--es-panel-raised); color: var(--text-1); font: var(--fw-mono) .9375rem/1 var(--ff-mono); cursor: pointer; }
.cal-day--out { border: 0; background: none; }
.cal-day::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 3px; border-radius: 2px; }
.cal-day--free::after { background: var(--es-steel-light); }
.cal-day--partial::after { background: linear-gradient(90deg, var(--es-steel-light) 0 50%, var(--es-steel-dark) 50%); }
.cal-day--full, .cal-day--past { background: transparent; color: var(--text-3); cursor: default; }
.cal-day--full .cal-n { text-decoration: line-through; }
.cal-day--full { border-style: dashed; border-color: var(--es-steel-dark); }
.cal-day--past { border-color: transparent; }
.cal-day.is-today { border-color: var(--es-steel-dark); }
.cal-day[aria-pressed="true"] { border: 2px solid var(--es-led); color: var(--es-led); }
.cal-day:not(:disabled):hover { border-color: var(--es-steel); }
.cal-day:focus-visible, .cal-nav:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.cal[aria-busy="true"] .cal-grid { opacity: .55; }
.cal-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0 0; padding: 0; font-size: var(--fs-small); color: var(--text-2); }
.cal-legend li { display: flex; align-items: center; gap: var(--sp-2); }
.cal-key { width: 18px; height: 3px; border-radius: 2px; }
.cal-key--free { background: var(--es-steel-light); }
.cal-key--partial { background: linear-gradient(90deg, var(--es-steel-light) 0 50%, var(--es-steel-dark) 50%); }
.cal-key--full { background: none; border-top: 1px dashed var(--es-steel-dark); height: 0; }
.cal .step-hint { margin-top: var(--sp-2); }
/* Kto platí: súkromná osoba / firma alebo SZČO (iba s CONFIG.apiBase) */
.payer-opts { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .payer-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.payer .check { align-items: center; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--es-steel-dark); background: var(--es-panel-raised); }
.payer .check:has(input:checked) { border-color: var(--es-led); }
.payer .check input { width: 20px; height: 20px; }
.payer .check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.booking-side { display: grid; gap: var(--sp-5); min-width: 0; }
.summary { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--es-panel); border: 1px solid var(--es-line); }
.summary dl { margin: 0; display: grid; gap: 0; }
.summary .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--es-line); }
.summary dt { font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.summary dd { margin: 0; font-weight: var(--fw-body-medium); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary .row--total { border-bottom: 0; padding-top: var(--sp-3); }
.summary .row--total dd { font: var(--fw-mono) var(--fs-price)/1.1 var(--ff-mono); color: var(--es-led); }
.summary .row--total dd small { font-size: var(--fs-price-unit); }
.summary .seg-list { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.summary .row--free { border-bottom: 0; padding-top: var(--sp-3); }
.summary .row--free dd { font: var(--fw-mono) 1.375rem/1.2 var(--ff-mono); color: var(--es-steel-light); }
/* Pripomienka: vlastný mikrofón a slúchadlá (skúšobňa) */
.bring { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--es-shaft); border: 1px dashed var(--es-steel-dark); font-size: var(--fs-small); color: var(--text-1); }
.bring .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--es-steel-light); }
.bring p { margin: 0; }
.bring strong { display: block; font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: 2px; }
.bring--card { margin: 0; }
.bring--free { margin: 0; justify-self: start; }   /* cenník: káva, čaj a voda zdarma */
.summary-empty { color: var(--text-2); margin: 12px 0 0; font-size: .9375rem; }
.submit-box { display: grid; gap: var(--sp-3); }
.submit-box .btn-cta { width: 100%; }
.form-error { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--es-loud); background: rgba(255,77,94,.08); }
.overrun { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--es-shaft); border: 1px dashed var(--es-steel-dark); color: var(--text-1); font-size: var(--fs-small); margin-top: var(--sp-3); }

.pay { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--es-panel); border: 2px solid var(--es-led); display: grid; gap: var(--sp-4); }
.pay--edu { border-color: var(--es-steel); }
.pay:focus { outline: none; }
.qr-wrap { position: relative; width: 100%; max-width: 300px; margin-inline: auto; }
.qr-box { background: #FFFFFF; padding: 14px; border-radius: var(--r-md); aspect-ratio: 1; }
.qr-box svg { width: 100%; height: 100%; }
.qr-placeholder { aspect-ratio: 1; border-radius: var(--r-md); background: var(--es-panel-raised); border: 2px dashed var(--es-steel-dark); display: grid; place-items: center;
  padding: var(--sp-5); text-align: center; color: var(--text-2); font-weight: var(--fw-body-medium); }
.qr-placeholder .ic { display: block; margin: 0 auto var(--sp-3); width: 40px; height: 40px; color: var(--es-steel-dark); }
.test-band { position: absolute; left: -6px; right: -6px; top: 50%; transform: translateY(-50%) rotate(-6deg); background: var(--es-loud); color: var(--es-ink);
  text-align: center; font: var(--fw-mono) 1rem/1 var(--ff-mono); letter-spacing: .14em; padding: 8px 0; box-shadow: 0 2px 0 rgba(0,0,0,.4); opacity: .92; }
.pay-rows { display: grid; gap: var(--sp-2); margin: 0; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; padding: 10px 0; border-bottom: 1px solid var(--es-line); }
.pay-row dt { font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pay-row dd { margin: 0; font: var(--fw-mono) 1rem/1.35 var(--ff-mono); overflow-wrap: anywhere; min-width: 0; }
.pay-row dd.amount { color: var(--es-led); font-size: 1.25rem; }
.pay-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pay .btn-cta { width: 100%; }
.send-box { display: grid; gap: var(--sp-3); }
.warn { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-md); background: var(--es-shaft); border: 2px solid var(--es-led); }
.warn .ic { color: var(--es-led); margin-top: 2px; }
.warn strong { display: block; margin-bottom: 4px; }
.ok { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-md); background: var(--es-shaft); border: 1px solid var(--es-line); }
.ok .ic { color: var(--es-led); margin-top: 2px; }
.ok--edu .ic { color: var(--es-steel-light); }
.ok strong { display: block; margin-bottom: 2px; }
.send-status { font-size: var(--fs-small); color: var(--text-2); margin: 0; }
.demo-bar { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--es-loud); color: var(--es-ink); font: var(--fw-mono) .875rem/1.4 var(--ff-mono); }
.demo-bar ul { margin: 6px 0 0; padding-left: 18px; }
@media (min-width: 1024px) {
  .booking { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .booking-fields { grid-column: 1 / span 7; }
  .booking-side { grid-column: 8 / span 5; position: sticky; top: 88px; }
  .booking-side:has(.pay:not([hidden])) { position: static; }
}

/* ================= GALÉRIA ================= */
/* Profi fotky (Foto © Peter Gall) celé, bez pevných výrezov a bez filtra .ph-real. Mriežka: mobil 2 stĺpce
   (prvá fotka cez celú šírku), od 768 px 3 stĺpce: prvá fotka 2 × 2, fotka na výšku 1 × 2. Poradie v HTML je
   zvolené tak, aby mriežka nemala diery (11 fotiek); pri inom počte skontroluj rozloženie. */
.gal-sub { margin: 0 0 var(--sp-3); }
.gal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--sp-2); }
.gal-grid > li { min-width: 0; display: grid; }
.gal-grid > .is-wide { grid-column: span 2; }
.g-item { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 0; background: var(--es-panel);
  cursor: zoom-in; border-radius: var(--r-md); text-align: left; }
.g-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.g-item:hover img { transform: scale(1.03); }
.g-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(11,12,14,.86); color: var(--es-paper); padding: 6px 10px; border-radius: var(--r-sm);
  font: var(--fw-mono) var(--fs-label)/1.2 var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
@media (max-width: 767px) { .gal-grid > li:not(.is-wide) .g-tag { left: 6px; bottom: 6px; padding: 4px 6px; font-size: .6875rem; letter-spacing: .06em; } }
@media (min-width: 768px) {
  .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .gal-grid > .is-wide { grid-row: span 2; }
  .gal-grid > .is-tall { grid-row: span 2; }
  .gal-grid > .is-wide .g-item, .gal-grid > .is-tall .g-item { aspect-ratio: auto; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .g-item img { transition: none; } .g-item:hover img { transform: none; } }
.gal-soon { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-6) 0 0; padding: var(--sp-4); border: 1px dashed var(--es-line); border-radius: var(--r-md); max-width: 640px; }
.gal-soon p { margin: 0; color: var(--text-2); }
.gal-soon strong { display: block; color: var(--es-paper); }
.gal-credit { margin: var(--sp-5) 0 0; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; color: var(--es-paper); }
.lightbox::backdrop { background: rgba(11,12,14,.9); }
.lb-inner { position: relative; display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-8) var(--sp-4) var(--sp-4); }
.lb-close { position: absolute; top: var(--sp-3); right: var(--sp-4); }
.lb-stage { position: relative; }
.lb-fig { margin: 0; }
.lb-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--es-line); border-radius: var(--r-pill); background: rgba(11,12,14,.78); color: var(--es-paper); cursor: pointer; }
.lb-nav:hover { border-color: var(--es-steel); }
.lb-prev { left: var(--sp-2); }
.lb-next { right: var(--sp-2); }
.lb-nav[hidden] { display: none; }
.lb-cap { margin: 0; font-size: var(--fs-small); color: var(--text-2); text-align: center; max-width: 60ch; }
.lb-count { white-space: nowrap; color: var(--es-steel); }

/* ================= DOMÁCA SCÉNA ================= */
.scene-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.oznam { background: var(--es-steel-brushed); padding: var(--sp-4); border-radius: var(--r-md); max-width: 420px; }
.oznam-paper { position: relative; background: var(--es-paper); color: var(--es-ink); border-radius: var(--r-sm); padding: var(--sp-5); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.oznam-paper .h { font: var(--fw-display) 1.75rem/1 var(--ff-display); border-bottom: 4px solid var(--es-ink); padding-bottom: 6px; margin-bottom: var(--sp-3); letter-spacing: .02em; }
.oznam-paper .t { font: var(--fw-display-alt) 2rem/1.05 var(--ff-display); margin: 0; }
.oznam-paper .rev { margin: var(--sp-4) 0 0; font: var(--fw-mono) .8125rem/1.3 var(--ff-mono); color: var(--es-steel-ink); }
@media (min-width: 1024px) { .scene-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* ================= FAQ ================= */
.faq { display: grid; gap: var(--sp-3); max-width: 860px; }
.faq details { border-radius: var(--r-md); background: var(--es-panel); border: 1px solid var(--es-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px;
  padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-body-bold); font-size: 1.0625rem; border-radius: var(--r-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▸"; color: var(--es-led); transition: transform var(--dur-ui); flex: none; }
.faq details[open] summary::after { transform: rotate(90deg); }
.faq .a { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-2); }
.faq .a a { color: var(--es-paper); }

/* ================= PÄTA ================= */
.footer-band { height: 8px; background: var(--es-checker-hi); }
.site-footer { background: var(--es-shaft); padding-block: var(--sp-8) var(--sp-7); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.footer-logo { width: 200px; height: auto; }
.footer-col h2 { font-size: 1.5rem; margin-bottom: var(--sp-3); }
.footer-col address { font-style: normal; line-height: 1.6; margin-bottom: var(--sp-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-col a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--btn-min); color: var(--es-paper); text-underline-offset: 3px; }
.footer-meta { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--es-line); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  justify-content: space-between; font-size: var(--fs-small); color: var(--text-2); }
.footer-meta .lbl--led { font-size: var(--fs-label); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= STICKY LIŠTA (mobil) ================= */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 0 var(--page-pad); background: rgba(28,30,34,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--es-line); transition: transform var(--dur-ui), opacity var(--dur-ui); }
.sticky-bar .sb-price { font: var(--fw-mono) .9375rem/1.2 var(--ff-mono); color: var(--es-led); white-space: nowrap; }
.sticky-bar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
body { padding-bottom: 64px; }
@media (min-width: 768px) { .sticky-bar { display: none; } body { padding-bottom: 0; } }

/* MEMES:CSS · sekcia „Naše memes“ (generuje _build/memes/build.py) */
.memes-ai { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); max-width: 72ch; color: var(--text-2); font-size: var(--fs-small, .9rem); }
.memes-ai-badge { flex: none; padding: 4px 10px; border: 2px solid var(--es-led); border-radius: 8px; font: var(--fw-mono, 700) .78rem/1.2 var(--ff-mono); letter-spacing: .12em; color: var(--es-paper); background: var(--es-panel); }
.memes-group { margin-top: var(--sp-5); border-top: 1px solid var(--es-line); }
.memes-group > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; cursor: pointer; list-style: none; }
.memes-group > summary::-webkit-details-marker { display: none; }
.memes-group > summary::before { content: "▸"; color: var(--es-led); transition: transform .2s; }
.memes-group[open] > summary::before { transform: rotate(90deg); }
.memes-group-h { font: 900 clamp(1.4rem, 1rem + 1.4vw, 2rem)/1 var(--ff-display); text-transform: uppercase; }
.memes-grid { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.memes-grid--stories { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.meme-card { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.meme-thumb { display: block; border-radius: var(--r-md, 10px); overflow: hidden; border: 1px solid var(--es-line); background: var(--es-panel); }
.meme-thumb img { display: block; width: 100%; height: auto; }
.meme-thumb:focus-visible { outline: 3px solid var(--es-led); outline-offset: 2px; }
.meme-title { margin: 0; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; }
.meme-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-sec--sm { min-height: 36px; padding: 6px 12px; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .memes-group > summary::before { transition: none; } }
/* /MEMES:CSS */

/* Projekty: karty kapiel a projektov z Elevatoru (vonkajšie weby). Vybraná karta (hover, fokus) = LED, ako aktívny stav. */
.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.project { display: grid; gap: var(--sp-2); height: 100%; padding: var(--sp-5); border: 1px solid var(--es-line); border-radius: var(--r-md);
  background: var(--es-shaft); color: var(--text-1); text-decoration: none; transition: border-color var(--dur-ui), transform var(--dur-ui); }
.project:hover { border-color: var(--es-led); transform: translateY(-2px); }
.project:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.project-name { font: var(--fw-display) var(--fs-h3)/1.1 var(--ff-display); }
.project-desc { color: var(--text-2); }
.project-url { margin-top: var(--sp-1); font: var(--fw-mono) var(--fs-label)/1.3 var(--ff-mono); letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { .project { transition: none; } .project:hover { transform: none; } }

/* ================= PREDREGISTRÁCIA (18. 10. 2026, kým je rezervácia vypnutá) ================= */
.prereg { display: grid; gap: var(--sp-4); max-width: 760px; }
.prereg-actions { margin-top: var(--sp-2); }
.prereg .small { margin: 0; }
.prereg .notice { margin-top: var(--sp-2); }