/* ==================================================================
   KONTAKT — page-kontakt.php (20. 10. 2026)

   Tři patra v navy, shora světlejší, dolů hlubší:
     úvod   navy jako hero úvodní stránky s fialovým světlem za formulářem;
            vlevo nadpis a přímé kontakty s ikonami (drží se vedle
            formuláře), za nimi vodoznak symbolu značky; vpravo poptávkový
            formulář na světlém listu s řezanou hranou — stejný list jako
            výsuvný panel, takže je poznat, že jde o tentýž formulář;
     údaje  o tón hlubší navy, horní hrana dvě vrstvy vlny; tři oblasti;
     mapa   navy do ní plynule přechází; bez souhlasu náhled, jinak mapa.
   Hlavička je na celé stránce světlá na tmavém (jako nad herem).
   Barvy, písmo a míry ze šablony (style.css). Žádný text pod 15 px.
   ================================================================== */

.kt-page{--k:calc((100vw - 1440px) / 1120);
  --kt-hrana:clamp(46px,4.6vw,76px); /* pás vlevo od listu, kde vlní obrys */
  --kt-udaje:#151C50;              /* plocha bloku údajů = přední vlna */
  color:var(--body)}
/* obsah lícuje s hlavičkou: stejná šířka kontejneru i okraje */
.kt-page .wrap{max-width:clamp(1280px,calc(1280px + 492 * var(--k)),1772px)}
.kt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hlavička: stránka je celá tmavá (kromě listu s formulářem), proto je
   světlá na tmavém po celou dobu — stejné hodnoty jako nad herem úvodní
   stránky (style.css) a Teď už víte; matný podklad má barvu úvodu. */
html:has(.kt-page) header::before{background:rgba(36,45,100,.86)}
html:has(.kt-page) header .brand .brand-logo{filter:brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(2418%) hue-rotate(192deg) brightness(1000%) contrast(100%)}
html:has(.kt-page) header .nav ul a{color:#D9DBF0}
html:has(.kt-page) header .nav ul a:hover,
html:has(.kt-page) header .nav ul a.on{color:#fff}

/* ---------- úvod ---------- */
/* Pozadí začíná nahoře pod průhlednou hlavičkou jako hero na úvodní
   stránce a má jeho navy přechod. Druhá vrstva je tlumené fialové světlo
   za formulářem: list z něj vystupuje, plocha není plochá. */
.kt-uvod{position:relative;margin-top:calc(-1 * var(--hdr-h) - 1px);
  padding:calc(var(--hdr-h) + clamp(28px,4vw,72px)) 0 clamp(150px,calc(170px + 70 * var(--k)),250px);
  background:
    radial-gradient(48% 62% at 76% 44%,rgba(91,74,216,.30) 0%,rgba(91,74,216,0) 100%),
    radial-gradient(120% 100% at 15% 10%,#3B4785 0%,#303B70 45%,#1E2659 100%)}
/* Vodoznak: symbol značky vlevo dole za textem, dolů mizí do vlny. */
.kt-vodoznak{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 94%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 94%)}
.kt-vodoznak .wrap{position:relative;height:100%}
.kt-symbol{position:absolute;left:calc(-1 * clamp(60px,6vw,120px));bottom:-6%;height:min(86%,980px);width:auto;fill:#C3BBF2;opacity:.075}
.kt-uvod-in{position:relative}
.kt-uvod-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(48px,calc(72px + 48 * var(--k)),136px);align-items:start}

/* Levá strana stojí vedle formuláře, dokud formulář nedojede. */
.kt-text{position:sticky;top:calc(var(--hdr-h) + clamp(24px,3vw,48px));padding-top:clamp(12px,2.4vw,40px)}
.kt-text h1{font-size:clamp(56px,calc(96px + 40 * var(--k)),136px);line-height:.93;letter-spacing:-.052em;color:#fff}
.kt-o{display:block;color:var(--orange)}
.kt-lead{margin-top:clamp(26px,2.6vw,40px);max-width:24ch;
  font-size:clamp(20px,calc(23px + 4 * var(--k)),27px);line-height:1.45;letter-spacing:-.012em;color:#D9DBF0}
.kt-uvod .kt-lead{color:#D9DBF0}
/* přímé kontakty: řádek = ikona + údaj, žádné karty; podtržení až pod myší */
.kt-primo{list-style:none;margin:clamp(40px,4.4vw,64px) 0 0;padding:clamp(26px,2.4vw,34px) 0 0;
  border-top:1px solid var(--line-dark);display:grid;gap:clamp(14px,1.4vw,20px);max-width:28ch}
.kt-primo-a{display:inline-flex;align-items:center;gap:clamp(14px,1.3vw,18px);
  font-size:clamp(22px,calc(25px + 4 * var(--k)),30px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#fff;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.3em;
  transition:text-decoration-color .2s ease}
.kt-primo-a:hover{text-decoration-color:var(--orange)}
.kt-ikona{flex:none;width:clamp(24px,calc(26px + 4 * var(--k)),30px);height:auto;aspect-ratio:1;fill:none;stroke:#C3BBF2;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.kt-primo-a:hover .kt-ikona{stroke:#fff}

/* ---------- list s formulářem ----------
   Obrys je jedna křivka (kontakt.js): všechny čtyři rohy zaoblené, levá
   hrana v pásu --kt-hrana jemná esovka — dovnitř, ven, dovnitř — se
   svislými tečnami, takže se nikde nezlomí a nenatahuje se s výškou listu.
   Plocha má měkký přechod do levandule a tenký levandulový lem. Stín nese
   samostatná vrstva (.kt-list-stin): filtr jí dává vlastní kompoziční
   vrstvu, takže psaní do polí stín nepřekresluje. */
.kt-list{--kt-roh:36px;position:relative;z-index:1;margin-left:var(--kt-hrana);scroll-margin-top:calc(var(--hdr-h) + 16px)}
.kt-list-stin{position:absolute;top:0;right:0;bottom:0;left:calc(-1 * var(--kt-hrana));z-index:-1;
  filter:drop-shadow(0 46px 60px rgba(6,9,36,.42)) drop-shadow(0 4px 10px rgba(6,9,36,.22))}
/* bez JS (a než kontakt.js obrys spočítá): zaoblený obdélník tam, kde
   obrys u rohů začíná */
.kt-list-stin i{position:absolute;top:0;right:0;bottom:0;left:calc(var(--kt-hrana) * .55);border-radius:var(--kt-roh);
  background:linear-gradient(160deg,#FDFDFF 0%,#F6F5FE 55%,#ECEBFB 100%);box-shadow:inset 0 0 0 1.5px #CFCBF4}
/* S obrysem nese plochu pořád tahle vrstva, jen oříznutá toutéž křivkou
   (clip-path, nastaví kontakt.js); SVG kreslí už jen lem. Přechod je z CSS,
   ne z <linearGradient>: odkaz fill:url(#…) Chrome na velkém monitoru někdy
   nerozkreslí a z listu zbyde jen linka s navy pozadím uvnitř. */
.ma-obrys .kt-list-stin i{left:0;border-radius:0;box-shadow:none;
  background:linear-gradient(to bottom right,#FDFDFF 0%,#F6F5FE 55%,#ECEBFB 100%)}
.kt-obrys{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.kt-obrys path{fill:none;stroke:#CFCBF4;stroke-width:1.5}
.kt-list:not(.ma-obrys) .kt-obrys{display:none}
.kt-list-in{position:relative;padding:clamp(34px,3.6vw,60px) clamp(28px,3.6vw,60px) clamp(32px,3.4vw,52px) clamp(22px,2.4vw,40px)}
.kt-list h2{font-size:clamp(28px,calc(34px + 8 * var(--k)),44px);letter-spacing:-.045em;line-height:1.04;
  max-width:15ch;margin:0 0 clamp(24px,2.6vw,34px)}
.kt-list .kt-lead{max-width:none}
.kt-list .kt-lead a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:.2em}

/* formulář na stránce: lišta s odesláním nestojí přilepená (to dává smysl
   jen v rolujícím panelu), sedí pod posledním polem */
.pv-stranka .pv-akce{position:static;margin-top:8px;padding:24px 0 0;background:none}
.pv-stranka .pv-hotovo h2{font-size:clamp(28px,calc(34px + 8 * var(--k)),44px)}
.pv-stranka .pv-hotovo .btn{height:52px}
.kt-noscript{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--lav-2);font-size:16px;line-height:1.5;color:var(--ink)}
.kt-noscript a{font-weight:700;text-decoration:underline}

/* ---------- údaje ----------
   O tón hlubší navy než úvod. Shora nahoře plná barva přední vlny, dolů
   ještě hlubší, aby do mapy navazoval tmavý okraj. */
.kt-udaje{--hrana-h:clamp(44px,5.6vw,108px);position:relative;
  background:linear-gradient(180deg,var(--kt-udaje) 0%,#121849 100%);
  padding:clamp(48px,calc(60px + 28 * var(--k)),88px) 0 clamp(96px,calc(112px + 40 * var(--k)),152px);color:#C3C8E4}
/* horní hrana: zadní vlna průsvitná fialová (vyšší, napravo se zvedá
   strměji), přední v barvě bloku; mezi nimi zůstane fialový srpek */
.kt-udaje-hrana{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:calc(var(--hrana-h) + 1px);display:block;pointer-events:none}
.kt-vlna-zadni{fill:#5B4AD8;fill-opacity:.24}
.kt-vlna-predni{fill:var(--kt-udaje)}

.kt-udaje-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.15fr)}
.kt-blok{min-width:0;padding:4px clamp(28px,calc(40px + 24 * var(--k)),72px) 0;border-left:1px solid var(--line-dark)}
.kt-blok:first-child{padding-left:0;border-left:0}
.kt-blok:last-child{padding-right:0}
.kt-blok h2{margin:0 0 clamp(22px,2vw,30px);color:#fff;font-size:clamp(20px,calc(22px + 4 * var(--k)),26px);letter-spacing:-.025em;line-height:1.15}
.kt-blok dl{margin:0;display:grid;gap:18px}
.kt-blok dt{margin:0 0 3px;font-size:15px;font-weight:500;color:#9CA3C8}
.kt-blok dd{margin:0;font-size:clamp(18px,calc(19px + 2 * var(--k)),21px);font-weight:600;line-height:1.45;color:#fff;overflow-wrap:anywhere}
.kt-blok--kontakt dd a{font-size:clamp(22px,calc(26px + 6 * var(--k)),32px);font-weight:700;letter-spacing:-.02em;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-decoration-thickness:2px;text-underline-offset:.26em;
  transition:text-decoration-color .2s ease}
.kt-blok--kontakt dd a:hover{text-decoration-color:var(--orange)}
.kt-blok address{font-style:normal;font-size:clamp(18px,calc(19px + 2 * var(--k)),21px);font-weight:600;line-height:1.55;color:#fff}
.kt-pozn{margin-top:18px;max-width:34ch;font-size:16px;line-height:1.55;color:#A7AECD}
.kt-odkaz{display:inline-block;margin-top:20px;font-size:16px;font-weight:700;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-decoration-thickness:1.5px;text-underline-offset:.32em;
  transition:text-decoration-color .2s ease}
.kt-odkaz:hover{text-decoration-color:var(--orange)}

/* ---------- mapa ----------
   Plocha navazuje na spodek bloku údajů (#121849): nahoře do ní navy
   měkce dobíhá, takže mapa vyrůstá z bloku, ne pod ním. */
.kt-mapa{position:relative;background:#161D52}
.kt-mapa-plocha{position:relative;isolation:isolate;height:clamp(440px,calc(520px + 160 * var(--k)),720px);overflow:hidden;background:#171E54}
.kt-mapa-plocha::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(72px,8vw,140px);z-index:450;pointer-events:none;
  background:linear-gradient(180deg,#121849 0%,rgba(18,24,73,.6) 40%,rgba(18,24,73,0) 100%)}
.kt-mapa-nahled{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:none;object-position:50% 50%}
.kt-mapa-leaflet{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .45s ease}
.kt-mapa-plocha.je-mapa .kt-mapa-leaflet{opacity:1}
.kt-mapa-plocha.je-mapa .kt-znacka--nahled{opacity:0}
.kt-mapa-zdroj{position:absolute;right:12px;bottom:40px;z-index:2;margin:0;padding:3px 9px;border-radius:8px;
  background:rgba(16,22,65,.78);font-size:15px;line-height:1.35;color:#C3C8E4}
.kt-mapa-zdroj a{color:#fff;text-decoration:underline;text-underline-offset:.18em}
.kt-mapa-plocha.je-mapa .kt-mapa-zdroj{display:none}

/* značka: symbol značky v navy kotouči, špička míří na adresní bod */
.kt-znacka{width:58px;height:70px;position:relative;filter:drop-shadow(0 10px 14px rgba(5,8,30,.45))}
.kt-znacka::before{content:"";position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);transform-origin:50% 50%;background:#101641;box-shadow:inset 0 0 0 2px rgba(195,187,242,.55)}
.kt-znacka svg{position:absolute;left:12px;top:9px;width:34px;height:40px}
.kt-znacka-l{fill:#A89BE8}
.kt-znacka-p{fill:#F0552B}
.kt-znacka--nahled{position:absolute;left:50%;top:50%;z-index:2;margin:-70px 0 0 -29px;transition:opacity .3s ease}
/* Leaflet: značka jako divIcon, obal bez výchozího bílého čtverce */
.kt-mapa .leaflet-div-icon{background:none;border:0}
.kt-mapa .leaflet-container{font-family:inherit;background:#171E54;outline-offset:-3px}
.kt-mapa .leaflet-container:focus-visible{outline:2px solid var(--orange)}
/* Dlaždice OpenStreetMap do barev značky: šedé a převrácené (tmavá plocha,
   světlé popisky) se jasem prolnou do navy podkladu (kontakt.js, panel
   kt-podklad) — barvu dává podklad, kresbu dlaždice. */
.kt-mapa-podklad{position:absolute;left:-60000px;top:-60000px;width:120000px;height:120000px;background:#1B2360}
.kt-mapa .leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(1.3) contrast(.84);mix-blend-mode:luminosity}
/* ovládání: spodek mapy zakrývá 30 px zvlněné patičky (style.css) */
.kt-mapa .leaflet-bottom{bottom:30px}
.kt-page .kt-mapa .leaflet-control-zoom{margin:clamp(16px,2vw,28px) clamp(16px,2vw,28px) 0 0;border:0;border-radius:12px;overflow:hidden;
  box-shadow:0 14px 28px -14px rgba(5,8,30,.6)}
.kt-page .kt-mapa .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:22px;font-weight:400;
  background:#101641;color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.kt-page .kt-mapa .leaflet-control-zoom a:last-child{border-bottom:0}
.kt-page .kt-mapa .leaflet-control-zoom a:hover{background:#1B2360}
.kt-page .kt-mapa .leaflet-control-zoom a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.kt-page .kt-mapa .leaflet-control-attribution{margin:0 12px 10px 0;padding:3px 9px;border-radius:8px;background:rgba(16,22,65,.82);
  font-size:15px;line-height:1.35;color:#C3C8E4}
.kt-page .kt-mapa .leaflet-control-attribution a{color:#fff;text-decoration:underline;text-underline-offset:.18em}

/* karta s adresou a odkazy: na desktopu leží na mapě vlevo nahoře, kde
   do mapy dobíhá navy z bloku údajů (značka zůstává volná uprostřed) */
.kt-mapa-in{position:absolute;left:0;right:0;top:clamp(48px,calc(64px + 24 * var(--k)),96px);z-index:500;pointer-events:none}
.kt-mapa-karta{pointer-events:auto;max-width:460px;padding:26px 28px 24px;border-radius:22px;
  background:#101641;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -30px rgba(5,8,30,.8);color:#C3C8E4}
.kt-mapa-adresa{margin:0;font-size:19px;line-height:1.45;color:#C3C8E4}
.kt-mapa-adresa strong{display:block;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.015em}
.kt-mapa-akce{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.kt-mapa-zapnout{flex-basis:100%;justify-content:center;background:#fff;color:var(--ink);height:50px}
.kt-mapa-zapnout:hover{transform:translateY(-2px)}
.kt-mapa-zapnout[hidden]{display:none}
.kt-mapa-zapnout:disabled{cursor:progress;opacity:.85;transform:none}
.kt-mapa-odkaz{font-size:16px;font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
  text-decoration-thickness:1.5px;text-underline-offset:.3em;transition:text-decoration-color .2s ease}
.kt-mapa-odkaz:hover{text-decoration-color:var(--orange)}
.kt-mapa-pozn{margin:16px 0 0;font-size:15px;line-height:1.5;color:#9CA3C8}
.kt-mapa-pozn:empty{display:none}

/* ---------- focus ---------- */
.kt-primo-a:focus-visible,.kt-blok a:focus-visible,.kt-mapa-odkaz:focus-visible,
.kt-mapa-zapnout:focus-visible,.kt-mapa-zdroj a:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}

/* patička na stránce Kontakt: jen spodní pruh (footer.php) */
.tail--pata .foot{border-top:1px solid var(--line-dark)}

/* ---------- tablet a menší ---------- */
@media (max-width:1100px){
  .kt-uvod-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,6vw,56px)}
  .kt-text{position:static;padding-top:clamp(8px,2vw,24px)}
  .kt-lead,.kt-primo{max-width:36ch}
  /* symbol vpravo nahoře vedle nadpisu: list s formulářem je tu pod
     textem a spodek by zakryl */
  .kt-symbol{left:auto;right:calc(-1 * clamp(40px,7vw,90px));top:calc(var(--hdr-h) - 10px);bottom:auto;height:min(600px,62vw)}
  .kt-list{max-width:760px;width:100%;justify-self:end}
  /* karta s adresou pod mapou: na užší ploše by zakryla značku */
  .kt-mapa-in{position:static;padding-bottom:62px;background:#161D52}
  .kt-mapa-karta{max-width:600px;margin-top:-28px;position:relative}
}
@media (max-width:900px){
  .kt-udaje-in{grid-template-columns:minmax(0,1fr)}
  .kt-blok{padding:30px 0 0;border-left:0;border-top:1px solid var(--line-dark);margin-top:30px}
  .kt-blok:first-child{padding-top:0;border-top:0;margin-top:0}
}
@media (max-width:620px){
  .kt-uvod{padding-bottom:clamp(88px,22vw,120px)}
  .kt-text h1{font-size:clamp(48px,14vw,64px)}
  .kt-lead{font-size:20px}
  .kt-primo-a{font-size:21px}
  .kt-symbol{right:-120px;height:440px;top:calc(var(--hdr-h) + 20px)}
  /* list přes celou šířku, řezaná hrana jako u panelu na mobilu skrytá */
  .kt-list{--kt-roh:26px;margin:0 -20px;width:auto;max-width:none;justify-self:stretch}
  .kt-list-stin{left:0}
  .kt-list-stin i{left:0}
  .kt-list-in{padding:30px 20px 28px}
  .kt-mapa-plocha{height:clamp(360px,100vw,440px)}
  .kt-mapa-karta{max-width:none}
  .kt-mapa-zdroj{bottom:38px}
}
@media (prefers-reduced-motion:reduce){
  .kt-primo-a,.kt-ikona,.kt-odkaz,.kt-mapa-odkaz,.kt-mapa-leaflet,.kt-znacka--nahled,.kt-blok--kontakt dd a{transition:none}
  html:has(.kt-page){scroll-behavior:auto}
}
