/* =============================================================
   FAQ — componente unico del sito (dal 2026-09-22).
   Un solo modello estetico per ogni pagina: titolo a sinistra,
   elenco a righe sottili a destra, il "+" che diventa "−".
   Base: il modello di Produzione quadri e Regolamento macchine.

   Markup:
   <section class="faq" id="faq" aria-labelledby="faq-title">
     <div class="faq__wrap faq__grid">
       <div class="faq__head">
         <p class="faq__eyebrow">Domande</p>
         <h2 class="faq__title" id="faq-title">…</h2>
         <p class="faq__lede">(facoltativo)</p>
       </div>
       <div class="faq__list">
         <details class="faq__item" name="faq-…">
           <summary>Domanda</summary>
           <div class="faq__body"><p>Risposta</p></div>
         </details>
       </div>
     </div>
   </section>
   Varianti: .faq--white (fondo bianco invece del grigio),
   .faq--stack (titolo sopra e lista sotto, per pagine strette o
   per la pagina /faq/ che ha più gruppi).
   Le classi di comparsa di ogni pagina (pq-in, rm-in, reveal…)
   si aggiungono a .faq__head e .faq__list: il componente non le
   impone. Nessun JavaScript: <details> nativo; "name" tiene
   aperta una domanda alla volta dove il browser lo sa fare.
   ============================================================= */

.faq {
  --faq-ink: var(--corp-navy, #0b1220);
  --faq-copy: #56627a;
  --faq-accent: #2563eb;
  --faq-accent-ink: #1d4ed8;
  --faq-accent-deep: #1e3a8a;
  --faq-mist: #f5f5f7;
  --faq-rule: rgba(15, 23, 42, 0.1);
  --faq-pad: clamp(96px, 11vw, 168px);
  padding-block: var(--faq-pad);
  background: var(--faq-mist);
  color: var(--faq-ink);
}
.faq--white { background: #ffffff; }

.faq__wrap {
  width: min(100% - 40px, var(--max-width, 1200px));
  margin-inline: auto;
}
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.faq--stack .faq__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}
.faq--stack .faq__head { max-width: 760px; }

.faq__eyebrow {
  margin: 0;
  color: var(--faq-accent-deep);
  font-size: var(--fs-eyebrow, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.faq__title {
  margin: 0.4em 0 0;
  color: var(--faq-ink);
  font-size: clamp(2.3rem, 4.6vw, 4.2rem);
  font-weight: 790;
  letter-spacing: -0.047em;
  line-height: 1.02;
  text-wrap: balance;
}
.faq__title span { color: #7b889c; }
.faq__lede {
  margin: 1.1em 0 0;
  max-width: 44ch;
  color: var(--faq-copy);
  font-size: var(--fs-lead, 1.06rem);
  line-height: 1.6;
}
.faq__head .button { margin-top: 28px; }

.faq__list { border-top: 1px solid var(--faq-rule); }
.faq__item { border-bottom: 1px solid var(--faq-rule); }
.faq__item summary {
  position: relative;
  display: block;
  padding: 26px 48px 26px 0;
  color: var(--faq-ink);
  font-size: clamp(1.14rem, 1.5vw, 1.34rem);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--faq-accent-ink); }
/* il segno + che diventa − */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 1.8px;
  margin-top: -1px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__item summary:focus-visible {
  outline: 2px solid var(--faq-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq__body { padding: 0 48px 28px 0; }
.faq__body p {
  margin: -6px 0 0;
  max-width: 62ch;
  color: var(--faq-copy);
  font-size: 1.06rem;
  line-height: 1.6;
}
.faq__body p + p { margin-top: 12px; }
.faq__body a {
  color: var(--faq-accent);
  font-weight: 650;
  text-decoration: none;
}
.faq__body a:hover { text-decoration: underline; }

/* Apertura morbida dove il browser sa animare l'altezza di <details>
   (Chrome 131+, Safari 18.4+): altrove si apre di colpo, come sempre. */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, content-visibility 0.34s allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Chiusura facoltativa sotto la lista: una riga con il contatto. */
.faq__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 28px;
  color: var(--faq-copy);
  font-size: 1rem;
  line-height: 1.5;
}
.faq__foot b { color: var(--faq-ink); font-weight: 720; }
.faq__foot a {
  color: var(--faq-accent);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.faq__foot a:hover { text-decoration: underline; }

/* Più gruppi nella stessa pagina (/faq/): titolo di gruppo più piccolo,
   con l'eventuale occhiello numerato sopra. */
.faq__group + .faq__group { margin-top: clamp(56px, 7vw, 96px); }
.faq__group > .faq__eyebrow + .faq__group-title { margin-top: 0.45em; }
.faq__group-title {
  margin: 0 0 18px;
  color: var(--faq-ink);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::before,
  .faq__item summary::after,
  .faq__item::details-content { transition: none; }
}

@media (max-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .faq { --faq-pad: clamp(72px, 14vw, 96px); }
  .faq__wrap { width: min(100% - 32px, var(--max-width, 1200px)); }
  .faq__item summary { padding: 20px 40px 20px 0; font-size: 1.08rem; }
  .faq__item summary::before,
  .faq__item summary::after { right: 2px; width: 14px; }
  .faq__body { padding: 0 8px 22px 0; }
  .faq__body p { font-size: 1rem; }
}