/* ──────────────────────────────────────────────────────────────────────────
   sekcja "home_faq" — najczęściej zadawane pytania na stronie głównej.
   Zależności: assets/css/design-system.css (--ds-*, .m-sec, .container-ms,
   .text-*, .hl-marker) — kontrakt DOM w sections/home_faq.php.

   TYPOGRAFIA: rozmiary niosą klasy design systemu nadane w markupie
   (.text-eyebrow, .text-heading-1, .text-body-lg, .text-title, .text-body-sm).
   Font-size ustawiamy tu tylko tam, gdzie projekt sekcji świadomie schodzi
   z siatki DS (pytanie i odpowiedź) — z osobnym komentarzem przy każdym.

   ODSTĘPY: najbliższy krok z siatki --ds-space-*.

   Mobile-first: baza 360px, desktop od 1024px.
   ────────────────────────────────────────────────────────────────────────── */

.hfq {
  /* Rozwijanie odpowiedzi jest dłuższe od --ds-duration-base (220ms): panel
     jedzie na wysokości, nie na samej nieprzezroczystości, i przy 220ms
     wygląda na urwane. */
  --hfq-duration-open: 260ms;

  background-color: var(--ds-color-canvas);
  /* .m-sec daje 56px 20px — padding poziomy niesie .container-ms, żeby treść
     sekcji stała w jednej kolumnie z sąsiednimi sekcjami strony głównej.
     Górny padding ścięty na życzenie (był 40px/64px) — sekcja poprzedzająca
     (home_teachers) ma własny odstęp od dołu, więc razem dawało to za dużo
     światła między "Poznaj najlepszych nauczycieli" i FAQ. */
  padding: 24px 0 48px;
}

@media (min-width: 1024px) {
  .hfq { padding: 40px 0 80px; }
}

.hfq-inner {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
}

/* ── Nagłówek ────────────────────────────────────────────────────────────
   Wyśrodkowany na wszystkich szerokościach; lead centruje się jako blok przez
   margin-inline: auto (samo text-align nie wystarcza, bo od 1024px kolumna
   nagłówka ma max-width węższy niż kontener). */
.hfq-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-3);
  text-align: center;
}

/* .text-eyebrow ustawia kolor na --ds-color-ink; nad tym nagłówkiem ma być
   granatowy odcień marki. Dwie klasy w selektorze biją pojedyncze .text-eyebrow. */
.hfq-eyebrow.hfq-eyebrow {
  margin: 0;
  color: var(--ds-color-primary-ink);
}

.hfq-title {
  margin: 0;
  color: var(--ds-color-ink);
  text-wrap: pretty;
}

.hfq-lead {
  margin: 0;
  color: var(--ds-color-ink-secondary);
  text-wrap: pretty;
}

/* ── Lista pytań ───────────────────────────────────────────────────────── */
.hfq-cols {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

/* Poniżej 1024px kolumny nie istnieją — pytania dziedziczą kolumnowy flex
   rodzica i lecą w kolejności źródła. */
.hfq-col {
  display: contents;
}

/* ── Pojedyncze pytanie ────────────────────────────────────────────────── */
.hfq-item {
  background-color: var(--ds-color-canvas);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
  transition: background-color var(--ds-duration-base) var(--ds-ease-out-soft);
}

.hfq-item[open] {
  background-color: var(--ds-color-canvas-warm);
}

.hfq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-3);
  min-height: 52px;             /* cel dotykowy z zapasem nad minimum 48px */
  padding: 14px var(--ds-space-4);
  text-align: left;
  color: var(--ds-color-ink);
  cursor: pointer;
  /* .text-title to 15px i tyle wystarcza — pytania zostają w stopniu
     systemowym. Rodzinę, wagę, interlinię i tracking niesie .text-title. */
  font-size: var(--ds-text-title);
  /* display: flex zdejmuje domyślny trójkąt <summary>; ::marker i webkitowy
     pseudoelement zostają na wypadek starszych silników. */
  list-style: none;
}

.hfq-q::-webkit-details-marker { display: none; }
.hfq-q::marker { content: ""; }

.hfq-q:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: -4px;
  border-radius: var(--ds-radius-sm);
}

.hfq-chev {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;              /* optyczne wyrównanie do pierwszej linii pytania */
  color: var(--ds-color-primary);
  transition: transform var(--ds-duration-base) var(--ds-ease-out-soft);
}

.hfq-item[open] .hfq-chev {
  transform: rotate(180deg);
}

/* Rozwijanie na grid-template-rows 0fr → 1fr: przejście jedzie na siatce,
   nie na wysokości elementu, więc nie ma skoku po zakończeniu animacji ani
   twardej wartości max-height do zgadywania. */
.hfq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hfq-duration-open) var(--ds-ease-out-soft);
}

.hfq-item[open] .hfq-a {
  grid-template-rows: 1fr;
}

.hfq-a > div {
  overflow: hidden;
}

.hfq-a p {
  margin: 0;
  padding: 0 var(--ds-space-4) var(--ds-space-4);
  color: var(--ds-color-ink-secondary);
  text-wrap: pretty;
}

/* ── Desktop ≥1024px ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hfq-inner { gap: var(--ds-space-12); }

  .hfq-intro {
    gap: var(--ds-space-4);
    max-width: 600px;
    margin-inline: auto;
  }

  .hfq-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-8) var(--ds-space-10);
    align-items: start;
  }

  .hfq-col {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
  }

  .hfq-item { border-radius: var(--ds-radius-md); }

  .hfq-q {
    min-height: 60px;
    padding: 18px var(--ds-space-6);
    gap: var(--ds-space-5);
    font-size: 16px;            /* stopień .text-title — na desktopie bez zejścia */
  }

  .hfq-chev {
    width: 20px;
    height: 20px;
  }

  /* Odpowiedź wraca na 16/1.6 (.text-body). Klasy .text-body nie da się nadać
     w markupie — Bootstrap ma własne utility o tej nazwie, które nadpisuje
     kolor przez !important (patrz nagłówek sekcji). */
  .hfq-a p {
    padding: 0 var(--ds-space-6) var(--ds-space-5);
    font-size: 15px;
    line-height: 1.6;
  }
}