/* ! Raccordo blocchi <-> griglia del tema.
   Serve solo alle pagine costruite con i pattern.
   style.css non va toccato: qui si corregge solo cio' che i blocchi
   aggiungono di suo (margini delle figure, layout del query loop). */

/* I temi senza theme.json (come questo) fanno avvolgere da WordPress
   il contenuto di ogni gruppo in .wp-block-group__inner-container.
   Quel wrapper si infila fra .grid e le colonne e spezza il flex:
   display:contents lo rende trasparente al layout senza toglierlo dal DOM. */
.hero .wp-block-group__inner-container,
.sezione1 .wp-block-group__inner-container,
.sezione2 .wp-block-group__inner-container,
.sezione3 .wp-block-group__inner-container{
  display: contents;
}

/* Nell'editor i blocchi di primo livello vengono stretti alla larghezza del canvas.
   Le sezioni 1-2-3 se ne liberano da sole perche' hanno gia' max-width:100% !important
   nel foglio del tema; .hero quella dichiarazione non ce l'ha, quindi gliela diamo qui.
   Sul sito non cambia niente: l'hero era gia' a tutta larghezza. */
.hero{
  max-width: 100% !important;
  width: 100%;
}

/* --- Hero --- */
.hero .wp-block-image.hero__photo{
  width: 54%;
  margin: 40px 0 40px 32%;
}
.hero .wp-block-image.hero__photo img{
  width: 100%;
  display: block;
}
.hero .hero__text > .wp-block-heading,
.hero .hero__text > p{
  max-width: none;
}
@media (max-width: 900px){
  .hero .wp-block-image.hero__photo{width: 58%;margin: 34px 0 34px 34%;}
}
@media (max-width: 560px){
  .hero .wp-block-image.hero__photo{width: 66%;margin: 18px 0 28px 30%;}
}

/* --- Chi sono --- */
.sezione1 .bgimage .wp-block-image{
  margin: 0;
}
.sezione1 .chisono > *:last-child{
  margin-bottom: 0;
}

/* --- Card servizi --- */
.sezione2 .wp-block-image{
  margin: 0;
}
/* Le tre foto arrivano con proporzioni diverse (3:4 le prime due, piu' stretta
   e alta la terza). Il rapporto va imposto alla figure, non alla img: su una
   immagine con height:auto il browser continua a usare il rapporto del file.
   La figure detta la forma, l'immagine la riempie e object-fit:cover taglia
   il di piu' invece di schiacciarla. */
.sezione2 .tit-card .wp-block-image{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.sezione2 .tit-card .wp-block-image a{
  display: block;
  width: 100%;
  height: 100%;
}
.sezione2 .tit-card .wp-block-image img,
.sezione2 .tit-card .wp-block-image.is-resized img{
  position: absolute;
  inset: 0;
  display: block;
  /* !important perche' WordPress marca da sola alcune figure con .is-resized
     e per quelle il foglio del core rimette width/height su auto. */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* --- Ultimi articoli: il query loop al posto della vecchia WP_Query --- */
.sezione3 .wp-block-post-template{
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
  gap: 0;
  list-style: none;
}
.sezione3 .wp-block-post{
  background-color: #ffcc99;
  margin: 10px;
  border-radius: 7px;
  padding: 0 15px 15px 15px;
  overflow: hidden;
}
.sezione3 .wp-block-post .wp-block-post-title{
  font-size: 0.8rem;
  padding-top: 15px;
  margin-bottom: 1rem;
}
.sezione3 .wp-block-post .wp-block-post-title a{
  color: #bb2649;
}
.sezione3 .wp-block-post-featured-image{
  margin: 0 -15px 1rem -15px;
}
.sezione3 .wp-block-post-featured-image img{
  width: 100%;
  display: block;
}
.sezione3 .wp-block-post-excerpt{
  margin-bottom: 0;
}
@media (max-width: 768px){
  .sezione3 .wp-block-post-template{
    grid-template-columns: 1fr;
  }
}

/* --- Solo editor: cornice e banda dietro la foto ---
   Gutenberg avvolge ogni blocco in .block-editor-block-list__block, che ha
   position:relative. Gli span decorativi dell'hero sono position:absolute e
   finirebbero ancorati a quel wrapper (alto quasi zero) invece che a
   .hero__visual: il frame si riduce alla sola riga in alto e la banda sparisce.
   Rimettendo il wrapper a position:static i due riquadri tornano a misurarsi
   su .hero__visual, come gia' fanno sul sito.
   La classe .block-editor-block-list__block sul sito non esiste,
   quindi queste righe li' non hanno alcun effetto. */
.hero__visual .block-editor-block-list__block,
.hero__visual [data-type="core/html"],
.hero__text .block-editor-block-list__block{
  position: static;
}
.hero__visual{
  position: relative;
}

/* La foto davanti a tutto.
   Nel tema .hero__photo sta a z-index 3, sotto il claim (4). Alzandola a 6
   resta davanti sia alla cornice sia alla banda in ogni contesto, editor
   compreso. Sul sito non si vede differenza: claim e foto non si sovrappongono. */
.hero .wp-block-image.hero__photo{
  position: relative;
  z-index: 6;
}