/* Služby na úvodní stránce: přepínač se scénami (template-parts/sluzby.php).
   Modrý podklad sekce zůstává z portfolio.css (.services). Vlevo záložky,
   vpravo bílá scéna: nahoře výjev z reálného projektu, dole text.
   Vrstvy scény (.sv-l) mají vlastní natočení v `rotate` a příjezd
   animuje jen `translate`, `scale` a průhlednost — natočení se nepřepíše.
   Bez JS (.sv bez .sv-js) jsou panely pod sebou a záložky schované. */

.sv{padding:72px 0 132px;color:#fff}
.sv-in{width:100%;max-width:1280px;margin:0 auto;padding:0 36px}

/* ---------- nahoře: nadpis vlevo, záložky vpravo nad vizualizací ---------- */
.sv-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(36px,4vw,56px)}
.sv h2{flex:1 1 360px;margin:0;color:#fff;font-size:clamp(34px,3.4vw,50px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.sv-tabs{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08)}
.sv-tab{position:relative;display:block;flex:none;
  padding:13px 22px 15px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;
  transition:background-color .25s,color .25s,box-shadow .25s}
.sv-tab-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sv-tab-name{font-size:16px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.sv-tab[aria-selected="true"]{background:#fff;color:var(--navy,#141B4D);box-shadow:0 22px 40px -24px rgba(10,14,48,.7)}
@media(hover:hover) and (pointer:fine){.sv-tab[aria-selected="false"]:hover{background:rgba(255,255,255,.07)}}
.sv-tab:focus-visible{outline:3px solid #FFB59F;outline-offset:3px}

/* průběh samočinného střídání: jen u vybrané záložky, délku nastaví JS (--sv-t) */
.sv-prog{position:absolute;left:22px;right:22px;bottom:6px;height:2px;border-radius:3px;background:rgba(20,27,77,.08);overflow:hidden;opacity:0}
.sv-prog i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--orange,#F0552B);transform:scaleX(0);transform-origin:left}
.sv.is-auto .sv-tab[aria-selected="true"] .sv-prog{opacity:1}
.sv.is-auto .sv-tab[aria-selected="true"] .sv-prog i{animation:sv-prog var(--sv-t,7s) linear forwards}
.sv.is-paused .sv-tab[aria-selected="true"] .sv-prog i{animation-play-state:paused}
@keyframes sv-prog{to{transform:scaleX(1)}}
/* ---------- pod tím panel služby: vlevo text, vpravo scéna ---------- */
.sv-stage{position:relative;min-width:0}
.sv-panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(36px,4.5vw,72px);align-items:center;
  border-radius:28px;background:#fff;color:var(--navy,#141B4D);overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 40px 80px -40px rgba(8,12,44,.75)}
.sv-panel+.sv-panel{margin-top:72px}
/* Zobrazuje se pouze vybraný panel; ostatní neovlivňují výšku sekce. */
.sv-js .sv-stage{display:grid}
.sv-js .sv-panel{grid-area:1/1}
.sv-js .sv-panel:not(.is-on){display:none}
.sv-js .sv-panel+.sv-panel{margin-top:0}

.sv-scene{position:relative;height:330px;overflow:hidden;
  background:radial-gradient(circle at 1px 1px,rgba(91,74,216,.16) 1px,transparent 1.4px) 0 0/22px 22px,
  linear-gradient(160deg,#F1F0FE 0%,#E6E9FC 100%)}
.sv-l{position:absolute;rotate:var(--r,0deg)}

/* bez bílé karty (služby s 'plna'): dlaždice leží přímo na modrém pozadí sekce */
.sv-panel--plna{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.sv-panel--plna .sv-scene{height:auto;min-height:600px;background:none;overflow:visible}
.sv-panel--plna .sv-bento{padding:0}
.sv-panel--plna .sv-b{box-shadow:0 24px 44px -26px rgba(8,12,44,.7)}
/* výška jedné mřížky (--sv-h): na užším desktopu jsou sloupce užší, tak
   mřížka roste, aby se vešel telefon (1280 px a víc = 670 px, 1024 px =
   784 px); tablet a mobil ji přepisují v media queries */
.sv{--sv-h:max(670px,1240px - 44.5vw)}
.sv-js .sv-panel--plna .sv-scene{min-height:var(--sv-h)}
.sv-bento{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr .95fr;grid-template-rows:1fr auto 1fr;gap:10px;padding:10px}
.sv-bento .sv-l{position:relative}
.sv-b{min-width:0;min-height:0;border-radius:18px;overflow:hidden}

/* 01 · brand a firemní identita: manuál značky Šenovský Grill.
   Logo, typografie, varianty loga na podkladech, barvy, symbol a vizitka. */
.sv-panel--znacka .sv-bento{position:relative;inset:auto;height:var(--sv-h)}
.sv-bento--grill{--b-hl:#D10D0D;--b-tm:#1D1408;--b-sv:#F2E9DC;--b-viz:#E9DFD0;--b-font:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif}
.sv-b-logo{grid-area:1/1/2/3}
.sv-b-typo{grid-area:1/3/3/4}
.sv-b-varianty{grid-area:2/1/3/3;aspect-ratio:1400/736}
.sv-b-barvy{grid-area:3/1}
.sv-b-symbol{grid-area:3/2}
.sv-b-vizitka{grid-area:3/3}
.sv-b-logo b,.sv-b-typo,.sv-b-var b,.sv-b-karta b{font-family:var(--b-font)}
.sv-b-logo{display:flex;align-items:center;justify-content:center;gap:22px;background:var(--b-tm);color:var(--b-sv)}
.sv-b-logo img{width:92px;height:92px;object-fit:contain}
.sv-b-logo b{font-size:42px;line-height:.98;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
/* typografie: vzorník písma přes celou výšku */
.sv-b-typo{display:flex;flex-direction:column;gap:10px;padding:22px 20px;background:var(--b-sv);color:var(--b-tm)}
.sv-b-typo small{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.sv-b-typo-aa{margin-top:auto;font-size:96px;line-height:.85;font-weight:800;letter-spacing:-.05em;color:var(--b-hl)}
.sv-b-typo-jmeno{font-size:19px;font-weight:800;letter-spacing:-.02em}
.sv-b-typo-rezy{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-block:1px solid color-mix(in srgb,var(--b-tm) 14%,transparent);font-size:14px}
.sv-b-typo-rezy em{font-style:normal}
.sv-b-typo-rezy .r{font-weight:400}
.sv-b-typo-rezy .b{font-weight:700}
.sv-b-typo-rezy .x{font-weight:800}
.sv-b-typo-abc{font-size:13px;line-height:1.5;letter-spacing:.04em;opacity:.75}
/* varianty loga: stejné logo na světlé, červené a tmavé */
.sv-b-varianty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-b-var{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px}
.sv-b-var img{width:58px;height:58px;object-fit:contain}
.sv-b-var b{font-size:15px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;text-align:center}
.sv-b-var--svetla{background:var(--b-sv);color:var(--b-tm)}
.sv-b-var--cervena{background:var(--b-hl);color:#fff}
.sv-b-var--cervena img{filter:brightness(0) invert(1)}
.sv-b-var--tmava{background:var(--b-tm);color:var(--b-sv)}
.sv-b-barvy{display:flex}
.sv-b-barvy i{position:relative;flex:1;background:var(--c)}
.sv-b-barvy i:first-child{flex:1.6}
.sv-b-barvy small{position:absolute;left:10px;bottom:12px;font-size:9px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--t,#fff);opacity:.9}
/* symbol: samotný plamen ve velkém, bíle na červené */
.sv-b-symbol{display:grid;place-items:center;background:var(--b-hl);color:#fff}
.sv-b-symbol img{width:58%;max-width:120px;height:auto;filter:brightness(0) invert(1)}
.sv-b-symbol small{position:absolute;left:16px;top:14px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.7}
.sv-b-vizitka{display:grid;place-items:center;background:var(--b-viz)}
.sv-b-karta{display:flex;flex-direction:column;justify-content:center;gap:6px;width:142px;height:88px;padding:0 16px;border-radius:8px;background:var(--b-tm);color:var(--b-sv);rotate:-6deg;
  box-shadow:0 18px 26px -12px rgba(0,0,0,.5)}
.sv-b-karta img{width:24px;height:24px;object-fit:contain}
.sv-b-karta b{font-size:12px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.sv-b-karta i{display:block;width:60%;height:3px;border-radius:2px;background:color-mix(in srgb,var(--b-sv) 25%,transparent)}
.sv-b-karta i+i{width:40%}

/* Stejná vnější plocha jako branding: výšku určuje společné --sv-h. */
.sv-web-composition{position:relative;display:grid;height:var(--sv-h);grid-template-columns:2.15fr .95fr;grid-template-rows:1fr 1fr .9fr;gap:10px;overflow:hidden}
.sv-web-composition .sv-l{position:relative;min-width:0;min-height:0;margin:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 44px -26px rgba(8,12,44,.7)}
.sv-web-main{grid-area:1/1;background:#1D1408}
.sv-web-detail{grid-area:2/1;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:none}
.sv-web-detail img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;border-radius:18px}
.sv-web-composition .sv-web-mobile{grid-area:1/2/3/3;background:#D10D0D}
.sv-web-phone{width:100%;height:100%;padding:0;background:#D10D0D;overflow:hidden}
.sv-web-footer{grid-area:3/1/4/3;background:#1D1408}
.sv-js .sv-panel--weby .sv-scene{height:var(--sv-h);min-height:var(--sv-h)}
@media(max-width:640px){
 .sv-web-composition{gap:6px;grid-template-columns:1fr 1fr;grid-template-rows:.8fr 1fr 1fr auto}
 .sv-web-composition .sv-l,.sv-web-detail img{border-radius:12px}
 .sv-web-main{grid-area:1/1/2/3}
 .sv-web-detail{grid-area:2/1/4/2;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:6px}
 .sv-web-composition .sv-web-mobile{grid-area:2/2/4/3}
 .sv-web-footer{grid-area:4/1/5/3;aspect-ratio:1400/690}
}

/* ---------- text služby vlevo od scény ---------- */
.sv-copy{max-width:470px;color:#fff}
.sv-copy h3{margin:0;color:#fff;font-size:clamp(28px,2.7vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.033em;text-wrap:balance}
.sv-copy>p{margin:18px 0 0;font-size:17px;line-height:1.65;color:rgba(255,255,255,.78);text-wrap:pretty}
/* body jako řádky oddělené tenkou čarou, oranžová fajfka bez podkladu */
.sv-copy ul{margin:28px 0 0;padding:0;list-style:none;box-shadow:0 1px rgba(255,255,255,.14)}
.sv-copy li{display:flex;align-items:center;gap:12px;padding:13px 0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;box-shadow:0 -1px rgba(255,255,255,.14)}
.sv-copy li svg{flex:none;width:18px;height:18px;color:var(--orange,#F0552B)}
/* tlačítko a vedle něj odkaz na stránku služby */
.sv-akce{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-top:30px}
.sv-vice{color:#fff;font-size:15px;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:.35em;text-decoration-thickness:1.5px}
@media(hover:hover) and (pointer:fine){.sv-vice:hover{text-decoration-color:var(--orange,#F0552B)}}
.sv-vice:focus-visible{outline:3px solid #FFB59F;outline-offset:4px;border-radius:4px}
.sv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sv-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--orange,#F0552B);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 14px 26px -14px rgba(240,85,43,.7)}
.sv-cta svg{transition:transform .22s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.sv-cta:hover svg{transform:translateX(4px)}}
.sv-cta:focus-visible{outline:3px solid #FFB59F;outline-offset:4px}

/* ---------- příjezd vybraného panelu ---------- */
.sv-js .sv-panel.is-on .sv-copy{animation:sv-copy .5s cubic-bezier(.2,.75,.25,1) both}
.sv-js .sv-panel.is-on .sv-l{animation:sv-in .7s cubic-bezier(.2,.75,.25,1) both}
.sv-js .sv-panel.is-on .sv-l:nth-child(2){animation-delay:.08s}
.sv-js .sv-panel.is-on .sv-l:nth-child(3){animation-delay:.16s}
.sv-js .sv-panel.is-on .sv-l:nth-child(4){animation-delay:.24s}
.sv-js .sv-panel.is-on .sv-l:nth-child(5){animation-delay:.32s}
.sv-js .sv-panel.is-on .sv-l:nth-child(6){animation-delay:.4s}
.sv-js .sv-panel.is-on .sv-l:nth-child(7){animation-delay:.48s}
.sv-js .sv-panel.is-on .sv-l:nth-child(8){animation-delay:.56s}
.sv-js .sv-panel.is-on .sv-l:nth-child(9){animation-delay:.64s}
@keyframes sv-in{from{opacity:0;translate:0 22px;scale:.96}}
@keyframes sv-copy{from{opacity:0;translate:0 10px}}

/* ---------- tablet a mobil: záložky jako vodorovný pás pod nadpisem,
   text nad scénou ---------- */
@media(max-width:1023px){
  .sv{padding:56px 0 112px}
  .sv-in{padding:0 24px}
  .sv-head{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:26px;margin-bottom:32px}
  /* bez nowrap si sloupec se zalamováním vzal šířku z obsahu (597 px), pás záložek
     se pak neměl kam posouvat a na třetí záložku nešlo klepnout */
  .sv-head>*{min-width:0}
  .sv h2{flex:none}
  .sv-tabs{gap:8px;margin:0 -24px;padding:4px 24px 6px;border-radius:0;background:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .sv-tabs::-webkit-scrollbar{display:none}
  .sv-tab{padding:11px 18px 13px;background:rgba(255,255,255,.08);scroll-snap-align:start}
  .sv-tab-name{font-size:15px}
  .sv-prog{left:16px;right:16px;bottom:5px}
  .sv-panel{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .sv-copy{max-width:600px}
  /* text je nad scénou, nepřilepuje se (jinak by ho dlaždice při posunu překryly) */
  .sv-panel--znacka .sv-copy{position:static}
  /* scéna přes celou šířku: prostřední řada (aspect-ratio) roste se šířkou,
     scéna s ní, aby horní a spodní dlaždice měly pořád ~200 px */
  .sv{--sv-h:max(700px,407px + 36.5vw)}
}
@media(max-width:640px){
  .sv-in{padding:0 16px}
  .sv-tabs{margin-inline:-16px;padding-inline:16px}
  .sv-panel{border-radius:22px}
  .sv-scene{height:250px}
  /* spodní řada přes obě šířky (aspect-ratio) roste se šířkou, scéna s ní */
  .sv{--sv-h:calc(480px + 52.6vw)}
  /* úzká karta: dva sloupce, logo a varianty přes celou šířku, vizitka odpadá */
  .sv-bento{grid-template-columns:1fr 1fr;grid-template-rows:.8fr 1fr 1fr auto;gap:6px;padding:6px}
  .sv-js .sv-panel--znacka .sv-scene{gap:6px}
  .sv-b-logo{grid-area:1/1/2/3}
  .sv-b-symbol{grid-area:2/1}
  .sv-b-typo{grid-area:2/2/4/3}
  .sv-b-barvy{grid-area:3/1}
  .sv-b-varianty{grid-area:4/1/5/3}
  .sv-b-vizitka{display:none}
  .sv-b{border-radius:12px}
  .sv-b-barvy small{display:none}
  .sv-b-logo{gap:14px}
  .sv-b-logo img{width:60px;height:60px}
  .sv-b-logo b{font-size:26px}
  .sv-b-typo{gap:6px;padding:14px}
  .sv-b-typo small{font-size:9px}
  .sv-b-typo-aa{font-size:64px}
  .sv-b-typo-jmeno{font-size:14px}
  .sv-b-typo-rezy{padding:6px 0;font-size:11px}
  .sv-b-typo-abc{font-size:10px}
  .sv-b-symbol small{left:10px;top:9px;font-size:8.5px}
  .sv-b-var{gap:6px;padding:8px}
  .sv-b-var img{width:36px;height:36px}
  .sv-b-var b{font-size:10px}

  .sv-panel{row-gap:26px}
  .sv-copy h3{font-size:26px}
  .sv-copy>p{margin-top:14px;font-size:15.5px}
  .sv-copy ul{margin-top:20px}
  .sv-copy li{padding:11px 0;font-size:14.5px}
  .sv-akce{margin-top:22px}
}

@media(prefers-reduced-motion:reduce){
  .sv-js .sv-panel.is-on .sv-l,.sv-js .sv-panel.is-on .sv-copy{animation:none}
  .sv-tab,.sv-cta svg{transition:none}
}
/* Původní HTML a CSS: text i SVG vykresluje prohlížeč v rozlišení displeje. */
.sv-html-preview{position:absolute;left:0;top:0;display:block;border:0;max-width:none;pointer-events:none;transform-origin:0 0;transform:scale(var(--preview-zoom,.45));background:#1D1408}
.sv-web-main,.sv-web-footer,.sv-web-secondary{overflow:hidden}
.sv-html-preview--interactive{pointer-events:auto;background:#F2F1EE}
.sv-web-phone{overflow:hidden}
.sv-web-main,.sv-web-detail,.sv-web-phone{min-width:0}

.sv-panel--weby .sv-copy{align-self:center;position:static}
@media(max-width:1023px){.sv-panel--weby .sv-copy{position:static}}


/* Telefon podle živého webu: jednoduchý černý okraj a kompletní výřez. */
.sv-web-composition .sv-web-mobile{display:grid;place-items:center;background:#D10D0D}
.sv-web-phone{box-sizing:border-box;position:relative;width:88%;max-width:180px;height:auto;aspect-ratio:780/1688;padding:5px;border:0;border-radius:26px;background:#10100C;overflow:hidden;box-shadow:0 30px 40px -16px rgba(0,0,0,.55)}
.sv-web-phone::before,.sv-web-phone::after{content:none}
.sv-web-phone img{display:block;width:100%;height:auto;border-radius:21px}
@media(max-width:640px){.sv-web-phone{width:88%;padding:4px;border-radius:22px}.sv-web-phone img{border-radius:18px}}

.sv-web-detail .sv-web-secondary{position:relative;min-width:0;min-height:0;height:100%;margin:0;border-radius:18px;overflow:hidden;background:#F2F1EF}
@media(max-width:640px){.sv-web-detail .sv-web-secondary{border-radius:12px}}

/* 03 · systémy na míru: tři pohledy do Správy, kterou klientům stavíme –
   objednávky, rezervační kalendář a zprávy na mobilu. Čisté HTML/CSS,
   údaje smyšlené. Všechny tři dlaždice mají oranžové pozadí, nadpisy jsou
   bílé a údaje leží na bílých kartách s tmavě modrým textem. Stejná vnější plocha jako Brand a Webdesign (--sv-h).
   Každá dlaždice je kontejner a písmo se odvozuje z její šířky (cqw),
   takže rozhraní drží proporce na každé šířce okna. */
.sv-sys{--s-navy:#141B4D;--s-or:#F0552B;--s-fi:#5B4AD8;--s-plocha:#F5F4FC;--s-cara:#E6E4F3;--s-lav:#EFEDFB;--s-t2:#434970;--s-t3:#676C92;
  position:relative;display:grid;height:var(--sv-h);grid-template-columns:2.15fr .95fr;grid-template-rows:1fr 1fr;gap:10px}
.sv-sys .sv-l{position:relative;min-width:0;min-height:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 44px -26px rgba(8,12,44,.7)}
.sv-js .sv-panel--systemy .sv-scene{height:var(--sv-h);min-height:var(--sv-h)}
.sv-panel--systemy .sv-copy{align-self:center}
.sv-s{container-type:inline-size;color:var(--s-navy)}
.sv-s-in{height:100%;font-size:clamp(9px,2.8cqw,15px);line-height:1.35}
.sv-s b{font-weight:700}
.sv-s em,.sv-s i{font-style:normal}
.sv-s svg{flex:none;width:1.3em;height:1.3em}
.sv-s-obj{grid-area:1/1;background:var(--s-or)}
.sv-s-kal{grid-area:2/1;background:var(--s-or)}
.sv-s-mob{grid-area:1/2/3/3;display:grid;place-items:center;padding:16px 12px;background:var(--s-or)}
.sv-s-hlava{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.sv-s-hlava b{color:#fff;font-size:1.5em;font-weight:800;letter-spacing:-.03em}
.sv-s-hlava em{color:rgba(255,255,255,.85);font-size:.84em;font-weight:600}

/* objednávky: tmavý bok s navigací a seznam */
.sv-s-obj .sv-s-in{display:grid;grid-template-columns:10.4em minmax(0,1fr)}
.sv-s-bok{display:flex;flex-direction:column;gap:1.4em;padding:1.35em .85em;border-right:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.9)}
.sv-s-logo{display:flex;flex-direction:column;padding:0 .55em;line-height:1.25}
.sv-s-logo b{color:#fff;font-weight:800;letter-spacing:.04em}
.sv-s-logo em{color:rgba(255,255,255,.8);font-size:.78em;font-weight:600}
.sv-s-nav{display:flex;flex-direction:column;gap:.15em}
.sv-s-nav>span{position:relative;display:flex;align-items:center;gap:.6em;padding:.5em .55em;border-radius:.65em;font-size:.86em;font-weight:600}
.sv-s-nav .on{background:#fff;color:var(--s-navy);font-weight:700}
.sv-s-nav .on::before{content:"";position:absolute;left:-.99em;top:.45em;bottom:.45em;width:.24em;border-radius:0 .2em .2em 0;background:#fff}
.sv-s-nav i{margin-left:auto;min-width:1.7em;padding:.08em .4em;border-radius:99px;background:var(--s-navy);color:#fff;font-size:.82em;font-weight:700;text-align:center}
.sv-s-plocha{display:flex;flex-direction:column;gap:.55em;min-width:0;padding:1.25em 1.25em 0}
.sv-s-plocha .sv-s-hlava{margin-bottom:.25em}
.sv-s-radek{display:grid;grid-template-columns:minmax(0,1fr) auto 5.6em;align-items:center;column-gap:.9em;padding:.68em .9em;border-radius:.85em;background:#fff;color:var(--s-navy)}
.sv-s-radek.nova{box-shadow:inset .3em 0 0 var(--s-navy)}
.sv-s-kdo{display:flex;flex-direction:column;gap:.1em;min-width:0}
.sv-s-kdo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-s-kdo small{margin-left:.6em;color:var(--s-t3);font-size:.8em;font-weight:500}
.sv-s-kdo em{color:var(--s-t2);font-size:.84em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-s-cena{font-size:.94em;font-weight:700;white-space:nowrap}
.sv-s-stav{justify-self:end;padding:.26em .8em;border-radius:99px;background:#E4E0FA;color:#3F35A8;font-size:.76em;font-weight:700;white-space:nowrap}
.sv-s-stav.nova{background:var(--s-navy);color:#fff}
.sv-s-stav.hotovo{background:#E9E9F1;color:var(--s-t3)}

/* rezervace: měsíc vlevo, žádost k potvrzení vpravo */
.sv-s-kal .sv-s-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.sv-s-mesic{display:flex;flex-direction:column;gap:.7em;min-height:0;padding:1.25em 1.4em 1.1em}
.sv-s-mesic .sv-s-hlava b{font-size:1.3em}
.sv-s-dny{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(0,1fr);row-gap:.28em;flex:1;min-height:0}
.sv-s-dny small{align-self:center;color:rgba(255,255,255,.75);font-size:.7em;font-weight:700;text-align:center;text-transform:uppercase}
.sv-s-dny i{display:grid;place-items:center;min-height:0;color:#fff;font-size:.88em;font-weight:600}
.sv-s-dny i.obs{background:rgba(255,255,255,.26)}
.sv-s-dny i.nov{background:var(--s-navy)}
.sv-s-dny i.z{border-radius:99px 0 0 99px}
.sv-s-dny i.k{border-radius:0 99px 99px 0}
.sv-s-legenda{display:flex;gap:1.4em;color:rgba(255,255,255,.9);font-size:.78em;font-weight:600}
.sv-s-legenda span{display:flex;align-items:center;gap:.5em}
.sv-s-legenda span::before{content:"";width:.8em;height:.8em;border-radius:99px;background:rgba(255,255,255,.45)}
.sv-s-legenda .nov::before{background:var(--s-navy)}
.sv-s-detail{display:flex;flex-direction:column;gap:.3em;margin:.9em .9em .9em 0;padding:1.05em 1.1em 1em;border-radius:1em;background:#fff;color:var(--s-navy)}
.sv-s-stitek{align-self:flex-start;margin-bottom:.5em;padding:.26em .75em;border-radius:99px;background:rgba(240,85,43,.13);color:#C2401A;font-size:.74em;font-weight:700}
.sv-s-detail>b{font-size:1.4em;line-height:1.15;letter-spacing:-.02em}
.sv-s-detail>em{color:var(--s-t2);font-size:.86em}
.sv-s-celkem{display:flex;flex-direction:column;margin-top:auto;padding-top:.6em;border-top:1px solid var(--s-cara);font-size:1.45em;font-weight:700;letter-spacing:-.02em}
.sv-s-celkem em{color:var(--s-t3);font-size:.5em;font-weight:600;letter-spacing:0}
.sv-s-akce{display:flex;gap:.5em;margin-top:.6em}
.sv-s-akce span{flex:1;display:grid;place-items:center;height:2.6em;border-radius:99px;font-size:.84em;font-weight:700}
.sv-s-akce .ano{background:var(--s-navy);color:#fff}
.sv-s-akce .ne{box-shadow:inset 0 0 0 1px #CDC9E8}

/* mobil: táž Správa v telefonu */
.sv-s-mob .sv-s-in{display:flex;flex-direction:column;width:min(100%,230px);height:100%;max-height:480px;font-size:clamp(9px,6.1cqw,13.5px);
  border:.42em solid var(--s-navy);color:var(--s-navy);border-radius:2.2em;background:var(--s-plocha);overflow:hidden;box-shadow:0 30px 40px -16px rgba(90,20,0,.55)}
.sv-s-mlista{display:flex;align-items:center;justify-content:space-between;padding:1.3em 1.1em .8em}
.sv-s-mlista b{font-weight:800;letter-spacing:.04em}
.sv-s-mlista svg{width:1.5em;height:1.5em}
.sv-s-mobsah{display:flex;flex-direction:column;gap:.6em;min-height:0;padding:0 .8em}
.sv-s-upo{display:flex;align-items:center;gap:.7em;padding:.7em .8em;border-radius:1em;background:var(--s-navy);color:#fff}
.sv-s-upo>i{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:.7em;background:var(--s-or);color:#fff}
.sv-s-upo>span{display:flex;flex-direction:column;min-width:0}
.sv-s-upo em{font-size:.84em;opacity:.8}
.sv-s-mnadpis{margin:.5em .2em 0;font-size:1.3em;font-weight:800!important;letter-spacing:-.03em}
.sv-s-zprava{display:flex;flex-direction:column;gap:.3em;padding:.75em .85em;border:1px solid var(--s-cara);border-radius:1em;background:#fff}
.sv-s-zprava>span{display:flex;align-items:baseline;justify-content:space-between;gap:.6em}
.sv-s-zprava small{color:var(--s-t3);font-size:.78em;font-weight:600}
.sv-s-zprava em{color:var(--s-t2);font-size:.86em;line-height:1.4}

/* mobil: objednávky přes celou šířku bez boku, pod nimi měsíc a telefon */
@media(max-width:640px){
  .sv-sys{grid-template-columns:1fr 1fr;grid-template-rows:.82fr 1.18fr;gap:6px}
  .sv-sys .sv-l{border-radius:12px}
  .sv-s-obj{grid-area:1/1/2/3}
  .sv-s-obj .sv-s-in{grid-template-columns:minmax(0,1fr);font-size:3.5cqw}
  .sv-s-bok{display:none}
  .sv-s-kal{grid-area:2/1}
  .sv-s-kal .sv-s-in{grid-template-columns:minmax(0,1fr);font-size:6.6cqw}
  .sv-s-detail{display:none}
  .sv-s-mesic{justify-content:center;gap:1em}
  .sv-s-mesic .sv-s-hlava em{display:none}
  .sv-s-dny{flex:none;grid-auto-rows:2.5em}
  .sv-s-legenda{flex-direction:column;gap:.4em}
  .sv-s-mob{grid-area:2/2;padding:10px 8px}
  .sv-s-mob .sv-s-in{font-size:5.9cqw}
}
/* nízké okno na desktopu (notebook): scéna se nezkracuje ani neořezává,
   zmenší se celá (zoom), aby se sekce vešla na obrazovku, a zčásti se
   roztáhne doleva, aby vedle textu nezůstala velká mezera.
   Třídu .sv-nizka, měřítko --sv-z a původní šířku scény --sv-w nastavuje
   assets/js/sluzby.js; bez JS zůstává scéna v plné velikosti. */
.sv-sonda{position:absolute;visibility:hidden;pointer-events:none;width:0;height:var(--sv-h)}
@media(min-width:1024px){
  .sv.sv-nizka{padding:40px 0 88px}
  .sv-nizka .sv-head{margin-bottom:24px}
  .sv.sv-nizka h2{font-size:34px}
  /* scéna drží podobný tvar jako na monitoru (--sv-sw je její šířka po
     zmenšení) a sekce se kolem textu a scény zúží (--sv-max) a vystředí */
  .sv-nizka .sv-in{max-width:min(1280px,var(--sv-max,1280px))}
  .sv-nizka .sv-panel{grid-template-columns:minmax(0,1fr) var(--sv-sw,60%)}
  .sv-nizka .sv-panel--plna .sv-scene{zoom:var(--sv-z,1);width:var(--sv-w,auto);justify-self:end}
  /* manuál značky: prostřední řada se neřídí poměrem stran, jinak by na
     široké mřížce vytlačila horní a dolní řadu */
  .sv-nizka .sv-panel--znacka .sv-bento{grid-template-rows:1fr var(--sv-r2,1.26fr) 1fr}
  .sv-nizka .sv-b-varianty{aspect-ratio:auto}
  /* dlaždice jsou širší než v návrhu, tak v nich logo, písmo i vizitka
     povyrostou, ať neplavou v prázdnu. --sv-k (0 až 1, ze sluzby.js) říká,
     jak moc je okno nízké: na vysokém monitoru zůstává vše jako v návrhu. */
  .sv-nizka .sv-b-logo{gap:calc(22px + 8px*var(--sv-k,0))}
  .sv-nizka .sv-b-logo img{width:calc(92px + 36px*var(--sv-k,0));height:calc(92px + 36px*var(--sv-k,0))}
  .sv-nizka .sv-b-logo b{font-size:calc(42px + 16px*var(--sv-k,0))}
  .sv-nizka .sv-b-var{gap:calc(12px + 4px*var(--sv-k,0))}
  .sv-nizka .sv-b-var img{width:calc(58px + 30px*var(--sv-k,0));height:calc(58px + 30px*var(--sv-k,0))}
  .sv-nizka .sv-b-var b{font-size:calc(15px + 6px*var(--sv-k,0))}
  .sv-nizka .sv-b-symbol img{max-width:calc(120px + 30px*var(--sv-k,0))}
  .sv-nizka .sv-b-karta{zoom:calc(1 + .4*var(--sv-k,0))}
  .sv-nizka .sv-b-typo{padding:calc(22px + 4px*var(--sv-k,0)) calc(20px + 8px*var(--sv-k,0))}
  .sv-nizka .sv-b-typo-aa{font-size:calc(96px + 28px*var(--sv-k,0))}
  .sv-nizka .sv-b-typo-jmeno{font-size:calc(19px + 5px*var(--sv-k,0))}
  .sv-nizka .sv-b-typo-rezy{font-size:calc(14px + 3px*var(--sv-k,0))}
  .sv-nizka .sv-b-typo-abc{font-size:calc(13px + 2px*var(--sv-k,0))}
  .sv-nizka .sv-b-typo small,.sv-nizka .sv-b-symbol small{font-size:calc(10.5px + 2.5px*var(--sv-k,0))}
  .sv-nizka .sv-b-barvy small{font-size:calc(9px + 3px*var(--sv-k,0))}
  /* velmi nízké okno (.sv-tesna): i text vlevo se musí vejít pod záložky */
  .sv.sv-tesna{padding-top:26px}
  .sv-tesna .sv-panel{column-gap:48px}
  .sv-tesna .sv-head{margin-bottom:18px}
  .sv.sv-tesna h2{flex-basis:350px;font-size:30px}
  .sv-tesna .sv-head{column-gap:24px}
  .sv-tesna .sv-tab{padding:10px 17px 12px}
  .sv-tesna .sv-tab-name{font-size:14.5px}
  .sv-tesna .sv-copy h3{font-size:29px}
  .sv-tesna .sv-copy p{margin-top:12px;font-size:15.5px;line-height:1.55}
  .sv-tesna .sv-copy>p+p{margin-top:8px}
  .sv-tesna .sv-copy ul{margin-top:16px}
  .sv-tesna .sv-copy li{padding:9px 0;font-size:14.5px}
  .sv-tesna .sv-akce{margin-top:18px}
  .sv-tesna .sv-cta{min-height:44px}
  .sv-tesna .sv-stav{margin-bottom:12px;padding:5px 12px;font-size:12.5px}
}
/* 03 · Krobo Return: jeden velký motion prostor (assets/css/krobo-return.css).
   Plocha má pevný poměr stran, takže se na užším okně zmenšuje celá. */
.sv-js .sv-panel--systemy .sv-scene{height:auto;min-height:0}
.sv-panel--systemy .sv-scene{min-height:0}
.sv-stav{display:inline-block;margin-bottom:18px;padding:7px 14px;border-radius:6px;background:rgba(255,255,255,.12);font-size:13.5px;font-weight:700;letter-spacing:.01em;color:#fff}
.sv-copy>p+p{margin-top:14px}
/* Krobo Return na nízkém okně: plocha má pevný poměr stran, takže se
   nezoomuje ani neroztahuje; dostane šířku (--sv-kr ze sluzby.js), při
   které se vejde na výšku, a text vedle ní zabere zbytek řádku. */
@media(min-width:1024px){
  .sv.sv-nizka .sv-panel--systemy{grid-template-columns:minmax(0,1fr) var(--sv-kr,40%)}
  .sv.sv-nizka .sv-panel--systemy .sv-scene{zoom:1;width:100%}
  .sv-nizka .sv-panel--systemy .sv-copy{max-width:620px}
  /* velmi nízké okno: tři krátké body vedle sebe, ať se vejde i tlačítko */
  .sv-tesna .sv-panel--systemy .sv-copy ul{display:flex;flex-wrap:wrap;gap:0 26px;padding:4px 0;box-shadow:0 1px rgba(255,255,255,.14),0 -1px rgba(255,255,255,.14)}
  .sv-tesna .sv-panel--systemy .sv-copy li{box-shadow:none}
}