/* ==========================================================================
   Sekcja "Jak wyglada pierwsza wizyta", trzy kroki.
   Wartosci z kadru materialy/kadry/kroki.png (1440x971, y=0 to gora sekcji):
   eyebrow ink y 110-126, H2 ink od 168, linia (box) na y 392, numery ink
   471-545, tytuly ink od 575, opisy ink od 670, przycisk ink od 820.
   Poprawka 26.08: dopasowanie odstepow miedzy blokami do kadru, patrz
   qa/roznice-kroki.md. Marze pomiedzy naglowkiem H2 a etykieta byla za mala,
   miedzy numerem a tytulem kroku za duza. */

/* overflow:hidden dodany 26.08 razem z ornamentem: bez niego bleed
   kwiatu (-24px w prawo, -40px w gore) wypychal caly DOKUMENT w poziomie,
   nie tylko sekcje, inaczej niz w hero i w konsultacji, gdzie kontener
   ma ta sama role. Sprawdzone: scrollWidth dokumentu wracal do clientWidth
   dopiero po tej linii. */
/* D171: padding-block bylo 110px/82px, dwie ostatnie sztywne wartosci w tym
   pliku. Wychodza razem ze zmiana, bo token daje te sama wartosc i podlega
   regule projektu o zerze wartosci na sztywno. */
.kroki { position: relative; overflow: hidden; padding-block: var(--space-9); scroll-margin-top: var(--space-12); }

/* --- naglowek sekcji -----------------------------------------------------
   .etykieta-sekcji (pionowa etykieta przy lewej krawedzi) przeniesiona do
   tokens.css 28.08.2026, bo przestala byc specyficzna dla tej sekcji. */

.kroki__naglowek { max-width: 700px; }   /* NIE ch: jednostka liczy sie od stopnia rodzica, nie H2 */
/* margin-top koliduje z margin-bottom eyebrow (24px) i sie z nim zwija (collapse),
   wiec 4px samo w sobie nic by nie zmienilo: trzeba podac sume, zeby przebic zwiniety margines */
/* 14.09.2026, zgloszenie Jakuba na zywo: "to samo jest na homepage", ten sam
   problem co H2 kategorii cennika na /oferta. Klasa w markupie zmieniona z
   display-2 (84px na 1440px) na display-3 (67px): pierwsza sekcja po hero
   (H1 87px) renderowala sie niemal tej samej wielkosci co hero, mimo ze to
   podsekcja, nie druga strona tytulowa. display-3 to juz istniejacy w tym
   projekcie rozmiar dla naglowka sekcji "Pierwsze 20 minut" (sekcja
   konsultacji), wiec kroki dolaczaja do juz uzywanej skali zamiast dostawac
   nowa wartosc. Zmiana klasy w front-page.php, nie tutaj. */
.kroki__tytul { margin: calc(var(--space-5) + var(--space-1)) 0 0; }

/* --- linia z kropkami ---------------------------------------------------- */

.kroki__linia {
  /* D59, 01.09.2026: kropki wyjete z SVG. Wczesniej mialy stale wspolrzedne
     (cx 140/600/1035) i nie trafialy w numery krokow: pierwsza byla 47px w lewo
     od swojej jedynki, trzecia 22px w prawo, tylko srodkowa siedziala dobrze.
     Teraz kropki sa elementami w siatce o tym samym ukladzie co .kroki__lista,
     wiec ich wyrownanie z numerami jest strukturalne, nie liczbowe, i trzyma
     sie przy kazdej szerokosci okna. Linia wychodzi poza prawa krawedz okna,
     jak w kadrze Karola, zamiast konczyc sie na krawedzi kontenera. */
  position: relative;
  display: block;
  height: 60px;
  margin-block: calc(var(--space-8) + var(--space-2)) 0;   /* 56px, linia stoi na y 392 od gory sekcji, jak w kadrze */
  margin-inline-end: calc(-1 * var(--container-margin));
  color: var(--accent-ctx);
}
.kroki__linia svg { display: block; width: 100%; height: 100%; }

.kroki__kropki {
  /* siatka identyczna z .kroki__lista, ale bez prawego bleedu, zeby kropki
     liczyly sie wzgledem kolumn tresci, a nie wzgledem rozszerzonej linii */
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: calc(100% - var(--container-margin));
  block-size: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  pointer-events: none;
}
.kroki__kropka {
  justify-self: center;
  align-self: start;
  /* srodek kropki na y=30 w ukladzie SVG, czyli na plaskim odcinku sciezki */
  margin-block-start: calc(30px - var(--kropka-r, 6px));
  inline-size: calc(2 * var(--kropka-r, 6px));
  block-size: calc(2 * var(--kropka-r, 6px));
  border-radius: 50%;
  background: currentColor;
}

/* --- trzy kolumny -------------------------------------------------------- */

.kroki__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.krok { text-align: center; }

.krok__numer {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display-num);
  line-height: 1;
  color: var(--fg);
}

.krok__tytul {
  margin: var(--space-1) 0 0;
  font-family: var(--font-text);
  font-size: var(--fs-card);
  font-weight: var(--fw-body);
  line-height: 1.3;
  letter-spacing: var(--ls-body);
  /* D59, 01.09.2026: 15ch podniesione na 19ch. Lamanie tytulow jest teraz
     jawne (znak nowej linii w polu ACF, renderowany przez jdb_br), dokladnie
     w miejscach z kadru Karola, wiec max-width ma tylko NIE lamac tych linii
     drugi raz. Najdluzsza z nich to "z planem dzialania", czyli 18 znakow. */
  max-width: 19ch;
  margin-inline: auto;
}

/* D121, 03.09.2026: font-size ujednolicony na --fs-body (18px), zgodnie z
   decyzja Jakuba "o mnie" jako kanon dla tekstu opisowego pod naglowkiem
   sekcji. Bylo --fs-small (~16px), rozjazd bez udokumentowanego powodu
   wobec .o-mnie__akapit i .oferta__karta-opis. */
.krok__opis {
  margin: var(--space-6) auto 0;
  max-width: 34ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--fg-muted);
}

/* --- przycisk pod krokami ------------------------------------------------ */

.kroki__cta { margin-block-start: calc(var(--space-9) + var(--space-2)); text-align: center; }   /* 72px, dosuniete do kadru */

/* --- tablet i telefon ---------------------------------------------------- */

@media (max-width: 900px) {
  .kroki .etykieta-sekcji { display: none; }
  .kroki__linia { display: none; }
  /* ornament: patrz zapytanie medialne na koncu pliku, musi stac PO regule
     bazowej .kroki__ornament, inaczej przegrywa z nia kolejnoscia */
}

@media (max-width: 700px) {
  /* uklad z makiety mobilnej: kropka i numer w rzedzie, tekst do lewej */
  /* D170, 03.09.2026: wartosci dobrane przez Jakuba w konfiguratorze, zakres
     telefon. Zapisane w pliku wlasciciela, nie w konfigurator.css, zgodnie z
     rozstrzygnieciem z D168: konfigurator sluzy do DOBRANIA wartosci, nie do
     jej przechowywania. */
  .kroki { padding-block: var(--space-9) 0; }
  .kroki__lista {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .krok {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: var(--space-5);
    text-align: start;
  }
  .krok__numer { grid-column: 2; }
  .krok__numer::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inline-size: 9px;
    block-size: 9px;
    margin-block-start: 26px;
    border-radius: 50%;
    background: var(--fg);
  }
  .krok { position: relative; }
  /* pionowa linia laczaca kropki, odpowiednik falistej z desktopu */
  .krok:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    inset-block-start: 38px;
    inline-size: 1px;
    block-size: calc(100% + var(--space-8) - 38px);
    background: var(--line-ctx);
  }
  .krok__tytul {
    grid-column: 2;
    margin-inline: 0;
    max-width: 20ch;
    margin-block-start: var(--space-3);
  }
  .krok__opis {
    grid-column: 2;
    margin-inline: 0;
    max-width: none;
    margin-block-start: var(--space-4);
  }
  .kroki__cta { margin-block-start: var(--space-9); }
}

/* Ornament magnolii, gorny prawy rog, wychodzacy poza krawedzie sekcji
   jak w kadrze Karola (bleed, ten sam wzorzec co owal w hero D15 i
   przyciete zdjecie w konsultacji D25). Rozmiar i pozycja dobrane
   wizualnie wobec materialy/kadry/kroki.png, bo zrodlo jest rastrowe
   i nie da sie zmierzyc pikselowo co do krawedzi linii. */
.kroki__ornament {
  position: absolute;
  /* D59, 01.09.2026: bylo -40px, czyli ornament zaczynal sie NAD sekcja, a ta
     ma overflow:hidden, wiec gorne 40px kwiatu bylo po prostu scinane. Stad
     wrazenie, ze bukiet jest ubozszy niz w kadrze Karola: nie brakowalo mu
     elementow w pliku, tylko byly przyciete. Teraz caly rysunek miesci sie
     w sekcji, a rozmiar podniesiony z 320 na 400px, zeby zajmowal w pasmie
     tyle miejsca co w kadrze (tam ink schodzi do okolo y 360). */
  inset-block-start: 24px;
  inset-inline-end: -24px;
  inline-size: 400px;
  z-index: 0;
  pointer-events: none;
}
.kroki__ornament img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  /* lustrzane odbicie w poziomie: kwiat i liscie po lewej, lodyga
     wychodzi w strone prawej krawedzi strony, jakby wyrastala zza niej.
     Ustalenie Jakuba 26.08.2026, odwraca orientacje z oryginalnego pliku,
     gdzie kwiat byl po prawej, a lodyga schodzila w lewo. */
  transform: scaleX(-1);
}

/* --- ornament na telefonie ------------------------------------------------
   02.09.2026 (D80): kwiat wraca ponizej 900px, na prosbe Jakuba i zgodnie z
   makieta mobilna (kadry-mobile/kroki-mobile-wide.png). Do tej daty znikal
   tam calkowicie, bo przy stalych 380 px nachodzil na naglowek (zmierzone
   26.08 na 768 i 375). Powod znika przy mniejszym rysunku: przy 150 px kwiat
   siedzi nad H2, na wysokosci nadtytulu, dokladnie tam gdzie w kadrze.
   Blok stoi na koncu pliku, bo regula bazowa .kroki__ornament ma te sama wage
   i jest nizej w pliku, wiec zapytanie medialne wyzej by z nia przegralo.
   Sekcja ma overflow: hidden, wiec wyjscie poza prawa krawedz jest przycinane
   i nie rozpycha dokumentu. */
@media (max-width: 900px) {
  .kroki__ornament {
    display: block;
    inset-block-start: var(--space-2);
    inset-inline-end: -20px;
    inline-size: 150px;
  }
}