/* BBMG v2: komponenty tylko strony Kontakt (ładowany po bloki.css wyłącznie w kontakt.html).
   Kolory i fonty z tokens.css, zmienne serwisu z shared.css. Wspólne komponenty stoją w bloki.css
   (hero podstron). Pierwsze bloki (.kroki-pion i następny) przeszły tu z bloki.css bez zmian, przed regułami strony,
   żeby kolejność kaskady została ta sama. */

/* Kroki w pionie: numerowana lista z kółkami (kontakt: „Co dalej”). */
.kroki-pion { list-style: none; counter-reset: k; margin-top: 24px; display: grid; gap: 18px; max-width: 720px; }
.kroki-pion li { counter-increment: k; position: relative; padding-left: 48px; color: var(--ink-60); }
.kroki-pion li::before { content: counter(k); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--deep-teal); color: var(--amber); display: grid; place-items: center; font: 700 14px/1 var(--font-body); }
.kroki-pion b { color: var(--deep-teal); }

/* ---------- Kontakt: formularz, kanały, mapa ---------- */
.kontakt-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; } }
.formularz { display: grid; gap: 20px; margin-top: 28px; }
.formularz[hidden] { display: none; }
.formularz__rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .formularz__rzad { grid-template-columns: 1fr; } }
.pole { display: grid; gap: 8px; }
.pole label { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.pole .wym { color: var(--deep-teal); margin-left: 2px; }
.pole input, .pole select, .pole textarea { font: 400 16px/1.4 var(--font-body); padding: 14px 16px; border: 1.5px solid rgba(14,83,74,.32); border-radius: var(--radius-md); background: #fff; color: var(--ink); width: 100%; }
.pole textarea { min-height: 140px; resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--deep-teal); box-shadow: var(--shadow-focus); }
.pole [aria-invalid="true"] { border-color: var(--blad); }
.pole__blad { font: 500 15px/1.4 var(--font-body); color: var(--blad); min-height: 0; }
.pole__blad:empty { display: none; }
.formularz__status { font: 500 16px/1.5 var(--font-body); color: var(--blad); }
.formularz__status:empty { display: none; }
.formularz__stopka { font: 400 15px/1.5 var(--font-body); color: var(--ink-60); }
.formularz__stopka a { color: var(--deep-teal); }
.formularz button[disabled] { opacity: .6; cursor: progress; }
.form-sukces { margin-top: 28px; padding: 28px; border-radius: var(--radius-lg); background: var(--teal-soft); }
.form-sukces[hidden] { display: none; }
.form-sukces h3 { font: 500 28px/1.15 var(--font-display); color: var(--deep-teal); }
.form-sukces p { margin-top: 8px; color: var(--ink-60); }
.kanaly { list-style: none; display: grid; gap: 14px; margin-top: 20px; }
.kanaly a { font: 600 17px/1.4 var(--font-body); color: var(--deep-teal); }
.kanaly span { display: block; font: 600 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.dane-formalne { width: 100%; border-collapse: collapse; margin-top: 16px; font: 400 15px/1.5 var(--font-body); }
.dane-formalne th { text-align: left; font: 600 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(14,83,74,.14); vertical-align: top; }
.dane-formalne td { padding: 12px 0; border-bottom: 1px solid rgba(14,83,74,.14); color: var(--ink); }
.map-frame { border-radius: 16px; overflow: hidden; border: 1.5px solid rgba(14,83,74,.16); box-shadow: var(--shadow-card); min-height: 340px; background: var(--cream); }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- Hero: niższe niż na ofercie i O mnie ---------- */
/* Nagłówek kontaktu jest dłuższy (dwa zdania, 19 i 23 znaki) niż „Trzy sposoby współpracy” z oferty, więc przy
   rozmiarze 8,6 vw zawijał się do czterech linii i hero zajmowało cały ekran 1440 x 900, a formularz (cel
   wszystkich przycisków „Umów rozmowę”) stał pod zgięciem. Tu H1 jest mniejszy (do 80 px), lewa kolumna szersza
   (1,9 do 1, żeby obie linie H1 mieściły się w jednej linii każda), a lead dłuższy w wierszu. Poniżej 901 px
   zostaje jedna kolumna z bloki.css. */
.hero-sub h1 { font-size: clamp(42px, 5.4vw, 80px); }
.hero-sub__lead { max-width: 52ch; }
@media (min-width: 901px) { .hero-sub__body { grid-template-columns: 1.9fr 1fr; } }
/* Formularz jest pierwszą rzeczą pod hero, więc nie dokładamy mu pełnego górnego odstępu sekcji. */
#formularz { padding-top: clamp(40px, 4.4vw, 64px); }

/* ---------- Hero: kanały bezpośrednie ---------- */
/* Etykieta kanału ma własny odstęp od kickera (18 px z .kicker), więc lista nie dokłada swojego. Linki są
   osobnymi pozycjami listy, ale bez podkreślenia wyglądałyby jak zwykły tekst; podkreślenie w bursztynie
   jak w .link-strzalka. */
.hero-sub .kanaly { margin-top: 0; }
.hero-sub .kanaly a { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.hero-sub .kanaly a:hover { text-decoration-color: var(--deep-teal); }

/* ---------- Formularz ---------- */
/* Linki w zdaniach pod nagłówkiem lokalizacji (E-mail, LinkedIn) to linki w ciągłym tekście: odróżnia je nie sam
   kolor, tylko podkreślenie (WCAG 1.4.1). */
.lead a { color: var(--deep-teal); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.lead a:hover { text-decoration-color: var(--deep-teal); }
.pole .opc { font-weight: 400; color: var(--ink-60); }
/* Podpowiedź w polu ma kontrast z tokenu, nie z domyślnego szarego przeglądarki (różni się między przeglądarkami). */
.pole ::placeholder { color: var(--ink-60); opacity: 1; }
/* Komunikat o awarii wysyłki wskazuje adres e-mail: link ma ten sam kolor co komunikat i jest podkreślony. */
/* Blokada na czas wysyłki to aria-disabled (fokus zostaje na przycisku), więc wygląd zablokowanego przycisku dajemy tu,
   a nie przez [disabled]. Najechanie nie podnosi go jak aktywnego. Stan „Wysyłam…” w #formStatus czyta tylko czytnik. */
.formularz .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.formularz .btn-accent[aria-disabled="true"]:hover { transform: none; background: var(--amber); }
.formularz__status--czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.formularz__status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.formularz__stopka a { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Co dalej (obok formularza) ---------- */
.dalej__h { max-width: 20ch; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--deep-teal); text-wrap: balance; }
.dalej .kroki-pion { margin-top: 28px; gap: 24px; }
.dalej .kroki-pion li::before { top: -3px; }
.krok-t { font: 600 18px/1.35 var(--font-body); color: var(--deep-teal); }
.krok-t + p { margin-top: 4px; }

/* ---------- Lokalizacja ---------- */
.lokalizacja { margin-top: clamp(32px, 3.4vw, 52px); }

/* ---------- Stan sukcesu: ptaszek z kropek ---------- */
/* Programowy fokus na #leadSuccess dostaje pierścień z :focus-visible (globalnie border-radius 2 px), który
   zjadłby zaokrąglenie ramki. */
.form-sukces:focus-visible { border-radius: var(--radius-lg); }
/* Dwanaście kropek w polu 140 x 110 px. W HTML stoją w kształcie gotowego ptaszka (left/top inline, klasa am =
   bursztyn), więc bez JS i przy ograniczonym ruchu widać stan końcowy. formularz.js po sukcesie odgrywa wejście
   raz: rozrzut, ułożenie (opóźnienie --w rośnie z numerem kropki), potem bursztyn. Ruch to wyłącznie przejścia
   CSS, wywołane jednorazowo, więc nie ma pętli do wstrzymywania poza ekranem. Kropka ma pudełko 11 px
   wyśrodkowane ujemnym marginesem na punkcie left/top. --w (opóźnienie ułożenia) ma tu wartość domyślną, a JS
   nadpisuje ją inline dla każdej kropki. */
.ptaszek { position: relative; width: 140px; height: 110px; margin-bottom: 20px; }
.ptaszek .kd { --w: 0s; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--deep-teal);
  transition: left .9s cubic-bezier(.3,.7,.2,1), top .9s cubic-bezier(.3,.7,.2,1), background-color .4s ease, opacity .4s ease, transform .18s ease;
  transition-delay: var(--w), var(--w), 0s, 0s, 0s; }
.ptaszek .kd.am { background: var(--amber); }

/* Komunikat bez JS (noscript na górze formularza): bez skryptu formularz nie ma dokąd wysłać danych, więc od razu
   podajemy adres e-mail. */
.formularz__bez-js { margin-bottom: 20px; padding: 14px 16px; border-left: 3px solid var(--amber); background: #fff; border-radius: var(--radius-lg); font: 500 16px/1.5 var(--font-body); color: var(--deep-teal); }
.formularz__bez-js a { color: var(--deep-teal); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }

/* ---------- v3 (20.10.2026, runda 4): hierarchia nagłówków na telefonie ---------- */
@media (max-width: 900px) { .dalej__h { font-size: 26px; } }

/* ---------- v3 (20.10.2026, runda 5): „Co dalej” z kropkami ---------- */
/* Ta sama logika co oś „Jak pracuję” na głównej: rozmowa to jedna bursztynowa kropka z falą (w spoczynku jedyna
   rzecz w ruchu, tylko gdy sekcja jest w widoku: klasa gra z kontakt-kropki.js), Sprint to 10 kropek dni roboczych
   w dwóch tygodniach po 5; odpowiedź to 24 kropki godzin roboczych w dwóch rzędach po 12. Kropki wchodzą raz, jedna
   po drugiej, gdy sekcja wjeżdża w widok (.reveal.is-in); bez JS i przy ograniczonym ruchu stoją od razu. Zdanie
   logiki pod kropkami jak przy etapach transformacji w ofercie. Żadna liczba nie jest nowa: 24 godziny, 30 minut
   i 10 dni stoją w tekście kroków. */
.dalej__kropki { display: grid; gap: 8px; margin-top: 14px; }
.dalej__kropki i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--deep-teal); opacity: 0; transform: scale(.4);
  transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); }
.dalej__kropki--godziny { grid-template-columns: repeat(12, 12px); }
.dalej__kropki--dni { grid-template-columns: repeat(5, 12px); }
.dalej__rozmowa { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); transform: scale(0); transition: transform .5s cubic-bezier(.22,1,.36,1) .2s; }
.dalej__rozmowa::before, .dalej__rozmowa::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; }
.is-in .dalej__kropki i, html:not(.js) .dalej__kropki i, .is-in .dalej__rozmowa, html:not(.js) .dalej__rozmowa { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .gra .dalej__rozmowa::before { animation: dalej-fala 3s ease-out infinite; }
  .gra .dalej__rozmowa::after { animation: dalej-fala 3s ease-out infinite 1.5s; }
}
@keyframes dalej-fala { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
.dalej__legenda { margin-top: 10px; font: 400 13px/1.45 var(--font-body); color: var(--ink-60); }
@media (prefers-reduced-motion: reduce) { .dalej__kropki i, .dalej__rozmowa { transition: none; opacity: 1; transform: none; } }