/* Carpi Suite — hero delle pagine interne (appartamenti, Scopri Carpi, Contatti)
   Foto a tutta larghezza, titolo e sottotitolo. Stessa struttura ovunque:
   <section class="hero"><img class="hero-img"><div class="container hero-content"><h1><p class="sub"> */

.hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(560px,88svh,840px);color:var(--cream);background:#2a1a1e;
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(10,5,5,.72) 0%,rgba(10,5,5,.26) 48%,rgba(10,5,5,.10) 100%),
    linear-gradient(to right,rgba(10,5,5,.30) 0%,transparent 60%);
}
.hero-content{position:relative;z-index:2;width:100%;padding-top:140px;padding-bottom:clamp(86px,11vw,116px)}
.hero h1{
  color:var(--cream);font-size:clamp(3.2rem,9.5vw,6.4rem);line-height:1;
  margin-bottom:20px;
}
.hero h1 em{color:var(--pink)}
.hero .sub{font-size:clamp(1.05rem,2.4vw,1.25rem);max-width:42ch;opacity:.94;text-shadow:0 1px 16px rgba(0,0,0,.3)}

/* mobile: il blocco titolo sta in basso, sulla parte scura della foto (più leggibile) */
@media(max-width:899px){
  .hero::after{
    background:
      linear-gradient(to top,rgba(10,5,5,.82) 0%,rgba(10,5,5,.5) 42%,rgba(10,5,5,.12) 100%),
      linear-gradient(to right,rgba(10,5,5,.25) 0%,transparent 60%);
  }
  .hero-content{padding-bottom:58px}
}