/* ===========================================================================
   Akordeon FAQ.

   Wyciągnięty ze strony głównej przy drugim użyciu (podstrona „O nas").

   SKALA: domyślna jest ta z PODSTRON — tak ma osiem z dziewięciu makiet.
   Strona główna ma pytania większe, stąd nadpisanie pod `main.strona-glowna`.
   =========================================================================== */

.faq { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 24px 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
/* `flex-shrink:0` jest dołożone wobec makiety — bez niego znak „+" ściska się
   na wąskim ekranie. Wysokości nie zmienia, więc pomiar zostaje ten sam. */
.faq-q .ic { color: var(--beige); font-size: 24px; font-weight: 200; transition: transform .3s ease; flex-shrink: 0; }
.faq-item.open .faq-q .ic { transform: rotate(45deg); }

/* Wysokość ustawia JS z `scrollHeight` — inaczej animacja nie ruszy. */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 0 24px; font-size: 16px; color: var(--text); font-weight: 300; max-width: 760px; }

/* --- Skala stron ofertowych --------------------------------------------- */

/* Rezydencje, domy murowane i szkieletowe oraz obie podstrony projektów mają
   pytania o oczko większe niż strony informacyjne. Klasę `oferta` dostaje
   `<main>` przez `klasa_strony`. */
main.oferta .faq-q { padding: 26px 0; font-size: 19px; }
main.oferta .faq-a p { padding: 0 0 26px; }

/* --- Skala strony głównej ----------------------------------------------- */

/* Na stronie głównej znak „+" ma ciasny `line-height`, a treść jest wyśrodkowana
   w pionie — dlatego przycisk jest tam niższy, mimo większej czcionki. */
main.strona-glowna .faq-q { padding: 30px 0; font-size: 21px; align-items: center; }
main.strona-glowna .faq-q .ic { font-size: 26px; line-height: 1; }
main.strona-glowna .faq-a p { padding: 0 0 30px; font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-q .ic { transition: none; }
}