/* ==========================================================================
   Podstrona Kontakt / sekcja 1: dane salonu + formularz
   Kompozycja: jedna plyta na pelna szerokosc ekranu, rozcieta kolorem.
   Lewa kolumna na --panel trzyma tozsamosc firmy (nazwa, adres, wiersze
   kontaktowe na hairline'ach, drobny druk rejestrowy), prawa na --paper
   niesie naglowek strony i formularz. Zero marginesu miedzy kolumnami -
   granica jest kolorem, nie odstepem.

   Wyrownanie: --edge liczy padding zewnetrzny tak, zeby tresc w plycie
   (full-bleed) stala w tej samej pionowej linii co tresc w .wrap na
   pozostalych sekcjach, rowniez powyzej 1440px.

   Header jest fixed i przezroczysty, wiec plyta startuje ponizej jego
   wysokosci - inaczej logotyp lezalby na panelu.
   ========================================================================== */

.kontakt-form {
  --edge: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
  --gap: clamp(1rem, 1.6vw, 1.25rem);
  padding-top: clamp(4.75rem, 4.4rem + 1.6vw, 6rem);
  scroll-margin-top: 4.5rem;
}

.kontakt-form__split { display: grid; }

@media (min-width: 1024px) {
  /* Panel liczony od tresci, nie procentem: --edge (wyrownanie do .wrap)
     + szyna etykiety + paddingi + ~21rem na wiersz "etykieta ---- wartosc".
     38% jest sufitem, zeby kolumna z formularzem zostala bohaterem sekcji.
     Kolumny sa przypisane jawnie, bo w DOM formularz idzie pierwszy. */
  .kontakt-form__split {
    grid-template-columns: minmax(23rem, min(38%, calc(var(--edge) + 28rem))) 1fr;
    align-items: stretch;
  }
  .kontakt-form__panel { grid-area: 1 / 1; }
  .kontakt-form__main  { grid-area: 1 / 2; }
}

/* --- Lewa kolumna: panel ------------------------------------------------ */
/* Hairline z base.css jest kalibrowany na --paper i na ciemniejszym --panel
   ginie. Podmieniamy sam token lokalnie, dzieki czemu .rule-row dostaje
   wlasciwa linie bez redefiniowania komponentu. */
.kontakt-form__panel {
  --hairline: color-mix(in srgb, var(--ink) 14%, transparent);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--gutter) clamp(2.75rem, 5vw, 4.5rem) var(--edge);
  background: var(--panel);
}

@media (min-width: 1024px) {
  .kontakt-form__panel {
    grid-template-columns: 2.75rem 1fr;
    gap: 0;
    padding-block: clamp(3.25rem, 5vw, 5rem);
    padding-right: clamp(1.25rem, 2vw, 2.25rem);
  }

  /* Rotacja o 180deg sprawia, ze etykieta czyta sie z dolu do gory,
     ale start tekstu zostaje pod gorna krawedzia bloku. */
  .kontakt-form__rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: start;
    justify-self: start;
  }

  .kontakt-form__panel-in {
    padding-left: clamp(1.25rem, 2vw, 2rem);
    border-left: 1px solid var(--hairline);
  }
}

.kontakt-form__panel-in {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 6vw, 5rem);
  min-width: 0;
  container-type: inline-size;
}

.kontakt-form__name {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.kontakt-form__lines {
  margin-top: 0.9rem;
  font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  line-height: 1.75;
  color: var(--muted);
}

/* --- Kadr salonu -------------------------------------------------------- */
/* Panel jest tak wysoki jak kolumna z formularzem, wiec zostaje w nim wolne
   pole. Wczesniej rozdzielaly je marginesy auto i robily sie z tego dwie dziury.
   Teraz nadmiar bierze na siebie zdjecie: na desktopie rosnie (flex: 1) az do
   wysokosci kolumny, wiec blok czyta sie jako jedna kompozycja - adres, kadr,
   rocznik, kontakty - bez pustych pol miedzy nimi.
   Ponizej 1024 panel jest jednokolumnowy i wolnego pola nie ma, wiec kadr wraca
   do stalych proporcji. */
.kontakt-form__fig { margin: 0; }

.kontakt-form__media { aspect-ratio: 4 / 3; }

@media (min-width: 768px) and (max-width: 1023.98px) {
  .kontakt-form__media { aspect-ratio: 21 / 9; }
}

@media (min-width: 1024px) {
  .kontakt-form__fig {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* min-height pilnuje, zeby przy krotkim formularzu kadr nie splaszczyl sie
     do paska; max-height, zeby przy dlugim nie zrobil sie waskim slupem. */
  .kontakt-form__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 13rem;
    max-height: 34rem;
  }

  /* Kadr pionowy tnie zdjecie w poziomie. Przy 38% w polu zostaje sama plyta
     lady, wiec okno idzie lekko w prawo - na gablote z oprawami, drzewko
     i swiatlo z okna. */
  .kontakt-form__media img { object-position: 56% center; }
}

.kontakt-form__since-l { display: block; margin-bottom: 0.65rem; }

/* Rocznik jest cichy - to znak wiarygodnosci, nie licznik.
   Stopien duzy, kolor ledwie obecny, wiec nie konkuruje z naglowkiem strony. */
.kontakt-form__since-n {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
}

.kontakt-form__val {
  font-size: clamp(0.88rem, 0.82rem + 0.24vw, 0.95rem);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.kontakt-form__rows a:hover .kontakt-form__val,
.kontakt-form__rows a:focus-visible .kontakt-form__val { text-decoration-color: currentColor; }

/* Drobny druk rejestrowy zamyka panel od dolu. Stopien nizszy niz body,
   kolor wyszarzony - to informacja do sprawdzenia, nie do czytania. */
.kontakt-form__legal {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.72rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Uklad "etykieta ---- wartosc" potrzebuje okolo 19rem szerokosci panelu.
   Ponizej tego wartosc schodzi pod etykiete - lepsze niz lamanie adresu
   w polowie slowa. Pytamy o szerokosc panelu, nie viewportu. */
@container (max-width: 19rem) {
  .kontakt-form__rows .rule-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .kontakt-form__val { text-align: left; white-space: normal; overflow-wrap: anywhere; }
}

/* --- Prawa kolumna ------------------------------------------------------ */
/* --in to wewnetrzny padding kolumny. Ponizej 1024 plyta jest jednokolumnowa,
   wiec tresc trzyma sie gutteru strony; od 1024 dostaje wlasny oddech
   od granicy z panelem. */
.kontakt-form__main {
  --in: var(--edge);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4.5vw, 4rem);
  min-width: 0;
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--edge) clamp(3rem, 5.5vw, 5rem) var(--in);
  background: var(--paper);
  container-type: inline-size;
}

@media (min-width: 1024px) {
  .kontakt-form__main { --in: clamp(2.5rem, 4vw, 4.5rem); }
}

.kontakt-form__eyebrow {
  display: block;
  margin-bottom: clamp(1.2rem, 2.4vw, 1.9rem);
}

/* Jedyny h1 na stronie. Gardlem jest linia sans (14 znakow), wiec stopien
   liczymy z szerokosci kolumny, nie viewportu - inaczej przy 1024, gdzie
   panel zabiera 38%, naglowek wychodzil poza krawedz. */
.kontakt-form__h {
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.kontakt-form__h .line { display: block; }

@media (min-width: 1024px) {
  .kontakt-form__h { font-size: clamp(2.4rem, 4.4vw, 5rem); }
}

@supports (font-size: 1cqi) {
  .kontakt-form__h { font-size: clamp(2.4rem, 11cqi, 5rem); }
}

.kontakt-form__lead {
  margin-top: clamp(1.25rem, 2.4vw, 1.9rem);
  max-width: 44ch;
  font-size: clamp(1rem, 0.94rem + 0.26vw, 1.15rem);
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Formularz ---------------------------------------------------------- */
/* Formularz otwiera hairline, nie ramka - blok czyta sie jako druga czesc
   kolumny, a nie jako karta doklejona do strony. */
.kontakt-form__box {
  padding-top: clamp(2rem, 3.6vw, 3rem);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 5.5rem;
}

.kontakt-form__box-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.25rem);
}

.kontakt-form__box-h { letter-spacing: -0.01em; }

.kontakt-form__hint {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Bez wlasnej miary - pola koncza sie dokladnie tam, gdzie hairline otwierajacy
   blok i gdzie prawa krawedz naglowka. Jedna krawedz na cala kolumne. */
.kontakt-form__form {
  display: grid;
  gap: var(--gap);
}

/* Para telefon / e-mail to <fieldset> - grupa semantyczna, nie ramka.
   Zerujemy wiec wszystkie domyslki przegladarki. */
.kontakt-form__pair {
  display: grid;
  gap: var(--gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 560px) {
  .kontakt-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontakt-form__err--pair { grid-column: 1 / -1; }
}

.kontakt-form__f { display: grid; gap: 0.5rem; min-width: 0; }

.kontakt-form__lab {
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* --- Stany pol -------------------------------------------------------- */
/* Paleta nie ma czerwieni i nie dokladamy jej tylko dla bledu - uwage niesie
   fiolet, ten sam co w CTA. Sam kontur, bez zalewania pola kolorem: przy pieciu
   bledach naraz tinty zamienialyby formularz w liliowa plame. */
.kontakt-form__form .field.is-bad { border-color: var(--purple); }

.kontakt-form__err {
  display: flex;
  gap: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--purple);
  text-wrap: pretty;
}

/* display:flex zjadlby atrybut hidden, wiec przywracamy go jawnie. */
.kontakt-form__err[hidden] { display: none; }

.kontakt-form__err::before {
  content: "";
  flex: none;
  width: 0.35rem;
  height: 0.35rem;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--purple);
}

/* --- Komunikaty formularza --------------------------------------------- */
/* Dwa stany, dwa jezyki: poprawka jest cicha i fioletowa, potwierdzenie jest
   ciemna plyta - widac je od razu, nawet gdy formularz jest dlugi. */
.kontakt-form__note {
  display: grid;
  gap: 0.45rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: 2px;
  font-size: 0.87rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.kontakt-form__note[hidden] { display: none; }

.kontakt-form__note-h { font-weight: 500; }

.kontakt-form__note--bad {
  border-left: 2px solid var(--purple);
  background: var(--purple-tint);
  color: var(--ink-soft);
}

.kontakt-form__note--bad .kontakt-form__note-h { color: var(--purple); }

.kontakt-form__note--ok { color: var(--paper); }

.kontakt-form__note-alt { font-size: 0.82rem; }

.kontakt-form__note--ok a,
.kontakt-form__copy {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--paper) 40%, transparent);
  transition: text-decoration-color var(--dur) var(--ease);
}

.kontakt-form__note--ok a:hover,
.kontakt-form__copy:hover { text-decoration-color: currentColor; }

.kontakt-form__copy { font: inherit; }

/* --- Select ------------------------------------------------------------- */
/* Natywna strzalka systemowa lamie jezyk sekcji, wiec zdejmujemy appearance
   i podkladamy wlasny szewron. Ikona nie lapie kursora, klik idzie do pola. */
.kontakt-form__sel { position: relative; display: grid; }

.kontakt-form__select {
  appearance: none;
  padding-right: 3.25rem;
  cursor: pointer;
}

/* Placeholder selecta ma byc czytelnie "pusty", ale reszta opcji juz nie. */
.kontakt-form__select:invalid { color: var(--muted); }

.kontakt-form__chev {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 1rem;
  height: 1rem;
  color: var(--ink);
  pointer-events: none;
  transform: translateY(-50%);
}

/* --- Zgoda -------------------------------------------------------------- */
.kontakt-form__agree {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  margin-top: clamp(0.35rem, 1vw, 0.75rem);
  cursor: pointer;
}

/* Natywny input zostaje w drzewie dostepnosci i lapie fokus, ale nie widac
   go pod wlasnym kwadratem. Opacity zamiast display:none, zeby czytniki
   ekranu i autofill dalej go widzialy. */
.kontakt-form__cb {
  grid-area: 1 / 1;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  opacity: 0;
}

.kontakt-form__mark {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 2px;
  color: transparent;
  background: var(--paper);
  pointer-events: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.kontakt-form__mark svg { width: 0.8rem; height: 0.8rem; }

.kontakt-form__cb:checked + .kontakt-form__mark {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.kontakt-form__cb:focus-visible + .kontakt-form__mark {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

.kontakt-form__agree:hover .kontakt-form__mark { border-color: var(--purple); }

.kontakt-form__cb.is-bad + .kontakt-form__mark {
  border-color: var(--purple);
  background: var(--purple-tint);
}

.kontakt-form__agree-t {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

.kontakt-form__agree-t a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.kontakt-form__agree-t a:hover { color: var(--purple); text-decoration-color: currentColor; }

/* --- Wyslij ------------------------------------------------------------- */
.kontakt-form__send {
  margin-top: clamp(0.35rem, 1vw, 0.75rem);
  padding-block: 1.25rem;
}

.kontakt-form__foot {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

.kontakt-form__foot a {
  color: var(--ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent);
  transition: color var(--dur) var(--ease);
}

.kontakt-form__foot a:hover { color: var(--purple); }

.kontakt-form__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.kontakt-form__actions .btn { white-space: normal; text-align: center; }