.block-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--accent-purple);
  margin-bottom: 0px;
}
 
.block-text {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 120%;
  color: var(--slate-blue);
  max-width: 60ch;
  font-weight: 350;
}
 
.block-text strong {
  font-weight: bold;
}


 
/* =========================================================
   1) solo testo, nessuna immagine.
   Etichetta + testo (bold in apertura, poi regular), su
   sfondo colorato.
   ========================================================= */
 
.block--statement {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra in verticale */
  align-items: center; /* centra in orizzontale */
  text-align: left;
  /* colore di sfondo di base (usato anche come fallback dietro la foto) */
  background-color: var(--statement-bg, var(--cream));
  max-width: var(--content-max-width);
  margin-inline: auto;
  aspect-ratio: 54 / 25;
  overflow: hidden;
  padding-left: 60px;
  padding-right: 60px;
}
 
.block--statement__inner {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
 
.block--statement .block-label {
  color: var(--statement-label-color, var(--accent-purple));
}
 
.block--statement .block-text {
  max-width: 1600px;
  font-size: 60px;
  font-weight: 400;
  color: var(--statement-text-color, var(--slate-blue));
}
 


/* =========================================================
   2) foto a piena larghezza (stesso con un link + un credito
   in basso a sinistra, sovrapposti direttamente alla foto.
   ========================================================= */
 
.block--photo-caption {
  position: relative;
  max-width: var(--content-max-width);
  aspect-ratio: 54 / 25; /* stesso box delle altre sezioni */
  background: var(--black);
  overflow: hidden;
}
 
.block--photo-caption img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 
.block--photo-caption__text {
  position: absolute;
  left: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 150%;
  color: var(--white);
  font-weight: 350;
}
 
.block--photo-caption__text a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
 
.block--photo-caption__text a:hover {
  opacity: 0.8;
}


/* =========================================================
   3) blocco didascalia sotto singola foto
   ========================================================= */
.block-caption {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 40px 40px 40px 40px; /* sopra, sotto e ai lati */
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(5, 1fr);

}


.block-caption .block-text,
.block-caption ol {
  max-width: 68ch;
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 135%;
  font-weight: 350;
  grid-column: 2 / 5;
}


.block-caption ol {
  margin-top: 2px;
  padding-left: 0px;
}

.block-caption strong {
  font-weight: 600;
}



/* =========================================================
   4) due foto affiancate con relativa didascalia sotto
   ========================================================= */
.block-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0; /* le due foto si toccano */
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.block-duo__media {
  aspect-ratio: var(--duo-ratio, 6 / 5);
  overflow: hidden;
  background: var(--duo-bg, var(--black));
}

.block-duo__media img,
.block-duo__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.block-duo__caption {
  max-width: 68ch;
  padding: 40px; /* sopra, sotto e ai lati */
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 135%;
  font-weight: 350;
}


 
/* =========================================================
   MOBILE — tutti i blocchi diventano una colonna singola
   ========================================================= */
 
@media (max-width: 860px) {
  .block--statement {
    aspect-ratio: auto;
    padding: 60px var(--side-padding);
  }
 
  .block--statement .block-text {
    font-size:22px;
  }

  .block-caption {
    display: block; /* disattiva la griglia desktop su mobile */
    padding: 24px var(--side-padding);
  }

  .block-caption .block-text {
    grid-column: 1 / -1; /* occupa tutta la larghezza disponibile */
    max-width: 100%;
    margin: 0;
    font-size: 16px;
  }

  .block--photo-caption {
  aspect-ratio: 5/3;
}

.block--photo-caption__text{
  font-size: 15px;
  }

  .block-caption--aligned {
    grid-template-columns: 1fr;
    aspect-ratio: 5 / 3;
  }

  .block-caption--aligned > * {
    grid-column: 1 / -1;
  }

  .block-duo {
    grid-template-columns: 1fr;
  }

  .block-duo__media {
    aspect-ratio: 4 / 3; 
  }

  .block-duo__caption {
    padding: 24px var(--side-padding);
    font-size: 16px;
  }

}