/* ========== STORIA (nuovo layout) ========== */
.story{
  background:#fff;
  padding:4rem 0;
  text-align:center;          /* testo centrato di default */
  position:relative;
    margin-bottom:0 !important;
  padding-bottom:0 !important;
}
.story h2{
  font-family: 'Gloria Hallelujah', 'Caveat', cursive, var(--font-body);
  font-size: 2.3rem;
  margin-bottom: 2rem;
  color: #395934;
}

/* griglia → ora flex  (testo a sx, immagine a dx) */
.story-grid{
  display:flex;
  flex-wrap:wrap;
  gap:3rem;
  align-items:center;
  justify-content:center;
}

/* Griglia flex: testo più stretto, immagine più ampia */
.story-text{
  flex: 1 1 38%;      /* ↓ da 45% a 38% */
  max-width: 480px;   /* box più snello */
}

.story-illustration{
  flex: 1 1 55%;      /* ↑ immagine più grande */
  max-width: 500px;
}
.ulivo-img{
  width: 100%;
  height: auto;
}

/* Mobile portrait ≤ 600 px (illustrazione sotto al testo) */
@media (max-width: 600px){
  .story-text{order:1;}
  .story-illustration{
    order:2;
    width: 85%;
    max-width: 360px; /* un po’ più grande anche su mobile */
  }
}

/* bottone storia (invariato) */
.btn-story{
  display:inline-block;
  margin-top:1rem;
  padding:.6rem 1.8rem;
  background:#395934;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  border-radius:999px;
  transition:background .25s;
}
.btn-story:hover{background:#2d4528;}

/* separatore ondulato top  (invariato) */
.wave-top{
  position:absolute;
  top:-90px;
  left:0;
  width:100%;
  height:90px;
  line-height:0;
  pointer-events:none;
  --wave-color:#c5c412;
  transform:scaleY(-1);
  transform-origin:center;
}
.wave-top path{
  fill:var(--wave-color);
  animation:wave-h 8s linear infinite;
}
@keyframes wave-h{
  from{transform:translateX(0);}
  to  {transform:translateX(0);}
}


/* ========== RESPONSIVE STORIA =================================== */

/* ---------- Smartphone portrait  ≤ 600 px  ---------------------- */
@media (max-width: 600px) and (orientation: portrait){
  .story-grid{
    flex-direction: column;        /* impila testo + immagine */
    gap: 2rem;
  }
  .story-text{
    order: 1;
    max-width: 90%;
    text-align: center;
  }
  .story-illustration{
    order: 2;
    width: 85%;
    max-width: 360px;
  }
}

/* ---------- Smartphone landscape  ≤ 600 px  --------------------- */
@media (max-width: 600px) and (orientation: landscape){
  .story-grid{
    flex-direction: row;           /* affianca ma con proporzioni più equilibrate */
    gap: 2rem;
    justify-content: center;
  }
  .story-text{
    flex: 1 1 45%;
    max-width: 420px;
    text-align: left;
  }
  .story-illustration{
    flex: 1 1 45%;
    max-width: 420px;
  }
}

/* ---------- Tablet portrait 601–900 px --------------------------- */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait){
  .story-grid{
    flex-direction: column;        /* impila per verticalità */
    gap: 2.5rem;
  }
  .story-text{
    order: 1;
    max-width: 80%;
    text-align: center;
  }
  .story-illustration{
    order: 2;
    width: 80%;
    max-width: 480px;
  }
}

/* ---------- Tablet landscape 601–900 px -------------------------- */
@media (min-width: 601px) and (max-width: 900px) and (orientation: landscape){
  .story-grid{
    flex-direction: row;           /* affiancato */
    gap: 3rem;
    justify-content: center;
  }
  .story-text{
    flex: 1 1 42%;
    max-width: 500px;
    text-align: left;
  }
  .story-illustration{
    flex: 1 1 50%;
    max-width: 500px;
  }
}

/* ---------- Desktop  > 900 px  (già gestito) -------------------- */
/* Restano valide le regole di base: testo 38%, immagine 55% */