/* ============================================================
   pk-slider.css – slider v hero sekci (petrkarel.cz)
   Slide 1 je původní hero, další slidy se načítají ze
   slider/slides.json (upravují se v admin.php).
   ============================================================ */

/* hero už není přes celou obrazovku – je to rámeček se slidy */
.hero.hs-on{
  display:block; min-height:0; overflow:visible;
  padding:68px 0 clamp(28px,4vw,48px); background:var(--canvas);
}
.hs{ width:min(1360px, 100% - 32px); margin-inline:auto; position:relative; }

.hs-track{
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  border-radius:clamp(24px,3vw,36px);
}
.hs-track::-webkit-scrollbar{ display:none; }
.hs-track.is-jump{ scroll-behavior:auto; }

/* jeden slide = jeden rámeček */
.hs-slide{
  flex:0 0 100%; min-width:0; position:relative; overflow:hidden;
  scroll-snap-align:start; scroll-snap-stop:always;
  border-radius:clamp(24px,3vw,36px);
  border:1px solid var(--hair);
  height:clamp(560px, calc(100svh - 150px), 820px);
  display:flex; align-items:center;
  isolation:isolate;
}

/* ---------- slide 1: původní hero ---------- */
.hs-main{
  background:
    radial-gradient(70% 90% at 85% 40%, rgba(169,156,255,.20), transparent 70%),
    linear-gradient(160deg, #fff 0%, var(--canvas-2) 100%);
}
.hs-main > .hero-grid{ width:min(1120px, 100% - 2*clamp(24px,5vw,72px)); }

/* ---------- obsahový slide ---------- */
.hs-content{ color:var(--ink); }
.hs-content.t-light{ background:#fff; }
.hs-content.t-brand{ background:var(--brand); border-color:transparent; color:#17161f; }
.hs-content.t-dark{ background:#000; border-color:rgba(169,156,255,.24); color:#fff; }
.hs-in{
  width:min(1120px, 100% - 2*clamp(24px,5vw,72px)); margin-inline:auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,72px); align-items:center;
}
.hs-in.no-img{ grid-template-columns:minmax(0,820px); }
.hs-label{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:100px;
  color:var(--brand-ink); background:var(--brand-soft);
}
.hs-label::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.t-brand .hs-label{ color:#17161f; background:rgba(255,255,255,.45); }
.t-dark .hs-label{ color:#c9c1ff; background:rgba(169,156,255,.16); }
.hs-title{
  font-size:clamp(32px,4.4vw,58px); line-height:1.06; font-weight:700; letter-spacing:-.035em; margin:0;
  text-wrap:balance;
}
.hs-text{
  margin:22px 0 0; font-size:clamp(16px,1.45vw,20px); line-height:1.55; max-width:56ch;
  color:var(--ink-2);
}
.t-brand .hs-text{ color:rgba(23,22,31,.74); }
.t-dark .hs-text{ color:rgba(255,255,255,.7); }
.hs-acts{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:34px; }
.t-brand .hs-acts .btn-fill{ background:#17161f; color:#fff; }
.t-brand .hs-acts .btn-plain{ color:#17161f; }
.t-dark .hs-acts .btn-fill{ background:var(--brand); color:#17161f; }
.t-dark .hs-acts .btn-plain{ color:#fff; }
.hs-pic{ display:flex; justify-content:center; align-items:center; min-height:0; }
.hs-pic img{
  width:100%; height:auto; max-height:min(560px, calc(100svh - 260px)); object-fit:contain;
  border-radius:18px;
}

/* ---------- kroužek po najetí myší (stejná čára jako „Pojďme začít hned teď“) ---------- */
.hc{ position:relative; }
.hc-ring{ position:absolute; left:-12%; top:-48%; width:124%; height:196%; max-width:none; overflow:visible; pointer-events:none; }
.hc-ring path, .ck-ring path{
  fill:none; stroke:var(--brand); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;     /* opacity: kulatý konec čáry jinak nechá tečku */
  transition:stroke-dashoffset .5s cubic-bezier(.6,0,.2,1), opacity 0s linear .5s;
}
.hc:hover .hc-ring path, .hc:focus-visible .hc-ring path, .ck:hover .ck-ring path{
  stroke-dashoffset:0; opacity:1; transition:stroke-dashoffset .5s cubic-bezier(.6,0,.2,1), opacity 0s;
}
.t-brand .hc-ring path{ stroke:#17161f; }
.hs-media .hc-ring path{ stroke:#fff; }
.btn-plain.hc .hc-ring{ left:-4%; width:108%; }

/* ---------- panáček z úvodu ve slidech (kreslí ho pk-slider.js do canvasu) ---------- */
.hs-art{ justify-content:center; }
.fig-wrap{ position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(4px,1.5vw,20px); width:100%; isolation:isolate; }
/* měkká fialová záře za postavou – stejná jako u hero */
.fig-wrap::before{
  content:""; position:absolute; inset:2% 6% 4%; z-index:-1; border-radius:50%;
  background:radial-gradient(55% 50% at 40% 40%, rgba(169,156,255,.42), transparent 70%),
             radial-gradient(45% 40% at 70% 70%, rgba(169,156,255,.28), transparent 72%);
  filter:blur(22px);
}
.fig-cv{ display:block; width:auto; height:min(480px, calc(100svh - 260px)); max-width:100%; }
/* kalkulačka: panáček vlevo, text vpravo */
.hs-in.art-left{ grid-template-columns:.95fr 1.05fr; }
.hs-in.art-left > .hs-pic{ order:-1; }
/* postup: panáček ukazuje na časovou osu vedle sebe */
.hs-in.art-wide{ grid-template-columns:.9fr 1.1fr; }
.fig-steps-wrap .fig-cv{ height:min(400px, calc(100svh - 320px)); flex-shrink:0; margin-left:-4%; }
.fig-steps-wrap .tl{ flex:1 1 300px; max-width:330px; margin:0; }
@media(max-width:1100px){ .fig-steps-wrap .tl-step p{ display:none; } }
@media(max-width:900px){
  .hs-in.art-left, .hs-in.art-wide{ grid-template-columns:1fr; }
  .hs-in.art-left > .hs-pic{ order:2; }
  .fig-cv{ height:236px; }
  .fig-cv.fig-calc{ height:min(285px, 76vw); }
  .fig-steps-wrap .fig-cv{ height:205px; margin-left:-10px; }
  .fig-steps-wrap .tl-list{ gap:7px; }
  .fig-steps-wrap .tl-dot{ width:31px; height:31px; }
  .fig-steps-wrap .tl-rail{ left:15px; }
  .fig-steps-wrap .tl-step b{ margin-top:5px; }
  .fig-steps-wrap .tl-chip{ margin-top:10px; }
  .fig-steps-wrap .tl{ flex-basis:auto; }
}

/* ---------- postup spolupráce – svislá časová osa (cyklus 8 s) ----------
   Kroky se postupně odškrtnou, fialová čára roste, na konci štítek „✓ web předán“. */
.tl{ width:100%; max-width:440px; margin-inline:auto; }
.tl-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.tl-lbl{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-ink); }
.tl-time{ font-size:13px; font-weight:600; color:var(--ink-2); padding:5px 12px; border-radius:100px; background:var(--brand-soft); }
.tl-list{ list-style:none; margin:0; padding:0; position:relative; display:grid; gap:clamp(10px,1.8vh,20px); }
.tl-rail{ position:absolute; left:19px; top:20px; bottom:20px; width:2px; background:var(--hair); border-radius:2px; overflow:hidden; }
.tl-rail i{ position:absolute; inset:0; background:var(--brand); transform-origin:top; transform:scaleY(0); animation:tlRail 8s ease-in-out infinite; }
.tl-step{ position:relative; display:flex; gap:16px; align-items:flex-start; }
.tl-dot{
  width:40px; height:40px; flex-shrink:0; border-radius:50%; position:relative; z-index:1;
  background:var(--surface,#fff); border:1.5px solid var(--hair); display:grid; place-items:center;
}
.tl-dot::before{ content:""; position:absolute; inset:-1.5px; border-radius:50%; background:var(--brand); opacity:0; }
.tl-dot i{ grid-area:1/1; position:relative; font-style:normal; font-size:14px; font-weight:700; color:var(--ink-2); }
.tl-dot svg{ grid-area:1/1; position:relative; width:20px; height:20px; fill:none; stroke:#17161f; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.tl-step > div{ opacity:.4; min-width:0; }
.tl-step b{ display:block; font-size:clamp(16px,1.4vw,19px); font-weight:650; letter-spacing:-.01em; margin-top:8px; }
.tl-step p{ margin:3px 0 0; font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.tl-chip{
  display:inline-flex; margin:22px 0 0 56px; padding:8px 15px; border-radius:100px;
  background:#17161f; color:#7ee2a8; font-size:13px; font-weight:600; opacity:0; animation:tlChip 8s ease-out infinite;
}
html[data-theme="dark"] .tl-chip{ background:#000; box-shadow:inset 0 0 0 1px rgba(169,156,255,.28); }
@keyframes tlRail{ 0%,8%{ transform:scaleY(0); } 22%{ transform:scaleY(.25); } 36%{ transform:scaleY(.5); } 50%{ transform:scaleY(.75); } 64%,93%{ transform:scaleY(1); opacity:1; } 97%{ opacity:0; transform:scaleY(1); } 100%{ opacity:0; transform:scaleY(0); } }
@keyframes tlChip{ 0%,66%{ opacity:0; transform:translateY(6px); } 71%,92%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:none; } }
.tl-s1 .tl-dot::before, .tl-s1 .tl-dot svg{ animation:tlOn1 8s infinite; }
.tl-s1 .tl-dot i{ animation:tlOff1 8s infinite; }
.tl-s1 > div{ animation:tlTx1 8s infinite; }
@keyframes tlOn1{ 0%,7%{ opacity:0; } 9%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
@keyframes tlOff1{ 0%,7%{ opacity:1; } 9%,93%{ opacity:0; } 97%,100%{ opacity:1; } }
@keyframes tlTx1{ 0%,7%{ opacity:.4; } 9%,93%{ opacity:1; } 97%,100%{ opacity:.4; } }
.tl-s2 .tl-dot::before, .tl-s2 .tl-dot svg{ animation:tlOn2 8s infinite; }
.tl-s2 .tl-dot i{ animation:tlOff2 8s infinite; }
.tl-s2 > div{ animation:tlTx2 8s infinite; }
@keyframes tlOn2{ 0%,21%{ opacity:0; } 23%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
@keyframes tlOff2{ 0%,21%{ opacity:1; } 23%,93%{ opacity:0; } 97%,100%{ opacity:1; } }
@keyframes tlTx2{ 0%,21%{ opacity:.4; } 23%,93%{ opacity:1; } 97%,100%{ opacity:.4; } }
.tl-s3 .tl-dot::before, .tl-s3 .tl-dot svg{ animation:tlOn3 8s infinite; }
.tl-s3 .tl-dot i{ animation:tlOff3 8s infinite; }
.tl-s3 > div{ animation:tlTx3 8s infinite; }
@keyframes tlOn3{ 0%,35%{ opacity:0; } 37%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
@keyframes tlOff3{ 0%,35%{ opacity:1; } 37%,93%{ opacity:0; } 97%,100%{ opacity:1; } }
@keyframes tlTx3{ 0%,35%{ opacity:.4; } 37%,93%{ opacity:1; } 97%,100%{ opacity:.4; } }
.tl-s4 .tl-dot::before, .tl-s4 .tl-dot svg{ animation:tlOn4 8s infinite; }
.tl-s4 .tl-dot i{ animation:tlOff4 8s infinite; }
.tl-s4 > div{ animation:tlTx4 8s infinite; }
@keyframes tlOn4{ 0%,49%{ opacity:0; } 51%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
@keyframes tlOff4{ 0%,49%{ opacity:1; } 51%,93%{ opacity:0; } 97%,100%{ opacity:1; } }
@keyframes tlTx4{ 0%,49%{ opacity:.4; } 51%,93%{ opacity:1; } 97%,100%{ opacity:.4; } }
.tl-s5 .tl-dot::before, .tl-s5 .tl-dot svg{ animation:tlOn5 8s infinite; }
.tl-s5 .tl-dot i{ animation:tlOff5 8s infinite; }
.tl-s5 > div{ animation:tlTx5 8s infinite; }
@keyframes tlOn5{ 0%,63%{ opacity:0; } 65%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
@keyframes tlOff5{ 0%,63%{ opacity:1; } 65%,93%{ opacity:0; } 97%,100%{ opacity:1; } }
@keyframes tlTx5{ 0%,63%{ opacity:.4; } 65%,93%{ opacity:1; } 97%,100%{ opacity:.4; } }
.hs-slide:not(.is-active) .tl *, .hs-slide:not(.is-active) .tl-dot::before,
.hs.is-offscreen .tl *, .hs.is-offscreen .tl-dot::before{ animation-play-state:paused !important; }
@media(max-width:900px){
  .tl-head{ margin-bottom:14px; }
  .tl-list{ gap:10px; }
  .tl-step p{ display:none; }
  .tl-dot{ width:34px; height:34px; }
  .tl-rail{ left:16px; top:17px; bottom:17px; }
  .tl-step b{ font-size:16px; margin-top:6px; }
  .tl-chip{ margin:14px 0 0 50px; }
}
@media(prefers-reduced-motion:reduce){
  .tl *, .tl-dot::before{ animation:none !important; }
  .tl-step > div, .tl-dot::before, .tl-dot svg, .tl-chip{ opacity:1; }
  .tl-dot i{ opacity:0; } .tl-rail i{ transform:none; }
}

/* ---------- obrázek / video přes celý slide ---------- */
.hs-media{ background:#0e0d14; border-color:transparent; color:#fff; text-decoration:none; }
.hs-media > img, .hs-media > picture, .hs-media > picture > img, .hs-media > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.hs-media.has-over::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.18) 48%, transparent 72%);
}
.hs-over{
  align-self:flex-end; width:100%;
  padding:0 clamp(24px,5vw,72px) clamp(28px,5vw,64px);
}
.hs-over .hs-title{ font-size:clamp(30px,4.2vw,56px); max-width:18ch; }
.hs-over .hs-text{ color:rgba(255,255,255,.82); max-width:52ch; margin-top:14px; }
.hs-over .hs-label{ color:#fff; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); }
.hs-over .hs-acts{ margin-top:24px; }
.hs-over .btn-fill{ background:#fff; color:#17161f; }
.hs-over .btn-plain{ color:#fff; }
a.hs-media:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }

/* ---------- ovládání pod rámečkem ---------- */
.hs-ui{
  display:flex; align-items:center; gap:18px; margin-top:14px; padding:0 6px;
  min-height:40px;
}
.hs-ui[hidden]{ display:none; }
.hs-dots{ display:flex; align-items:center; gap:8px; flex:1; }
.hs-dot{
  position:relative; width:8px; height:8px; padding:0; border:0; border-radius:100px; cursor:pointer;
  background:color-mix(in srgb, var(--ink) 18%, transparent); overflow:hidden;
  transition:width .35s cubic-bezier(.2,.9,.3,1), background .2s ease;
}
.hs-dot::before{ content:""; position:absolute; inset:-12px -4px; }   /* větší plocha pro prst */
.hs-dot:hover{ background:color-mix(in srgb, var(--ink) 34%, transparent); }
.hs-dot.is-on{ width:44px; background:var(--brand-soft); }
.hs-dot i{
  position:absolute; inset:0; border-radius:inherit; background:var(--brand-ink);
  transform-origin:left; transform:scaleX(0);
}
.hs-dot.is-on i{ transform:scaleX(1); }
.hs.is-playing .hs-dot.is-on i{ animation:hsFill var(--hs-dur,7s) linear forwards; }
.hs.is-paused .hs-dot.is-on i{ animation-play-state:paused; }
@keyframes hsFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hs-count{
  font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-2);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.hs-count b{ color:var(--ink); font-weight:600; }
/* šipky přímo v rámečku slideru – po stranách, svisle uprostřed */
.hs-stage{ position:relative; }
.hs-arrows{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between; padding:0 clamp(10px,1.4vw,20px);
}
.hs:not(.is-multi) .hs-arrows{ display:none; }
.hs-arrow{
  pointer-events:auto; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid var(--hair); background:rgba(255,255,255,.82); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -10px rgba(23,22,31,.35);
  display:grid; place-items:center; opacity:.9;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.1), opacity .2s ease;
}
.hs-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hs-arrow:hover{ opacity:1; transform:scale(1.06); }
.hs-prev:hover svg{ transform:translateX(-1px); } .hs-next:hover svg{ transform:translateX(1px); }
html[data-theme="dark"] .hs-arrow{ background:rgba(26,24,37,.82); color:var(--ink); }
.hs-dot:focus-visible, .hs-arrow:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:3px; }

/* ---------- tmavý režim ---------- */
html[data-theme="dark"] .hs-main{
  background:
    radial-gradient(70% 90% at 85% 40%, rgba(169,156,255,.16), transparent 70%),
    linear-gradient(160deg, #1a1825 0%, #121019 100%);
}
html[data-theme="dark"] .hs-content.t-light{ background:linear-gradient(160deg, #1a1825 0%, #121019 100%); }
html[data-theme="dark"] .t-brand .hs-acts .btn-fill{ background:#17161f; color:#fff; }
html[data-theme="dark"] .t-dark .hs-acts .btn-fill{ color:#17161f; }
html[data-theme="dark"] .hs-over .btn-fill{ background:#fff; color:#17161f; }

/* ---------- tablet a telefon ---------- */
@media(max-width:900px){
  .hero.hs-on{ padding-top:62px; }
  .hs{ width:calc(100% - 20px); }
  .hs-track{ gap:10px; }
  .hs-slide{ height:auto; min-height:0; align-items:stretch; }
  .hs-main{ padding:26px 0 28px; }
  .hs-main > .hero-grid{ width:calc(100% - 40px); gap:22px; }
  .hs-main .hero-visual{ max-width:min(250px, 64vw); }
  .hs-main .hero-sub{ margin-top:0; }
  .hs-main .hero-actions{ margin-top:22px; }
  .hs-content{ padding:34px 0 36px; }
  .hs-in, .hs-in.no-img{ grid-template-columns:1fr; gap:28px; width:calc(100% - 40px); align-content:center; }
  .hs-pic{ order:2; }
  .hs-pic img{ max-height:300px; }
  .calc-art{ max-height:250px; }
  .hs-acts{ margin-top:26px; }
  .hs-acts .btn{ flex:1 1 auto; }
  /* obrázek/video: výška podle nejvyššího slidu (všechny slidy jsou stejně vysoké) */
  .hs-media{ min-height:min(640px, 150vw); }
  .hs-over{ padding:0 22px 26px; }
  .hs-ui{ justify-content:center; margin-top:12px; }
  .hs-dots{ flex:0 0 auto; }
  .hs-arrows, .hs-count{ display:none !important; }
}

/* malé telefony (do 400 px): kompaktnější úvod, ať jsou tlačítka blíž obrazovce */
@media(max-width:400px){
  .hs-main{ padding:20px 0 22px; }
  .hs-main > .hero-grid{ gap:16px; }
  .hs-main .hero-visual{ max-width:min(215px, 58vw); }
  .hs-main .hero-actions{ margin-top:16px; }
  .hs-content{ padding:26px 0 26px; }
  .hs-in, .hs-in.no-img{ gap:20px; }
}

@media(prefers-reduced-motion:reduce){
  .hs-track{ scroll-behavior:auto; }
  .hs.is-playing .hs-dot.is-on i{ animation:none; transform:scaleX(1); }
}

/* náhled z administrace: bez cookie lišty a chatu */
html.pk-preview .ck-bar, html.pk-preview .ck-modal, html.pk-preview #pk-chat{ display:none !important; }