/* ==================================================================
   POPTÁVKA — panel, který vyjede zprava

   Levá hrana není rovná: je to řezaný list, stejný jazyk jako přechody
   mezi sekcemi. Kreslí ho SVG s preserveAspectRatio="none", takže jeden
   soubor art-diriguje výškou na všech zařízeních — proto v něm nesmí být
   kružnice ani tah, jehož síla má zůstat konstantní.

   Spodek panelu nese kontakty (textura rýh pod nimi byla 15. 10. 2026
   odebrána).
   ================================================================== */

.ask{position:fixed;inset:0;z-index:80;display:none}
.ask.is-open{display:block}

/* Bez backdrop-filter: rozostření celé stránky stojí kompozitor tolik,
   že se panel při rozjezdu zadrhne. Samotná barva závoje stačí. */
.ask-veil{position:absolute;inset:0;background:rgba(11,16,52,.46);
  opacity:0;transition:opacity .5s ease}
.ask.is-in .ask-veil{opacity:1}

/* ---------- příjezd ----------
   Ne prosté vysunutí: obsah dojíždí pomaleji než plocha (paralaxa)
   a pak naskakuje po blocích. Řezaná hrana je s plochou jeden list a jede
   s ní (dřív předbíhala vlastním posunem a při pohybu se od plochy
   oddělovala).
   Schovaný panel stojí za pravým okrajem i s hranou (100 % + její šířka):
   při 102 % z něj zůstával na obrazovce pruh hrany, který při skrytí
   (display:none) naráz zmizel. */
.ask-panel{position:absolute;top:0;right:0;height:100%;
  width:min(596px,100%);display:flex;flex-direction:column;
  transform:translateX(calc(100% + clamp(46px,7vw,88px) + 2px));will-change:transform;
  transition:transform .78s cubic-bezier(.52,0,.16,1)}
.ask.is-in .ask-panel{transform:translateX(0)}

.ask-in{transform:translateX(54px);will-change:transform;
  transition:transform .92s cubic-bezier(.5,0,.14,1) .04s}
.ask.is-in .ask-in{transform:none}

/* Bloky uvnitř nabíhají po sobě — teprve tím to přestane být posuv
   a začne to být příchod. */
.ask-in > *{opacity:0;transform:translateY(18px);
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,1,.28,1)}
.ask.is-in .ask-in > *{opacity:1;transform:none}
.ask.is-in .ask-in > *:nth-child(1){transition-delay:.30s}
.ask.is-in .ask-in > *:nth-child(2){transition-delay:.36s}
.ask.is-in .ask-in > *:nth-child(3){transition-delay:.43s}
.ask.is-in .ask-in > *:nth-child(4){transition-delay:.51s}

.ask-close{opacity:0;transform:scale(.7);
  transition:opacity .5s ease .46s,transform .6s cubic-bezier(.22,1,.28,1) .46s,
             background .3s ease,border-color .3s ease}
.ask.is-in .ask-close{opacity:1;transform:none}

/* Plocha panelu i řezaná hrana sdílejí jednu barvu, takže mezi nimi
   nemůže vzniknout spára. */
.ask-sheet{position:absolute;inset:0 0 0 0;background:#FAF9FE;
  box-shadow:-30px 0 80px -30px rgba(11,16,52,.45)}
/* Hrana zasahuje 2 px pod plochu: její šířka je ve vw, takže končí na
   zlomku pixelu a mezi ní a plochou jinak prosvítala vlasová spára. */
.ask-edge{position:absolute;z-index:1;top:0;bottom:0;right:calc(100% - 2px);width:calc(clamp(46px,7vw,88px) + 2px);
  height:100%;display:block;pointer-events:none}
.ask-edge path{fill:#FAF9FE}
/* Hrana leží nad plochou (z-index): stín plochy jinak padal i na papír
   hrany a na jejím styku s plochou dělal tmavou čáru. */


.ask-in{position:relative;z-index:2;flex:1;overflow-y:auto;
  padding:clamp(28px,4vw,56px) clamp(24px,4vw,56px) clamp(24px,3vw,40px);
  display:flex;flex-direction:column}

.ask-close{position:absolute;top:clamp(20px,3vw,34px);right:clamp(20px,3vw,34px);
  z-index:4;width:46px;height:46px;border-radius:50%;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center}
.ask.is-in .ask-close:hover{background:var(--ink);border-color:var(--ink);color:#fff;
  transform:rotate(90deg)}

.ask-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body-soft);margin:0 0 16px}
.ask h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.045em;line-height:1.04;
  margin:0 0 clamp(26px,3.4vw,40px);max-width:14ch}

/* ---------- pole ---------- */
.ask-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ask-f{display:block;margin-bottom:18px}
.ask-f > span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body-soft);margin-bottom:9px}
.ask-f input,.ask-f textarea{
  width:100%;font:400 15px/1.5 "Plus Jakarta Sans",system-ui,sans-serif;
  color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  transition:border-color .3s ease,box-shadow .3s ease}
.ask-f textarea{min-height:132px;resize:vertical}
.ask-f input::placeholder,.ask-f textarea::placeholder{color:#A9AEC6}
.ask-f input:focus,.ask-f textarea:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,85,43,.14)}

.ask-send{margin-top:6px;width:100%;justify-content:center}

/* ---------- pata panelu ----------
   Prázdné místo pod formulářem dostane kontakty.  */
.ask-foot{position:relative;margin-top:auto;padding-top:clamp(26px,3vw,38px)}
.ask-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line)}
.ask-foot p{margin:0 0 14px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body-soft)}
.ask-links{display:flex;flex-wrap:wrap;gap:10px 26px}
.ask-links a,.ask-links span{display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.ask-links a i{width:30px;height:30px;border-radius:9px;background:var(--lav);
  display:grid;place-items:center;flex:none;transition:background .3s ease}
.ask-links a:hover i{background:var(--orange)}
.ask-links a:hover i svg path,.ask-links a:hover i svg rect,
.ask-links a:hover i svg circle{stroke:#fff}

/* zahřátí po načtení (ask.js): panel se jednou neviditelně vykreslí
   v konečné poloze, aby první otevření nemuselo nic kreslit poprvé */
.ask.je-zahrati{display:block;opacity:.002;pointer-events:none}
.ask.je-zahrati .ask-panel,.ask.je-zahrati .ask-edge,.ask.je-zahrati .ask-in,
.ask.je-zahrati .ask-in > *,.ask.je-zahrati .ask-close{transition:none;transform:none;opacity:1}

@media (max-width:620px){
  .ask-edge{display:none}
  .ask-panel{width:100%;transform:translateX(102%)}
  .ask-row{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){
  .ask-panel,.ask-veil,.ask-close,.ask-edge,.ask-in,.ask-in > *{transition:none}
  .ask-in,.ask-in > *,.ask-edge,.ask-close{opacity:1;transform:none}
}