/* Služby: rozcestník (page-sluzby.php) a podstránky služeb (page-sluzba.php).
   Obsah je v inc/sluzby.php.

   Návrhový jazyk stránek služeb:
   - plochy místo karet: obsah leží na barevných plochách bez rámečků, stínů
     a ozdobných čárek; plochy se dotýkají a rozlišuje je jen barva;
   - čtyři barvy ploch: navy, modrá, oranžová a levandulová. Každá služba má
     jednu svou (rozcestník, „Další služby“);
   - vodoznak: velká kresba ikony služby (nebo číslice kroku) uvnitř plochy.
     Je jen tam, kde říká, o kterou službu nebo krok jde, nikdy jako tapeta;
   - přechod tmavé a světlé plochy dělá jedna mírná vlna (.sl-vlna);
   - velký text: perex 21 px, odstavce 17 až 19 px. */

.sl-page{--sl-max:1160px;--sl-modra:#404D94;--sl-tmava:#101641;color:var(--body)}
.sl-page .wrap{max-width:calc(var(--sl-max) + 72px)}
.sl-page section{position:relative;padding:88px 0}
.sl-page h2{font-size:clamp(32px,3.4vw,46px);letter-spacing:-.035em;line-height:1.08;margin:0 0 40px;text-wrap:balance}
/* nadpisy sekcí na střed (přání vlastníka 12. 11.); nadpisy v barevných boxech zůstávají vlevo */
.sl-page section>.wrap>h2{text-align:center}
.sl-ukazky .wrap{text-align:center}
.sl-ukazky .sl-projekty{text-align:left}
/* jediná ukázka (e-shop) stojí pod nadpisem na středu, ne v půlce mřížky vlevo */
.sl-projekty:has(>li:only-child){grid-template-columns:minmax(0,560px);justify-content:center}
.sl-page h3{font-size:23px;letter-spacing:-.025em;line-height:1.2;margin:0}
.sl-page ul,.sl-page ol{list-style:none;margin:0;padding:0}

/* ikona služby: tah se s velikostí nezvětšuje, tloušťku určuje místo použití */
.sl-ik{display:block;stroke-width:2.5px}
.sl-ik *{vector-effect:non-scaling-stroke}
/* vodoznak: velký obrys ikony vpravo v pozadí plochy, svisle na střed a zčásti
   za pravým okrajem. Protiváha textu vlevo, ne malý středový prvek. */
.sl-vodoznak{position:absolute;top:50%;left:57%;width:auto;height:104%;translate:0 -50%;stroke-width:3px;opacity:.2;pointer-events:none}

/* vlna mezi tmavou a světlou plochou; barvu výplně určuje sekce */
.sl-vlna{position:absolute;left:0;bottom:2px;width:100%;height:clamp(44px,7vw,110px);display:block;fill:var(--page);pointer-events:none}

/* ---------- úvod: tmavá plocha, vpravo velká obrysová ikona služby ---------- */
.sl-page .sl-hero{margin-top:calc(-1 * (var(--hdr-h) + 1px));padding:calc(var(--hdr-h) + 64px) 0 clamp(120px,13vw,190px);
  /* spodní 4 px plochy jsou rovnou v barvě stránky: vlna na ně navazuje beze švu */
  background:linear-gradient(var(--page),var(--page)) 0 100%/100% 4px no-repeat,
    /* stejná modrá jako sekce Služby na úvodní stránce (portfolio.css .services) */
    radial-gradient(70% 90% at 24% 40%,rgba(94,108,182,.32) 0%,rgba(94,108,182,0) 100%),radial-gradient(60% 80% at 86% 80%,rgba(40,49,112,.30) 0%,rgba(40,49,112,0) 100%),linear-gradient(180deg,#44519A 0%,#404D94 55%,#3B4789 100%);color:#D9DBF0;position:relative;overflow:hidden}
.sl-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(32px,5vw,80px)}
.sl-cesta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:30px;font-size:14px;font-weight:600;color:#9AA0C6}
.sl-cesta a{color:#C9CCEA;text-decoration:none}
.sl-cesta a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.sl-cesta [aria-current]{color:#fff}
.sl-hero h1{max-width:16ch;color:#fff;font-size:clamp(40px,5vw,70px);letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.sl-hero h1 .o{color:var(--orange)}
.sl-perex{max-width:54ch;margin:26px 0 36px;font-size:21px;line-height:1.6;color:#D9DBF0;text-wrap:pretty}
.sl-page--rozcestnik .sl-hero-in{grid-template-columns:minmax(0,1fr)}
.sl-page--rozcestnik .sl-hero h1{max-width:none}
.sl-page--rozcestnik .sl-perex{margin-bottom:0;max-width:62ch}

/* úvod: velká obrysová ikona služby vpravo, protiváha nadpisu */
.sl-nelam{white-space:nowrap}
.sl-hero-text{position:relative;z-index:1}
/* Ikona není v mřížce: stojí v pravé části úvodu, vychází z pravého okraje
   stránky a spodek jí přetne vlna (ta leží nad ní), takže úvod má hloubku.
   Výška roste s šířkou okna, aby se nikdy nepotkala s textem vlevo. */
.sl-hero-ikona{position:absolute;z-index:0;right:clamp(-150px,-6vw,-40px);bottom:clamp(16px,2.4vw,44px);height:min(86%,46vw);color:#fff;pointer-events:none}
.sl-hero-ikona .sl-ik{width:auto;height:100%;stroke-width:3.5px;opacity:.9}
.sl-hero>.sl-vlna{z-index:1}

/* hlavička nad tmavým úvodem: světlá na tmavém, dokud úvod neodroluje
   (.past-hero přidává sluzba.js; stejné řešení jako na úvodu webu) */
html:has(.sl-hero) header:not(.past-hero)::before{background:rgba(68,81,154,.9)}
html:has(.sl-hero) header:not(.past-hero) .brand .brand-logo{filter:brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2418%) hue-rotate(192deg) brightness(1000%) contrast(100%)}
html:has(.sl-hero) header:not(.past-hero) .nav ul a{color:#D9DBF0}
html:has(.sl-hero) header:not(.past-hero) .nav ul a:hover,
html:has(.sl-hero) header:not(.past-hero) .nav ul a.on{color:#fff}
html:has(.sl-hero) header .brand .brand-logo{transition:filter .25s}

/* ---------- o službě: první odstavec velký, druhý vedle něj ---------- */
.sl-page .sl-uvod{padding:56px 0 24px}
.sl-uvod .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 72px;align-items:start}
.sl-uvod p{font-size:19px;line-height:1.7;text-wrap:pretty}
.sl-uvod .sl-uvod-hlavni{color:var(--ink);font-size:clamp(22px,2.1vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.45}

/* ---------- co dostanete: mozaika ploch ---------- */
.sl-plochy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:28px;overflow:hidden}
.sl-plochy li{position:relative;min-height:250px;padding:38px 36px 40px;background:var(--lav);overflow:hidden}
.sl-plochy li:nth-child(even){background:var(--lav-2)}
.sl-plochy h3,.sl-plochy p{position:relative}
.sl-plochy h3{color:var(--ink)}
.sl-plochy p{margin-top:12px;font-size:17px;line-height:1.6}
.sl-plochy .je-hlavni{background:var(--navy);color:#C9CCEA}
.sl-plochy .je-hlavni h3{color:#fff}
.sl-plochy .je-hlavni .sl-vodoznak{color:#fff;left:64%}
.sl-plochy .je-akcent{background:var(--orange);color:#fff}
.sl-plochy .je-akcent h3{color:#fff}

/* ---------- postup: světlá plocha mezi dvěma vlnami, číslice jako vodoznak ---------- */
.sl-page .sl-postup{margin-top:clamp(44px,7vw,110px);padding:72px 0 clamp(130px,13vw,200px);background:linear-gradient(var(--page),var(--page)) 0 100%/100% 4px no-repeat,var(--lav)}
.sl-postup>.sl-vlna{bottom:auto;top:calc(-1 * clamp(44px,7vw,110px) + 1px);fill:var(--lav)}
.sl-postup::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:clamp(44px,7vw,110px);background:var(--page);
  clip-path:polygon(0 62%,8% 54%,18% 45%,30% 38%,42% 36%,54% 39%,66% 46%,78% 50%,90% 46%,100% 34%,100% 100%,0 100%)}
/* Je-li světlá plocha poslední sekcí stránky (rozcestník), patička na ni nasedá
   přímo svou řezanou hranou (style.css: main .tail.site-footer, překryv 30 px).
   Bílá vlna dole by mezi nimi nechala bílý pruh, takže odpadá. */
.sl-page>.sl-postup:last-child{padding-bottom:clamp(110px,10vw,150px);background:var(--lav)}
.sl-page>.sl-postup:last-child::after{display:none}
.sl-kroky{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:krok}
.sl-kroky li{position:relative;counter-increment:krok;padding-top:96px}
.sl-kroky li::before{content:counter(krok);position:absolute;left:-6px;top:-34px;color:var(--navy);opacity:.1;font-size:170px;font-weight:800;letter-spacing:-.06em;line-height:1}
.sl-kroky h3,.sl-kroky p{position:relative}
.sl-kroky h3{color:var(--ink)}
.sl-kroky p{margin-top:10px;font-size:17px;line-height:1.6}
/* výzva patří sem: první krok je rozhovor */
.sl-vyzva{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:64px}
.sl-vyzva p{max-width:44ch;color:var(--ink);font-size:clamp(20px,1.9vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.4}

/* ---------- ukázky práce: světlé plochy jako odkazy ---------- */
.sl-page .sl-ukazky{padding-top:40px}
.sl-projekty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sl-projekty a{display:flex;flex-direction:column;height:100%;padding:32px 34px 30px;border-radius:20px;background:var(--lav-2);transition:background-color .2s,color .2s}
.sl-projekty h3{color:var(--ink);transition:color .2s}
.sl-projekty p{margin-top:10px;font-size:17px;line-height:1.6}
.sl-vice{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;color:var(--ink);font-size:15px;font-weight:700}
.sl-vice svg{transition:transform .22s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
  .sl-projekty a:hover{background:var(--navy);color:#C9CCEA}
  .sl-projekty a:hover h3,.sl-projekty a:hover .sl-vice{color:#fff}
  .sl-projekty a:hover .sl-vice svg,.sl-box:hover .sl-vice svg{transform:translateX(4px)}
}
.sl-page a:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:8px}
.sl-odkaz{display:inline-flex;align-items:center;gap:8px;margin-top:30px;color:var(--ink);font-size:16px;font-weight:700}
.sl-odkaz:hover{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}

/* ---------- otázky: každá na své ploše, bez linek ---------- */
.sl-page .sl-otazky{padding-top:24px}
.sl-faq{display:flex;flex-direction:column;gap:10px;max-width:880px;margin-inline:auto}
.sl-faq details{border-radius:18px;background:var(--lav-2)}
.sl-faq details[open]{background:var(--lav)}
.sl-faq summary{position:relative;display:block;padding:24px 64px 24px 30px;cursor:pointer;list-style:none}
.sl-faq summary::-webkit-details-marker{display:none}
.sl-faq summary h3{font-size:20px}
.sl-faq summary::after{content:"";position:absolute;right:30px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);rotate:45deg;transition:rotate .2s}
.sl-faq details[open] summary::after{rotate:-135deg;margin-top:-3px}
.sl-faq summary:focus-visible{outline:3px solid var(--purple);outline-offset:2px;border-radius:18px}
.sl-faq p{max-width:68ch;padding:0 30px 28px;font-size:17px;line-height:1.7}

/* ---------- plochy služeb: rozcestník a „Další služby“ ---------- */
.sl-page .sl-dalsi{padding-top:40px;padding-bottom:104px}
.sl-boxy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sl-box{position:relative;display:flex;flex-direction:column;height:100%;min-height:270px;padding:34px 34px 30px;border-radius:24px;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.sl-box h2,.sl-box h3,.sl-box p,.sl-box ul,.sl-box .sl-vice{position:relative}
.sl-box p{margin-top:12px;max-width:34ch;font-size:17px;line-height:1.6}
.sl-box--navy{background:var(--navy);color:#C9CCEA}
.sl-box--modra{background:var(--sl-modra);color:#DFE2F7}
.sl-box--oranzova{background:var(--orange);color:#fff}
.sl-box--lav{background:var(--lav);color:var(--body)}
.sl-box--navy h2,.sl-box--navy h3,.sl-box--navy .sl-vice,.sl-box--modra h2,.sl-box--modra h3,.sl-box--modra .sl-vice,.sl-box--oranzova h2,.sl-box--oranzova h3,.sl-box--oranzova .sl-vice{color:#fff}
.sl-box--navy .sl-vodoznak,.sl-box--modra .sl-vodoznak,.sl-box--oranzova .sl-vodoznak{color:#fff}
.sl-box--oranzova .sl-vodoznak{opacity:.32}
.sl-box--lav .sl-vodoznak{color:var(--navy);opacity:.16}
@media(hover:hover) and (pointer:fine){.sl-box:hover{transform:translateY(-3px)}}

/* rozcestník: čtyři velké plochy */
.sl-page .sl-rozcestnik{padding:40px 0 56px}
.sl-boxy--velke{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sl-boxy--velke .sl-box{min-height:400px;padding:44px 44px 38px}
.sl-boxy--velke .sl-vodoznak{left:60%;height:100%}
.sl-box h2{margin:0;font-size:clamp(28px,2.8vw,38px)}
.sl-boxy--velke .sl-box p{font-size:19px;max-width:30ch}
.sl-box ul{display:flex;flex-direction:column;gap:6px;margin:22px 0 0}
.sl-box ul li{font-size:16px;font-weight:700}
.sl-box--lav ul li{color:var(--ink)}

/* ---------- tablet a mobil ---------- */
@media(max-width:960px){
  .sl-page section{padding:64px 0}
  .sl-hero-in{grid-template-columns:minmax(0,1fr)}
  /* tablet a mobil: text přes celou šířku, ikona jako velký obrys v pozadí
     vpravo dole nad vlnou, ořízlá okrajem (stejný princip jako v plochách) */
  .sl-hero-ikona{right:-8%;bottom:clamp(70px,11vw,120px);width:min(52vw,380px);height:auto}
  .sl-hero-ikona .sl-ik{width:100%;height:auto;opacity:.2;stroke-width:3px}
  .sl-uvod .wrap{grid-template-columns:minmax(0,1fr)}
  .sl-plochy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-plochy li:nth-child(even){background:var(--lav)}
  .sl-plochy li:nth-child(4n+2),.sl-plochy li:nth-child(4n+3){background:var(--lav-2)}
  .sl-kroky{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .sl-boxy{grid-template-columns:minmax(0,1fr)}
  .sl-box{min-height:220px}
}
@media(max-width:640px){
  .sl-page .wrap{padding:0 20px}
  .sl-hero-ikona{right:-10%;bottom:52px;width:44vw}
  /* mobil: text jde přes celou šířku, obrys proto sedí v pravém dolním rohu
     vedle krátkého seznamu a odkazu, ořízlý okrajem jako na počítači */
  .sl-vodoznak,.sl-boxy--velke .sl-vodoznak,.sl-plochy .je-hlavni .sl-vodoznak{top:auto;bottom:-10%;left:auto;right:-14%;height:min(76%,250px);translate:none;stroke-width:2px}
  /* dlaždice mozaiky je nízká a text jde do konce: obrys velký, svisle na střed, z větší části za okrajem */
  .sl-plochy .je-hlavni .sl-vodoznak{top:50%;bottom:auto;right:-34%;height:104%;translate:0 -50%}
  .sl-page section{padding:48px 0}
  .sl-page .sl-hero{padding-top:calc(var(--hdr-h) + 36px)}
  .sl-page h2{margin-bottom:28px}
  .sl-perex{margin:20px 0 28px;font-size:18.5px}
  .sl-uvod p{font-size:17.5px}
  .sl-plochy,.sl-kroky,.sl-projekty,.sl-boxy--velke{grid-template-columns:minmax(0,1fr)}
  .sl-plochy{border-radius:22px}
  .sl-plochy li{min-height:0;padding:30px 26px 32px}
  .sl-plochy li:nth-child(n){background:var(--lav)}
  .sl-plochy li:nth-child(even){background:var(--lav-2)}
  .sl-plochy .je-hlavni{background:var(--navy)}
  .sl-plochy .je-akcent{background:var(--orange)}
  .sl-kroky li{padding-top:76px}
  .sl-kroky li::before{font-size:130px;top:-24px}
  .sl-projekty a{padding:26px 24px}
  .sl-boxy--velke .sl-box{min-height:320px;padding:32px 26px 28px}
  .sl-box{padding:28px 26px 26px}
  .sl-faq summary{padding:20px 54px 20px 22px}
  .sl-faq summary::after{right:22px}
  .sl-faq summary h3{font-size:18px}
  .sl-faq p{padding:0 22px 24px}
}
@media(prefers-reduced-motion:reduce){
  .sl-page a,.sl-vice svg,.sl-faq summary::after,.sl-box{transition:none}
}

/* důraz v mozaice platí na každé šířce (musí být až za pravidly pro tablet a mobil) */
.sl-plochy li.je-hlavni{background:var(--navy)}
.sl-plochy li.je-akcent{background:var(--orange)}