/* ==========================================================================
   strumenti — sezione «TUTTO QUELLO CHE C'E' DENTRO» — vedi doc/copy.md

   Accordion nativo: <details name="strumenti">. Nessun JavaScript, nessun
   componente Bootstrap. Scritto mobile-first: la base e' il telefono, le
   media query aggiungono (non tolgono) man mano che c'e' spazio.
   La regola prefers-reduced-motion e il focus-visible stanno in edil.css.
   ========================================================================== */

.strumenti {
  background: var(--bianco);
  padding: 64px 0 72px;
}

/* --------------------------------------------------------------------------
   Testata centrata
   -------------------------------------------------------------------------- */
.strumenti-testata {
  text-align: center;
  margin-bottom: 40px;
}

.strumenti-occhiello {
  font-size: 12.5px;
  letter-spacing: .16em;
  margin-bottom: 14px;
}

/* Ganky, come nella hero (decisione del committente del 4 settembre 2026):
   peso 400 perche' e' l'unico che esiste, niente grassetto sintetico. */
.strumenti-titolo {
  font-family: var(--f-display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(29px, 6.4vw, 47px);
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--testo-forte);
  margin: 0 0 18px;
}

.strumenti-titolo-accento { color: var(--blu); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .strumenti-titolo-accento {
    background-image: linear-gradient(135deg, var(--blu), var(--azzurro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.strumenti-sottotitolo {
  font-family: var(--f-testo);
  font-size: 17.5px;   /* misura della copy, valida a tutte le larghezze */
  line-height: 1.68;
  color: var(--testo);
  max-width: 60ch;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Accordion: filetto sopra la prima riga, sotto ognuna (quindi anche fra
   una riga e l'altra e sotto l'ultima).

   I filetti di APERTURA e CHIUSURA stanno sul contenitore, non sulle righe.
   La riga aperta spegne il proprio filetto inferiore (vedi .riga[open]): se la
   chiusura in basso dipendesse dall'ultima riga, aprendo la QUINTA il blocco
   resterebbe senza fondo. Sul contenitore il filetto c'e' sempre, e resta
   largo quanto le righe chiuse invece di allargarsi coi -18 px della riga
   aperta.
   -------------------------------------------------------------------------- */
.strumenti-accordion {
  border-top: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
}

.strumenti .riga { border-bottom: 1px solid var(--filetto); }

/* Il filetto di chiusura lo mette il contenitore: qui sarebbe raddoppiato. */
.strumenti .riga:last-child { border-bottom: 0; }

/* Sotto i 680 px la pill scende SOTTO il titolo invece di affiancarlo: a 360 px
   «6 strumenti» si prende 99 px fissi e al titolo — che e' l'elemento
   principale della testata — ne restavano 111, con tutti e cinque i titoli
   spezzati su due righe. La riga 2 e' libera perche' li' la descrizione e'
   nascosta. Ordine di lettura: titolo -> conteggio -> chevron. */
.strumenti .riga-testata {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
}

.strumenti .riga-testata::-webkit-details-marker { display: none; }

/* RIGA APERTA — un blocco solo.
   Prima la sfumatura stava sul solo <summary>: la testata risultava tinta e le
   card sotto restavano su bianco, cosi' la riga aperta si spezzava in due e il
   fondo sembrava tagliato a meta'. Ora la tinta sta sul <details>, quindi
   avvolge testata E pannello; il filetto azzurro a sinistra dice dove comincia
   e dove finisce la riga attiva senza aggiungere un secondo accento colorato. */
.strumenti .riga[open] {
  background:
    linear-gradient(to bottom right,
      rgba(46, 155, 230, .085) 0%,
      rgba(46, 155, 230, .030) 46%,
      rgba(46, 155, 230, .012) 100%);
  border-radius: var(--r-medio);
  /* Filetto azzurro sul lato da cui comincia la lettura. box-shadow non ha
     equivalente logica: in arabo lo si ribalta col 3px negativo, in fondo
     al file. */
  box-shadow: inset 3px 0 0 0 var(--azzurro);
  /* Il fondo deborda oltre il contenuto, cosi' non "stringe" testata e card.
     VINCOLO: i 18 px devono restare MINORI del padding-inline di
     .edil-contenuto (20 px, in edil.css). Il margine negativo mangia quel
     padding: portandolo a 20 px o piu' la riga aperta sfonderebbe il bordo
     della finestra e la pagina scorrerebbe in orizzontale. */
  padding-inline: 18px;
  margin-inline: -18px;
  /* Il filetto divisorio sotto una riga aperta e' di troppo: il blocco tinto
     gia' separa. Restano quelli fra le righe chiuse. La chiusura in basso
     dell'accordion non dipende da qui: la mette .strumenti-accordion. */
  border-bottom-color: transparent;
}

/* Riquadro icona: il colore dell'icona arriva da qui via currentColor. */
.strumenti .riga-icona {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-piccolo);
  background: rgba(46, 155, 230, .10);
  color: var(--blu);
  /* Niente transition su background: lo stato aperto sostituisce un
     background-color con un linear-gradient, e un gradiente non e'
     interpolabile contro un colore — la transizione dichiarata non partirebbe
     mai. La color, che invece funziona, basta a rendere morbido il passaggio. */
  transition: color .2s ease;
}

.strumenti .riga-icona svg { width: 27px; height: 27px; }

/* Unico dettaglio azzurro dell'icona a riga chiusa. */
.strumenti .riga-icona .acc { stroke: var(--azzurro); }

.strumenti .riga[open] .riga-icona {
  background: linear-gradient(135deg, var(--blu), var(--azzurro));
  color: var(--bianco);
}

/* A riga aperta l'icona e' tutta bianca, accento compreso: l'azzurro passa
   al chevron, cosi' resta un solo accento per elemento. */
.strumenti .riga[open] .riga-icona .acc { stroke: var(--bianco); }

.strumenti .riga-titolo {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(18px, 4.4vw, 22px);
  line-height: 1.25;
  color: var(--testo-forte);
  margin: 0;
  transition: color .2s ease;
}

.strumenti .riga[open] .riga-titolo { color: var(--blu); }

/* Sotto i 680 px sparisce per non affollare la testata.

   COLORE: la copy prescrive #6B7A8B, che su bianco sta a 4,39:1 — gia' sotto
   il 4,5:1 di WCAG AA. Sul fondo tinto della riga aperta scendeva a 4,10:1
   (4,03 nel punto peggiore): la tinta, voluta dal committente, peggiorava una
   deroga che era gia' aperta. Portato a #5E6E80, che sta a 4,8:1 ANCHE sul
   fondo tinto ed e' otticamente indistinguibile dal grigio prescritto.
   Titolo (6,39:1), pill (6,06:1) e testi delle card (7,08:1) erano gia' a posto. */
.strumenti .riga-descrizione {
  grid-column: 2;
  grid-row: 2;
  display: none;
  font-family: var(--f-testo);
  font-size: 14.5px;
  line-height: 1.5;
  color: #5E6E80;
}

.strumenti .riga-pill {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--blu);
  background: rgba(46, 155, 230, .10);
  border-radius: 999px;
  padding: 7px 13px;
}

.strumenti .riga-chevron {
  grid-column: 3;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  color: var(--testo-chevron);
  transition: transform .2s ease, color .2s ease;
}

.strumenti .riga-chevron svg { width: 22px; height: 22px; }

.strumenti .riga[open] .riga-chevron {
  transform: rotate(180deg);
  color: var(--azzurro);
}

/* --------------------------------------------------------------------------
   Pannello e card
   -------------------------------------------------------------------------- */
.strumenti .riga-pannello { padding: 0 0 34px; }

.strumenti .riga-card {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Le card sono BIANCHE, non piu' color tinta: ora il fondo tinto ce l'ha la
   riga aperta, e una card tinta su fondo tinto sparirebbe. Invertito il
   rapporto, le card si staccano dal fondo invece di confondersi. */
.strumenti .mini {
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: var(--r-piccolo);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(16, 36, 59, .04);
}

/* Nella card l'icona E' l'elemento azzurro: titolo e testo restano neutri. */
.strumenti .mini-icona {
  display: block;
  line-height: 0;
  color: var(--azzurro);
  margin-bottom: 12px;
}

.strumenti .mini-icona svg { width: 20px; height: 20px; }

.strumenti .mini-titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--testo-forte);
  margin: 0 0 6px;
}

.strumenti .mini-testo {
  font-family: var(--f-testo);
  font-size: 14px;
  line-height: 1.55;
  color: var(--testo);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Da 680 px: torna la descrizione di riga, la pill torna accanto al titolo,
   il pannello rientra di 82 px (58 di colonna icona + 24 di gap, allineato al
   testo e non all'icona) e le card vanno a due colonne.
   -------------------------------------------------------------------------- */
@media (min-width: 680px) {
  /* C'e' spazio: la pill torna accanto al titolo e la griglia e' quella della
     copy — [icona 58] [titolo + descrizione] [pill] [chevron]. */
  .strumenti .riga-testata {
    grid-template-columns: 58px minmax(0, 1fr) auto auto;
    column-gap: 24px;
    row-gap: 6px;
  }

  .strumenti .riga-descrizione { display: block; }

  .strumenti .riga-pill {
    grid-column: 3;
    grid-row: 1 / -1;
    justify-self: end;
  }

  .strumenti .riga-chevron { grid-column: 4; }

  /* Il rientro allinea il pannello alla colonna del TESTO, non all'icona:
     e' legato all'ordine di lettura, quindi logico. */
  .strumenti .riga-pannello {
    padding: 0 0 34px;
    padding-inline-start: 82px;
  }

  .strumenti .riga-card { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .strumenti { padding: 96px 0 104px; }
  .strumenti-testata { margin-bottom: 56px; }
}

@media (min-width: 1000px) {
  .strumenti .riga-card { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Arabo — l'unica cosa che il dir="rtl" non ribalta da solo.
   La griglia della testata (icona, titolo, pill, chevron) si specchia gia' da
   sola: le colonne di grid seguono la direzione. Anche justify-self: start/end
   della pill e' gia' logico.
   Resta il filetto di riga aperta, che e' un'ombra interna: si sposta sull'altro
   lato invertendo il segno dell'offset orizzontale.

   Il chevron NON si tocca: la rotate(180deg) di riga aperta lo gira dal basso
   verso l'alto, e su un asse verticale la direzione della scrittura non c'entra.
   -------------------------------------------------------------------------- */
[dir="rtl"] .strumenti .riga[open] {
  box-shadow: inset -3px 0 0 0 var(--azzurro);
}