/* ============================================================
   GLS · COSA INCLUDE E FAQ (variante Costruzione) · 1.0 · child theme 1.1.65
   Cosa include (fondo Mist): una struttura di quadrati che si alza dal basso,
   un livello per componente, accanto sei schede. FAQ (fondo bianco): domande a
   riquadri; la risposta si apre in una fascia Navy a tutta larghezza sotto la
   riga. Markup nella pagina (section[data-gls-inc], section[data-gls-faq]),
   comportamento in gls-include-faq.js. Senza script: schede ferme e FAQ a
   fisarmonica. Solo variabili del design system, Royal mai sul Navy, nessuna ombra.
   ============================================================ */

/* ---------- comune ---------- */
.gls-inc, .gls-faq { padding-block: 112px; }
.gls-inc { background: var(--gls-surface-raised); }
.gls-faq { background: var(--gls-surface-base); border-top: var(--gls-border-hairline); }
.gls-inc .gls-if-head, .gls-faq .gls-if-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: end; }
.gls-inc .gls-if-h, .gls-faq .gls-if-h { margin-top: 16px; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light);
  font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.015em; color: var(--gls-primary); text-wrap: balance; }
.gls-inc .gls-if-micro, .gls-faq .gls-if-micro { font-size: 10.5px; line-height: 1.2; font-weight: var(--gls-weight-semi); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gls-blue-600); font-variant-numeric: tabular-nums; }
.gls-inc .gls-if-d a, .gls-faq .gls-if-a a { color: var(--gls-royal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gls-inc .gls-if-d a:hover, .gls-faq .gls-if-a a:hover { color: var(--gls-primary); }
.gls-inc :focus-visible, .gls-faq :focus-visible { outline: 2px solid var(--gls-royal); outline-offset: 2px; }
@keyframes gls-if-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Cosa include: costruzione ---------- */
.gls-inc .gls-inc-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; margin-top: 56px; align-items: start; }
.gls-inc .gls-inc-vis { position: sticky; top: 112px; padding: 40px 32px 28px; background: var(--gls-surface-base); }
.gls-inc .gls-inc-stack { display: flex; flex-direction: column-reverse; gap: 7px; }
.gls-inc .gls-inc-l { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center;
  transition: opacity .7s var(--gls-ease), transform .9s var(--gls-ease-in); transition-delay: calc(var(--i) * 160ms); }
.gls-inc.is-armed .gls-inc-vis:not(.is-in) .gls-inc-l { opacity: 0; transform: translateY(-32px); }
.gls-inc .gls-inc-l b { font-size: 10px; font-weight: var(--gls-weight-semi); color: var(--gls-ink-muted); font-variant-numeric: tabular-nums; transition: color .4s var(--gls-ease); }
.gls-inc .gls-inc-sq { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.gls-inc .gls-inc-sq span { display: block; grid-column: var(--c); grid-row: var(--r); aspect-ratio: 1; background: var(--gls-primary);
  transition: background .5s var(--gls-ease), opacity .5s var(--gls-ease); transition-delay: calc(var(--j) * 22ms); }
.gls-inc .gls-inc-stack.has-on .gls-inc-l:not(.is-on) .gls-inc-sq span { opacity: .22; }
.gls-inc .gls-inc-l.is-on .gls-inc-sq span { background: var(--gls-royal); }
.gls-inc .gls-inc-l.is-on b { color: var(--gls-royal); }
.gls-inc .gls-inc-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: var(--gls-border-hairline); }
.gls-inc .gls-inc-cap span:last-child { color: var(--gls-ink-muted); }
.gls-inc .gls-inc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gls-inc .gls-inc-c { position: relative; padding: 28px 28px 30px; background: var(--gls-surface-base); }
.gls-inc .gls-inc-c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gls-royal); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--gls-ease-in); }
.gls-inc .gls-inc-c.is-on::before { transform: none; }
.gls-inc .gls-inc-ct { display: flex; align-items: center; gap: 14px; }
.gls-inc .gls-inc-g { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 34px; }
.gls-inc .gls-inc-g i { display: block; width: calc(var(--w) * 1%); height: 3px; background: var(--gls-blue-200); }
.gls-inc .gls-inc-g i.is-me { background: var(--gls-royal); }
.gls-inc .gls-inc-t { margin-top: 20px; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: 23px; line-height: 1.2; color: var(--gls-primary); text-wrap: balance; }
.gls-inc .gls-if-d { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--gls-ink-muted); }

/* ---------- FAQ: fisarmonica di base (senza script e sotto 769px) ---------- */
.gls-faq .gls-faq-list { margin-top: 56px; border-top: 1px solid var(--gls-primary); }
.gls-faq .gls-faq-it { border-bottom: var(--gls-border-hairline); }
.gls-faq .gls-faq-it summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 14px; justify-content: normal; gap: 12px; align-items: baseline;
  padding: 22px 0; list-style: none; cursor: pointer; font-size: inherit; font-weight: inherit; color: inherit; }
.gls-faq .gls-faq-it summary::-webkit-details-marker { display: none; }
.gls-faq .gls-faq-q { font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: 21px; line-height: 1.3; color: var(--gls-primary); }
.gls-faq .gls-faq-x { align-self: center; width: 12px; height: 12px; border: 1px solid var(--gls-royal); transition: background .35s var(--gls-ease), transform .5s var(--gls-ease-in); }
.gls-faq .gls-faq-it[open] .gls-faq-x { background: var(--gls-royal); transform: rotate(90deg); }
.gls-faq .gls-faq-a { padding: 0 0 24px 56px; }
.gls-faq .gls-faq-a p { padding: 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--gls-ink-body); }
.gls-faq .gls-faq-it[open] .gls-faq-a p { animation: gls-if-in .6s var(--gls-ease-in) both; }

/* ---------- FAQ: riquadri e fascia Navy (con script, da 769px) ---------- */
.gls-faq .gls-faq-grid { display: none; }
.gls-faq.is-grid .gls-faq-list { display: none; }
.gls-faq.is-grid .gls-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 56px; }
.gls-faq .gls-faq-card { position: relative; display: flex; flex-direction: column; min-height: 230px; margin: 0; padding: 28px 28px 24px; border: 0; border-radius: 0; box-shadow: none;
  text-align: left; background: var(--gls-surface-raised); color: var(--gls-primary); font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer;
  transition: background .45s var(--gls-ease), color .45s var(--gls-ease); }
.gls-faq .gls-faq-card:hover { background: var(--gls-blue-050); }
.gls-faq .gls-faq-card .gls-if-micro { transition: color .45s var(--gls-ease); }
.gls-faq .gls-faq-card .gls-faq-q { display: block; margin-top: 18px; font-size: 22px; transition: color .45s var(--gls-ease); }
.gls-faq .gls-faq-more { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; line-height: 1.2; font-weight: var(--gls-weight-medium); color: var(--gls-royal); }
.gls-faq .gls-faq-more i { flex: none; width: 12px; height: 12px; border: 1px solid currentColor; transition: background .35s var(--gls-ease), transform .5s var(--gls-ease-in); }
.gls-faq .gls-faq-card[aria-expanded="true"] { background: var(--gls-primary); }
.gls-faq .gls-faq-card[aria-expanded="true"] .gls-faq-q, .gls-faq .gls-faq-card[aria-expanded="true"] .gls-faq-more { color: var(--gls-ink-inverse); }
.gls-faq .gls-faq-card[aria-expanded="true"] .gls-if-micro { color: color-mix(in srgb, var(--gls-ink-inverse) 65%, transparent); }
.gls-faq .gls-faq-card[aria-expanded="true"] .gls-faq-more i { background: var(--gls-ink-inverse); transform: rotate(90deg); }
.gls-faq .gls-faq-card:focus-visible { outline-offset: -6px; }
.gls-faq .gls-faq-card[aria-expanded="true"]:focus-visible { outline-color: var(--gls-ink-inverse); }
.gls-faq .gls-faq-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; padding: 44px 48px 48px; margin-top: -8px;
  background: var(--gls-primary); color: var(--gls-ink-inverse); }
.gls-faq .gls-faq-panel[hidden] { display: none; }
.gls-faq .gls-faq-panel .gls-if-micro { color: color-mix(in srgb, var(--gls-ink-inverse) 60%, transparent); }
.gls-faq .gls-faq-pq { margin-top: 14px; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: 28px; line-height: 1.2; color: var(--gls-ink-inverse); text-wrap: balance; }
.gls-faq .gls-faq-pa { font-size: 17px; line-height: 1.7; color: color-mix(in srgb, var(--gls-ink-inverse) 88%, transparent); }
.gls-faq .gls-faq-pa a { color: var(--gls-ink-inverse); }
.gls-faq .gls-faq-pa a:hover { color: var(--gls-blue-200); }
.gls-faq .gls-faq-panel > * { animation: gls-if-in .7s var(--gls-ease-in) both; }
.gls-faq .gls-faq-panel > *:last-child { animation-delay: .12s; }

@media (max-width: 980px) {
  .gls-inc, .gls-faq { padding-block: 80px; }
  .gls-inc .gls-if-head, .gls-faq .gls-if-head, .gls-inc .gls-inc-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gls-inc .gls-inc-vis { position: static; padding: 28px 20px 20px; }
  .gls-inc .gls-inc-cards { grid-template-columns: minmax(0, 1fr); }
  .gls-faq.is-grid .gls-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gls-faq .gls-faq-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 28px 36px; }
}
@media (min-width: 681px) and (max-width: 980px) {
  .gls-inc .gls-inc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .gls-inc .gls-inc-c { padding: 24px 20px 26px; }
  .gls-faq .gls-faq-a { padding-left: 0; }
  .gls-faq .gls-faq-it summary { grid-template-columns: 32px minmax(0, 1fr) 14px; }
  .gls-faq .gls-faq-q { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gls-inc *, .gls-inc *::before, .gls-faq *, .gls-faq *::before { animation: none !important; transition: none !important; }
  .gls-inc.is-armed .gls-inc-vis:not(.is-in) .gls-inc-l { opacity: 1; transform: none; }
}