/* Widok 06 — Kontakt. Poziom odwagi 3 (spokój): czytelność przed efektem.
   Tylko układ i stany pól; wygląd tafli — system.css („TAFLA"), nie nadpisujemy.
   Etykieta pola treści i gwiazdka telefonu zależą od tematu — przez :has(),
   więc działają też bez JS. */

.kontakt {
  /* podłoga formularzy z system.css: błędy (--tafla-blad, jasny ≥ 4,5 : 1),
     granica pola (--tafla-pole ≥ 3 : 1) */
  --blad: var(--tafla-blad);
  --pole-tlo: color-mix(in srgb, var(--tafla-tekst) 5%, transparent);
  --pole-linia: var(--tafla-pole);

  display: grid;
  gap: var(--o-6);
  width: min(100%, 78rem);
  margin: 0 auto;
  padding: calc(var(--o-8) + var(--o-5)) var(--margines) var(--o-8);
}

@media (min-width: 960px) {
  .kontakt {
    grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr);
    align-items: start;
    gap: var(--o-7);
    padding-top: calc(var(--o-9) + var(--o-4));
  }
  .kontakt-boczna { position: sticky; top: calc(var(--o-9) + var(--o-4)); }
}

/* — tafla główna: nagłówek, zdanie, formularz ------------------------------ */
.kontakt-glowna { display: grid; gap: var(--o-5); min-width: 0; }
.kontakt-glowna h1 { font-size: var(--r-4); }
.kontakt-lead { max-width: 40ch; font-size: var(--r-2); line-height: 1.45; }

.formularz {
  container-type: inline-size;
  display: grid;
  gap: var(--o-5);
  margin-top: var(--o-3);
}
.formularz-legenda { font-size: var(--r-0); }
.wymagane { color: var(--tafla-akcent); font-weight: 600; }

/* tematy — trzy wybory; zaznaczony dostaje wypełnienie, nie krawędź z boku */
.tematy { margin: 0; padding: 0; border: 0; min-width: 0; }
.tematy legend { padding: 0; margin-bottom: var(--o-3); font-weight: 600; }
.tematy-lista { display: grid; gap: var(--o-2); }
@container (min-width: 33rem) {
  .tematy-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.temat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--o-1) var(--o-3);
  align-items: baseline;
  padding: var(--o-4);
  border: 1px solid var(--tafla-linia);
  border-radius: var(--z-maly);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.temat input { grid-row: 1 / 3; margin: 0; width: 1.125rem; height: 1.125rem; accent-color: var(--tafla-akcent); align-self: start; translate: 0 .2em; }
.temat-nazwa { font-weight: 600; }
.temat-opis { font-size: var(--r-0); line-height: 1.45; }
.temat:hover { border-color: var(--pole-linia); }
.temat:has(input:checked) {
  background: color-mix(in srgb, var(--tafla-tekst) 8%, transparent);
  border-color: color-mix(in srgb, var(--tafla-akcent) 65%, transparent);
}
.tematy[aria-invalid="true"] .temat { border-color: var(--blad); }

/* konfiguracja z Cennika — tylko do odczytu */
.konfiguracja {
  display: grid;
  gap: var(--o-3);
  padding: var(--o-5) 0;
  border-block: 1px solid var(--tafla-linia);
}
.konfiguracja[hidden],
.formularz:not(:has(#temat-wycena:checked)) .konfiguracja { display: none; }   /* jedzie tylko z „Wyceną" */
/* nagłówek jest przypięty — pole, do którego skacze odnośnik, nie chowa się pod nim */
.formularz :is(input, textarea, fieldset, .bledy-podsumowanie) { scroll-margin-top: var(--o-9); }
.konfiguracja h3 { font-size: var(--r-2); }
.konfiguracja-lista { display: grid; gap: var(--o-2) var(--o-5); margin: 0; }
.konfiguracja-lista div { display: grid; gap: 0 var(--o-4); }
@container (min-width: 32rem) {
  .konfiguracja-lista div { grid-template-columns: 11rem minmax(0, 1fr); }
}
.konfiguracja-lista dt { color: var(--tafla-tekst-2); }
.konfiguracja-lista dd { margin: 0; overflow-wrap: anywhere; }
.konfiguracja-cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--o-1) var(--o-3); }
.konfiguracja-cena[hidden] { display: none; }
.konfiguracja-cena strong { font: 600 var(--r-3)/1.1 var(--kroj-naglowek); letter-spacing: -.02em; }

/* pola */
.pole { display: grid; gap: var(--o-2); min-width: 0; }
.pole > label { font-weight: 600; }
.formularz-para { display: grid; gap: var(--o-5); }
@container (min-width: 30rem) {
  .formularz-para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pole input:not([type="checkbox"]), .pole textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--o-3) var(--o-4);
  border: 1px solid var(--pole-linia);
  border-radius: var(--z-maly);
  background: var(--pole-tlo);
  color: var(--tafla-tekst);
  font: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
.pole textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--tafla-tekst-2); opacity: .75; }
.pole input:focus-visible, .pole textarea:focus-visible { outline-offset: 1px; border-color: var(--tafla-akcent); }
.pole [aria-invalid="true"] { border-color: var(--blad); }

.pole-blad { color: var(--blad); font-size: var(--r-0); font-weight: 600; line-height: 1.45; }
.pole-blad[hidden] { display: none; }
.pole-podpowiedz { font-size: var(--r-0); line-height: 1.45; }

.pole--zgoda { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--o-3); align-items: start; }
.pole--zgoda input { width: 24px; height: 24px; margin: 0; accent-color: var(--tafla-akcent); }   /* cel ≥ 24 px (system.md, „Odstępstwa"); od tekstu z linkiem do polityki — column-gap */
.pole--zgoda[aria-invalid="true"] input, .pole--zgoda input[aria-invalid="true"] { outline: 2px solid var(--blad); outline-offset: 2px; }
.pole--zgoda > label { font-weight: 400; font-size: var(--r-0); line-height: 1.55; color: var(--tafla-tekst-2); }
.pole--zgoda > .pole-blad { grid-column: 2; }

/* etykiety zależne od tematu (CSS :has — bez JS też) */
.formularz [data-dla] { display: none; }
.formularz:has(#temat-wycena:checked):not(.ma-konfiguracje) [data-dla="wycena"],
.formularz.ma-konfiguracje:has(#temat-wycena:checked) [data-dla="wycena-konfiguracja"],
.formularz:has(#temat-pytanie:checked) [data-dla="pytanie"],
.formularz:not(:has([name="temat"]:checked)) .etykieta[data-dla="pytanie"],
.formularz:has(#temat-wspolpraca:checked) [data-dla="wspolpraca"] { display: inline; }
.formularz:has(#temat-wycena:checked):not(.ma-konfiguracje) .pole-podpowiedz[data-dla="wycena"] { display: block; }
.formularz:has(#temat-wycena:checked) .pole--telefon .wymagane[data-dla="wycena"] { display: inline; }
.formularz.ma-konfiguracje:has(#temat-wycena:checked) .pole--wiadomosc > label > .wymagane { display: none; }
@supports not selector(:has(*)) {
  .formularz .etykieta[data-dla="pytanie"] { display: inline; }
}

/* pułapka na roboty — poza ekranem, nie display:none (część botów to pomija) */
.pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* komunikaty zbiorcze */
.bledy-podsumowanie, .formularz-komunikat {
  padding: var(--o-4);
  border: 1px solid var(--blad);
  border-radius: var(--z-maly);
  line-height: 1.5;
}
.bledy-podsumowanie[hidden], .formularz-komunikat[hidden] { display: none; }
.bledy-podsumowanie p { font-weight: 600; }
.bledy-podsumowanie ul { margin: var(--o-2) 0 0; padding-left: var(--o-5); }
.bledy-podsumowanie:focus-visible { outline-offset: 2px; }

.formularz-wyslij { justify-content: center; width: 100%; }
@container (min-width: 30rem) { .formularz-wyslij { width: auto; justify-self: start; } }
.formularz-wyslij:disabled { opacity: .65; cursor: progress; }

/* — kolumna boczna: telefon i e-mail, co dalej ------------------------------ */
.kontakt-boczna { display: grid; gap: var(--o-6); min-width: 0; }
.kontakt-dane, .kontakt-dalej { display: grid; gap: var(--o-4); min-width: 0; }
.kontakt-boczna h2 { font-size: var(--r-3); }
.kontakt-kanal { display: grid; gap: var(--o-1); }
.kontakt-kanal a {
  font: 600 var(--r-2)/1.2 var(--kroj-naglowek);
  letter-spacing: -.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.kontakt-kanal a[href^="tel:"] { font-size: var(--r-3); }
.kontakt-kanal a { min-height: 24px; }   /* cel ≥ 24 px: e-mail i profile miały 22,8 */
.kontakt-kanal a:hover { text-decoration: underline; text-underline-offset: .18em; }
/* profile (Jakub 30.10): ikona w barwie akcentu przed nazwą, ten sam krój co telefon i e-mail */
.kontakt-kanal--profil a { display: inline-flex; align-items: center; gap: var(--o-2); justify-self: start; }
.kontakt-kanal--profil .ikona { flex: none; width: 1.1em; height: 1.1em; color: var(--tafla-akcent, var(--akcent)); }

.kontakt-dalej ol { margin: 0; padding: 0; list-style: none; counter-reset: krok; }
.kontakt-dalej li {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  padding: var(--o-3) 0;
  border-top: 1px solid var(--tafla-linia);
  line-height: 1.5;
}
.kontakt-dalej li::before {
  content: counter(krok);
  font-family: var(--kroj-mono);
  font-size: var(--r-0);
  color: var(--tafla-tekst-2);
  padding-top: .2em;
}

@media (prefers-reduced-motion: reduce) {
  .temat, .pole input, .pole textarea { transition: none; }
}

/* — przejście z pierwszego kroku na głównej: formularz na ekranie, linia przy polach — */
.formularz { scroll-margin-top: calc(var(--logo-wys) + var(--o-5)); }
.pole--wiadomosc { scroll-margin-top: calc(var(--logo-wys) + var(--o-5)); }
.krok-wpisany {
  display: flex; align-items: baseline; gap: var(--o-2);
  padding-block: var(--o-2);
  border-top: 1px solid var(--tafla-linia);
  color: var(--tafla-tekst);
  font-size: var(--r-0-5);
}
.krok-wpisany::before {                      /* znacznik: to już zrobione — kreska akcentu, nie ikona */
  content: ""; flex: none;
  width: .9em; height: .45em;
  border: solid var(--tafla-akcent);
  border-width: 0 0 1.6px 1.6px;
  transform: translateY(-.2em) rotate(-45deg);
}