/* ═══════════════════════════════════════════════════════════════════
   trikito-kontakt-3.css — /kontakt/ jako sekční stránka
   SCOPE: body.type-page.in-kontakt

   Do Záhlaví ZA trikito-docs-1.css: docs sází každou textovou stránku do
   jedné bílé karty max 880 px, kontakt teď potřebuje sekce přes celou šířku,
   takže se z něj tady pár pravidel odbourává. Pořadí je proto závazné.

   Nativní kontaktní formulář (#formContact) se vykresluje ZA obsahem stránky
   a v HTML na něj nesaháme — jen mu tady dáme vzhled, ať sedí do sekcí.

   Nadpis stránky: nativní <h1>Kontakt</h1> zůstává v DOM kvůli SEO, vizuálně
   z něj děláme drobný eyebrow nad velkým „Ozvi se nám.“ (to je <h2> v obsahu).

   v2: ikony řádků jsou icons8 Comic místo inline SVG (telefon a obálka jsou
   tytéž soubory, které používá patička), mapa dorovnává výšku levého sloupce
   a formulář je teď součástí obsahu, takže má vlastní sekci.

   v3: kontaktní formulář ze stránky pryč, místo něj karta s tlačítkem na
   mailto:info@trikito.cz. Styly #formContact tu proto zůstávají jen jako
   pojistka pro případ, že by se formulář na stránku někdy vrátil.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. odbourat kartu z docs, sekce chtějí celou šířku ── */
body.type-page.in-kontakt article.pageArticleDetail{
  max-width:none!important;background:transparent!important;
  border-radius:0!important;box-shadow:none!important;padding:0!important}
body.type-page.in-kontakt .content-inner{max-width:none}
body.type-page.in-kontakt #content-wrapper{
  padding-top:0!important;padding-bottom:0!important}

/* ── 2. hlavička stránky ── */
body.in-kontakt article.pageArticleDetail header{
  max-width:1180px;margin:0 auto;padding:clamp(30px,4vw,54px) clamp(18px,3vw,32px) 0}
body.in-kontakt article.pageArticleDetail header h1{
  font-family:var(--disp,'Grift',sans-serif)!important;
  font-size:12.5px!important;font-weight:700!important;letter-spacing:.16em!important;
  text-transform:uppercase;color:var(--mut,rgba(27,21,19,.62))!important;
  line-height:1!important;margin:0!important;text-align:center!important}
body.in-kontakt article.pageArticleDetail header h1::after{display:none!important}

/* ── 3. rámec sekcí ── */
body.in-kontakt .tk-kont{
  font-size:15.5px;line-height:1.65;color:var(--ink,#1B1513)}
body.in-kontakt .tk-k__sec{padding:clamp(24px,3.4vw,42px) 0}
body.in-kontakt .tk-k__in{
  max-width:1180px;margin:0 auto;padding:0 clamp(18px,3vw,32px)}
/* docs-1 sází v [itemprop=about] všem h1/h2/p `text-align:left!important`
   a `color:var(--ink)!important`, a nadpisům lepí červený proužek přes ::after.
   Bez !important tady kontakt prohrával: nadpisy zůstávaly vlevo a v ink boxu
   byl ink text na ink pozadí, tedy neviditelný. Proto se to přebíjí natvrdo. */
body.in-kontakt .tk-k__h2{
  font-family:var(--disp,'Grift',sans-serif)!important;font-weight:800;
  font-size:clamp(28px,3.8vw,42px);line-height:1.06;letter-spacing:-.025em;
  color:var(--ink,#1B1513)!important;margin:8px 0 0!important;text-align:center!important}
body.in-kontakt .tk-k__h2::after{margin-left:auto!important;margin-right:auto!important}
body.in-kontakt .tk-k__lead{
  max-width:620px;margin:14px auto 0!important;text-align:center!important;
  font-size:16px;color:var(--mut,rgba(27,21,19,.62))!important}
body.in-kontakt .tk-k__intro{padding-top:6px}

/* ── 4. kontaktní řádky + mapa ── */
/* align-items:start nechávalo mapu vysokou jen podle jejího obsahu a pod ní
   zbýval prázdný rámeček. stretch ji roztáhne na výšku levého sloupce. */
body.in-kontakt .tk-k__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);align-items:stretch}
body.in-kontakt .tk-k__rows{display:flex;flex-direction:column;gap:10px}
body.in-kontakt .tk-k__row{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--paper,#fff);border-radius:var(--r,16px);
  padding:16px 18px;text-decoration:none!important;color:var(--ink,#1B1513)!important;
  box-shadow:0 0 0 1px var(--line,rgba(27,21,19,.10));
  transition:box-shadow .18s var(--e,cubic-bezier(.16,1,.3,1)),transform .18s var(--e,cubic-bezier(.16,1,.3,1))}
body.in-kontakt a.tk-k__row:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1.5px var(--ink,#1B1513),0 8px 20px rgba(27,21,19,.08)}
body.in-kontakt .tk-k__ic{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  border-radius:11px;background:var(--surf,#F4F1EA);color:var(--ink,#1B1513)}
/* ikony jsou icons8 Comic, stejná sada jako patička a menu — černý line-art
   na světlém čipu, proto se nepřebarvují, jen zmenšují */
body.in-kontakt .tk-k__ic img{
  width:24px;height:24px;object-fit:contain;display:block}
body.in-kontakt .tk-k__body{display:flex;flex-direction:column;gap:2px;min-width:0}
body.in-kontakt .tk-k__label{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut,rgba(27,21,19,.62))}
body.in-kontakt .tk-k__val{
  font-family:var(--disp,'Grift',sans-serif);font-size:17px;font-weight:700;
  line-height:1.3;color:var(--ink,#1B1513)}
body.in-kontakt .tk-k__note{font-size:13.5px;color:var(--mut,rgba(27,21,19,.62))!important}
body.in-kontakt .tk-k__row--tip{background:var(--surf,#F4F1EA);box-shadow:none}
body.in-kontakt .tk-k__row--tip .tk-k__ic{background:#fff}

body.in-kontakt .tk-k__map{
  position:relative;border-radius:var(--r,16px);overflow:hidden;min-height:340px;
  box-shadow:0 0 0 1px var(--line,rgba(27,21,19,.10))}
body.in-kontakt .tk-k__map iframe{
  position:absolute;inset:0;display:block;width:100%;height:100%;border:0}

/* ── 5. úřední údaje ── */
body.in-kontakt .tk-k__ur-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
body.in-kontakt .tk-k__ur-col{
  background:var(--paper,#fff);border-radius:var(--r,16px);padding:22px 22px 18px;
  box-shadow:0 0 0 1px var(--line,rgba(27,21,19,.10))}
body.in-kontakt .tk-k__ur-t{
  font-family:var(--disp,'Grift',sans-serif)!important;font-size:16px!important;
  font-weight:800!important;letter-spacing:-.01em;color:var(--ink,#1B1513)!important;
  margin:0 0 12px!important;padding-bottom:12px;text-align:left!important;
  border-bottom:1px solid var(--line,rgba(27,21,19,.10))}
body.in-kontakt .tk-k__ur-t::after{display:none!important}
body.in-kontakt .tk-k__ur-col p{
  margin:0 0 10px!important;font-size:14.5px;line-height:1.6;
  color:var(--ink,#1B1513);text-align:left!important}
body.in-kontakt .tk-k__ur-col p:last-child{margin-bottom:0!important}
body.in-kontakt .tk-k__ur-link{
  display:inline-block;font-weight:700;color:var(--red,#C51A11)!important;
  text-decoration:none!important;border-bottom:1.5px solid rgba(197,26,17,.3)!important;
  transition:border-color .16s,color .16s}
body.in-kontakt .tk-k__ur-link:hover{
  color:var(--ink,#1B1513)!important;border-bottom-color:var(--ink,#1B1513)!important}

/* ── 6. dílna: ink blok, ať to na stránce jednou zazní nahlas ── */
body.in-kontakt .tk-k__dilna-box{
  background:var(--ink,#1B1513);color:#fff;border-radius:var(--r,16px);
  padding:clamp(28px,4vw,48px) clamp(22px,4vw,54px);text-align:center;
  box-shadow:0 18px 44px rgba(27,21,19,.16)}
body.in-kontakt .tk-k__dilna-box .tk-k__h2{color:#fff!important;margin-top:0!important}
body.in-kontakt .tk-k__dilna-box .tk-k__h2::after{background:var(--gold,#FFD21E)!important}
body.in-kontakt .tk-k__dilna-box p{
  max-width:620px;margin:14px auto 0!important;color:rgba(255,255,255,.86)!important;
  text-align:center!important;font-size:15.5px}
body.in-kontakt .tk-k__dilna-cta{margin-top:24px}
body.in-kontakt .tk-k__btn{
  display:inline-block;background:var(--gold,#FFD21E);color:var(--ink,#1B1513)!important;
  border-radius:var(--r-s,8px);padding:13px 26px;
  font-family:var(--disp,'Grift',sans-serif);font-size:15px;font-weight:700;
  text-decoration:none!important;border:0;
  transition:transform .2s var(--e,cubic-bezier(.16,1,.3,1)),box-shadow .2s var(--e,cubic-bezier(.16,1,.3,1))}
body.in-kontakt .tk-k__btn:hover{
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.28)}

/* ── 7. provozní doba ── */
body.in-kontakt .tk-k__doba-card{
  max-width:620px;margin:0 auto;background:var(--paper,#fff);
  border-radius:var(--r,16px);padding:26px clamp(20px,3vw,34px);
  box-shadow:0 0 0 1px var(--line,rgba(27,21,19,.10))}
body.in-kontakt .tk-k__doba-t{
  font-family:var(--disp,'Grift',sans-serif)!important;font-size:17px!important;
  font-weight:800!important;color:var(--ink,#1B1513)!important;
  margin:0 0 14px!important;text-align:center!important}
body.in-kontakt .tk-k__doba-t::after{display:none!important}
body.in-kontakt .tk-k__doba-list{
  list-style:none!important;margin:0!important;padding:0!important}
body.in-kontakt .tk-k__doba-list li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;margin:0!important;
  border-top:1px solid var(--line,rgba(27,21,19,.10));font-size:15px}
body.in-kontakt .tk-k__doba-list li::before{content:none!important}
body.in-kontakt .tk-k__doba-list li span:first-child{font-weight:600}
body.in-kontakt .tk-k__doba-list li span:last-child{
  font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
body.in-kontakt .tk-k__doba-note{
  margin:14px 0 0!important;font-size:13.5px;color:var(--mut,rgba(27,21,19,.62));
  text-align:center!important}

/* ── 8. formulář — od v3 se na stránce nevyskytuje, pravidla zůstávají
      jako pojistka, kdyby se sem někdy vrátil ── */
/* karta „Radši napíšeš?“ uzavírá stránku stejným tvarem jako karta s dobou */
body.in-kontakt .tk-k__mail-card{
  max-width:620px;margin:0 auto;background:var(--paper,#fff);
  border-radius:var(--r,16px);padding:clamp(26px,3.4vw,38px) clamp(20px,3vw,34px);
  text-align:center;box-shadow:0 0 0 1px var(--line,rgba(27,21,19,.10))}
body.in-kontakt .tk-k__mail-card .tk-k__h2{margin-top:0!important}
body.in-kontakt .tk-k__mail-cta{margin-top:22px}
body.in-kontakt .tk-k__btn--ink{
  background:var(--ink,#1B1513);color:#fff!important;
  font-variant-numeric:tabular-nums}
body.in-kontakt .tk-k__btn--ink:hover{
  background:var(--ink,#1B1513);box-shadow:0 8px 20px rgba(27,21,19,.24)}
body.in-kontakt #formContact{
  max-width:620px;margin:0 auto clamp(34px,5vw,64px);
  background:var(--paper,#fff);border-radius:var(--r,16px);
  padding:clamp(22px,3vw,32px);
  box-shadow:0 0 0 1px var(--line,rgba(27,21,19,.10)),0 16px 40px rgba(27,21,19,.06)}
body.in-kontakt #formContact fieldset{border:0;margin:0;padding:0}
body.in-kontakt #formContact .form-group{margin:0 0 16px}
body.in-kontakt #formContact label{
  display:block;float:none!important;width:auto!important;text-align:left!important;
  font-size:13px;font-weight:700;color:var(--ink,#1B1513)!important;margin:0 0 7px}
body.in-kontakt #formContact :is(input[type="text"],input[type="email"],input[type="tel"],textarea){
  width:100%;box-sizing:border-box;min-height:48px;font:inherit;font-size:15px;
  color:var(--ink,#1B1513);background:#fff;
  border:1.5px solid var(--line,rgba(27,21,19,.18));border-radius:var(--r-s,8px);
  padding:12px 16px;outline:none;box-shadow:none!important;transition:border-color .16s}
body.in-kontakt #formContact textarea{min-height:150px;line-height:1.6;resize:vertical}
body.in-kontakt #formContact :is(input,textarea):focus{border-color:var(--ink,#1B1513)}
body.in-kontakt #formContact .no-display{display:none!important}
body.in-kontakt #formContact .btn.btn-primary,
body.in-kontakt #formContact button[type="submit"]{
  display:block;width:100%;background:var(--ink,#1B1513)!important;background-image:none!important;
  color:#fff!important;border:0!important;border-radius:var(--r-s,8px)!important;
  font-family:var(--disp,'Grift',sans-serif)!important;font-size:15.5px!important;
  font-weight:700!important;padding:15px 30px!important;text-transform:none!important;
  cursor:pointer;box-shadow:none!important;
  transition:transform .2s var(--e,cubic-bezier(.16,1,.3,1)),box-shadow .2s var(--e,cubic-bezier(.16,1,.3,1))}
body.in-kontakt #formContact .btn.btn-primary:hover,
body.in-kontakt #formContact button[type="submit"]:hover{
  transform:translateY(-1px);box-shadow:0 8px 20px rgba(27,21,19,.24)}
body.in-kontakt #formContact .consents,
body.in-kontakt #formContact .consents p{
  font-size:12.5px;color:var(--mut,rgba(27,21,19,.62));text-align:center}
body.in-kontakt #formContact .consents a{color:var(--red,#C51A11)}

/* ── 9. responsive ── */
@media (max-width:900px){
  body.in-kontakt .tk-k__ur-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  body.in-kontakt .tk-k__grid{grid-template-columns:1fr}
  body.in-kontakt .tk-k__map iframe{min-height:260px}
}

/* ── 10. reduced motion ── */
@media (prefers-reduced-motion:reduce){
  body.in-kontakt a.tk-k__row,
  body.in-kontakt .tk-k__btn,
  body.in-kontakt #formContact button[type="submit"]{transition:none}
  body.in-kontakt a.tk-k__row:hover,
  body.in-kontakt .tk-k__btn:hover,
  body.in-kontakt #formContact button[type="submit"]:hover{transform:none}
}


/* ── 11. přebití docs-1 tam, kde vyhrává specificitou ────────────────
   docs-1 cílí generická pravidla řetězem
   `body.type-page:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] …`,
   což je (0,5,2). Prosté `body.in-kontakt .tk-k__h2` je (0,2,1) a prohrálo
   i s !important — proto se tady ten samý řetěz zopakuje a přidá se k němu
   naše třída. Sám komentář v docs-1 na tuhle past upozorňuje.
   Kdyby přibyla další stránka s vlastním modulem, řeší se to stejně. */
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__h2,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__lead,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__doba-t,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__doba-note,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__dilna-box p{
  text-align:center!important}
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__ur-t,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__ur-col p,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__body{
  text-align:left!important}
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__dilna-box .tk-k__h2{
  color:#fff!important}
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__dilna-box p{
  color:rgba(255,255,255,.86)!important}

/* ── 12. tlačítka: docs-1 barví KAŽDÝ odkaz v obsahu na červenou přes
      `[itemprop=about] a{color:var(--red)!important}`. Naměřeno: text mailto
      tlačítka vycházel červený na ink pozadí (3,03:1) a text zlatého tlačítka
      červený na zlaté (4,1:1) — obojí pod normou. Stejný řetěz specificity
      jako v sekci 11, tady na barvu textu. ── */
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__btn{color:var(--ink,#1B1513)!important}
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__btn--ink{color:#fff!important}
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__btn:hover,
body.type-page.in-kontakt:not(.in-login):not(.in-registrace):not(.in-404) [itemprop="about"] .tk-k__btn--ink:hover{text-decoration:none!important}