/* Hlavná stránka na mobile (do 700 px): sekcie majú výšku podľa obsahu, celé obrazovky a prichytávanie sú len na počítači.
   Načíta sa po mobil.css a ruší jeho výšky na celú obrazovku. Podstránky služieb ho nenačítavajú. */

/* Sekcie podľa obsahu, bez prázdnych miest */
main > section.snap{min-height:0}
main > section > .wrap{min-height:0}
.sec{padding-top:40px;padding-bottom:40px}
h2{font-size:30px;line-height:1.12}
.hero{min-height:0}
.hero-in{min-height:0;padding-top:22px;padding-bottom:26px;gap:18px}
.portrait-box{padding:30px 0 6px}
.portrait{width:min(68vw,300px)}
/* Rezerva pre spodnú lištu Safari len na konci stránky */
.footer{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}

/* Úvod: recenzia */
.hero-ref{margin-top:4px;padding-left:14px}
.hero-ref p{font-size:16px;line-height:1.4}
.hero-ref figcaption{font-size:13px}

/* O mne */
.about .lead{font-size:24px;line-height:1.2}
.about .body{font-size:17px;line-height:1.5;gap:14px}

/* Služby pod sebou, nie do strán */
.cards,.cards-v4{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
.cards-v4 .card{flex:none;gap:8px;padding:20px 18px}
#sluzby .m-dots{display:none}
.cards-v4 .card h3{font-size:21px}
.card-price{font-size:30px}
.cards-v4 .card p{font-size:16px;line-height:1.42}
.cards-v4 .card .more{font-size:16px}
.card-ico{width:34px;height:34px}
.card-strip{padding:12px 16px}
.me{gap:20px}
.me-text{font-size:17px;line-height:1.5;gap:12px}
.me-hi{font-size:21px}
.me-facts{margin-top:8px}
.me-facts li{padding:12px 0}
.me-facts li + li{border-top:1px solid var(--field)}
.me-facts b{font-size:17px}
.me-facts span{font-size:15px}
#o-mne .sec-head{margin-bottom:18px}
/* Z praxe: bez celej obrazovky */
.flip,.flip-in,.flip-face{flex:none}
.race,.race-pairs{flex:none}
.race-pairs{gap:16px}

/* Referencie: kontajner má výšku len aktívneho citátu */
.rc{flex:none}
.js .rc-slide:not(.on){display:none}
.js .rc-slide.on{animation:m-fade .45s ease}

/* Test webu na zadnej strane Z praxe */
.tt{margin:0 -6px;padding:22px 18px}
.tt-h{font-size:26px}
.tt-form .btn{padding:12px 16px}
.tt-row small{font-size:13.5px}
.tt-intro{padding:16px;font-size:15px}

/* Cenník pod sebou */
#cennik h2{font-size:30px}
.pl-lead{margin:8px 0 18px;font-size:16px}
.pl{gap:14px}
.pl-card{padding:20px 18px}
.pl-from{font-size:32px}
.pl-list li{font-size:15.5px}
.pl-incl{flex-direction:column;gap:6px;font-size:15px}
.pl-from{font-size:30px}
/* Moje weby pod sebou */
.pj-lead{margin:10px 0 18px;font-size:16px}
.pj{gap:14px}
.pj-card{padding:18px 16px;gap:12px}
.pj-stats dd{font-size:22px}
.pj-stats dt{font-size:12px}

/* Formulár */
.form{flex:none}

/* Kto som: úryvok kódu menší, pod textom */
.me-code{order:3}
.me-text{order:2}
.me-facts{order:4}
.me-code pre{font-size:12.5px;line-height:1.7}
.me-code i{margin-right:.7em;padding-right:.6em;width:1.8em}

/* Zverejnenie: úvod bez recenzie, aby bol na prvej obrazovke vidno bežiaci pás */
.hero-ref{display:none}
.hero-in{padding-top:14px;padding-bottom:12px;gap:8px}
.portrait-box{padding:clamp(24px,4svh,36px) 0 4px}
.portrait{width:min(64vw,30svh)}

/* Služby: napadnutý web ako rovnaká karta pred mesačnou správou, pás sa na mobile neukazuje */
.cards-v4 .card-hack{display:flex}
.card-strip{display:none}

/* Cenník: karty sa posúvajú do strán, pod nimi bodky */
.pl{display:flex;gap:12px;margin:0 calc(var(--gutter)*-1);padding:2px var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pl::-webkit-scrollbar{display:none}
.pl-card{flex:0 0 86%;scroll-snap-align:start}
.pl-lead{margin-bottom:12px}

/* Úvod vyplní presne prvú obrazovku a končí bežiacim pásom (ostatné sekcie majú výšku podľa obsahu) */
#uvod{min-height:var(--view);justify-content:flex-start}
#uvod .hero-in{flex:1 0 auto;align-content:center}
#uvod .portrait{width:min(70vw,34svh)}