/* Masáže Oblázek – ukázkový web FORMA (smyšlený podnik). Identita: věž z kamenů, šířka kamene = délka masáže. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/albert-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/albert-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --sand:#ECE6DA; --sand-d:#DFD7C6; --papir:#F6F2E8;
  --ink:#1D2124; --ink-2:#4A5155;
  --modr:#0B6A8F; --modr-l:#7CC8E6;
  --zar:#A63C16; --zar-h:#8A3012; --zar-l:#F08A57;
  --cedic:#1D2124; --cedic-2:#2A3034; --cedic-cara:#3A4348; --cedic-2t:#B9C0C4;
  --focus:#0B6A8F;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Albert Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:106.25%;-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--sand);color:var(--ink);font:400 1rem/1.55 var(--sans);overflow-x:clip}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0}
p{margin:0}
a{color:var(--modr);text-underline-offset:.15em}
a:hover{color:var(--ink)}
.on-dark a{color:var(--modr-l)}
.on-dark a:hover{color:#fff}
img,svg{max-width:100%}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4.4vw,2rem)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.on-dark{--focus:var(--modr-l)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:30;background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:8px;text-decoration:none}
.skip:focus{top:.5rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- tlačítka ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.55rem 1.25rem;border-radius:999px;border:2px solid transparent;font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-velke{min-height:3.4rem;padding-inline:1.6rem;font-size:1.05rem}
.btn-mini{min-height:2.75rem;padding:.4rem 1rem}
.btn-zar{background:var(--zar);color:#fff}
.btn-zar:hover{background:var(--zar-h);color:#fff}
.on-dark .btn-zar{background:var(--zar-l);color:var(--cedic)}
.on-dark .btn-zar:hover{background:#F6A47C;color:var(--cedic)}
.btn-linka{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-linka:hover{background:var(--ink);color:var(--sand)}
.ico{width:1.2rem;height:1.2rem;fill:currentColor;flex:none}
.cislo{white-space:nowrap}

/* ---------- hlavička ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--sand);border-bottom:1.5px solid rgba(29,33,36,.14)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.9rem}
.znacka{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.znacka:hover{color:var(--ink)}
.znacka-kameny{width:2.3rem;height:2.3rem;flex:none}
.znacka-kameny .z1{fill:#3E474C}.znacka-kameny .z2{fill:#535D63}.znacka-kameny .z3{fill:var(--zar)}
.znacka-nazev{font:400 1.7rem/1 var(--serif);letter-spacing:.04em}
.nav{display:none}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:.5rem .1rem}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* ---------- úvod ---------- */
h1{margin-top:.7rem;font-size:clamp(2.7rem,11.4vw,5.3rem);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
h1 em{font-style:normal;color:var(--zar)}
.lede{margin-top:1.1rem;font-size:1.1rem;max-width:34rem}
.cta{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem}
.pozn{margin-top:.9rem;font-size:.92rem;color:var(--ink-2)}
.stav{margin-top:1.4rem;display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;border:1.5px solid var(--ink);border-radius:14px;max-width:34rem}
.stav-bod{flex:none;width:.95rem;height:.95rem;margin-top:.32rem;border-radius:50%;border:2px solid var(--ink-2);background:transparent}
.stav[data-stav="open"] .stav-bod{background:var(--modr);border-color:var(--modr)}
.stav-h{font-weight:600}
.stav-s{font-size:.9rem;color:var(--ink-2)}

/* ---------- ukázka FORMA: smyšlené číslo a vysvětlení ---------- */
.fake{font-size:1rem;color:var(--ink-2)}
.hero-fake{margin-top:.6rem}
.pop{max-width:min(27rem,calc(100vw - 2rem));padding:1.4rem 1.4rem 1.5rem;border:0;border-radius:18px;color:var(--ink);background:var(--papir);box-shadow:0 30px 60px -20px rgba(29,33,36,.6)}
.pop::backdrop{background:rgba(29,33,36,.66)}
.pop h2{font-size:clamp(1.9rem,7vw,2.3rem);margin:0 0 .7rem}
.pop p{margin:0 0 1.2rem}
.pop .btn{width:100%}
/* náhrada bez popover (Safari < 17): okno a ztmavení přepíná třída is-open; bez :popover-open, aby starý prohlížeč pravidlo nezahodil */
.pop-fb{display:none;position:fixed;top:50%;left:50%;z-index:100;width:27rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);overflow:auto;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.pop-fb.is-open{display:block}
.pop-shade{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background:rgba(29,33,36,.66)}
.pop-shade.is-open{display:block}

/* ---------- spodní polovina: pomalý rytmus, hodně prostoru, pohyb jen ve scéně s věží ---------- */
:root{--voda:#0D4F68;--okraj:clamp(1.15rem,4.4vw,4rem);--vyska:100vh}
@supports (height:100svh){:root{--vyska:100svh}}
.on-dark .fake{color:var(--cedic-2t)}
.on-dark .btn-linka{color:var(--sand);border-color:var(--sand)}
.on-dark .btn-linka:hover{background:var(--sand);color:var(--cedic)}

/* hlavička na stejném okraji jako obsah; přebírá barvu pásu, přes který jede */
.top .wrap{max-width:none;padding-inline:var(--okraj)}
.top[data-hlava="tma"]{background:var(--cedic)}
.top[data-hlava="voda"]{background:var(--voda)}
.top[data-hlava="tma"],.top[data-hlava="voda"]{border-bottom-color:transparent;--focus:var(--modr-l)}
.top[data-hlava="tma"] .znacka,.top[data-hlava="voda"] .znacka,.top[data-hlava="tma"] .nav a,.top[data-hlava="voda"] .nav a{color:var(--sand)}
.top[data-hlava="tma"] .znacka-kameny .z1,.top[data-hlava="voda"] .znacka-kameny .z1{fill:#8F979A}
.top[data-hlava="tma"] .znacka-kameny .z2,.top[data-hlava="voda"] .znacka-kameny .z2{fill:#B4BBBF}
.top[data-hlava="tma"] .znacka-kameny .z3,.top[data-hlava="voda"] .znacka-kameny .z3{fill:var(--zar-l)}
.top[data-hlava="tma"] .btn-zar,.top[data-hlava="voda"] .btn-zar{background:var(--zar-l);color:var(--cedic)}
.top[data-hlava="tma"] .btn-zar:hover,.top[data-hlava="voda"] .btn-zar:hover{background:#F6A47C;color:var(--cedic)}

/* dech mezi úvodem a věží: velká věta a prázdno */
.dech-pas{padding:clamp(6.5rem,26vh,14rem) var(--okraj)}
.dech-veta{font:400 clamp(2.5rem,6.2vw,5.9rem)/1.04 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.dech-pod{margin-top:clamp(3rem,10vh,6.5rem);display:grid;gap:1.6rem}
.dech-pod .lede{margin:0;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;max-width:31rem}
.dech-pod .cta{margin-top:0}
.dech-pod .pozn{margin:0;font-size:1rem;max-width:31rem}

/* výběr: pódium s věží, hotová kompozice bez sticky */
.vyber{position:relative;background:var(--cedic);color:var(--sand)}
.v-kotva{position:absolute;top:0;left:0;width:1px;height:1px}
.podium{--u:calc((100vw - 2rem)/110);--zem:2.2rem;--rez:15.6rem;--j:calc((var(--vyska) - 3.4rem - var(--rez) - var(--zem))/689);
  position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:var(--vyska);padding:calc(3.4rem + .7rem) 1rem 0}
.vyber h2{font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.05}
.p-lev{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.2rem;align-items:center}
.p-hlava{grid-column:2;grid-row:1;display:grid}
.p-hlava>*{grid-area:1/1;align-self:center}
.p-veta{font-size:1rem;line-height:1.3;color:var(--cedic-2t);text-wrap:balance}
.p-min{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:.35rem;font:400 clamp(3.9rem,20vw,5rem)/.92 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums}
.p-jed{font-size:.3em;letter-spacing:0}
.filtry{grid-column:1/-1;min-width:0}
.filtr{border:0;margin:0;padding:0;min-width:0}
.f-pop{display:block;font-weight:600;color:var(--sand)}
.f-cas .f-pop,.f-cast .f-pop{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pilulky{display:flex;flex-wrap:wrap;gap:.35rem}
.pilulka{position:relative;display:block}
.pilulka input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.pilulka span{display:flex;align-items:center;min-height:2.45rem;padding:.3rem .78rem;border-radius:999px;border:1.5px solid #6D7A82;color:var(--sand);font-weight:500;transition:background-color .15s,color .15s,border-color .15s}
.pilulka:hover span{border-color:var(--sand)}
.pilulka input:checked+span{background:var(--sand);color:var(--cedic);border-color:var(--sand);font-weight:600}
.pilulka input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.vysledek-filtru{margin-top:.4rem;font-weight:600;min-height:1.55em}
.bez-js{display:none}
html:not(.js) .bez-js{display:block;grid-column:1/-1;margin:.8rem 0 2rem;color:var(--cedic-2t)}
html:not(.js) .p-min,html:not(.js) .filtry,html:not(.js) .p-pra{display:none}
html:not(.js) .kamen{pointer-events:none}

/* posuvník minut: palec je oblázek */
.rozsah{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2.75rem;margin:0;background:transparent;cursor:grab;touch-action:pan-y}
.rozsah:active{cursor:grabbing}
.rozsah::-webkit-slider-runnable-track{height:.3rem;border-radius:99px;background:linear-gradient(90deg,#9AA3A8 var(--p,100%),var(--cedic-cara) var(--p,100%))}
.rozsah::-moz-range-track{height:.3rem;border-radius:99px;background:linear-gradient(90deg,#9AA3A8 var(--p,100%),var(--cedic-cara) var(--p,100%))}
.rozsah::-webkit-slider-thumb{-webkit-appearance:none;width:3.3rem;height:1.9rem;margin-top:-.8rem;border:0;border-radius:54% 46% 48% 52%/64% 60% 40% 36%;background:var(--zar-l);box-shadow:inset 0 -.28rem 0 rgb(0 0 0 / .16)}
.rozsah::-moz-range-thumb{width:3.3rem;height:1.9rem;border:0;border-radius:54% 46% 48% 52%/64% 60% 40% 36%;background:var(--zar-l);box-shadow:inset 0 -.28rem 0 rgb(0 0 0 / .16)}
.rozsah:focus-visible{outline:none}
.rozsah:focus-visible::-webkit-slider-thumb{outline:3px solid var(--focus);outline-offset:3px}
.rozsah:focus-visible::-moz-range-thumb{outline:3px solid var(--focus);outline-offset:3px}

/* věž: šířka kamene = délka masáže, přesně úměrně */
.p-str{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:var(--zem);min-height:0}
.vez{position:relative;list-style:none;margin:0;padding:0;width:calc(110*var(--u))}
.radek{position:relative;height:calc(var(--h)*var(--j));margin-top:calc(5*var(--j)*-1)}
.radek:first-child{margin-top:0}
.r0{--m:25;--h:53;--dx:-0.14;z-index:11}
.r1{--m:30;--h:55;--dx:0.18;z-index:10}
.r2{--m:35;--h:57;--dx:1.27;z-index:9}
.r3{--m:55;--h:64;--dx:-0.10;z-index:8}
.r4{--m:55;--h:64;--dx:0.02;z-index:7}
.r5{--m:65;--h:67;--dx:0.26;z-index:6}
.r6{--m:70;--h:69;--dx:-0.95;z-index:5}
.r7{--m:75;--h:71;--dx:0.04;z-index:4}
.r8{--m:85;--h:75;--dx:0.39;z-index:3}
.r9{--m:100;--h:80;--dx:0.88;z-index:2}
.r10{--m:110;--h:84;--dx:-1.22;z-index:1}
.kamen{display:flex;justify-content:center;width:100%;height:100%;padding:0;background:none;border:0;border-radius:2.5rem;color:inherit;font:inherit;cursor:pointer}
.kamen:disabled{cursor:default}
.kamen:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.k-obr{position:relative;display:block;width:calc(var(--m)*var(--u));height:100%;translate:calc(var(--dx)*var(--u)) 0;transition:transform .25s}
.kamen:not(:disabled):hover .k-obr{transform:translateY(-3px)}
.k-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.k-t0{fill:url(#gk0)}.k-t1{fill:url(#gk1)}.k-t2{fill:url(#gk2)}.k-t3{fill:url(#gk3)}.k-t4{fill:url(#gk4)}
.k-t0,.k-t1,.k-t2,.k-t3,.k-t4{stroke:rgb(255 255 255 / .1);stroke-width:1;vector-effect:non-scaling-stroke}
.k-zs,.k-zt{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.k-zs{stroke:#F4EFE4;stroke-opacity:.26;stroke-width:1.5}
.k-zt{stroke:#14181A;stroke-opacity:.3;stroke-width:1.9}
.k-sp{fill:url(#gs)}
.k-le{fill:url(#gl)}
.k-zi{fill:none;stroke:#EFEADF;stroke-opacity:.36;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.k-stin{fill:url(#gt)}
.k-zar{fill:url(#gkz);opacity:0;transition:opacity .45s}
.k-min{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.14em;font-size:.82rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .55);white-space:nowrap;pointer-events:none;transition:opacity .3s}
.k-min b{font:400 1.2rem/1 var(--serif)}
.podium[data-faze="vyber"] .is-off .k-min{opacity:0}
.podium[data-faze="vyber"] .is-vybrany .k-zar{opacity:1}
.podium[data-faze="vyber"] .is-vybrany .k-min{color:var(--cedic);text-shadow:none}

/* dech: kruh se nadechne a vydechne, z výdechu je první kámen */
.dech{display:none;position:absolute;inset:0 0 var(--zem);place-items:center;pointer-events:none}
.dech>*{grid-area:1/1}
.dech-kruh{width:min(66vmin,31rem);aspect-ratio:1;border-radius:50%;background:var(--cedic-2)}
.dech-slovo{position:relative;z-index:1;font:400 clamp(2.2rem,4.4vw,3.8rem)/1 var(--serif);letter-spacing:-.01em}

/* popisek kamene během stavby */
.p-popis{display:none}
.p-nazev{font:400 clamp(1.7rem,7vw,2.3rem)/1.05 var(--serif)}
.p-cast{margin-top:.2rem;color:var(--cedic-2t);font-size:1.05rem}
.p-cena{margin-top:.25rem;font:400 clamp(1.7rem,7vw,2.3rem)/1.05 var(--serif);color:var(--zar-l)}

/* lístek: na telefonu přes ovládání nad věží (kámen zůstává vidět), na počítači papír vedle věže */
.listek{position:absolute;left:.55rem;right:.55rem;top:calc(3.4rem + .35rem);z-index:15;padding:.8rem 1rem .7rem;background:var(--sand);color:var(--ink);border-radius:1.05rem}
.l-zavrit{position:absolute;top:.2rem;right:.2rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);font:400 1.9rem/1 var(--sans);cursor:pointer}
.l-zavrit:hover{background:var(--sand-d)}
.l-nazev{padding-right:2.4rem;font-size:1.8rem}
.l-skup{margin-top:.15rem;color:var(--ink-2)}
.l-udaje{margin:.45rem 0 0;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:.2rem 1.15rem}
.l-udaje div{min-width:0}
.l-udaje dt{font-size:.9rem;color:var(--ink-2)}
.l-udaje dd{margin:0;font:400 1.6rem/1.1 var(--serif);color:var(--zar);white-space:nowrap}
.l-udaje .l-siroke dd{font:500 1rem/1.25 var(--sans);color:var(--ink);white-space:normal}
.l-pozn{display:none}
.l-akce{margin-top:.55rem}
.listek .btn-zar{width:100%;background:var(--zar);color:#fff}
.listek .btn-zar:hover{background:var(--zar-h);color:#fff}
.l-fake{margin-top:.2rem;text-align:center}
.l-fake .fake{color:var(--ink-2)}
.l-napoveda{display:none}

/* scéna: pódium drží, fáze přepínají, co je vidět. Jen se zapnutým pohybem, skriptem a na dost vysokém okně (telefon na šířku má hotovou věž). */
@media (prefers-reduced-motion:no-preference) and (min-height:481px){
  .js .vyber{height:calc(var(--vyska)*5)}
  .js .v-kotva{top:calc(var(--vyska)*3.7 + 4.5rem)}
  .js .podium{position:sticky;top:0;height:var(--vyska)}
  .js .radek{will-change:transform,opacity}
  .js .dech-kruh{will-change:transform,opacity}
  .js .podium[data-faze="dech"] .dech,.js .podium[data-faze="stavba"] .dech{display:grid}
  .js .podium:not([data-faze="vyber"]) .kamen{pointer-events:none}
  .js .podium:not([data-faze="vyber"]) .p-popis{display:block}
  .js .podium[data-faze="dech"] .p-lev,.js .podium[data-faze="dech"] .p-popis{opacity:0}
  /* skrývají se .filtr a .vysledek-filtru, ne obal .filtry: na nízkém telefonu má obal display:contents a průhlednost obalu by na nic nepůsobila */
  .js .podium:not([data-faze="vyber"]) h2,.js .podium:not([data-faze="vyber"]) .filtr,.js .podium:not([data-faze="vyber"]) .vysledek-filtru,
  .js .podium:not([data-faze="vyber"]) .listek,.js .podium:not([data-faze="vyber"]) .l-napoveda{opacity:0;pointer-events:none}
  .js .podium h2,.js .podium .filtr,.js .podium .vysledek-filtru,.js .podium .listek,.js .podium .l-napoveda,.js .podium .p-veta{transition:opacity .7s}
  .js .podium[data-faze="vyber"] .p-veta{opacity:0}
  .js .listek{animation:listek .35s cubic-bezier(.22,.61,.36,1)}
  @keyframes listek{from{opacity:0;transform:translateY(-.8rem)}}
}
.p-popis{position:absolute;left:1rem;right:1rem;top:calc(3.4rem + 6rem)}
@media (prefers-reduced-motion:reduce),(max-height:480px){.p-veta{display:none}.dech{display:none}}
@media (max-width:999px){
  .podium:has(.listek:not([hidden])) .vysledek-filtru{opacity:0;transition:none}
  /* popis kamene naskočí hned na stejném místě, filtry se nesmějí přes něj pomalu rozplývat */
  .js .podium:not([data-faze="vyber"]) .filtr,.js .podium:not([data-faze="vyber"]) .vysledek-filtru{transition-duration:.15s}
  /* řádek s větou má stálou výšku: skrytá věta se na úzkém telefonu láme podle číslic minut a filtry by poskakovaly a vjížděly do věže */
  .js .p-hlava{height:2.6rem;align-content:center}
}
/* nízký telefon (iPhone s lištami Safari): posuvník se vejde vedle čísla, kameny zůstanou co nejvyšší */
@media (max-width:999px) and (max-height:720px){
  .podium{--rez:14.1rem}
  .p-min{grid-row:1/3}
  .filtry{display:contents}
  .f-cas{grid-column:2;grid-row:2}
  .f-cast,.vysledek-filtru{grid-column:1/-1}
  .f-cast{margin-top:.3rem}
  .vysledek-filtru{margin-top:.1rem}
  /* třetí řádek věty jde dolů přes volné místo po posuvníku, ne nahoru pod hlavičku */
  .js .p-hlava{position:relative}
  .js .p-veta{position:absolute;inset:0 0 auto}
}
@media (max-height:480px){.podium{--j:.62px;min-height:0}}
@media (max-width:379px){.pilulky{gap:.3rem}.pilulka span{padding-inline:.58rem}}
html:not(.js) .p-hlava{grid-column:1/-1}
html:not(.js) .p-hlava>*{grid-area:auto}
html:not(.js) .p-veta{display:block;margin-top:.5rem}

/* ceník: řádky podle času, velká typografie, žádná tabulka v rámečku */
.cenik{background:var(--papir);padding:clamp(6rem,20vh,11.5rem) var(--okraj) clamp(5rem,15vh,9rem)}
.cenik h2{font-size:clamp(3rem,7.4vw,7rem);line-height:1;letter-spacing:-.022em;text-wrap:balance;max-width:15ch}
.tabulka{display:block;margin-top:clamp(3.5rem,11vh,7rem);border-collapse:collapse}
.tabulka tbody{display:block;padding-block:clamp(1.8rem,4vh,3rem)}
.tabulka tr{display:grid;grid-template-columns:minmax(0,1fr) auto 6.3rem;column-gap:1rem;align-items:baseline;padding-block:.6rem}
.tabulka th,.tabulka td{padding:0;font-weight:400;text-align:left}
.tabulka tr>th[scope="row"]{grid-column:1/-1}
.tabulka tr td{font:400 1.75rem/1.1 var(--serif);white-space:nowrap}
.tabulka tr td:first-of-type{grid-column:1;color:var(--ink-2)}
.tabulka tr td:last-child{grid-column:3;text-align:right;color:var(--zar)}
.t-skup{display:block!important;padding-block:0 .8rem!important}
.t-skup th{display:block}
.t-nazev{display:block;font:400 clamp(2.5rem,4.8vw,4.5rem)/1 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.t-rozsah{display:block;margin-top:.4rem;color:var(--ink-2)}
.t-jm{display:block;font:400 1.85rem/1.1 var(--serif);color:var(--ink)}
.t-var{display:block;margin-top:.12rem;color:var(--ink-2)}
.cenik-pozn{margin-top:1.6rem;color:var(--ink-2)}

/* poukaz: pás vody přes celou šířku, formulář je věta */
.poukaz{position:relative;overflow:hidden;background:var(--voda);color:#fff;padding:clamp(6rem,18vh,11rem) var(--okraj);--pole:#fff}
.vlny{position:absolute;top:-34%;right:-38%;width:min(135vw,74rem);height:auto;fill:none;stroke:#fff;stroke-opacity:.13;stroke-width:1.4;pointer-events:none}
.poukaz-text{position:relative}
.poukaz h2{font-size:clamp(2.2rem,10.8vw,3.4rem);line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
.poukaz-text p{margin-top:1.7rem;max-width:37rem;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.45;color:#DCEBF1}
.poukaz-form{position:relative;margin-top:clamp(3.5rem,10vh,6rem);display:grid;gap:2rem}
.pole{border:0;padding:0;margin:0;min-width:0}
.poukaz legend{padding:0;margin-bottom:.9rem;font:400 clamp(1.8rem,3vw,2.6rem)/1.15 var(--serif)}
.povinne{color:#FFC4A8}
.poukaz .pilulka span{border-color:rgb(255 255 255 / .55);color:#fff;min-height:2.9rem;padding-inline:1.05rem}
.poukaz .pilulka:hover span{border-color:#fff}
.poukaz .pilulka input:checked+span{background:#fff;color:var(--voda);border-color:#fff}
.veta{display:grid;gap:1.5rem}
.veta .pole{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.8rem}
.veta label,.veta-jed{font:400 clamp(1.8rem,3vw,2.6rem)/1.2 var(--serif);white-space:nowrap}
.veta input{flex:1 1 7rem;min-width:0;width:100%;min-height:3rem;padding:.1rem .15rem;border:0;border-bottom:2px solid rgb(255 255 255 / .6);border-radius:0;background:transparent;color:#fff;font:400 clamp(1.8rem,3vw,2.6rem)/1.2 var(--serif)}
.veta input:hover{border-bottom-color:#fff}
.veta input[aria-invalid="true"]{border-bottom-color:#FFC4A8;border-bottom-width:3px}
.napoveda{margin-top:-1.2rem;color:#DCEBF1}
.chyba{margin-top:-1rem;font-weight:600;color:#FFD9C8}
.pole .chyba{margin-top:.7rem}
.poukaz-akce{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:.6rem}
.poukaz-pozn{color:#DCEBF1}
.vysledek{padding:1.2rem 1.4rem;border-radius:1rem;background:var(--papir);color:var(--ink)}
.vysledek:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.vysledek h3{font-size:2rem}
.vysledek p{margin-top:.5rem}

/* objednání: tři věty a hodiny */
.kontakt{background:var(--sand);padding:clamp(6rem,20vh,11.5rem) var(--okraj) clamp(6rem,18vh,10rem)}
.kontakt h2{font-size:clamp(3rem,7.4vw,7rem);line-height:1;letter-spacing:-.022em;text-wrap:balance;max-width:13ch}
.kroky{list-style:none;margin:clamp(3rem,9vh,6rem) 0 0;padding:0;counter-reset:krok;display:grid;gap:clamp(2.2rem,6vh,3.6rem)}
.kroky li{counter-increment:krok;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:.6rem;row-gap:.5rem;align-items:baseline}
.kroky li::before{content:counter(krok);font:400 clamp(2.1rem,4vw,3.6rem)/1.1 var(--serif);color:var(--zar)}
.krok-h{font:400 clamp(2.1rem,4vw,3.6rem)/1.1 var(--serif);letter-spacing:-.012em}
.kroky li p:last-child{grid-column:2;color:var(--ink-2);max-width:32rem}
.misto{margin-top:clamp(4.5rem,13vh,8rem);display:grid;gap:3.2rem}
.misto h3{font-size:clamp(1.9rem,3vw,2.5rem)}
.misto address{margin-top:1rem;font-style:normal;font-size:1.15rem;line-height:1.5}
.kontakt-misto{margin-top:.9rem;max-width:26rem;color:var(--ink-2)}
.hodiny{margin-top:.9rem;border-collapse:collapse;width:100%;max-width:34rem}
.hodiny th,.hodiny td{padding:.5rem 0;font-weight:400;text-align:left}
.hodiny th{padding-right:1rem}
.hodiny td{font:400 1.75rem/1.1 var(--serif);text-align:right;white-space:nowrap}
.hodiny tr.dnes th{font-weight:700}
.hodiny tr.dnes td{color:var(--zar)}
.hodiny tr.dnes th::before{content:'';display:inline-block;width:.62rem;height:.62rem;margin-right:.55rem;border-radius:50%;background:var(--zar);vertical-align:.08em}
.hodiny-zdroj{margin-top:.9rem;color:var(--ink-2)}

/* konec: velká věta, hlavní akce a poslední kámen */
.konec{position:relative;overflow:hidden;background:var(--cedic);color:var(--sand);padding:clamp(6rem,22vh,13rem) var(--okraj) 0;display:grid}
.konec-text{position:relative;z-index:1}
.konec h2{font-size:clamp(3.5rem,11.4vw,11.5rem);line-height:.96;letter-spacing:-.028em;max-width:9ch}
.konec-lede{margin-top:1.8rem;max-width:30rem;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.45;color:var(--cedic-2t)}
.konec-tl{list-style:none;margin:2.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.konec-fake{margin-top:.7rem}
.konec-kamen{position:relative;width:min(78%,24rem);aspect-ratio:620/262;margin:4rem auto 1rem}
.kk-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.kk-z1{fill:none;stroke:#EFEADF;stroke-opacity:.42;stroke-width:5;stroke-linecap:round}
.kk-svg .k-zs{stroke-width:2.2}
.kk-svg .k-zt{stroke-width:2.6}
.kk-svg .k-zi{stroke-width:1.5}
.kk-min{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.14em;color:#fff;text-shadow:0 1px 3px rgb(0 0 0 / .5);font-size:clamp(1rem,1.5vw,1.4rem);font-weight:600}
.kk-min b{font:400 2.1em/1 var(--serif)}

/* patička */
.pata{background:var(--cedic);color:var(--sand);padding:clamp(3rem,8vh,5rem) var(--okraj) 2.4rem;position:relative}
.pata-in{display:grid;gap:.5rem}
.pata-znacka{font:400 clamp(3.4rem,9vw,7rem)/1 var(--serif);letter-spacing:-.02em}
.pata-sub{color:var(--cedic-2t)}
.pata-koncept{margin-top:1.4rem;color:var(--cedic-2t);max-width:44rem}
.pata-zpet{margin-top:.5rem}
.pata .foot-back{font-weight:600}

/* ---------- větší displeje ---------- */
@media (min-width:700px){
  .nav{display:flex;gap:1.4rem}
}
@media (min-width:760px){
  .poukaz h2{font-size:clamp(3rem,7.4vw,7rem);line-height:1;max-width:13ch}
  .dech-pod{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem 4rem}
  .dech-pod .pozn{grid-column:1}
  .tabulka tr{grid-template-columns:minmax(0,1fr) 6.4rem 8rem}
  .tabulka tr>th[scope="row"]{grid-column:1}
  .tabulka tr td:first-of-type{grid-column:2;text-align:right}
  .tabulka tr td:last-child{grid-column:3}
  .veta{grid-template-columns:auto minmax(0,1fr);column-gap:2.6rem}
  .misto{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
  .konec{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:end;column-gap:clamp(2rem,5vw,5rem);padding-bottom:clamp(4rem,12vh,7rem)}
  .konec-kamen{width:100%;max-width:38rem;margin:0 0 1.6rem auto}
}
@media (min-width:1000px){
  .podium{--u:clamp(3.2px,.345vw,7.6px);--zem:3.3rem;--j:calc((var(--vyska) - 3.4rem - 1.8rem - var(--zem))/689);
    display:grid;grid-template-columns:minmax(0,1fr) calc(110*var(--u)) minmax(0,1fr);column-gap:clamp(1.5rem,3vw,3.4rem);padding:calc(3.4rem + 1.2rem) var(--okraj) 0}
  .vyber h2{font-size:clamp(2rem,2.8vw,3.7rem);white-space:nowrap}
  .p-lev{display:flex;flex-direction:column;justify-content:flex-start;gap:0;align-items:stretch;padding-top:clamp(.6rem,5vh,3.2rem);min-height:0}
  .p-veta{font-size:1.2rem;line-height:1.35;max-width:19rem;grid-row:1}
  .p-min{margin-top:.5rem;font-size:clamp(7rem,min(13.4vw,var(--vyska)*.23),13rem);line-height:.9}
  .p-jed{font-size:.2em}
  .filtry{margin-top:.7rem}
  .f-cas .f-pop{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;font-weight:500;color:var(--cedic-2t)}
  .f-cast{margin-top:1.1rem}
  .f-cast .f-pop{position:static;width:auto;height:auto;margin:0 0 .6rem;overflow:visible;clip:auto;white-space:normal;font-weight:500;color:var(--cedic-2t)}
  .vysledek-filtru{margin-top:1rem}
  .k-min{font-size:.95rem}
  .k-min b{font-size:1.45rem}
  .p-str{align-self:stretch}
  .p-pra{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding-top:clamp(.6rem,5vh,3.2rem)}
  .p-popis{position:static;width:min(100%,24rem);padding-top:.5rem}
  .p-nazev{font-size:clamp(2.4rem,3.6vw,3.4rem)}
  .p-cast{margin-top:.5rem;font-size:1.15rem}
  .p-cena{margin-top:.9rem;font-size:clamp(2.4rem,3.6vw,3.4rem)}
  .listek{position:relative;left:auto;right:auto;top:auto;padding:1.7rem 1.7rem 1.6rem;border-radius:1.2rem;width:min(100%,24rem)}
  .listek::before,.listek::after{content:'';position:absolute;top:6.4rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--cedic)}
  .listek::before{left:-.58rem}.listek::after{right:-.58rem}
  .l-zavrit{display:none}
  .l-nazev{padding-right:0;font-size:2.5rem}
  .l-udaje{margin-top:1.3rem;gap:.8rem 1.6rem;grid-template-columns:auto 1fr}
  .l-siroke{grid-column:1/-1}
  .l-udaje dt{font-size:1rem}
  .l-udaje dd{font-size:2.5rem;line-height:1.05}
  .l-pozn{display:block;margin-top:1rem;color:var(--ink-2);font-size:1rem}
  .l-akce{margin-top:1.1rem}
  .l-fake{margin-top:.5rem}
  .l-udaje .l-siroke dd{font-size:1.06rem}
  .l-udaje dd{white-space:normal}
  .l-napoveda{display:block;max-width:20rem;font:400 2rem/1.15 var(--serif);color:var(--cedic-2t)}
  .l-napoveda[hidden]{display:none}
  .js .podium[data-faze="vyber"] .p-popis{display:none}
  .cenik h2,.poukaz h2,.kontakt h2{max-width:none}
  .cenik h2{max-width:16ch}
  .poukaz h2{max-width:14ch}
  .tabulka tbody{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:3rem;padding-block:2.6rem}
  .t-skup{grid-column:1;grid-row:1/span 6}
  .t-skup th{position:sticky;top:6rem}
  .tabulka tr:not(.t-skup){grid-column:2;padding-block:.75rem}
  .t-jm{font-size:2.1rem}
  .tabulka tr td{font-size:2.1rem}
  .kroky li{grid-template-columns:clamp(3.4rem,6vw,5.6rem) minmax(0,7fr) minmax(0,5fr);column-gap:1.4rem}
  .kroky li p:last-child{grid-column:3;align-self:center;font-size:1.1rem}
  .misto{grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:3rem}
  .pata-in{grid-template-columns:auto minmax(0,1fr);column-gap:3rem;align-items:end}
  .pata-znacka{grid-row:1/span 2}
  .pata-sub{grid-column:2}
  .pata-koncept{grid-column:2;margin-top:0}
  .pata-zpet{grid-column:2}
}
@media (min-width:1000px) and (max-width:1199px){
  .listek{padding:1.2rem 1.15rem 1.05rem}
  .l-nazev{font-size:2rem}
  .l-udaje{margin-top:.8rem;gap:.5rem .9rem;grid-template-columns:auto auto}
  .l-udaje dd{font-size:1.55rem;white-space:nowrap}
  .l-pozn{display:none}
  .listek .btn-zar{padding-inline:.6rem;font-size:.95rem}
  .listek::before,.listek::after{top:5.4rem}
}
@media (max-width:359px){
  .znacka-kameny{display:none}
  .znacka-nazev{font-size:1.5rem}
  .btn-mini{padding-inline:.85rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{.top,.skip{display:none}}

/* úvod „jeden obraz“ (redesign část 5): obraz přes celou šířku, na počítači nadpis přes obraz, na telefonu pod ním */
.top-in{min-height:3.4rem}
.nav a{font-size:.875rem}
.hero-obraz{overflow:hidden}
.ho-obraz{position:relative;margin:0;overflow:hidden;background:var(--sand-d)}
.ho-obraz picture,.ho-obraz img{display:block;width:100%}
.ho-obraz img{height:auto;aspect-ratio:4/5;object-fit:cover}
.ho-obraz figcaption{position:absolute;right:.5rem;bottom:.5rem;margin:0;z-index:2;padding:.2rem .45rem;border-radius:3px;background:rgb(0 0 0 / .55);color:#fff;font:500 11px/1.2 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none}
.ho-text{padding:1.25rem clamp(1rem,4.4vw,2rem) 2.2rem;text-align:center}
.hero-obraz h1{margin:0;font-size:clamp(2.8rem,7vw,6rem);font-weight:400;line-height:1;letter-spacing:-.03em;text-wrap:balance}
.hero-obraz h1 em{color:inherit}
.hero-obraz .cta{justify-content:center;margin-top:1rem}
.hero-obraz .cta .btn{width:min(100%,22rem)}
.hero-obraz .stav{margin:1rem auto 0;text-align:left}
@media (prefers-reduced-motion:no-preference){.ho-obraz img{animation:ho-zoom 1.2s cubic-bezier(.22,.61,.36,1)}}
@keyframes ho-zoom{from{transform:scale(1.04)}}
/* nízký telefon: obraz ustoupí, ať je na první obrazovce celý nadpis (hlavička, odsazení, dva řádky nadpisu a rezerva = 11rem) */
@media (max-width:759px) and (orientation:portrait){.ho-obraz img{max-height:calc(var(--vyska) - 11rem)}}
@media (max-width:359px) and (orientation:portrait){.ho-obraz img{max-height:calc(var(--vyska) - 13.8rem)}}  /* tady má nadpis tři řádky */
@media (min-width:700px){.nav{flex:1;justify-content:center;gap:clamp(1.4rem,3.4vw,2.8rem)}}
@media (min-width:760px){
  .hero-obraz{display:grid;grid-template-columns:minmax(0,1fr)}
  .hero-obraz>*{grid-area:1/1}
  .ho-obraz img{aspect-ratio:auto;height:clamp(30rem,56.25vw,calc(100svh - 3.5rem))}
  .ho-obraz::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(236 230 218 / .8),rgb(236 230 218 / .35) 55%,rgb(236 230 218 / 0) 80%);pointer-events:none}
  .ho-text{position:relative;z-index:1;align-self:start;justify-self:center;width:min(100%,58rem);padding:clamp(2rem,6.5vh,4.5rem) clamp(1rem,4.4vw,2rem) 0}
  .hero-obraz .cta .btn{width:auto}
  .hero-obraz .stav{background:var(--sand)}  /* přes obraz: plné pozadí, aby text stavu měl kontrast i nad kameny */
}
/* FORMA-POLISH (generuje vizitka/tools/ukazky-polish.py) */
::selection{background:#a63c16;color:#ffffff}
:where(html){scrollbar-color:#a63c16 #ece6da}
:where(input,textarea){caret-color:#a63c16}
:where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible){outline:3px solid #a63c16;outline-offset:3px}
:where(a){text-underline-offset:.2em}
:where(table,dd,time,data,[class*=cen],[class*=price],[class*=hod],[class*=hours],[class*=doba],[class*=kc]){font-variant-numeric:tabular-nums}
.uvod-obr{align-self:end}@media (min-width:760px){.uvod-in{align-items:end}.uvod-text{align-self:center}}
/* /FORMA-POLISH */