/* ============================================================================
   V03, sekce 00: hlavicka + hero. Varianta A, "klid a vzduch".

   Cely soubor stoji na tokenech z css/base.css. Kdyz nekde stoji cislo,
   ktere v base.css neni, je hned u nej komentar, ze ceho je poskladane.
   Prehled odvozenych hodnot:
     --hdr-h  = var(--sp-64), vyska hlavicky, aby na ni sla odsadit hero i kotvy
     --wiz-h  = 46px, vyska .input z base.css, drzi dlazdice voleb na stejne lince
     48px     = hodnota .section-radius, tady jako prekryv, do ktereho vjede P02
     16px     = radius .btn--large, nic noveho
   ========================================================================== */

:root{
  /* vyska hlavicky, jediny novy rozmer a je to primo hodnota ze skaly mezer */
  --hdr-h:var(--sp-64);
}

/* kotvy v navigaci nesmi skoncit pod hlavickou */
html{ scroll-padding-block-start:calc(var(--hdr-h) + var(--sp-8)); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* tabularni cislice, V02 je chce vsude, kde se cisla srovnavaji nebo meni */
.nums{ font-variant-numeric:tabular-nums; }

.p00__sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}


/* ============================================================ 1. HLAVICKA ==
   V02 hlavicku nema. Postavena je proto nove, ale vyhradne z jeho dilu.
   Dva stavy: [data-over] nad fotkou (pruhledna, bily text) a klidovy stav
   po odscrollovani (bila plocha, vlasova linka zinc-150, tmavy text).
   Prechod je kanonickych .25s a meni se jen plocha a barva, nikdy typografie.
   ========================================================================= */
.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  background:var(--zinc-0);
  border-block-end:1px solid var(--zinc-150);
  transition:background-color .25s linear, border-color .25s linear;
}
.hdr[data-over]{ background:transparent; border-block-end-color:transparent; }

.hdr__bar{
  height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-24);
}

.hdr__brand{
  font-size:var(--fs-18); line-height:var(--lh-145); font-weight:600;
  color:var(--zinc-950); text-decoration:none; white-space:nowrap;
  transition:color .25s linear;
}

.hdr__nav{ display:flex; align-items:center; gap:var(--sp-8); }
.hdr__nav a{
  display:inline-flex; align-items:center; height:var(--sp-40);
  padding-inline:var(--sp-12); border-radius:var(--r-button);
  font-size:var(--fs-14); line-height:var(--lh-145); font-weight:500;
  color:var(--zinc-600); text-decoration:none;
  transition:color .25s linear;
}
.hdr__nav a:hover{ color:var(--zinc-950); }

.hdr__right{ display:flex; align-items:center; gap:var(--sp-12); }
.hdr__tel{
  display:inline-flex; align-items:center; height:var(--sp-40);
  font-size:var(--fs-14); line-height:var(--lh-145); font-weight:500;
  color:var(--zinc-900); text-decoration:none; white-space:nowrap;
  transition:color .25s linear;
}
.hdr__tel:hover{ color:var(--zinc-950); }
.hdr__cta{ white-space:nowrap; }
.hdr__cta-s{ display:none; }

/* burger je recept "ikonove tlacitko" z V02: .btn--white, 40x40, radius r-button */
.hdr__burger{
  display:none; align-items:center; justify-content:center;
  width:var(--sp-40); height:var(--sp-40); padding:0; flex:none; cursor:pointer;
  border:1px solid var(--zinc-0); border-radius:var(--r-button);
  background:var(--zinc-50); color:var(--zinc-900);
  transition:background-color .25s linear, border-color .25s linear, color .25s linear;
}
.hdr__burger:hover{ background:var(--zinc-150); }
.hdr__ico--close{ display:none; }
.hdr__burger[aria-expanded="true"] .hdr__ico--open{ display:none; }
.hdr__burger[aria-expanded="true"] .hdr__ico--close{ display:block; }

/* --- stav nad fotkou --- */
.hdr[data-over] .hdr__brand,
.hdr[data-over] .hdr__tel{ color:var(--zinc-0); }
.hdr[data-over] .hdr__nav a{ color:var(--white-80); }
.hdr[data-over] .hdr__nav a:hover,
.hdr[data-over] .hdr__tel:hover{ color:var(--zinc-0); }
/* na fotce se svetle tlacitko meni na sklenene, presne recept .btn--glass */
.hdr[data-over] .hdr__burger{
  background:var(--white-10); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  border-color:var(--white-20); color:var(--zinc-0); box-shadow:var(--shadow-inset-hair);
}
.hdr[data-over] .hdr__burger:hover{ background:var(--white-20); }

/* --- mobilni menu ---
   Rozbaleni je vzor V02: grid-template-rows minmax(0,0fr) na minmax(0,1fr),
   zadny max-height hack. */
.hdr__menu{
  display:grid; grid-template-rows:minmax(0,0fr);
  background:var(--zinc-0);
  border-block-end:1px solid var(--zinc-150);
  box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden;
  transition:grid-template-rows .25s, opacity .25s, visibility 0s .25s;
}
.hdr[data-menu] .hdr__menu{
  grid-template-rows:minmax(0,1fr); opacity:1; visibility:visible;
  transition:grid-template-rows .25s, opacity .25s, visibility 0s;
}
.hdr__menuclip{ overflow:hidden; }
.hdr__menuin{ padding-block:var(--sp-16) var(--sp-24); }
.hdr__mnav{ display:flex; flex-direction:column; }
/* radek menu je "odkazovy blok" z V02, jen vyssi kvuli prstu: padding-inline 16, r-button */
.hdr__mnav a{
  display:flex; align-items:center; height:var(--sp-48);
  padding-inline:var(--sp-16); border-radius:var(--r-button);
  font-size:var(--fs-15); line-height:var(--lh-145); font-weight:500;
  color:var(--zinc-900); text-decoration:none;
  transition:background-color .25s linear;
}
.hdr__mnav a:hover{ background:var(--zinc-100); }
.hdr__mtel{
  display:flex; align-items:center; gap:var(--sp-8);
  height:var(--sp-48); margin-block-start:var(--sp-8);
  padding-inline:var(--sp-16); border-radius:var(--r-button);
  background:var(--zinc-100); color:var(--zinc-900); text-decoration:none;
  font-size:var(--fs-15); line-height:var(--lh-145); font-weight:500;
  transition:background-color .25s linear;
}
.hdr__mtel:hover{ background:var(--zinc-150); }
.hdr__mcta{ display:flex; width:100%; margin-block-start:var(--sp-8); }

.hdr :focus-visible{ outline:2px solid var(--zinc-950); outline-offset:2px; }
.hdr[data-over] :focus-visible{ outline-color:var(--zinc-0); }


/* ================================================================ 2. HERO ==
   Fotka pres celou plochu, obsah ve dvou sloupcich, dole tichy pas cisel.
   z-index:0 na sekci je zamerny: udela z hera vlastni vrstvu, takze na nej
   muze nasedla P02 se svym .section-radius a neproleze skrz nadpis.
   ========================================================================= */
.p00{
  position:relative; z-index:0; overflow:hidden;
  display:flex; flex-direction:column;
  color:var(--zinc-0);
  min-block-size:min(100svh, 860px);
  /* nahore vyska hlavicky plus 48, dole 48 vzduchu plus 48 pro prekryv P02 */
  padding-block:calc(var(--hdr-h) + var(--sp-48)) calc(var(--sp-48) + 48px);
}
/* Sev na dalsi sekci. V02 dela sev jedine pres .section-radius plus posun,
   P02 uz radius ma, chybi jen posun, ktery do 02.html psat nechci. */
.p00 ~ #p02{ margin-block-start:-48px; }

.p00__media{ position:absolute; inset:0; z-index:0; }
.p00__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; }

/* Citelnost bez plosneho stinitka.
   Prvni vrstva je prechod od leveho kraje, ktery do dvou tretin sirky uplne
   zmizi, takze stred i pravy okraj fotky zustavaji cista.
   Druha vrstva je uzky prechod pod hlavickou, treti jen spodnich 26 procent
   pod pasem cisel. Barva prekryvu je zinc-950 s alfou, jak zada V02. */
.p00__veil{
  position:absolute; inset:0; display:block; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,9,11,.34) 0%, rgba(9,9,11,0) 18%),
    linear-gradient(0deg,   rgba(9,9,11,.52) 0%, rgba(9,9,11,0) 26%),
    linear-gradient(96deg,  rgba(9,9,11,.76) 0%, rgba(9,9,11,.52) 30%,
                            rgba(9,9,11,.16) 55%, rgba(9,9,11,0) 72%);
}

.p00__wrap{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; }

.p00__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 452px;
  column-gap:var(--sp-48); align-items:start;
}

/* --- levy sloupec --- */
.p00__col{ max-width:640px; }

.p00__tags{ display:flex; gap:6px; flex-wrap:wrap; }
/* Stitek na fotce: recept p01__tag z V02, jen prevleceny do sklenene varianty,
   tedy vypln white-10, ramecek white-20 a pulpixelove svetlo, presne jak to
   dela .btn--glass v base.css. */
.p00__tag{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  border:1px solid var(--white-20); border-radius:var(--r-chip);
  background:var(--white-10); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  box-shadow:var(--shadow-inset-hair);
  padding:4px 10px; color:var(--zinc-0);
  font-size:var(--fs-13); font-weight:500; line-height:var(--lh-155);
}
.p00__tag b{ font-weight:700; }
.p00__g{ flex:none; }
.p00__dot{ width:8px; height:8px; border-radius:var(--r-pill); background:#3f9d55; flex:none; }

/* Nadpis a prepinaci slovo prevzate z V02 P01 jedna ku jedne, vcetne casovani
   a krivky. Sede slovo je na tmave plose zinc-400, coz je ve V02 barva
   predsazeneho textu na tmavem podkladu. */
.p00__h1{
  margin:var(--sp-20) 0 0;
  font-size:var(--fs-64); line-height:1.12; font-weight:600;
  letter-spacing:-.01em; color:var(--zinc-0);
}
.p00__rot{ display:block; height:1.24em; overflow:hidden; }
.p00__rot > span{ display:block; animation:p00slova 12s cubic-bezier(.16,.84,.32,1) infinite; }
.p00__rot i{ display:block; height:1.24em; line-height:1.24; font-style:normal; color:var(--zinc-400); }
@keyframes p00slova{
  0%,18%{ transform:translateY(0); }
  25%,43%{ transform:translateY(-20%); }
  50%,68%{ transform:translateY(-40%); }
  75%,93%{ transform:translateY(-60%); }
  100%{ transform:translateY(-80%); }
}
@media (prefers-reduced-motion:reduce){ .p00__rot > span{ animation:none; } }

.p00__lead{
  margin:var(--sp-20) 0 0; max-width:475px;
  font-size:var(--fs-18); line-height:var(--lh-145); color:var(--white-90);
}
.p00__call{ margin-block-start:var(--sp-32); font-weight:500; }

/* --- pravy sloupec ---
   Bila karta na fotce. Stin je var(--shadow-card), coz je ve V02 presne pripad
   "bily prvek vytazeny nad podklad", nic silnejsiho. */
.p00__form{ scroll-margin-block-start:calc(var(--hdr-h) + var(--sp-24)); }
.p00__form .wiz{ box-shadow:var(--shadow-card); }

/* --- tichy pas dole --- */
.p00__foot{
  margin-block-start:auto; padding-block-start:var(--sp-48);
  border-block-start:1px solid var(--white-20);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-64); flex-wrap:wrap;
}
.p00__nums{ display:flex; align-items:center; gap:var(--sp-48); flex:none; flex-wrap:wrap; }
.p00__num{ display:flex; align-items:center; gap:var(--sp-12); }
.p00__num b{
  white-space:nowrap; font-size:var(--fs-32); line-height:var(--lh-150);
  font-weight:700; color:var(--zinc-0);
}
.p00__num span{
  font-size:var(--fs-13); line-height:var(--lh-135); font-weight:500; color:var(--white-90);
}

/* Pas log. Okraj se resi maskou s dojezdem, ne tvrdym orezem. Barevny prechod
   tady nejde, pod pasem je fotka, takze je to mask-image, ktery V02 povoluje. */
.p00__logos{
  position:relative; overflow:hidden; min-width:0; max-width:400px; flex:1 1 200px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--sp-40),#000 calc(100% - var(--sp-40)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--sp-40),#000 calc(100% - var(--sp-40)),transparent 100%);
}
.p00__track{ display:flex; width:max-content; animation:p00jizda 26s linear infinite; }
.p00__track ul{ display:flex; gap:var(--sp-48); padding:0 var(--sp-48) 0 0; margin:0; list-style:none; flex:none; }
.p00__logo{
  display:flex; align-items:center; height:var(--sp-28); padding-inline:10px; flex:none;
  border:1px dashed var(--white-20); border-radius:var(--r-chip);
  /* stejne sklo jako u stitku nad nadpisem, aby zastupna loga na fotce
     cetla jako zamerny prvek, ne jako artefakt */
  background:var(--white-10); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  color:var(--white-80); font-size:var(--fs-12); font-weight:500; white-space:nowrap;
}
@keyframes p00jizda{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .p00__track{ animation:none; } }


/* ===================================================== 3. DOTAZNIK (wizard)
   Chovani a obsah z V01 (#wiz), vzhled cely na tokenech V02.
   --wiz-h neni novy rozmer, je to vyska .input z base.css. Drzim ji
   v promenne, aby dlazdice voleb, tlacitko souboru i minimalni vyska panelu
   sedely na stejnou linku jako pole formulare.
   Panel ma pevnou minimalni vysku 8 nasobku --wiz-h, aby karta pri prepnuti
   kroku neposkakovala. Nejvyssi krok je ctvrty, tri pole s popiskem.
   ========================================================================= */
.wiz{
  --wiz-h:46px;
  background:var(--zinc-0);
  border:1px solid var(--zinc-150);
  border-radius:var(--r-card);
  padding:var(--sp-28);
  color:var(--zinc-950);
}

.wiz__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-16); }
.wiz__prog{ display:flex; gap:var(--sp-8); flex:1; }
.wiz__seg{ height:8px; flex:1; border-radius:var(--r-pill); background:var(--zinc-300); transition:background-color .25s linear; }
.wiz__seg[data-on="1"]{ background:var(--zinc-600); }
/* Popisek kroku je "cislovaci znacka kroku" z P08: stitkovy recept
   s uzsim horizontalnim paddingem, ramecek zinc-200, radius --r-chip. */
.wiz__label{
  flex:none; border:1px solid var(--zinc-200); border-radius:var(--r-chip);
  padding:4px 6px; white-space:nowrap;
  font-size:var(--fs-13); line-height:var(--lh-155); color:var(--zinc-900);
}

.wiz__panel{
  margin-block-start:var(--sp-16);
  min-height:calc(8.5 * var(--wiz-h));
  display:flex; flex-direction:column;
}
.wiz__q{
  margin:var(--sp-16) 0 0;
  font-size:var(--fs-20); line-height:var(--lh-150); font-weight:600; color:var(--zinc-950);
}
.wiz__text{ margin:var(--sp-16) 0 0; font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-600); }
.wiz__hint{ margin:0; font-size:var(--fs-13); line-height:var(--lh-150); color:var(--zinc-500); }
.wiz__err{ margin:0; font-size:var(--fs-13); line-height:var(--lh-150); font-weight:500; color:var(--zinc-950); }

.wiz__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); margin-block-start:var(--sp-16); }
.wiz__col{ display:grid; grid-template-columns:1fr; gap:var(--sp-8); margin-block-start:var(--sp-16); }

/* dlazdice volby, geometrie shodna s .input, at je to jedna rodina prvku */
.wiz__opt{
  min-height:var(--wiz-h); padding:12px 16px;
  display:flex; align-items:center; justify-content:flex-start; gap:var(--sp-8);
  border-radius:var(--r-button); border:1px solid var(--zinc-150);
  background:var(--zinc-0); color:var(--zinc-900);
  font:inherit; font-size:var(--fs-15); line-height:var(--lh-135);
  text-align:left; cursor:pointer;
  transition:border-color .25s linear, background-color .25s linear;
}
.wiz__grid .wiz__opt{ justify-content:center; text-align:center; }
.wiz__opt:hover{ border-color:var(--zinc-300); background:var(--zinc-50); }
.wiz__opt[aria-pressed="true"]{ border-color:var(--zinc-900); color:var(--zinc-950); font-weight:500; }

/* Seznam vyhod na prvnim kroku. Recept .p01__list z V02, oddeleny vlasovou
   linkou zinc-150, tedy stejnou, jakou ma ramecek karty. */
.wiz__perks{
  margin:var(--sp-24) 0 0; padding-block-start:var(--sp-24);
  border-block-start:1px solid var(--zinc-150);
  display:flex; flex-direction:column; gap:var(--sp-16);
  list-style:none; padding-inline:0;
}
.wiz__perks li{
  display:flex; align-items:center; gap:var(--sp-12);
  font-size:var(--fs-15); line-height:var(--lh-145); color:var(--zinc-700);
}
.wiz__perks svg{ flex:none; color:var(--zinc-950); }

.wiz__field{ display:block; }
/* popisek tesne u sveho pole, 4px je nejnizsi stupen skaly a zaroven
   drzi ctvrty krok pod pevnou vyskou panelu */
.wiz__field > .form-label{ display:block; margin-block-end:var(--sp-4); }
.wiz .input{ background:var(--zinc-0); color:var(--zinc-950); font-family:inherit; }
.wiz .input:focus{ outline:none; border-color:var(--zinc-200); }

/* tlacitko pro nahrani fotky, vypada jako pole, chova se jako tlacitko */
.wiz__file{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-8);
  min-height:var(--wiz-h); padding:12px 16px;
  border:1px solid var(--zinc-150); border-radius:var(--r-button);
  background:var(--zinc-50); color:var(--zinc-900);
  font-size:var(--fs-15); line-height:var(--lh-135); cursor:pointer;
  transition:background-color .25s linear;
}
.wiz__file:hover{ background:var(--zinc-100); }
.wiz__file span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* skryte pole souboru, vizualne pryc, pro odecitac i klavesnici dal dostupne */
.wiz__vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.wiz__foot{ margin-block-start:auto; padding-block-start:var(--sp-16); }
.wiz__row{ display:flex; gap:var(--sp-8); align-items:center; }
.wiz__row .btn{ flex:1; }
.wiz [hidden]{ display:none !important; }  /* .btn a .wiz__done maji vlastni display, samotny atribut hidden by neprosel */
.wiz__wide{ width:100%; margin-block-start:var(--sp-8); }
.wiz__micro{ margin:var(--sp-16) 0 0; font-size:var(--fs-13); line-height:var(--lh-150); color:var(--zinc-500); }
.wiz__done{ display:flex; flex-direction:column; justify-content:center; min-height:calc(8.5 * var(--wiz-h)); }
.wiz__done:focus{ outline:none; }
.wiz :focus-visible{ outline:2px solid var(--zinc-950); outline-offset:2px; }


/* ========================================================== 4. ZLOMY ======
   Odsazeni klesa po stupnich skaly, nadpis po stupnich typograficke skaly
   64 az 56 az 40. Zadna hodnota mimo tokeny.
   ========================================================================= */

/* uzsi okraj, nez zacne pretekat obsah */
@media (max-width:1279px){
  .container{ padding-inline:var(--sp-48); }
  .p00__grid{ grid-template-columns:minmax(0,1fr) 420px; column-gap:var(--sp-32); }
  .p00__foot{ gap:var(--sp-40); }
  .p00__nums{ gap:var(--sp-40); }
  .p00__h1{ font-size:var(--fs-56); }
  .p00__lead{ font-size:var(--fs-15); }
}

/* jeden sloupec, karta jde pod text */
@media (max-width:1023px){
  .hdr__nav,
  .hdr__tel{ display:none; }
  .hdr__burger{ display:inline-flex; }

  .p00{
    min-block-size:0;
    padding-block:calc(var(--hdr-h) + var(--sp-40)) calc(var(--sp-48) + 48px);
  }
  .p00__grid{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-32); }
  .p00__col{ max-width:560px; }
  .p00__form{ max-width:560px; }
  .p00__foot{ padding-block-start:var(--sp-40); }
  /* Fotka je na uzke obrazovce vysoka a uzka. Posun doleva drzi v zaberu
     pracovnika, tedy tmavsi a citelnou cast snimku, misto vypaleneho protisvetla. */
  .p00__media img{ object-position:36% 48%; }
  /* Na uzke obrazovce uz nestaci bocni prechod, obsah jde pres celou sirku.
     Prechod se proto otoci shora dolu a je nejsilnejsi jen pod textem. */
  .p00__veil{
    background:
      linear-gradient(180deg, rgba(9,9,11,.66) 0%, rgba(9,9,11,.46) 34%,
                              rgba(9,9,11,.20) 62%, rgba(9,9,11,.06) 100%),
      linear-gradient(0deg,   rgba(9,9,11,.52) 0%, rgba(9,9,11,0) 22%);
  }
}

@media (max-width:767px){
  .container{ padding-inline:var(--sp-24); }
  .hdr__cta-l{ display:none; }
  .hdr__cta-s{ display:inline; }

  .p00{ padding-block:calc(var(--hdr-h) + var(--sp-32)) calc(var(--sp-48) + 48px); }
  .p00__h1{ font-size:var(--fs-40); }
  .p00__call{ width:100%; }
  .p00__foot{ flex-direction:column; align-items:flex-start; gap:var(--sp-32); }
  .p00__nums{ flex-direction:column; align-items:flex-start; gap:var(--sp-24); }
  .p00__logos{ flex:none; width:100%; max-width:none; }

  .wiz{ padding:var(--sp-24); }
  /* dve dlazdice vedle sebe jsou na mobilu prilis uzke na dve slova */
  .wiz__grid{ grid-template-columns:1fr; }
  /* Na mobilu karta neni vedle niceho, co by se posunulo, takze pevnou vysku
     nepotrebuje a je lepsi, kdyz kazdy krok zabere presne to sve. */
  .wiz__panel,
  .wiz__done{ min-height:0; }
}

@media (max-width:479px){
  .container{ padding-inline:var(--sp-16); }
}

/* nizke okno. Toby na nem pracuje, takze nadpis a odsazeni klesnou o stupen,
   aby dotaznik i s tlacitkem zustal nad ohybem. */
@media (min-width:1024px) and (max-height:820px){
  .p00{
    min-block-size:0;
    padding-block:calc(var(--hdr-h) + var(--sp-24)) calc(var(--sp-32) + 48px);
  }
  .p00__h1{ font-size:var(--fs-56); }
  .p00__lead{ font-size:var(--fs-15); }
  .p00__call{ margin-block-start:var(--sp-24); }
  .p00__foot{ padding-block-start:var(--sp-32); }
}
@media (min-width:1024px) and (max-height:720px){
  .p00__h1{ font-size:var(--fs-40); }
}