/* Strona Kontakt + podziekowanie (home/contact_page.html, home/contact_thank_you.html), styl marki 2026-09.
   Ladowany z bloku content, PO nowa.css. Zmienne (--nieb, --granat, --chlod, --linia...) i .btn/.etyk sa w nowa.css.
   Stare style kontaktu (.contact-* w strama.css, .p-contact-* w premium-pages.css) zostaja nietkniete: szablon ich juz nie uzywa.
   Blok przedstawicieli (.rp-*) renderuje sie jak dotad, tu tylko odstep. */
.page-kontakt #main{padding:0}
.page-kontakt h1,.page-kontakt h2,.page-kontakt h3,.page-kontakt p{margin:0}
.page-kontakt .etyk{display:block}

/* hero: jasny, dwie kolumny (tekst | szybkie dane) */
.kt-hero{background:#fff;border-bottom:1px solid var(--linia);padding:64px 0 56px}
.kt-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.kt-hero h1{color:var(--granat);font-weight:700;font-size:clamp(36px,4.2vw,58px);line-height:1.06;margin:10px 0 18px;max-width:16ch}
.kt-lead{font-size:18px;line-height:1.55;color:var(--szary);max-width:52ch}
.kt-lead p{margin:0 0 8px}
.kt-lead p:last-child{margin-bottom:0}
.kt-dane{list-style:none;margin:0;padding:0;display:grid}
.kt-dane li{border-top:1px solid var(--linia);padding:16px 0;display:grid;gap:5px}
.kt-dane li:last-child{border-bottom:1px solid var(--linia)}
.kt-dane small{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--nieb)}
.kt-dane a{font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:19px;line-height:1.3;color:var(--granat);overflow-wrap:anywhere;transition:color .18s var(--ease)}
.kt-dane a:hover{color:var(--nieb)}
.kt-dane address{font-style:normal;font-size:16px;line-height:1.5;color:var(--tekst)}

/* formularz: chlodne tlo, biala karta z niebieska krawedzia, obok zdjecie */
.kt-glowna{background:var(--chlod);padding:64px 0 80px}
.kt-glowna-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:stretch}
.kt-form{background:#fff;border-top:4px solid var(--nieb);padding:34px 34px 30px;display:grid;gap:18px;align-content:start;color:var(--tekst);box-shadow:0 12px 32px rgba(23,27,43,.05)}
.kt-form-gora{display:grid;gap:6px}
.kt-form-gora h2{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin-top:4px}
.kt-form-gora p:not(.etyk){color:var(--szary);font-size:15.5px;line-height:1.5}
.kt-nota{display:flex;gap:10px;align-items:flex-start;background:var(--n50);color:var(--nieb-800);padding:14px 18px;font-size:15px;line-height:1.5}
.kt-nota[hidden]{display:none}
.kt-nota svg{width:20px;height:20px;flex:none;margin-top:2px}
.kt-nota b{font-family:Poppins,Arial,sans-serif;font-weight:600}
.kt-nota-dekor:not(:empty):before{content:" · "}
.kt-nota-dekor:not(:empty){font-weight:500;color:var(--nieb)}
.kt-form .form-alert{margin:0}
.kt-siatka{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.kt-pole{display:grid;gap:5px;font-size:13px;min-width:0}
.kt-pole--szer{grid-column:1/-1}
.kt-pole>span{font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.04em;color:var(--granat)}
.kt-pole>span small{font-weight:400;font-size:12px;color:var(--szary);letter-spacing:0}
.kt-pole input,.kt-pole textarea{width:100%;margin:0;padding:11px 12px;border:1px solid var(--linia);border-radius:0;background:#fff;font:400 15px/1.5 Roboto,Arial,sans-serif;color:var(--tekst);box-shadow:none;transition:border-color .18s var(--ease)}
.kt-pole input:hover,.kt-pole textarea:hover{border-color:var(--szary)}
.kt-pole input:focus,.kt-pole textarea:focus{outline:2px solid var(--nieb);outline-offset:0;border-color:var(--nieb)}
.kt-pole textarea{min-height:150px;resize:vertical}
.kt-pole-pomoc{font-size:12.5px;color:var(--szary);line-height:1.45}
.kt-pole-blad{font-size:13px;color:#b3261e;line-height:1.45}
.kt-form .ochrona-turnstile{margin-top:0}
.kt-dol{display:grid;gap:14px;justify-items:start}
.kt-slij{padding:16px 28px}
.kt-zgoda{font-size:12.5px;line-height:1.5;color:var(--szary);max-width:56ch}
.kt-obraz{position:relative;overflow:hidden;background:var(--linia);min-height:100%}
.kt-obraz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* blok przedstawicieli (StreamField) pod formularzem: bez zmian wizualnych, tylko domyslne tlo strony */
.kt-stream{background:#fff}

/* podziekowanie po wyslaniu */
.kt-dzieki{background:#fff;padding:96px 0 88px}
.kt-dzieki-in{max-width:760px}
.kt-znak{width:56px;height:56px;display:grid;place-items:center;background:var(--n50);color:var(--nieb);margin-bottom:22px}
.kt-znak svg{width:28px;height:28px}
.kt-dzieki h1{color:var(--granat);font-weight:700;font-size:clamp(34px,4vw,54px);line-height:1.06;margin:10px 0 18px}
.kt-dzieki-tekst{font-size:18px;line-height:1.55;color:var(--szary);max-width:52ch}
.kt-dzieki-tekst p{margin:0 0 8px}
.kt-dzieki-akcje{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

@media (max-width:1000px){
  .kt-hero{padding:48px 0 40px}
  .kt-hero-in{grid-template-columns:1fr;gap:28px}
  .kt-hero h1{max-width:none}
  .kt-glowna{padding:44px 0 56px}
  .kt-glowna-in{grid-template-columns:1fr;gap:24px}
  .kt-obraz{display:none}
  .kt-form{padding:26px 22px 24px}
  .kt-dzieki{padding:64px 0 56px}
}
@media (max-width:640px){
  .kt-hero{padding:40px 0 32px}
  .kt-hero h1{font-size:clamp(32px,9vw,40px)}
  .kt-lead{font-size:17px}
  .kt-dane a{font-size:17px}
  .kt-siatka{grid-template-columns:1fr}
  .kt-form{padding:22px 16px 20px}
  .kt-dol{justify-items:stretch}
  .kt-slij{width:100%;justify-content:center}
  .kt-dzieki-akcje .btn{width:100%;justify-content:center}
}

/* ---- rysunek marki w kolumnie obok formularza -----------------------------
   Grafika kreskowa (Stramek przy biurku) zamiast fotografii z CMS: białe tło,
   cała kompozycja widoczna (contain), bez kadrowania. Panel jest parą dla białej
   karty formularza, więc dostaje ten sam cień i wyrównuje się do góry siatki.
   Powrót do zdjęcia = skasowanie tych reguł i linii w contact_page.html. */
.kt-obraz--rysunek{background:#fff;align-self:start;overflow:hidden;min-height:0;
  box-shadow:0 12px 32px rgba(23,27,43,.05);border-top:4px solid var(--n50)}
.kt-obraz--rysunek picture{display:block}
.kt-obraz--rysunek img{position:static;inset:auto;width:100%;height:auto;object-fit:contain;display:block}

@media (max-width:1000px){
  /* jedna kolumna: rysunek (wariant poziomy 3:2) idzie pod formularz, pełna szerokość */
  .kt-obraz--rysunek{display:block;max-width:560px;margin:0 auto;width:100%}
}

/* ---- ikony profili w kolumnie danych (include home/includes/social.html) ----
   Kolory obu wariantow .soc siedza w css/social.css; tutaj tylko pozycja w liscie
   .kt-dane: obszar klikalny 40x40 ma wewnetrzny luz, wiec rzad przesuwamy o -10px,
   zeby pierwszy glif stal w jednej linii z "Telefon", "E-mail" i adresem. */
.kt-dane .kt-soc{gap:8px}
.kt-dane .kt-soc .soc{margin-left:-10px}
/* UWAGA: regula .kt-dane li (hairline + padding) lapie takze <li> WEWNATRZ .soc,
   bo to selektor potomka. Bez tego zerowania kazda ikona dostaje wlasna kreske. */
.kt-dane .soc li{border:0;padding:0;display:block}
.kt-dane .soc li:last-child{border-bottom:0}


/* ---------- pola formularza na telefonie i tablecie ----------
   Ponizej 16 px Safari na iOS sam przybliza strone przy wejsciu w pole i po
   wyjsciu juz jej nie oddala. Na waskich ekranach dajemy wiec rowne 16 px,
   na monitorze zostaje 15 px i wyglad sie nie zmienia. */
@media (max-width:1024px){
  .kt-pole input,.kt-pole textarea{font-size:16px}
}