/* ──────────────────────────────────────────────────────────────────────────
   sekcja "course_faq" — najczęściej zadawane pytania na landingu kursu.
   Zależności: assets/css/design-system.css (--ds-*, .m-sec, .container-ms,
   .text-*, .hl-marker, .btn-blue) — kontrakt DOM w sections/course_faq.php.

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

   ODSTĘPY: najbliższy krok z siatki --ds-space-*, nie surowe wartości
   z referencji projektowej (22 → 24, 10 → 12 itd.).

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

.cfq {
  /* 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. Referencja projektowa: 260ms. */
  --cfq-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 landingu. */
  padding: 40px 0 48px;
}

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

/* Kolejność bloków na telefonie: nagłówek → pytania → karta kontaktowa.
   Na desktopie karta wjeżdża do pierwszego rzędu (patrz sekcja „Desktop”)
   bez zmiany kolejności w DOM. */
.cfq-inner {
  display: grid;
  gap: var(--ds-space-6);
  grid-template-areas:
    "intro"
    "cols"
    "help";
}

/* ── 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). */
.cfq-intro {
  grid-area: 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. */
.cfq-eyebrow.cfq-eyebrow {
  margin: 0;
  color: var(--ds-color-primary-ink);
}

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

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

/* ── Karta kontaktowa ──────────────────────────────────────────────────── */
.cfq-help {
  grid-area: help;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-5);
  background-color: var(--ds-color-canvas-warm);
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-lg);
}

.cfq-help-text {
  margin: 0;
  color: var(--ds-color-ink);
}

.cfq-help-note {
  display: block;
  margin-top: var(--ds-space-1);
  color: var(--ds-color-ink-secondary);
}

.cfq-btn {
  width: 100%;
}

/* ── Kolumny i grupy ───────────────────────────────────────────────────── */
.cfq-cols {
  grid-area: cols;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
}

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

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

.cfq-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-3);
  padding-bottom: var(--ds-space-2);
  border-bottom: 1px solid var(--ds-color-hairline);
}

.cfq-group-title {
  margin: 0;
}

.cfq-count {
  margin-left: auto;
  color: var(--ds-color-ink-muted);
  white-space: nowrap;
}

.cfq-items {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

/* ── Pojedyncze pytanie ────────────────────────────────────────────────── */
.cfq-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);
}

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

.cfq-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;
}

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

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

.cfq-chev {
  flex: none;
  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);
}

.cfq-item[open] .cfq-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. */
.cfq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cfq-duration-open) var(--ds-ease-out-soft);
}

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

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

.cfq-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 ───────────────────────────────────────────────────────
   Nagłówek i karta kontaktowa w jednym rzędzie (karta dosunięta do prawej
   i do dołu), pod nimi pytania w dwóch kolumnach. Kolumny świadomie nie są
   równej wysokości — podział jest tematyczny, a wyrównywanie ich rozjeżdża
   listę przy rozwijaniu odpowiedzi. */
@media (min-width: 1024px) {
  .cfq-inner { gap: var(--ds-space-12); }

  /* Dwie kolumny w pierwszym rzędzie tylko wtedy, gdy karta kontaktowa
     naprawdę jest w markupie (klasę dokłada PHP). Sama definicja toru `auto`
     nie wystarcza: puste tory zwijają się do zera, ale odstęp między nimi
     zostaje i zsuwa nagłówek z osi sekcji. */
  .cfq-has-help {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro help"
      "cols  cols";
    align-items: end;
  }

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

  .cfq-help {
    flex-direction: row;
    align-items: center;
    gap: var(--ds-space-5);
    padding: 18px var(--ds-space-6);
    align-self: end;
  }

  .cfq-help-text { max-width: 200px; }

  .cfq-btn {
    width: auto;
    flex: none;
  }

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

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

  .cfq-group { gap: var(--ds-space-4); }
  .cfq-group-head { padding-bottom: var(--ds-space-3); }
  .cfq-items { gap: var(--ds-space-3); }

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

  .cfq-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 */
  }

  .cfq-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). */
  .cfq-a p {
    padding: 0 var(--ds-space-6) var(--ds-space-5);
    font-size: 15px;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cfq *,
  .cfq *::before,
  .cfq *::after {
    transition-duration: 0.01ms !important;
  }
}