/* Pilates Vysočina — Věra Mezerová
   Návrh webu, kdomiudelaweb.cz

   Vzhled vychází z toho, co dělá: klidné, vědomé cvičení. Proto hodně bílého
   místa, teplé neutrály a jemná typografie.
   Barva je JEJÍ — červená z její vlastní ikonky (#DB2B1B). Sama si o ni
   řekla 11. 8. 2026 („barvu bych nechala červenou, khaki nelíbí“).
   Klid nedělá tlumená barva, ale prázdné místo kolem ní, takže červená
   svítí jen na malé ploše: značka, tlačítka, odkazy.
   Žádný automatický tmavý režim: fotky cviků jsou na bílém pozadí a v tmavém
   režimu by kolem nich svítily bílé obdélníky. */

/* ---------- písmo ---------- */
@font-face{font-family:'Cormorant';src:url(pismo/cormorant-latin-ext.woff2) format('woff2');font-weight:300 500;font-style:normal;font-display:swap;
 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant';src:url(pismo/cormorant-latin.woff2) format('woff2');font-weight:300 500;font-style:normal;font-display:swap;
 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:'Cormorant';src:url(pismo/cormorant-italic-latin-ext.woff2) format('woff2');font-weight:300 500;font-style:italic;font-display:swap;
 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant';src:url(pismo/cormorant-italic-latin.woff2) format('woff2');font-weight:300 500;font-style:italic;font-display:swap;
 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:'Jost';src:url(pismo/jost-latin-ext.woff2) format('woff2');font-weight:300 500;font-style:normal;font-display:swap;
 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';src:url(pismo/jost-latin.woff2) format('woff2');font-weight:300 500;font-style:normal;font-display:swap;
 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;}

/* ---------- proměnné ---------- */
:root{
 /* Červená je JEJÍ — z její vlastní ikonky (#DB2B1B). Šalvějová paleta padla
    na její připomínce „barvu bych nechala červenou, khaki nelíbí“ (11. 8. 2026).
    Odstíny níž jsou ta samá červená doladěná tak, aby text na ní i pod ní
    prošel kontrastem; syrová #DB2B1B zůstává jen tam, kde na ní neleží text. */
 --papir:#FCF9F6;
 --pisek:#F4EDE7;
 --pisek-tm:#E9DCD3;
 --cervena-tint:#FBEEEA;
 --inkoust:#24211F;      /* 15,3 : 1 na papíru */
 --tlum:#5C5551;         /*  7,0 : 1 */
 --cervena-text:#B22A19; /*  6,2 : 1 — nadtitulky, odrážky */
 --cervena:#C3311F;      /*  5,3 : 1; bílá NA NÍ 5,6 : 1 — tlačítka a odkazy */
 --cervena-tm:#A82718;   /*  6,7 : 1 — hover */
 --znacka:#DB2B1B;       /* její syrová červená — podklad pod logo, viz .znacka */
 --linka:#E3D7CE;
 --linka-jemna:#EFE6DF;
 --sirka:1180px;
 --text-sirka:68ch;
 --r:3px;
 --stin:0 1px 2px rgba(36,33,31,.04),0 8px 24px -12px rgba(36,33,31,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
 margin:0;background:var(--papir);color:var(--inkoust);
 font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
 font-weight:300;font-size:clamp(16px,.98rem + .18vw,17.5px);line-height:1.72;
 letter-spacing:.005em;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cervena);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--cervena-tm)}
:focus-visible{outline:2px solid var(--cervena);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:'Cormorant',Georgia,serif;font-weight:300;line-height:1.14;
 letter-spacing:.004em;margin:0;color:var(--inkoust)}
h1{font-size:clamp(2.6rem,1.7rem + 3.6vw,4.6rem)}
h2{font-size:clamp(2rem,1.5rem + 2vw,3.1rem)}
h3{font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem)}
h4{font-size:1.18rem}
p{margin:0 0 1.1em}
.pas{width:min(100% - 2.4rem,var(--sirka));margin-inline:auto}
.uzky{width:min(100% - 2.4rem,860px);margin-inline:auto}
.sekce{padding:clamp(3.4rem,2rem + 6vw,6.5rem) 0}
.sekce-pisek{background:var(--pisek)}
.sekce-tint{background:var(--cervena-tint)}
.preskoc{position:absolute;left:-9999px;top:0;background:var(--inkoust);color:#fff;
 padding:.7rem 1.1rem;z-index:99}
.preskoc:focus{left:.6rem;top:.6rem}

/* nadpis sekce s nadtitulkem */
.nadtitul{font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;
 color:var(--cervena-text);margin:0 0 .85rem;font-weight:400}
.podnadpis{color:var(--tlum);max-width:60ch;margin-top:1.1rem;font-size:1.04rem}
.hl-sekce{margin-bottom:clamp(2rem,1.2rem + 2vw,3rem)}

/* ---------- tlačítka ---------- */
.tl{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
 font-family:'Jost',sans-serif;font-weight:400;font-size:.94rem;letter-spacing:.07em;
 text-transform:uppercase;padding:.92rem 1.7rem;border-radius:var(--r);
 text-decoration:none;border:1px solid transparent;cursor:pointer;
 transition:background .18s ease,color .18s ease,border-color .18s ease;
 min-height:48px}
.tl-hlavni{background:var(--cervena);color:#fff}   /* bílá na ní 5,6 : 1 */
.tl-hlavni:hover{background:var(--inkoust);color:#fff}
.tl-obrys{background:transparent;color:var(--inkoust);border-color:var(--linka)}
.tl-obrys:hover{border-color:var(--inkoust);color:var(--inkoust);background:transparent}
.tl-akcent{background:var(--cervena-tm);color:#fff}  /* bílá na ní 7,1 : 1 */
.tl-akcent:hover{background:var(--inkoust)}
.tl-mini{padding:.6rem 1.05rem;font-size:.78rem;min-height:44px;letter-spacing:.06em}

/* ---------- hlavička ---------- */
.hlavicka{position:sticky;top:0;z-index:50;background:rgba(252,249,246,.94);
 backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--linka-jemna)}
.hlavicka-m{display:flex;align-items:center;gap:1.5rem;
 padding:.85rem 0;min-height:70px}
/* JEJÍ logo má slovo „vysočina" nakreslené BÍLE se šedým stínem — je udělané
   pro tmavší podklad a na papíru zmizí (stejně jako dnes na jejím webu).
   Logo se nepřekresluje: dostane podklad, na kterém se čtou obě slova.
   Podkladem je rovnou JEJÍ červená #DB2B1B — na ní vychází černá 3,9 : 1
   a bílá 4,8 : 1, obě slova se tedy čtou. Logo bylo očividně kreslené
   na barevný podklad, tohle mu ho vrací. */
.znacka{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;
 background:var(--znacka);padding:.5rem .85rem;border-radius:var(--r)}
.znacka img{width:184px;height:auto;display:block}
.hl-nav{margin-left:auto;display:flex;align-items:center;gap:1.65rem}
.hl-nav a{color:var(--inkoust);text-decoration:none;font-size:.9rem;letter-spacing:.055em;
 text-transform:uppercase;padding:.35rem 0;border-bottom:1px solid transparent}
.hl-nav a:hover{border-bottom-color:var(--inkoust)}
.hl-nav a[aria-current="page"]{border-bottom-color:var(--cervena)}
/* `.hl-nav a` je specifičtější než `.tl-hlavni`, takže by tlačítku v hlavičce
   přebilo bílý text na tmavý — kontrast by spadl na 2,1 : 1. */
.hl-nav a.tl-hlavni{color:#fff;border-bottom:1px solid transparent}
.hl-nav a.tl-hlavni:hover{color:#fff;border-bottom-color:transparent}
.hl-tel{font-size:.95rem;letter-spacing:.03em;white-space:nowrap;color:var(--inkoust);
 text-decoration:none;font-weight:400}
.hl-tel:hover{color:var(--cervena-tm)}
.hamburger{display:none;margin-left:auto;background:none;border:1px solid var(--linka);
 border-radius:var(--r);width:48px;height:44px;align-items:center;justify-content:center;
 cursor:pointer;color:var(--inkoust)}
.hamburger span{display:block;width:20px;height:1px;background:currentColor;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;
 width:20px;height:1px;background:currentColor}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}

/* ---------- hero ---------- */
.hero{padding:clamp(2.6rem,1.5rem + 5vw,5.4rem) 0 clamp(2.4rem,1.5rem + 4vw,4.4rem);
 position:relative;overflow:hidden}
/* Úvod je jednosloupcový a fotka pod ním jde na celou šířku obsahu. Dřív
   stála vedle textu ve sloupci, ale její vlastní fotka z 17. 8. je vodorovná
   a ve sloupci by z ní zbyl proužek. */
/* Karta týdne je o dost nižší než text vedle ní (547 px proti 762 px), takže
   při `align-items:start` visela u horního okraje a pod ní zbývala díra.
   Vystředěná sedí proti textu vyváženě. Sloupec je zároveň širší a text
   o něco delší, aby mezi nimi nezůstávalo 370 px prázdna. */
.hero-m{display:grid;grid-template-columns:1fr 380px;
 gap:clamp(2rem,1rem + 3vw,4rem);align-items:center}
.hero-text{max-width:52ch}

/* Týden vedle úvodu — vyplňuje místo po fotce a odpovídá na „kdy?" hned. */
.hero-tyden{background:var(--cervena-tint);border:1px solid #F2DDD6;
 border-radius:var(--r);padding:1.6rem 1.5rem}
.hero-tyden-nad{font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
 color:var(--cervena-text);margin:0 0 1.1rem;font-weight:400}
.hero-tyden ul{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.9rem}
.hero-tyden li{display:grid;gap:.1rem;padding-bottom:.9rem;border-bottom:1px solid #F0D9D1}
.hero-tyden li:last-child{border-bottom:0;padding-bottom:0}
.hero-tyden .d{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
 color:var(--tlum)}
.hero-tyden .c{font-family:'Cormorant',Georgia,serif;font-size:1.4rem;line-height:1.15}
.hero-tyden .m{font-size:.9rem;color:var(--tlum)}
.hero-tyden .tl{width:100%}
.hero-pruh{margin-top:clamp(2.2rem,1.4rem + 3vw,3.6rem)}
.hero-pruh img{width:100%;height:auto;border-radius:var(--r);background:var(--pisek)}
.hero h1{margin-bottom:1.4rem}
.hero h1 em{font-style:italic;color:var(--cervena)}
.hero-uvod{font-size:clamp(1.06rem,1rem + .35vw,1.22rem);color:var(--tlum);
 max-width:46ch;margin-bottom:1.9rem}
.hero-tl{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:1.9rem}
.hero-fakta{display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;font-size:.92rem;color:var(--tlum);
 padding-top:1.5rem;border-top:1px solid var(--linka-jemna)}
.hero-fakta b{font-weight:400;color:var(--inkoust)}
/* Pozadí fotky je sjednocené na --papir (viz na_papir v build_img.py), takže
   se na úvodní ploše slije s papírem a Věra „stojí" na stránce. Kotví to
   šalvějový obrazec za ní. Podklad je taky papír, ať před dokreslením
   fotky neblikne jiná barva. */
/* Šalvějový obrazec za fotkou tady dřív byl, ale od chvíle, kdy má fotka
   sjednocené papírové pozadí, nemá viditelný okraj — a z obrazce pak koukaly
   jen náhodné hrany, co vypadaly jako chyba. Hero je čistší bez něj. */

/* ---------- týdenní pruh (7 dnů) ---------- */
.tyden-pruh{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;
 margin-bottom:clamp(2rem,1.4rem + 2vw,3rem)}
.den-dlazdice{display:flex;flex-direction:column;align-items:center;gap:.3rem;
 padding:.95rem .4rem;border:1px solid var(--linka);border-radius:var(--r);
 background:var(--papir);text-decoration:none;color:var(--inkoust);
 transition:border-color .18s ease,background .18s ease}
.den-dlazdice .zk{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--tlum)}
.den-dlazdice .pocet{font-family:'Cormorant',serif;font-size:1.5rem;line-height:1}
.den-dlazdice.je-volno{background:var(--cervena-tint);border-color:#CBD5C2}
.den-dlazdice.je-volno .pocet{color:var(--cervena)}
.den-dlazdice.je-volno:hover{border-color:var(--cervena);background:#DEE5D7}
.den-dlazdice.bez{opacity:.72}
.den-dlazdice.bez .pocet{color:var(--tlum);font-size:1.2rem}

/* ---------- rozvrh: řádek dne ---------- */
.den{display:grid;grid-template-columns:190px 1fr;gap:1.5rem;
 padding:clamp(1.6rem,1rem + 1.4vw,2.3rem) 0;border-top:1px solid var(--linka)}
.den:last-of-type{border-bottom:1px solid var(--linka)}
.den-jmeno{font-family:'Cormorant',serif;font-size:clamp(1.7rem,1.4rem + 1vw,2.3rem);
 font-weight:300;line-height:1.1;position:sticky;top:100px;align-self:start}
.den-jmeno span{display:block;font-family:'Jost',sans-serif;font-size:.75rem;
 letter-spacing:.15em;text-transform:uppercase;color:var(--tlum);margin-top:.45rem}
.lekce-seznam{display:flex;flex-direction:column;gap:1rem}
.lekce{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1.6rem;
 align-items:start;background:var(--papir);border:1px solid var(--linka-jemna);
 border-radius:var(--r);padding:1.35rem 1.5rem;box-shadow:var(--stin)}
.sekce-pisek .lekce{background:#FBF8F3}
.lekce-cas{font-family:'Cormorant',serif;font-size:1.62rem;font-weight:400;line-height:1.15;
 white-space:nowrap;letter-spacing:.01em}
.lekce-telo>*:last-child{margin-bottom:0}
.lekce-misto{font-size:1.02rem;color:var(--inkoust);margin:0 0 .3rem;font-weight:400}
.lekce-adresa{font-size:.9rem;color:var(--tlum);margin:0 0 .6rem}
.lekce-detail{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.88rem;color:var(--tlum);
 margin:0;list-style:none;padding:0}
.lekce-detail li{display:flex;align-items:center;gap:.4rem}
.lekce-detail li+li::before{content:"·";margin-right:.5rem;color:var(--linka)}
.lekce-akce{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;
 text-align:right}
.lekce-cena{font-family:'Cormorant',serif;font-size:1.5rem;white-space:nowrap;line-height:1.1}
.lekce-cena small{display:block;font-family:'Jost',sans-serif;font-size:.78rem;
 color:var(--tlum);letter-spacing:.02em;margin-top:.2rem}
.stitek{display:inline-block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
 padding:.28rem .6rem;border-radius:2px;background:var(--cervena-tint);color:var(--cervena);
 margin-bottom:.55rem}
.stitek-kurz{background:#F4E3DD;color:var(--cervena-tm)}
.stitek-podminka{background:var(--pisek-tm);color:var(--tlum)}
.den-prazdny{color:var(--tlum);font-size:.96rem;padding:.3rem 0;margin:0}

/* ---------- kurz pro začátečníky ---------- */
.kurz{background:var(--inkoust);color:#F3F1EA;border-radius:var(--r);
 padding:clamp(2rem,1.4rem + 2.4vw,3.4rem);display:grid;
 grid-template-columns:1.25fr .75fr;gap:clamp(1.6rem,1rem + 2.6vw,3.4rem);align-items:center}
.kurz h2,.kurz h3{color:#FCFAF5}
.kurz .nadtitul{color:#C3CDB8}
.kurz p{color:#DAD6CB}
.kurz p:last-child{margin-bottom:0}
.kurz-fakta{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.kurz-fakta li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
 padding-bottom:.95rem;border-bottom:1px solid rgba(243,241,234,.16)}
.kurz-fakta li:last-child{border-bottom:0;padding-bottom:0}
.kurz-fakta dt,.kurz-fakta .k{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
 color:#AFB8A5;white-space:nowrap}
.kurz-fakta .h{font-family:'Cormorant',serif;font-size:1.3rem;color:#FCFAF5;line-height:1.25}
.kurz .tl-akcent{margin-top:1.6rem}

/* ---------- aktuality ----------
   Rámeček, který si plní sama ve správě webu. Sedí hned pod úvodem schválně:
   je to první věc, ze které návštěvník pozná, že se tu něco děje. Přesně kvůli
   téhle otázce („žije to ještě?") jí dnes škodí patička s rokem 2019. */
.aktuality{background:var(--cervena-tint);border-radius:var(--r);
 padding:clamp(1.6rem,1.1rem + 2vw,2.6rem);border:1px solid #F2DDD6}
.aktuality-hlava{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
 margin-bottom:1.4rem}
.aktuality-hlava h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem)}
.aktuality-hlava .nadtitul{margin:0}
.aktuality-seznam{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.aktuality-seznam li{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.6rem;
 padding-bottom:1.1rem;border-bottom:1px solid #F0D9D1}
.aktuality-seznam li:last-child{border-bottom:0;padding-bottom:0}
.aktuality-seznam time{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--cervena-text);white-space:nowrap;padding-top:.3rem}
.aktuality-seznam p{margin:0}
.aktuality-pozn{margin:1.5rem 0 0;padding-top:1.2rem;border-top:1px dashed #E6C9C0}
@media (max-width:620px){
 .aktuality-seznam li{grid-template-columns:1fr;gap:.35rem}
 .aktuality-seznam time{padding-top:0}
}

/* ---------- ceník ---------- */
.cenik{width:100%;border-collapse:collapse;font-size:1rem}
.cenik caption{text-align:left;color:var(--tlum);font-size:.92rem;padding-bottom:1rem}
.cenik th,.cenik td{text-align:left;padding:1.05rem .8rem;border-bottom:1px solid var(--linka);
 vertical-align:top}
.cenik th{font-weight:400;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
 color:var(--tlum);border-bottom-color:var(--inkoust)}
.cenik td:first-child,.cenik th:first-child{padding-left:0}
.cenik td:last-child,.cenik th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.cenik .castka{font-family:'Cormorant',serif;font-size:1.4rem}
.cenik tbody tr:last-child td{border-bottom:0}
.cenik .pozn{font-size:.88rem;color:var(--tlum);display:block;margin-top:.25rem}

/* ---------- karty / mřížky ---------- */
.mrizka{display:grid;gap:clamp(1.1rem,.7rem + 1.4vw,2rem)}
.mrizka-2{grid-template-columns:repeat(2,1fr)}
.mrizka-3{grid-template-columns:repeat(3,1fr)}
.mrizka-4{grid-template-columns:repeat(4,1fr)}
.karta{background:var(--papir);border:1px solid var(--linka-jemna);border-radius:var(--r);
 padding:1.7rem 1.6rem;box-shadow:var(--stin)}
.sekce-pisek .karta,.sekce-tint .karta{background:#FCFAF6}
.karta h3{margin-bottom:.7rem}
/* Nadpis v kartě je někde h2 (kvůli osnově stránky), ale velikostí patří
   ke kartě, ne k sekci — jinak v malé kartě křičí. */
.karta h2{font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem);margin-bottom:.7rem}
.karta p:last-child{margin-bottom:0}
.karta-obr{padding:0;overflow:hidden}
.karta-obr img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--pisek)}
.karta-obr .telo{padding:1.5rem 1.5rem 1.7rem}

/* seznam „pro koho" */
.pro-koho{list-style:none;margin:0;padding:0;display:grid;gap:.05rem}
.pro-koho li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
 padding:1rem 0;border-bottom:1px solid var(--linka-jemna)}
.pro-koho li:last-child{border-bottom:0}
.pro-koho .c{font-family:'Cormorant',serif;font-size:1.15rem;color:var(--cervena-text);
 min-width:1.6rem}
.pro-koho b{font-weight:400}
.pro-koho span.pozn{display:block;color:var(--tlum);font-size:.93rem;margin-top:.15rem}

/* ---------- místa ---------- */
.misto{background:var(--papir);border:1px solid var(--linka-jemna);border-radius:var(--r);
 overflow:hidden;box-shadow:var(--stin);display:flex;flex-direction:column}
.sekce-pisek .misto{background:#FCFAF6}
.misto-telo{padding:1.6rem 1.6rem 1.75rem;flex:1}
.misto h3{margin-bottom:.5rem}
.misto address{font-style:normal;color:var(--tlum);font-size:.96rem;margin-bottom:.9rem}
.misto .kdy{font-size:.92rem;color:var(--inkoust);margin:0 0 1.1rem}
.misto iframe{width:100%;height:230px;border:0;display:block;
 border-top:1px solid var(--linka-jemna);background:var(--pisek)}

/* ---------- obsah po straně (o-pilates) ---------- */
.s-bokem{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,1rem + 4vw,4.5rem);
 align-items:start}
.obsah-bok{position:sticky;top:100px}
.obsah-bok h2{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
 font-family:'Jost',sans-serif;color:var(--tlum);margin-bottom:1rem;font-weight:400}
.obsah-bok ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.obsah-bok a{display:block;padding:.5rem 0 .5rem .95rem;text-decoration:none;
 color:var(--tlum);font-size:.95rem;border-left:1px solid var(--linka);line-height:1.4}
.obsah-bok a:hover{color:var(--inkoust);border-left-color:var(--tlum)}
.obsah-bok a.tady{color:var(--inkoust);border-left-color:var(--cervena)}
.clanek>section{padding-bottom:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);
 margin-bottom:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);border-bottom:1px solid var(--linka-jemna)}
.clanek>section:last-child{border-bottom:0;margin-bottom:0}
.clanek h2{margin-bottom:1.2rem}
.clanek h3{margin:2.2rem 0 .8rem}
.clanek p,.clanek li{max-width:var(--text-sirka)}
.clanek ul{padding-left:1.15rem;margin:0 0 1.2rem}
.clanek li{margin-bottom:.5rem}
.clanek li::marker{color:var(--cervena-text)}
.vyznam{background:var(--cervena-tint);border-radius:var(--r);padding:1.5rem 1.7rem;
 margin:1.8rem 0;max-width:var(--text-sirka)}
.vyznam p:last-child{margin-bottom:0}
.citace{font-family:'Cormorant',serif;font-size:clamp(1.4rem,1.2rem + .9vw,1.95rem);
 font-style:italic;line-height:1.42;color:var(--inkoust);margin:2.2rem 0;
 padding-left:1.6rem;border-left:2px solid var(--cervena);max-width:34ch}
.citace cite{display:block;font-family:'Jost',sans-serif;font-style:normal;font-size:.83rem;
 letter-spacing:.11em;text-transform:uppercase;color:var(--tlum);margin-top:.9rem}

/* pomůcky */
.pomucka{display:grid;grid-template-columns:150px 1fr;gap:1.6rem;align-items:start;
 padding:1.5rem 0;border-bottom:1px solid var(--linka-jemna)}
.pomucka:last-child{border-bottom:0}
/* Bez object-fit:cover — celá fotka, ať je vidět pomůcka, o které je text.
   Výšky se tím u jednotlivých pomůcek liší, což je v pořádku. */
.pomucka img{width:150px;height:auto;border-radius:var(--r);background:var(--pisek)}
.pomucka h3{margin-bottom:.5rem}
.pomucka p:last-child{margin-bottom:0}

/* rozbalovací články */
.rozbal{border:1px solid var(--linka);border-radius:var(--r);margin-bottom:.85rem;
 background:var(--papir)}
.sekce-pisek .rozbal{background:#FCFAF6}
.rozbal>summary{cursor:pointer;padding:1.15rem 1.4rem;font-size:1.06rem;
 list-style:none;display:flex;align-items:center;gap:1rem}
.rozbal>summary::-webkit-details-marker{display:none}
.rozbal>summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--cervena-text);
 line-height:1;font-weight:300}
.rozbal[open]>summary::after{content:"–"}
.rozbal>summary:hover{color:var(--cervena-tm)}
.rozbal-telo{padding:0 1.4rem 1.5rem}
.rozbal-telo p:last-child{margin-bottom:0}

/* ---------- galerie cviků ----------
   Sloupcové (zednické) rozvržení místo čtvercových výřezů. U cviků je
   obsahem právě celá poloha — čtvercový ořez by usekl nohy nebo hlavu. */
.galerie{columns:4 230px;column-gap:.85rem}
.galerie button{padding:0;border:1px solid var(--linka-jemna);background:var(--papir);
 border-radius:var(--r);cursor:pointer;overflow:hidden;display:block;width:100%;
 margin:0 0 .85rem;break-inside:avoid;transition:border-color .18s ease}
.galerie button:hover{border-color:var(--tlum)}
.galerie img{width:100%;height:auto;display:block}
/* <dialog> si od prohlížeče nese width/height:fit-content, border:solid
   a padding:1em. Bez jejich vynulování se lupa vykreslila jako orámovaný
   obdélník velikosti fotky uprostřed nezastíněné stránky — vypadalo to
   rozbitě. Proto se tady výslovně přepisuje všechno. */
.lupa{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;
 margin:0;border:0;padding:clamp(3.6rem,7vh,5rem) clamp(1rem,5vw,5.5rem);
 /* Světlý podklad schválně: většina fotek cviků je nafocená na bezešvém
    světlém pozadí, takže na tmavém by z nich byly svítící obdélníky. */
 background:rgba(250,248,244,.985);color:var(--inkoust);
 display:none;align-items:center;justify-content:center;z-index:100;overflow:hidden}
.lupa[open]{display:flex}
.lupa::backdrop{background:rgba(250,248,244,.985)}
.lupa img{max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;
 object-fit:contain;border-radius:var(--r)}
.lupa-zavrit,.lupa-sip{position:absolute;background:rgba(35,38,31,.07);border:0;
 color:var(--inkoust);width:52px;height:52px;border-radius:50%;cursor:pointer;
 font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;
 transition:background .18s ease}
.lupa-zavrit:hover,.lupa-sip:hover{background:rgba(35,38,31,.16)}
.lupa-zavrit{top:1rem;right:1rem}
.lupa-sip.vlevo{left:1rem;top:50%;transform:translateY(-50%)}
.lupa-sip.vpravo{right:1rem;top:50%;transform:translateY(-50%)}
.lupa-popis{position:absolute;bottom:1.1rem;left:1rem;right:1rem;text-align:center;
 color:var(--tlum);font-size:.86rem;letter-spacing:.03em;margin:0}

/* ---------- certifikáty ---------- */
.cert{display:grid;grid-template-columns:150px 1fr;gap:1.7rem;align-items:start;
 padding:1.8rem 0;border-bottom:1px solid var(--linka-jemna)}
.cert:last-child{border-bottom:0}
.cert-obr{border:1px solid var(--linka);border-radius:var(--r);overflow:hidden;
 background:#fff;padding:0;cursor:pointer;display:block;width:150px}
.cert-obr img{width:100%;height:auto;display:block}
.cert h3{margin-bottom:.45rem}
.cert .vydal{font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--cervena-text);margin:0 0 .7rem}
.cert dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:.9rem 0 0;
 font-size:.92rem}
.cert dt{color:var(--tlum)}
.cert dd{margin:0}

/* ---------- rezervace ---------- */
.rezervace-ramec{background:#fff;border:1px solid var(--linka);border-radius:var(--r);
 padding:.5rem;box-shadow:var(--stin)}
/* Její kalendář si patičku („© Rezervační systém Calendiari") přisaje ke SPODU
   rámečku, ať je rámeček jakkoli vysoký. Původních 1350 px proto pod týdenní
   mřížkou dělalo ~750 px prázdna. Naměřeno 5. 8. 2026: mřížka 598 px, úzký
   režim (seznam nejbližších dnů) 1209 px, přepíná se kolem 800 px šířky rámu.
   Tady je bezpečná (vyšší) hodnota, přesnou dopočítá web.js podle šířky —
   bez JS tedy zbyde místo, ale nikdy se nic neodřízne. */
.rezervace-ramec iframe{width:100%;height:1290px;border:0;display:block}
@media (min-width:880px){.rezervace-ramec iframe{height:660px}}

/* ---------- formulář ---------- */
.form-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.pole{display:flex;flex-direction:column;gap:.45rem}
.pole.siroke{grid-column:1/-1}
.pole label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tlum)}
.pole input,.pole textarea,.pole select{font-family:'Jost',sans-serif;font-size:1rem;
 font-weight:300;color:var(--inkoust);background:var(--papir);
 border:1px solid var(--linka);border-radius:var(--r);padding:.85rem .95rem;
 min-height:48px;width:100%}
.pole textarea{min-height:140px;resize:vertical;line-height:1.6}
.pole input:focus,.pole textarea:focus,.pole select:focus{border-color:var(--cervena-text);
 outline:2px solid var(--cervena-text);outline-offset:1px}
.mini{font-size:.86rem;color:var(--tlum)}
/* Odkaz, který stojí v odstavci sám („Otevřít na mapě“, „Celý ceník…“), je
   samostatný cíl, ne odkaz uvnitř věty — podle WCAG 2.2 (2.5.8) má mít aspoň
   24 px na výšku. Odkazy vložené doprostřed textu tohle pravidlo míjí,
   protože nejsou :only-child. */
p>a:only-child{display:inline-block;padding:.16rem 0;min-height:24px}
.med{position:absolute;left:-9999px}

/* ---------- kontaktní bloky ---------- */
.kontakt-radek{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
 padding:1.15rem 0;border-bottom:1px solid var(--linka-jemna)}
.kontakt-radek:last-child{border-bottom:0}
.kontakt-radek .k{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
 color:var(--tlum);min-width:5.5rem}
.kontakt-radek .h{font-family:'Cormorant',serif;font-size:1.45rem;line-height:1.25}
.kontakt-radek .h a{text-decoration:none;color:var(--inkoust)}
.kontakt-radek .h a:hover{color:var(--cervena-tm)}

/* ---------- patička ---------- */
.pata{background:var(--inkoust);color:#C8C4B9;padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2rem;
 font-size:.94rem}
.pata-m{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem}
.pata h2{color:#F3F1EA;font-family:'Jost',sans-serif;font-size:.75rem;letter-spacing:.14em;
 text-transform:uppercase;font-weight:400;margin-bottom:1.1rem}
.pata ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pata a{color:#C8C4B9;text-decoration:none}
.pata ul a{display:inline-block;padding:.18rem 0;min-height:24px}
.pata a:hover{color:#fff;text-decoration:underline}
/* V patičce platí totéž — na inkoustovém pozadí by zmizelo slovo „pilates".
   Dřív to řešil filtr invert(), ale ten prohodil obě slova a logo pak nebylo
   její. Stejný červený podklad jako v hlavičce. */
.pata-znacka .zn{display:inline-block;background:var(--znacka);
 padding:.5rem .85rem;border-radius:var(--r);margin-bottom:1rem}
.pata-znacka img{width:190px;display:block}
.pata-znacka p{color:#9E9A90;max-width:34ch;font-size:.92rem}
.pata-spod{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(243,241,234,.14);
 display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:space-between;
 color:#8F8B82;font-size:.86rem}
/* § 435 občanského zákoníku: podnikatel musí na webu uvádět jméno, sídlo, IČO
   a zápis v rejstříku. Přes celou šířku a nahoru, aby to nešlo do sloupců
   vedle copyrightu. */
.pata-udaje{flex:0 0 100%;order:-1;margin:0 0 .4rem;line-height:1.7}

/* ---------- lišta návrhu ---------- */
.navrh-lista{background:var(--cervena);color:#fff;font-size:.86rem;
 padding:.65rem 0;letter-spacing:.02em}
.navrh-lista .pas{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;
 justify-content:center;text-align:center}
.navrh-lista a{color:#fff;text-decoration:underline}

/* ---------- responzivita ---------- */
@media (max-width:1000px){
   .hero-m{grid-template-columns:1fr}
 .hero-tyden{max-width:420px}
 .s-bokem{grid-template-columns:1fr}
 .obsah-bok{position:static;padding-bottom:1.6rem;border-bottom:1px solid var(--linka)}
 .obsah-bok ol{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  display:grid;gap:0 1rem}
 .kurz{grid-template-columns:1fr}
 .mrizka-4{grid-template-columns:repeat(2,1fr)}
 .pata-m{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
 .hl-nav{position:fixed;inset:70px 0 auto;background:var(--papir);flex-direction:column;
  align-items:stretch;gap:0;padding:.5rem 1.2rem 1.4rem;border-bottom:1px solid var(--linka);
  display:none;max-height:calc(100vh - 70px);overflow-y:auto}
 .hl-nav.otevreno{display:flex}
 .hl-nav a{padding:.95rem 0;border-bottom:1px solid var(--linka-jemna);text-align:left}
 .hl-nav a:hover{border-bottom-color:var(--linka-jemna)}
 .hl-nav .tl{margin-top:.9rem}
 .hamburger{display:flex}
 .hl-tel{display:none}
 .den{grid-template-columns:1fr;gap:.9rem}
 .den-jmeno{position:static}
 .den-jmeno span{display:inline;margin-left:.7rem}
 .mrizka-3,.mrizka-2{grid-template-columns:1fr}
 .form-mrizka{grid-template-columns:1fr}
 .tyden-pruh{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:620px){
 .pas,.uzky{width:min(100% - 1.8rem,var(--sirka))}
 .lekce{grid-template-columns:1fr;gap:.2rem;padding:1.25rem 1.2rem}
 .lekce-akce{align-items:flex-start;text-align:left;margin-top:1rem;
  flex-direction:row;justify-content:space-between;width:100%;align-items:center}
 .lekce-cas{font-size:1.45rem;margin-bottom:.5rem}
 .cert{grid-template-columns:1fr;gap:1.1rem}
 .cert-obr{width:132px}
 .pomucka{grid-template-columns:1fr;gap:.9rem}
 .pomucka img{width:100%;max-width:260px;height:auto}
 .mrizka-4{grid-template-columns:1fr}
 .pata-m{grid-template-columns:1fr;gap:2rem}
 .galerie{columns:2 140px;column-gap:.6rem}
 .galerie button{margin-bottom:.6rem}
 .rezervace-ramec iframe{height:1500px}
}
@media (max-width:400px){
 .tyden-pruh{grid-template-columns:repeat(4,1fr);gap:.35rem}
 .den-dlazdice{padding:.7rem .25rem}
 .znacka img{width:150px}
 .cenik th,.cenik td{padding:.85rem .4rem}
 .lupa-sip{width:44px;height:44px}
}

/* ---------- odkrývání ----------
   Jen posun a prolnutí. ⚠️ ŽÁDNÁ maska ani clip-path: ta ustřihne čárky
   a háčky nad velkými písmeny a v češtině to pak vypadá jako rozbitý font.
   Schválně @keyframes místo transition — transition se v headless Chromu
   s virtuálním časem neposune a na kontrolních snímcích by zůstaly bílé díry,
   takže by nešlo poznat, jestli se to vůbec odkrylo. */
.js .odkryv{opacity:0;transform:translateY(14px)}
.js .odkryv.videt{animation:nabeh .6s cubic-bezier(.22,.61,.36,1) forwards}
.js .odkryv[data-zpozdeni="1"].videt{animation-delay:.08s}
.js .odkryv[data-zpozdeni="2"].videt{animation-delay:.16s}
.js .odkryv[data-zpozdeni="3"].videt{animation-delay:.24s}
.js .odkryv[data-zpozdeni="4"].videt{animation-delay:.32s}

/* Úvod je hned nahoře, ten se nečeká na rolování a najede po načtení. */
.js .nabeh{opacity:0;transform:translateY(16px);
 animation:nabeh .7s cubic-bezier(.22,.61,.36,1) forwards}
.js .nabeh[data-zpozdeni="1"]{animation-delay:.10s}
.js .nabeh[data-zpozdeni="2"]{animation-delay:.20s}
.js .nabeh[data-zpozdeni="3"]{animation-delay:.30s}
.js .nabeh[data-zpozdeni="4"]{animation-delay:.42s}
.js .nabeh[data-zpozdeni="5"]{animation-delay:.54s}
@keyframes nabeh{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
 .js .odkryv,.js .nabeh{opacity:1;transform:none;animation:none}
 html{scroll-behavior:auto}
}
html{scroll-behavior:smooth;scroll-padding-top:92px}

@media print{
 .hlavicka,.navrh-lista,.pata,.lupa,.rezervace-ramec{display:none}
 body{background:#fff}
}
