/*   SERVIZI  */

.servizi-hero-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  text-align: center;
}



/* SERVIZI: 4 COLONNE */

/* Colonna singola */
.lananai-servizi-4col .wp-block-column{
  position: relative !important;
  border-left: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 0 !important;
  container-type: inline-size;
}

/* Contenitore icona: box fisso e centrato */
.lananai-servizi-4col .wp-block-image{
  margin: 0 auto 1.35rem !important;
  width: 100% !important;
  height: 100px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}

/* Icone: stessa altezza */
.lananai-servizi-4col .wp-block-image img{
  height: 65px !important; /*prima era 82px*/
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* TITOLI centrati, possono andare a capo ma riservano sempre lo stesso spazio
   -> così la lista/pallini partono tutti alla stessa altezza */

.lananai-servizi-4col :is(.wp-block-heading, h3){
  text-align: center !important;
  margin: 0 0 0.6rem !important;
  line-height: 1.15 !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;  
  min-height: calc(2 * 1.15em); /* riserva spazio per 2 righe (con alcuni schermi e con la traduzione il titolo non riesce a stare su una riga) */
  /*font-size: 30px;*/
}

/* DESKTOP: niente spazio extra sotto i titoli */
@media (min-width: 1025px){
  .lananai-servizi-4col :is(.wp-block-heading, h3){
    min-height: 0 !important;
  }
}



/* LISTA */
.lananai-servizi-4col ul,
.lananai-servizi-4col ol{
  list-style: none !important;

  /* Box coerente per tutte le colonne (così i pallini si allineano visivamente) */
  display: block !important;
  width: 100%;
  max-width: 250px;     /* unico valore scalabile da ritoccare se cambia il design */
  margin: 0 auto !important;

  text-align: left !important;
  padding: 0 !important;
}


.lananai-servizi-4col li{
  display: flex;
  align-items: flex-start;
  gap: 0.70rem;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.6;
}

.lananai-servizi-4col li::before{
  content: "";
  flex: 0 0 0.38rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background-color: #dcc8a5;
  margin-top: 0.62em;
}


/* SERVIZI, VERSIONE MOBILE */

@media (max-width: 767px) {

  .lananai-servizi-4col .wp-block-columns {
    gap: 1.5rem;
  }

 @media (max-width: 767px) {
  .lananai-servizi-4col .wp-block-image img {
    height: 80px !important;
  }
}


  /* Lista un filo più stretta */
  .lananai-servizi-4col ul,
  .lananai-servizi-4col ol {
    max-width: 200px;
  }


  /* Su mobile non serve riservare 2 righe */
  .lananai-servizi-4col :is(.wp-block-heading, h2, h3){
    min-height: 0;
  }
}


/* FILOSOFIA */

.filosofia-list{
  max-width: 960px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
}

.filosofia-list > p{
  margin-bottom: 0.8rem !important;
}

.filosofia-list > .wp-block-columns{
  margin-top: 0 !important;
}

.filosofia-list .wp-block-columns{
  gap: 3rem;
  align-items: flex-start;
}

.filosofia-list .wp-block-column{
  padding: 0;
}

.filosofia-list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Singoli punti elenco */
.filosofia-list li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.35rem;
  line-height: 1.7;
  color: #3c3a34;
}

/* Pallino custom */
.filosofia-list li::before{
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.85em;
  transform: translateY(-50%);
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background-color: #dcc8a5;
}

.filosofia-list li strong{
  font-weight: 600;
}

.filosofia-list.wp-block-group{
  margin-top: 20px !important;
  margin-block-start: 20px !important;
}

@media (max-width: 767px){
  body{
    --wp--style--block-gap: 0px;
  }
}




/* FILOSOFIA MOBILE --> devo fare in modo che le due colonne diventino una sola */
@media (max-width: 767px){

  .filosofia-list .wp-block-columns{
    gap: 0 !important;              /* <- niente spazio tra colonna 1 e 2 */
  }

  .filosofia-list .wp-block-column{
    flex-basis: 100% !important;
  }

  /* Se la seconda UL si porta dietro margini li azzero */
  .filosofia-list .wp-block-column + .wp-block-column ul{
    margin-top: 0 !important;
  }
}


/* correzione focus per sfondi camere-servizi-filosofia su mobile */
@media (max-width: 768px){
  .hero-photo-block{
    background-position: 5% center !important; /* metà altezza + tutto a sx */
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}