/* ========== VALORI (layout immagine sx – testo dx) =============== */
/* Palette custom property */
:root{
  --clr-values:#ffffff;   /* lime pastello pieno */
}

/* Sezione Valori con bg colorato */
/* colore “carta” + gradiente in alto */
.value-single{
  --clr-values-bg:#ffffff;              /* puoi cambiare qui */
  background: var(--clr-values-bg);
  position:relative;
  padding:8rem 0 0rem;                 /* margini verticali */
}

/* ——— VALORI full-width con padding più compatto ——— */
.value-single.container{
  margin-top: 0;      /* o .5rem se vuoi un filino di spazio */
  margin-bottom: 0;   /* idem per il fondo */
  /* padding: 4 rem + 40 px gradiente (in alto) — 2 rem + 40 px (in basso) */
  padding: calc(0rem + 0px) 0
           calc(0rem + 0px);

  width:100%;
  max-width:none;
  margin-inline:0;
  background:#ffffff;
  position:relative;
  z-index:1;
}





/* se desideri più “aria” al contenuto */
.value-single .value-content{
  padding-inline: 1rem;   /* opzionale */
}
/* FLEX desktop/tablet */
.value-content{
  display:flex;
  gap:3rem;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;                 /* consente lo stacking su view strette */
}

/* immagine 9:16 leggermente più ampia */
.value-image{
  flex: 1 1 45%;
  max-width: 420px;
  aspect-ratio: 9/16;
  object-fit: cover;
  border-radius: 100rem;


}

/* textbox a destra */
.value-textbox{
  flex: 1 1 40%;
  max-width: 520px;
  text-align: left;
}

/* font “handwritten” per il titolo come nella storia */
.value-title{
  font-family: 'Gloria Hallelujah', 'Caveat', cursive, var(--font-body);
  font-size: 2.3rem;
  margin-bottom: 1.2rem;
  color: #395934;
  text-align: left;
}

/* extra spazio sotto l’ultimo paragrafo */
.value-textbox p:last-of-type{margin-bottom: 2.5rem;}

/* bottone */
.value-btn{
  display:inline-block;
  padding: .5rem 1.8rem;
  background:#395934;
  color:#fff;
  border-radius: 999px;
  text-decoration:none;
  font-weight:500;
  transition: background .25s;
}
.value-btn:hover{background:#2d4528;}

/* ---------- Breakpoint smartphone portrait ≤ 600 px -------------- */
@media (max-width: 600px){
  .value-content{flex-direction: column-reverse; gap: 2.5rem;}
  .value-image{
    width: 85%;
    max-width: 360px;
  }
  .value-textbox{text-align:center;}
  .value-btn{margin-inline:auto;}
  .value-title {
    text-align: center;
  }
}

/* tablet landscape */
@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape){
  .value-single.container{
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* desktop / large landscape */
@media (min-width: 901px){
  .value-single.container{
    margin-top: 0;
    margin-bottom: 0;
  }
}