/* ==========================================================================
   Sekcja FAQ. Obala obiekcje, nie tylko informuje.
   Wartosci z makiety (1440): pasmo 3914-4497, eyebrow y 3973, H2 4019,
   kreska pod naglowkiem 4152, panel ciemny x 578, y 4001, szerokosc 818.
   Akordeon na <details>, wiec dziala bez JavaScriptu i czyta go czytnik ekranu.
   ========================================================================== */

/* Sekcja NIE ma wlasnego padding-block. Bierze rytm pionowy z .section,
   czyli var(--space-section), tak samo jak pozostale sekcje strony.
   Decyzja Jakuba 26.08.2026, na podstawie zrzutu docelowego wygladu.

   Historia tej wartosci, zeby nikt jej nie odkrecil trzeci raz:
   najpierw stalo tu 60px z zera, wartosc spoza skali odstepow. Potem
   var(--space-8) 48px z zera, bo Jakub zglosil jasny pasek na styku
   panelu FAQ i sekcji konsultacji, ktore sa oba ciemne, a padding-block-end
   tej sekcji wchodzil miedzy nie swiatlem na pelna szerokosc. Zerowy dol
   ten pasek kasowal, ale odbiegal od makiety, ktora ma pod panelem 27px.

   Rozwiazanie docelowe idzie w druga strone niz zerowanie: odstep systemowy
   daje na tym styku okolo 120px zamiast 27, wiec przerwa czyta sie jako
   swiadoma, a nie jako waska kreska wygladajaca na usterke. Cienka linia
   miedzy dwoma ciemnymi blokami to defekt, szeroki pas to kompozycja. */
/* D157, 03.09.2026: zgloszenie Jakuba, "odstępy w FAQ zajmują bardzo dużo
   miejsca" (desktop). Sekcja dziedziczyla rytm bazowy `.section` (D33
   powyzej w tym pliku, --space-section, clamp do 120px na desktopie) na
   OBU stronach. Ruszona TYLKO gora (--space-9, 64px, ten sam token co inne
   "sciesnione" sekcje tej rundy): dol zostaje przy --space-section celowo,
   bo to WLASNIE ten padding-block-end trzyma szeroki, zamierzony pas na
   styku panelu FAQ (ciemny) i sekcji konsultacji (ciemna), patrz historia
   tej wartosci w komentarzu wyzej w tym pliku ("cienka linia miedzy dwoma
   ciemnymi blokami to defekt"). Zmniejszenie dolu cofnieoby ten problem. */
.faq { position: relative; scroll-margin-top: var(--space-12); padding-block-start: var(--space-9); }

/* Uklad przebudowany 12.09.2026, trzy razy tego samego dnia (historia w
   front-page.php, ten sam komentarz). Ostatnie zgloszenie: zdjecie wychodzi
   z sekcji w calosci. .faq__uklad zostaje pionowym stosem (dziedzictwo po
   .faq__gora/.faq__lista), ale gorny rzad to teraz sam .faq__naglowek, bez
   grida dwoch kolumn, bez .faq__zdjecie. Klasy .faq__zdjecie i .faq__gora
   nie sa juz uzywane w front-page.php, reguly ponizej usuniete razem z nimi:
   pole ACF faq_image zostaje zdefiniowane (inc/acf-fields.php), tylko nie
   renderowane. */
/* 14.09.2026, zgloszenie Jakuba na zywo: odstep miedzy kreska naglowka a
   pierwszym pytaniem mial wyraznie wiecej powietrza niz odstep nad "Zanim
   sie umowisz" (gora sekcji, --space-9 64px), mial to samo dostac. Byly dwa
   nakladajace sie zrodla: ten `gap` (48px) MIEDZY .faq__naglowek a
   .faq__lista, plus WLASNY margin-block-start .faq__lista (40px, patrz
   regula nizej), flexbox nie zwija marginesow z gapem, wiec sumowaly sie do
   88px. `gap` zmieniony na ten sam token co gora sekcji, margines listy
   wyzerowany, zeby nie dublowal odstepu. */
.faq__uklad {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

/* 02.09.2026 (D67): max-width:420px zdjete. Kolumna ma okolo 495px przy
   oknie 1440, wiec naglowek konczyl sie 75px przed jej krawedzia i lewa
   strona sekcji wygladala na dosunieta do lewej (zgloszenie Jakuba). Zdanie
   o kolumnie jest dzis historyczne (naglowek stoi na pelnej szerokosci
   kontenera), zasada max-width:none zostaje, bo nikt jej nie odwrocil. */
.faq__naglowek { padding-block-start: 0; max-width: none; }
.faq__tytul { margin: 0; }

.faq__kreska {
  inline-size: 96px;
  block-size: 1px;
  margin-block-start: var(--space-8);
  background: var(--line-ctx);
}

/* --- akordeon ------------------------------------------------------------ */

/* Dwa OSOBNE pudelka, 12.09.2026 (trzecia wersja tego samego dnia, patrz
   historia ponizej). .faq__lista trzyma je obok siebie na desktopie.

   Wersja 1 (poranek): dwie NIEZALEZNE listy, kazda flex-column. Rzedy sie
   nie synchronizowaly, bo kazda kolumna rosla wlasnym tempem wg dlugosci
   WLASNYCH pytan (zgloszenie Jakuba na zrzucie, "wyglad pozostawia wiele
   do zyczenia").
   Wersja 2 (poludnie): jeden .faq__panel jako CSS Grid, pozycje 1 i 2 w
   jednym wierszu siatki, zsynchronizowane wysokoscia. Naprawilo rownanie
   wierszy, ale Jakub poprosil o cos innego: nie jeden panel z wewnetrzna
   kreska, tylko DWA fizycznie oddzielone pudelka, plus zdjecie przeniesione
   obok tekstu zamiast pod nim (patrz .faq__gora wyzej).
   Wersja 3 (ta): .faq__lista to grid 2 kolumn na poziomie UKLADU, a kazde
   .faq__panel w srodku to niezalezny, samodzielny ciemny prostokat z
   wlasnym stosem pytan (pierwsza polowa/druga polowa). Nie synchronizujemy
   already wierszy MIEDZY pudelkami, bo to i jest "oddzielenie od siebie",
   o ktore prosil Jakub, nie usterka do naprawy. */
.faq__lista {
  /* margin-block-start usuniety 14.09.2026, dublowal odstep z .faq__uklad
     gap (patrz komentarz przy .faq__uklad wyzej). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.faq__panel {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);      /* D29, 28.08.2026 */
  overflow: hidden;                     /* zeby hover pierwszej/ostatniej pozycji nie wystawal poza rog */
  /* zmienne ciemnego kontekstu przychodza z tokens.css, panel stoi tam
     w tej samej grupie co .on-dark. Reczna kopia usunieta 26.08.2026 */
}

.faq__pozycja { border-block-end: var(--border-width) solid var(--line-ctx); }
.faq__pozycja:last-child { border-block-end: 0; }

.faq__pytanie-tekst {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: var(--ls-body);
}

.faq__pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  font-family: var(--font-text);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-body);
  line-height: 1.4;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie:hover { color: var(--accent-ctx); }
.faq__pytanie:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-dark);
  outline-offset: -2px;
}

/* znak plus, ktory przy otwarciu zmienia sie w minus.
   Wektor nie dostarczony (K2), rysowany wlasny. Kolor zmierzony pikselowo
   z kadru: prawie bialy (blend jasnego tekstu na ciemnym tle), nie zloty
   akcent, dlatego var(--fg) a nie var(--accent). Rozmiar z kadru ok. 20px. */
.faq__znak {
  position: relative;
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
}
.faq__znak::before,
.faq__znak::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 20px;
  block-size: 1px;
  background: var(--fg);
  transition: transform var(--dur) var(--ease);
}
.faq__znak::after { transform: rotate(90deg); }
[open] .faq__znak::after { transform: rotate(0deg); }

.faq__odpowiedz {
  margin: 0;
  padding: 0 var(--space-8) var(--space-7);
  max-width: 62ch;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--fg-muted);
}
.faq__odpowiedz p { margin: 0 0 var(--space-4); }
.faq__odpowiedz p:last-child { margin-block-end: 0; }
.faq__odpowiedz a { color: var(--accent); }

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

@media (max-width: 1000px) {
  /* 02.09.2026 (D94): uklad z kadru mobilnego Karola
     (materialy/kadry-mobile/faq-mobile-wide.png, 390 px). Zmierzone tam:
     zdjecie zajmuje x 3-388 i 206 px wysokosci, czyli pelna szerokosc okna
     przy proporcji 1,874, a ciemny panel idzie x 2-388 i zaczyna sie 2 px
     pod zdjeciem. U nas oba stalo w kontenerze (310 px szerokosci), zdjecie
     mialo proporcje 1,36, a miedzy nimi bylo 64 px przerwy. */
  /* 02.09.2026 (D97): dolny odstep sekcji zdjety. .faq bierze padding-block
     z generycznej .section (--space-section, 72px na tej szerokosci).
     Na desktopie ten odstep jest celowy (D33 w decyzje.md: szeroki pas miedzy
     dwoma ciemnymi blokami czyta sie jako kompozycja, cienka kreska jako
     defekt). Na telefonie panel przechodzi bezposrednio w zdjecie konsultacji,
     wiec te same 72px zamiast pasa miedzy dwoma ciemnymi blokami wychodzily
     jako oderwany kremowy prostokat WCINAJACY SIE w zdjecie, bo zdjecie
     konsultacji zaczyna sie od razu, bez wlasnego dark banda przed soba.
     Zgloszone przez Jakuba na zywym zrzucie. */
  .faq { padding-block-end: 0; }
  /* 12.09.2026: .faq__uklad jest flex-column (dwa rzedy: naglowek/lista),
     nie trzeba go tu resetowac. .faq__gora nie istnieje juz w markupie
     (zdjecie usuniete), wiec regula na nim rowniez znika stad. */
  .faq .etykieta-sekcji { display: none; }
  /* Zgloszenie Jakuba, 12.09.2026: na telefonie dwa pudelka maja stac w
     jednej kolumnie BEZ odstepu miedzy nimi, jedno pod drugim, stykajac
     sie. Gap z desktopu (var(--space-7), rozdziela pudelka POZIOMO) tu sie
     zeruje. Rogi sa juz kwadratowe na tej szerokosci (regula .faq__panel
     nizej, border-radius:0, D94/D97), wiec zetkniete krawedzie NIE robia
     wciecia jak zaokraglony-w-zaokraglony, caly stos czyta sie jako jedna
     ciagla lista dziewieciu pytan, nie dwa osobne pudelka. */
  .faq__lista { grid-template-columns: 1fr; gap: 0; }

  /* 02.09.2026: zdjecie NIE wychodzi na pelna szerokosc, tylko panel. Jakub
     poprawil pierwsze podejscie: w kadrze Karola zdjecie ma nadal ksztalt
     liscia na tle sekcji, mimo ze samo pasmo obrazu siega blisko krawedzi,
     to sam rysunek (kanal alfa/maska) jest wezszy niz kadr. Panel pod nim
     idzie na pelna szerokosc okna, sam margines kontenera wystarcza powyzej
     600px, ponizej trzeba doliczyc jeszcze padding .container, patrz
     zapytanie na koncu pliku. */
  .faq__panel {
    margin-inline: calc(-1 * var(--container-margin));
    inline-size: auto;
    border-radius: 0;
  }
}

@media (max-width: 700px) {
  /* 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. */
  .faq { padding-block-start: var(--space-6); }
  .faq__pytanie { padding: var(--space-5) var(--space-5); font-size: var(--fs-body); }
  .faq__odpowiedz { padding: 0 var(--space-5) var(--space-5); }
}

@media (max-width: 600px) {
  /* Ponizej tego progu .container ma wlasny padding-inline (tokens.css),
     wiec pelny bleed musi odjac takze jego. */
  .faq__panel {
    margin-inline: calc(-1 * (var(--container-margin) + var(--gutter-mobile)));
  }
}