/* =============================================================================
   WSL SICUREZZA — faq.css
   Stile pagina FAQ. Pattern identico a listino.css / about.css.
   Dipende da main.css per: variabili CSS, nav, footer, .btn-primary,
   .btn-secondary, .section-label, .section-title, .section-body, .reveal,
   .faq-list, .faq-item, .faq-answer, .faq-placeholder (accordion in main.css).
   ============================================================================= */

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.faq-hero {
  min-height: 60vh;
  background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
  padding: 160px 80px 50px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: clip;
}

.faq-hero::before {
  content: '';
  position: absolute;
  top: -700px; right: -800px;
  width: 2000px; height: 2000px;
  border-radius: 500%;
  background: radial-gradient(circle, var(--glow-deep) 5%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.faq-hero-inner {
  width: 100%;
  max-width: 1440px;
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
}

.faq-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 24px;
}

.faq-title {
  font-family: var(--font-titoli);
  font-size: clamp(80px, 8vw, 120px);
  font-weight: 800;
  line-height: 1.0;
  color: var(--text-bright);
  margin-bottom: 32px;
}

.faq-title em {
  font-style: normal;
  color: var(--accent-primary);
}

.faq-subtitle {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-base);
  line-height: 1.75;
  max-width: 900px;
  border-top: 2px solid var(--accent-detail);
  padding-top: 20px;
  margin: 24px auto 0;
}

/* ── SEZIONI CATEGORIA ────────────────────────────────────────────────────── */
/* .faq-section, .faq-section--dark, .faq-section-inner → in main.css */

.faq-category-header {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto 64px auto;
}

.faq-category-label {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 24px;
}

.faq-category-title {
  font-family: var(--font-titoli);
  font-size: clamp(60px, 5.5vw, 90px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-bright);
  margin-bottom: 24px;
}

/* ── RISPOSTA MULTI-PARAGRAFO ─────────────────────────────────────────────── */

.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

.faq-nota {
  display: block;
  margin-top: 14px;
  padding: 8px 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent-primary) 50%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-base));
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ── RESPONSIVE — TABLET (max-width: 1280px) ──────────────────────────────── */

@media (max-width: 1280px) {
  .faq-hero    { padding: 160px 48px 50px; }
  .faq-section { padding: 50px 48px; }
}

/* ── RESPONSIVE — MOBILE (max-width: 768px) ───────────────────────────────── */

@media (max-width: 768px) {
  .faq-hero            { padding: 160px 24px 48px; }
  .faq-section         { padding: 40px 24px; }
  .faq-category-header { margin-bottom: 40px; }
  .faq-category-label  { font-size: 14px; }
  .faq-category-title  { font-size: clamp(36px, 8vw, 56px); }
}