/* ============================================================
   Print.Organic — sekcja 07: FAQ (Figma 861:1852, mobile 3007:4978)
   ============================================================ */

.s-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 64px var(--page-margin);
}

.s-faq__title {
  font-size: 64px; /* rozmiar z projektu (861:1853) — poza skalą tokenów h2/h3 */
  line-height: 1.1;
}

.s-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(680px, 100%);
}

.s-faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* --- Kafelek pytania --- */

.s-faq__item {
  background: var(--c-cream);
  border: var(--border);
  border-radius: 30px;
  overflow: hidden;
}

/* kafelki „extra" (ponad 5 z makiety) — doładowywane przyciskiem */
.s-faq__item[hidden] {
  display: none;
}

.s-faq__q {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.s-faq__toggle {
  display: flex;
  align-items: center; /* zamknięty kafelek: kółko wyśrodkowane (Figma items-center) */
  gap: 20px;
  width: 100%;
  padding: 17px 24px;
  background: none;
  border: 0;
  color: var(--c-black);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding 0.35s ease;
}

.s-faq__item.is-open .s-faq__toggle {
  align-items: flex-start; /* otwarty: kółko przy pierwszej linii (Figma items-start) */
  padding-top: 24px;
  padding-bottom: 10px; /* odstęp pytanie→odpowiedź = 10px jak w makiecie (p-24, gap 10) */
}

/* --- Kółko plus/minus --- */

.s-faq__icon {
  position: relative;
  flex: none;
  width: 25px;
  height: 25px;
  border: var(--border);
  border-radius: 50%;
  background: var(--c-black);
  transition: background 0.3s ease;
}

.s-faq__item.is-open .s-faq__icon {
  margin-top: 3px; /* optyczne wyrównanie do pierwszej linii pytania (H4 24/1.3) */
}

.s-faq__icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.s-faq__icon-plus {
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
}

.s-faq__icon-minus {
  width: 8px;
  height: 1px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.s-faq__item.is-open .s-faq__icon {
  background: var(--c-cream);
}

.s-faq__item.is-open .s-faq__icon-plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.s-faq__item.is-open .s-faq__icon-minus {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* --- Panel odpowiedzi (wysokość animuje GSAP) --- */

.s-faq__panel {
  overflow: hidden;
}

.s-faq__panel[hidden] {
  display: none;
}

.s-faq__answer {
  padding: 0 24px 24px 69px; /* 24 + kółko 25 + odstęp 20 */
}

.s-faq__answer p + p {
  margin-top: 1.3em; /* pusta linia jak w projekcie */
}

/* --- Przycisk „pokaż więcej" --- */

.s-faq__more {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* JS chowa przycisk, gdy nie ma już kafelków do doładowania
   ([hidden] przegrałby z display:inline-flex klasy .btn-group) */
.s-faq__more[hidden] {
  display: none;
}

/* hover całej grupy — inwersja jak w hoverze komponentu buttona */
.s-faq__more:hover .btn {
  background: var(--c-black);
  color: var(--c-cream);
}

.s-faq__more:hover .btn-circle {
  background: var(--c-black);
}

.s-faq__more:hover .btn-circle img {
  filter: invert(1);
}

/* Podwójna strzałka jak w komponencie Figmy „arrow down-button"
   (dwa glify jeden nad drugim): na hoverze strzałka zjeżdża w dół,
   a druga wjeżdża z góry */
.s-faq__more .btn-circle {
  position: relative;
  overflow: hidden;
}

.s-faq__more .btn-circle img {
  transition: transform 0.35s ease, filter 0.2s ease;
}

.s-faq__more .s-faq__more-arrow--dup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 28px));
}

.s-faq__more:hover .btn-circle img:not(.s-faq__more-arrow--dup) {
  transform: translateY(28px);
}

.s-faq__more:hover .s-faq__more-arrow--dup {
  transform: translate(-50%, -50%);
}

/* ============================================================
   Mobile (Figma 3007:4978: py-64, gap 64; kafelki p-20, gap listy 8,
   tytuł H1 Mob 56/0.9, odpowiedź pełną szerokością kafelka)
   ============================================================ */

@media (max-width: 767px) {
  .s-faq__title {
    font-size: var(--fs-h1); /* 56px — styl H1 Mob jak w makiecie mobile */
    line-height: 0.9;
  }

  .s-faq__list {
    gap: 8px;
  }

  .s-faq__toggle {
    padding: 20px;
  }

  .s-faq__item.is-open .s-faq__toggle {
    padding: 20px; /* mobile: p-20 bez zmiany po otwarciu; pb-20 = gap 20 do odpowiedzi */
  }

  .s-faq__item.is-open .s-faq__icon {
    margin-top: 0; /* mobilne H4 = 16px (linia 20.8) < kółko 25px — bez korekty */
  }

  .s-faq__answer {
    padding: 0 20px 20px; /* mobile: odpowiedź na pełnej szerokości kafelka */
  }
}