/* Sekcja FAQ landingu (templates/landing.html #faq, treść: templates/landing_faq.html).
   Jasny motyw domyślnie, ciemny przez html[data-theme="dark"]. */
.lp-faqx{
  --faq-brand: var(--cp-brand-hi, #FF4A10);
  --faq-card: rgba(255,255,255,.78);
  --faq-card-open: #fff;
  --faq-bd: rgba(20,16,12,.09);
  --faq-bd-open: rgba(255,74,16,.32);
  --faq-text: #17130f;
  --faq-muted: #5c544b;
  --faq-chip: rgba(255,74,16,.08);
  --faq-shadow: 0 18px 40px rgba(40,24,10,.08);
  scroll-margin-top: 80px;
}
html[data-theme="dark"] .lp-faqx{
  --faq-card: rgba(255,255,255,.035);
  --faq-card-open: rgba(255,255,255,.06);
  --faq-bd: rgba(255,255,255,.09);
  --faq-bd-open: rgba(255,106,40,.45);
  --faq-text: #f4efe8;
  --faq-muted: #b9b0a5;
  --faq-chip: rgba(255,106,40,.12);
  --faq-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.lp-faqx-grid{display:grid; gap:28px; align-items:start}
@media (min-width: 992px){
  .lp-faqx-grid{grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap:56px}
  .lp-faqx-side{position:sticky; top:96px}
}

.lp-faqx-eyebrow{display:inline-flex; padding:6px 12px; border-radius:999px; background:var(--faq-chip);
  color:var(--faq-brand); font-size:12px; font-weight:800; letter-spacing:.14em}
.lp-faqx-side .lp-h2{margin:14px 0 10px; color:var(--faq-text)}
.lp-faqx-lead{margin:0; color:var(--faq-muted); font-size:16px; line-height:1.55}

.lp-faqx-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.lp-faqx-chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--faq-bd); background:var(--faq-card); color:var(--faq-text);
  font-size:14px; font-weight:650; text-decoration:none; transition:border-color .2s, transform .2s}
.lp-faqx-chip span{min-width:22px; height:22px; padding:0 6px; display:inline-grid; place-items:center;
  border-radius:999px; background:var(--faq-chip); color:var(--faq-brand); font-size:12px; font-weight:800}
.lp-faqx-chip:hover{border-color:var(--faq-bd-open); transform:translateY(-1px); color:var(--faq-text)}

.lp-faqx-help{display:grid; gap:4px; margin-top:24px; padding:18px; border-radius:18px;
  border:1px solid var(--faq-bd); background:var(--faq-card); color:var(--faq-muted); font-size:14px; line-height:1.5}
.lp-faqx-help strong{color:var(--faq-text); font-size:15px}
.lp-faqx-links{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.lp-faqx-links a{color:var(--faq-brand); font-weight:700; text-decoration:none}
.lp-faqx-links a:hover{text-decoration:underline}

.lp-faqx-groups{display:grid; gap:34px}
.lp-faqx-group{scroll-margin-top:96px}
.lp-faqx-gtitle{margin:0 0 12px; color:var(--faq-muted); font-size:13px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase}
.lp-faqx-list{display:grid; gap:10px}

.lp-faqx-item{border-radius:18px; border:1px solid var(--faq-bd); background:var(--faq-card);
  transition:background .25s, border-color .25s, box-shadow .25s}
.lp-faqx-item[open]{background:var(--faq-card-open); border-color:var(--faq-bd-open); box-shadow:var(--faq-shadow)}
.lp-faqx-item summary{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 20px; cursor:pointer; list-style:none; color:var(--faq-text); font-size:16px; font-weight:700; line-height:1.35}
.lp-faqx-item summary::-webkit-details-marker{display:none}
.lp-faqx-item summary:focus-visible{outline:2px solid var(--faq-brand); outline-offset:2px; border-radius:18px}

.lp-faqx-icon{position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--faq-chip)}
.lp-faqx-icon::before,.lp-faqx-icon::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px;
  margin:-1px 0 0 -6px; border-radius:2px; background:var(--faq-brand); transition:transform .25s}
.lp-faqx-icon::after{transform:rotate(90deg)}
.lp-faqx-item[open] .lp-faqx-icon::after{transform:rotate(0)}

.lp-faqx-body{padding:0 20px 18px}
.lp-faqx-body p{margin:0; max-width:68ch; color:var(--faq-muted); font-size:15px; line-height:1.65}
.lp-faqx-item[open] .lp-faqx-body{animation:lpFaqIn .28s ease both}
@keyframes lpFaqIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

@media (max-width: 575.98px){
  .lp-faqx-item summary{padding:15px 16px; font-size:15px}
  .lp-faqx-body{padding:0 16px 16px}
  .lp-faqx-chip{font-size:13px; padding:8px 12px}
}
@media (prefers-reduced-motion: reduce){
  .lp-faqx-item[open] .lp-faqx-body{animation:none}
  .lp-faqx-chip,.lp-faqx-icon::before,.lp-faqx-icon::after{transition:none}
}