/* =============================================================================
 * Lokalizacja w strukturze : /assets/css/faq.css
 * Nazwa pliku              : faq.css
 * Funkcja                  : Styl sekcji FAQ — elegancki akordeon w formie kart.
 *                            Każde pytanie to osobna karta z tłem, ikoną w kółku
 *                            i płynnym rozwijaniem. Domyślnie zwinięte. Ładowany
 *                            przez partial FAQ, by działał na każdej stronie.
 * Wygenerowana wersja      : 1.0.0
 * Historia zmian           :
 *   1.0.0  (2026-05-25)  Pierwsza wersja: karty, ikona-kółko, smooth grid.
 * Projekt                  : Mademoiselle Professional (redesign 2026)
 * Software                 : polooma.com
 * ========================================================================== */

.faq{background:var(--paper);position:relative;overflow:hidden}
.faq .faq-glow{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);
  opacity:.35;top:-120px;right:-80px;background:radial-gradient(circle,rgba(216,184,120,.5),transparent 70%);pointer-events:none}

.faq-list{display:flex;flex-direction:column;gap:.9rem;position:relative;z-index:1;text-align:left}

.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:border-color .35s,box-shadow .35s,background .35s;
}
.faq-item:hover{border-color:var(--gold-soft);box-shadow:0 10px 30px rgba(58,42,15,.06)}
.faq-item:has(.faq-q[aria-expanded="true"]){
  border-color:var(--gold);background:#fff;box-shadow:0 18px 44px rgba(58,42,15,.08);
}

/* pytanie */
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:1.4rem 1.6rem;display:flex;align-items:center;gap:1.1rem;
  font-family:'Fraunces',serif;font-size:1.18rem;color:var(--mocha);transition:color .3s;
}
.faq-q:hover{color:var(--gold)}
.faq-q > span:last-child{flex:1 1 auto;line-height:1.35;text-align:left}

/* ikona w kółku po lewej (stały kwadrat → idealne koło) */
.faq-q .ico{
  width:38px;height:38px;min-width:38px;min-height:38px;flex:0 0 38px;box-sizing:border-box;
  border-radius:50%;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1rem;line-height:1;transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s;
}
.faq-q .ico i{display:block;line-height:1}
.faq-q[aria-expanded="true"] .ico{transform:rotate(45deg);background:var(--gold);color:var(--cream);border-color:var(--gold)}

/* odpowiedź — płynne rozwijanie przez grid (bez stałej max-height) */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1)}
.faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;color:var(--muted);line-height:1.75}
.faq-a > div > p,.faq-a > div{min-height:0}
.faq-a-inner{padding:0 1.6rem 1.5rem 5rem;max-width:72ch}

@media(max-width:560px){
  .faq-q{padding:1.1rem 1.1rem;font-size:1.05rem;gap:.8rem}
  .faq-a-inner{padding:0 1.1rem 1.2rem 1.1rem}
}
.faq-more{text-align:center;margin-top:2.2rem;position:relative;z-index:1}