/* Sezione 05 — «Cosa offriamo»: titolo grande a sinistra, sei voci icona+testo
   in due righe da tre. Valori calcolati a 1440px (la sezione e' 1440x663.453):
   docs/research/components/sec5-servizi.spec.md. */

.servizi{
  margin:110px 0;
  /* 4.1% di 1440px = 59.0391px di respiro laterale */
  padding-left:4.1%;
  padding-right:4.1%;
}

.servizi__griglia{display:flex}

/* --------------------------------------------------------------- titolo */
/* colonna larga 462.672px (35% del contenitore), centrata in verticale */
.servizi__titolo{
  flex:0 0 35%;
  align-self:center;
  max-width:527px;
  margin:10px 0 0;
  font-family:var(--display);
  font-size:110px;
  font-weight:400;
  line-height:121px;
  letter-spacing:-3.3px;
  /* rosa cipria: e' il colore dei titoli di questo livello sul tema */
  color:#ccc1bd;
  word-wrap:break-word;
}

/* ---------------------------------------------------------- sei voci */
/* la colonna delle voci e' larga 855.07px (64.684%) e rientra di 59.8516px
   (-7%) sotto il titolo; le due righe distano 70px */
.servizi__elenco{
  flex:0 0 64.684%;
  margin-left:-59.8516px;
  display:grid;
  /* tre colonne: 418.984px + 228.18px + 205.211px a 1440px.
     La prima e' larga il doppio perche' porta dentro il rientro che stacca
     le voci dal titolo; il testo resta 205.312 / 205.367 / 205.211px. */
  grid-template-columns:49% 26.686% 24%;
  row-gap:70px;
}

/* rientri di colonna: 45% e 6% sulla prima, 10% sulla seconda */
.servizi__voce:nth-child(3n+1){
  padding-left:45%;
  padding-right:6%;
}
.servizi__voce:nth-child(3n+2){padding-right:10%}

/* scarti verticali voce per voce, come sul sito vivo:
   18px sulla 1a, 4a e 5a; 13px sulla 2a e 3a; 13+10px sulla 6a */
.servizi__voce:nth-child(1),
.servizi__voce:nth-child(4),
.servizi__voce:nth-child(5){padding-top:18px}
.servizi__voce:nth-child(2),
.servizi__voce:nth-child(3){padding-top:13px}
.servizi__voce:nth-child(6){padding-top:23px}

/* Il contenitore dell'icona: sull'originale c'e' ma e' vuoto (inline-block
   senza glifo), e resta alto quanto l'interlinea del corpo. Quella riga da
   29.92px e' cio' che regge le altezze delle voci: senza, la sezione si
   accorcia. Percio' il contenitore resta, vuoto, come nell'originale. */
.servizi__icona{
  display:block;
  width:24px;
  height:29.92px;
}

.servizi__voce-titolo{
  margin:31px 0 0;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:37.8px;
  letter-spacing:0;
  color:var(--nero);
}

.servizi__voce-testo{
  margin:14px 0 0;
  font-family:var(--corpo);
  font-size:16px;
  font-weight:300;
  line-height:29.92px;
  color:var(--testo);
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1024px){
  /* il titolo passa sopra le voci, che scendono a due colonne */
  .servizi{
    margin:75px 0 120px;
    padding-left:55px;
    padding-right:55px;
  }
  .servizi__griglia{display:block}
  .servizi__elenco{
    margin-left:0;
    padding-top:30px;
    grid-template-columns:repeat(2,1fr);
    column-gap:5%;
    row-gap:35px;
  }
  .servizi__elenco .servizi__voce{
    padding:0 5% 0 0;
  }
}

@media (max-width:768px){
  /* una sola colonna: come sull'originale il testo resta stretto a sinistra */
  .servizi{
    margin:0 0 100px;
    padding-left:30px;
    padding-right:0;
  }
  .servizi__titolo{
    font-size:65px;
    line-height:71.5px;
    letter-spacing:-1.95px;
  }
  .servizi__elenco{
    padding-top:40px;
    grid-template-columns:1fr;
    row-gap:0;
  }
  .servizi__elenco .servizi__voce{
    padding:0 35% 0 0;
  }
  .servizi__elenco .servizi__voce + .servizi__voce{
    padding-top:10%;
  }
}