/* FAQ — blok feuer/faq (task03.12; punkt wyjścia: makieta K20, task01.32).
   Wg FeuerDS (stan 2026-09-13): „FAQ" 7:6855 / „FAQ mobile" 7:6883. H2 + lista pytań
   rozwijanych; akordeon na js/zakladki.js w trybie „akordeon" (pozycje niezależne na każdej
   szerokości, wiele otwartych naraz — decyzja użytkownika 2026-09-14).
   Odstępstwa od ramek (decyzje użytkownika 2026-09-14, rejestr spojnosc-designu.md):
   pełny kontener zamiast wąskiej kolumny 794; linie --kolor-linii zamiast #2b303a;
   pytanie 20/28 (ramka 20/24); padding poziomy 8 wszędzie (otwarty nagłówek w ramce 16,
   odpowiedź mobile bez prawego); chevron przy krawędzi treści (ramka 25 / 6 od krawędzi).
   Odpowiedź = bloki wewnętrzne w .tresc — akapity, style „Lead" / „Wyróżnienie" / „Wyróżnienie z linią" i listy z typografii
   treści redakcyjnej (typografia.css motywu). Edytor: pozycje w stanie otwartym (nagłówek
   z aria-expanded="true"), przycisk „Dodaj pytanie" pod listą.
   Tablet (640–1023) bez projektu — układ mobile. Wartości px z Figmy zapisane w rem (baza 16). */

.faq {
  max-width: 90rem;                       /* stop skali z task01.06 — jak .dla-kogo */
  margin-inline: auto;
  padding-block: var(--odstep-8);         /* 64 / 64 — zgodne z ramkami */
}

.faq-tytul {
  margin: 0 0 var(--odstep-4);            /* H2 32/44.8 ExtraBold; 32 do listy */
  font-size: var(--tekst-32);
  line-height: var(--interlinia-32);
  font-weight: var(--waga-najgrubsza);
}

.faq-pytanie { margin: 0; }               /* h3 = tylko semantyka, wygląd na przycisku */

/* Nagłówek pozycji: pytanie + chevron; padding 24 / 8; linia dolna 1 px.
   Otwarta pozycja: pytanie Bold, linia górna 2 px marki nakrywająca linię dolną poprzedniej
   (ujemny margines), linia dolna przechodzi na odpowiedź. */
.faq-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;                          /* 10 px */
  box-sizing: border-box;                 /* jak przycisk na froncie — w edytorze nagłówek to div */
  width: 100%;
  margin: 0;
  padding: var(--odstep-3) var(--odstep-1);
  border: 0;
  border-bottom: 1px solid var(--kolor-linii);
  background: none;
  color: var(--kolor-tekstu);
  font: inherit;
  font-size: var(--tekst-20);             /* 20/28 — kanon H4 (ramka 20/24) */
  line-height: var(--interlinia-20);
  font-weight: var(--waga-zwykla);
  text-align: left;
  cursor: pointer;
}

.faq-naglowek::after {                    /* chevron 24, obrót dół ↔ góra 400 ms (jak 01.29) */
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: url("../ikony/chevron-dol.svg") center / contain no-repeat;
  transition: transform 0.4s;
}

.faq-naglowek[aria-expanded="true"] {
  margin-top: -1px;
  border-top: 2px solid var(--kolor-marki);
  border-bottom-color: transparent;
  font-weight: var(--waga-gruba);
}

.faq-naglowek[aria-expanded="true"]::after { transform: rotate(180deg); }

.faq-odpowiedz {
  padding: var(--odstep-1) var(--odstep-1) var(--odstep-3);   /* 8 / 8 / 24 */
  border-bottom: 1px solid var(--kolor-linii);
  font-size: var(--tekst-16);
  line-height: 1.5rem;                    /* 16/24 (jak odpowiedzi w 01.29; token --interlinia-16 to 22.4) */
}

/* „Lead", „Wyróżnienie" i „Wyróżnienie z linią" w odpowiedzi — odstęp jak między akapitami (16), nie 80 z palety treści
   redakcyjnej (decyzja użytkownika 2026-09-25, task03.12). Specyficzność ponad .tresc (także reguły mobile). */
.faq-odpowiedz.tresc :is(.is-style-wstep, .is-style-wyroznienie, .is-style-wyroznienie-linia) { margin-block: 0 var(--odstep-2); }
.faq-odpowiedz.tresc > :last-child { margin-block-end: 0; }

/* Tekst pytania w jednym elemencie flex — inaczej fragment w kursywie rozjeżdża się po wierszu (space-between). */
.faq-naglowek > span { flex: 1 1 auto; }

/* Edytor: pytanie edytowane w miejscu, przycisk „Dodaj pytanie" pod listą. */
.faq-naglowek > [contenteditable] { cursor: text; }

.faq .faq-lista > .block-list-appender { position: static; }   /* WordPress pozycjonuje opakowanie appendera absolutnie w rogu bloku */

.faq-dodaj { padding-top: var(--odstep-3); }

/* ---- Tablet i mobile (frame 7:6883) ---- */

@media (max-width: 1023px) {
  .faq-tytul {
    font-size: var(--tekst-28);           /* 28/39.2 ExtraBold */
    line-height: var(--interlinia-28);
  }

  .faq-naglowek {
    font-size: var(--tekst-18);           /* 18/26 */
    line-height: var(--interlinia-18);
  }
}