/* ══════════════════════════════════════════════════════
   faq.css — appme FAQ page
   Simple vertical list with category groups
══════════════════════════════════════════════════════ */

/* ── Powłoka strony ─────────────────────────────────
   Ramka tej podstrony — .faq-page, breadcrumb, hero, poblask,
   badge, h1 i podtytuł — mieszka we WSPÓLNYM bloku POWŁOKA PODSTRON
   TREŚCIOWYCH w css/styles.css, razem z contact, support i blogiem.

   Stały tu wcześniej własne kopie tych reguł i zdążyły się rozjechać:
   breadcrumb miał 760px zamiast szerokości navbara i był wyszarzony
   do rgba(255,255,255,.3) zamiast białego, hero-inner 600px zamiast
   pełnej ramki, podtytuł dodatkowe 480px, a .faq-page nie miało
   przyciemnienia nad tłem wideo, które mają pozostałe podstrony.

   Dopisując regułę wymiarową, rób to TAM, nie tutaj — ten plik ładuje
   się PO styles.css, więc każda właściwość powtórzona tu wygrywa
   kaskadę i strony znów zaczynają się różnić. */


/* ── Lista kategorii ───────────────────────────────── */
/* Sześć kategorii w jednej kolumnie 760px to była strona na kilka ekranów
   przewijania, a szukane pytanie leżało gdzieś w środku. W kolumnach cały
   spis mieści się w zasięgu wzroku.

   align-items: start jest tu konieczne, nie kosmetyczne: rozwinięcie
   odpowiedzi zmienia wysokość kafelka, a bez tego siatka wyrównywałaby
   wszystkie kategorie w wierszu do najwyższej i cały wiersz podskakiwałby
   przy każdym kliknięciu.

   minmax(420px, …) — poniżej tego pytania łamią się na trzy linie
   i akordeon przestaje być czytelny. */
.faq-content {
  max-width: var(--shell-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--shell-gutter, clamp(1rem, 4vw, 3rem)) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  align-items: start;
  gap: 0 2rem;
}

/* ── Category group ────────────────────────────────── */
.faq-group {
  margin-bottom: 2.5rem;
}
.faq-group-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
}
.faq-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: .65rem;
  background: var(--grad);
  flex-shrink: 0;
}
.faq-group-icon svg {
  width: 16px; height: 16px;
  color: #fff;
}
.faq-group-header h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  margin: 0;
  letter-spacing: -.01em;
}

/* ── FAQ list ──────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ── Single FAQ item ───────────────────────────────── */
.faq-item {
  border: 1.5px solid rgba(255,255,255,.06);
  border-radius: .9rem;
  background: rgba(255,255,255,.02);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.faq-item:hover {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.faq-item.open {
  border-color: rgba(12,181,210,.18);
  background: rgba(12,181,210,.025);
  box-shadow: 0 2px 20px rgba(12,181,210,.06);
}

/* Pytanie jest naglowkiem OPAKOWUJACYM przycisk — h3 > button, nie odwrotnie.
   Sam h3 nie wnosi tu wygladu: to czysty pojemnik semantyczny, a caly wyglad
   siedzi na .faq-question ponizej. `font: inherit` gasi domyslny rozmiar
   i pogrubienie naglowka z arkusza przegladarki, zeby dolozenie tagu nie
   zmienilo ani jednego piksela. Marginesy zeruje globalny reset w styles.css. */
.faq-q { font: inherit; }

/* Question button */
.faq-question {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .95rem 1.15rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.45;
  transition: color .2s;
}
.faq-question:hover { color: #fff; }
.faq-item.open .faq-question { color: var(--c1); }

.faq-q-text { flex: 1; min-width: 0; }

.faq-q-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: .5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  transition: background .25s, border-color .25s, transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-q-icon svg {
  width: 14px; height: 14px;
  color: rgba(255,255,255,.4);
  transition: color .25s, transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-q-icon {
  background: rgba(12,181,210,.1);
  border-color: rgba(12,181,210,.2);
}
.faq-item.open .faq-q-icon svg {
  color: var(--c1);
  transform: rotate(45deg);
}

/* Answer panel */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer > .faq-answer-body {
  overflow: hidden;
}

.faq-answer-body {
  padding: 0 1.15rem 0 1.15rem;
  font-size: .85rem;
  line-height: 1.75;
  color: rgba(255,255,255,.48);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s .05s, transform .3s .05s, padding .35s;
}
.faq-item.open .faq-answer-body {
  padding: 0 1.15rem 1.1rem 1.15rem;
  opacity: 1;
  transform: translateY(0);
}

/* Answer typography */
.faq-answer-body strong {
  color: rgba(255,255,255,.72);
  font-weight: 700;
}
.faq-answer-body a {
  color: var(--c1);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
.faq-answer-body a:hover { color: #fff; }

.faq-answer-body ul {
  list-style: none;
  padding: 0;
  margin: .5rem 0;
}
.faq-answer-body ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .35rem;
}
.faq-answer-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c1);
}

/* ── CTA card ──────────────────────────────────────── */
/* Blok „masz jeszcze pytania" zostaje wąski — to jedno zdanie z przyciskami,
   a nie siatka, więc rozciągnięcie go na 1400px zostawiłoby dwa guziki
   zagubione pośrodku pustej szerokości. */
/* Odstęp do stopki jako PADDING, nigdy margines.
   .faq-page maluje przyciemnienie nad tłem wideo, a margines dolny ostatniego
   dziecka wypływa poza rodzica (margin collapsing) — pudełko tła kończyło się
   wtedy równo z tą kartą i między nią a stopką zostawał pas gołego wideo.
   Stąd też --page-bottom zamiast własnego 4rem: ten sam odstęp co na contact,
   support i blogu. */
.faq-cta {
  max-width: var(--page-max, 760px);
  margin: 0 auto;
  padding: 0 var(--page-gutter, 1.5rem) var(--page-bottom, 5rem);
}
.faq-cta-card {
  position: relative;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 1.25rem;
  border: 1.5px solid rgba(12,181,210,.14);
  background: rgba(12,181,210,.035);
  overflow: hidden;
}
.faq-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(12,181,210,.07) 0%, transparent 60%);
  pointer-events: none;
}
.faq-cta-title {
  position: relative;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 .45rem;
}
.faq-cta-card p {
  position: relative;
  font-size: .86rem;
  color: rgba(255,255,255,.45);
  margin: 0 0 1.4rem;
  line-height: 1.55;
}
.faq-cta-btns {
  position: relative;
  display: flex;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.3rem;
  border-radius: .75rem;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  font-family: inherit;
  border: none;
}
.faq-cta-btn svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.faq-cta-btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(12,181,210,.25);
}
.faq-cta-btn--primary:hover {
  box-shadow: 0 6px 26px rgba(12,181,210,.4);
  transform: translateY(-1px);
}
.faq-cta-btn--ghost {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.65);
  border: 1.5px solid rgba(255,255,255,.1);
}
.faq-cta-btn--ghost:hover {
  border-color: rgba(255,255,255,.2);
  color: #fff;
  background: rgba(255,255,255,.07);
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .faq-question { font-size: .84rem; padding: .85rem 1rem; }
  .faq-answer-body { font-size: .82rem; }
  .faq-cta-btns { flex-direction: column; align-items: center; }
  .faq-group-header h2 { font-size: 1rem; }
}