/* ==================================================================
   PUSTORINO IMMOBILIARE — CSS specifico della HOME
   Hero con ricerca, sezione recensioni Google, zone servite.
   Le schede immobile stanno in immobili.css (le usa anche il catalogo).
   Caricato solo da index.php, dopo base.css.
   ================================================================== */

/* ==================================================================
   HERO
   Fotografia a tutto campo con velatura orizzontale: molto densa a
   sinistra, dove sta il testo, quasi trasparente a destra, dove
   l'immagine resta leggibile. Su schermo stretto la velatura ruota
   in verticale, perche' il testo occupa tutta la larghezza.
   ================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  background:var(--nero);
  overflow:hidden;
  padding:calc(var(--altezza-testata) + 66px) 0 46px;
}

.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  /* il soggetto della foto conviene stia a destra:
     a sinistra ci passa sopra il testo */
  object-position:65% 50%;
  animation:respiro 26s ease-out forwards;
}
@keyframes respiro{from{transform:scale(1.06)}to{transform:scale(1)}}

.hero-velo{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(10,10,11,.96) 0%,
      rgba(10,10,11,.90) 26%,
      rgba(10,10,11,.62) 50%,
      rgba(10,10,11,.22) 74%,
      rgba(10,10,11,.05) 100%),
    linear-gradient(180deg,
      rgba(10,10,11,.55) 0%,
      transparent 24%,
      transparent 58%,
      rgba(10,10,11,.72) 100%);
}
/* alone rosso appena percepibile, ripreso dal tetto del logo */
.hero-velo::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(70% 60% at 6% 82%, rgba(142,17,22,.30) 0%, transparent 62%);
}

.hero .contenitore{position:relative;z-index:2;width:100%}
.hero-testo{max-width:720px}

.hero h1{
  color:var(--bianco);
  font-size:clamp(2.4rem,5.6vw,4.5rem);
  font-variation-settings:'wdth' 108;
  font-weight:600;
  margin:22px 0 0;
  letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero h1 .accento{
  display:block;color:var(--rosso);
  font-variation-settings:'wdth' 118;font-weight:700;
}
.hero .sommario{
  color:rgba(255,255,255,.78);
  font-size:clamp(1rem,1.5vw,1.15rem);
  max-width:530px;margin-top:22px;
  text-shadow:0 1px 20px rgba(0,0,0,.5);
}

.ricerca{
  position:relative;z-index:2;margin-top:40px;
  background:rgba(12,12,14,.62);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--bordo-r);
  backdrop-filter:blur(20px);
  padding:8px;
}

.campi-ricerca{
  display:grid;grid-template-columns:1.5fr 1fr 1fr auto;
  gap:1px;background:rgba(255,255,255,.12);
  border-radius:var(--bordo-r);overflow:hidden;
}
/* ==================================================================
   ZONE SERVITE — segnale forte per la ricerca locale
   ================================================================== */

.zone{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:44px}
.zone h3{
  font-family:var(--dato);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosso);font-weight:500;margin-bottom:18px;
}
.elenco-zone{display:flex;flex-wrap:wrap;gap:8px}
.elenco-zone a{
  font-size:13.5px;color:rgba(255,255,255,.66);
  border:1px solid var(--linea-scura);border-radius:100px;
  padding:7px 14px;transition:all .2s ease;
}
.elenco-zone a:hover{color:var(--bianco);border-color:rgba(216,31,38,.55);background:rgba(216,31,38,.1)}



/* ==================================================================
   RECENSIONI GOOGLE
   Grafica ispirata alla scheda Google: stelle piene, iniziale del
   nome in un cerchio colorato, testo troncato, badge "Google" per
   dichiarare la fonte. Contenuto statico, aggiornato a mano: nessuna
   chiamata API, nessun costo ricorrente, nessun cookie di terzi.
   ================================================================== */

.riepilogo-recensioni{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:36px;
}
.punteggio-google{
  display:flex;align-items:center;gap:14px;
  background:var(--carbone);border:1px solid var(--linea-scura);
  border-radius:var(--bordo-r);padding:14px 22px;
}
.punteggio-google .numero{
  font-family:var(--display);font-variation-settings:'wdth' 116;
  font-weight:700;font-size:30px;color:var(--bianco);line-height:1;
}
.punteggio-google .dettaglio{display:flex;flex-direction:column;gap:4px}
.stelle{color:#F5B400;font-size:14px;letter-spacing:2px;line-height:1}
.punteggio-google .conteggio{
  font-family:var(--dato);font-size:12px;color:rgba(255,255,255,.56);
}
.badge-google{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--dato);font-size:11.5px;color:rgba(255,255,255,.6);
  letter-spacing:.04em;
}
.badge-google svg{width:18px;height:18px;flex:none}

.griglia-recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.recensione{
  background:var(--carbone);border:1px solid var(--linea-scura);
  border-radius:var(--bordo-r);padding:26px 26px 24px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .25s ease,transform .25s ease;
}
.recensione:hover{border-color:rgba(216,31,38,.4);transform:translateY(-3px)}

.recensione-intestazione{display:flex;align-items:center;gap:13px}
.avatar-recensore{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--bianco);
}
.recensione-autore{display:flex;flex-direction:column;gap:1px;min-width:0}
.recensione-autore strong{
  font-size:14.5px;font-weight:600;color:var(--bianco);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recensione-autore span{font-size:12px;color:rgba(255,255,255,.5)}

.recensione .stelle{font-size:15px}
.recensione-testo{
  font-size:14px;line-height:1.68;color:rgba(255,255,255,.78);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.recensione-fonte{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--linea-scura);
  display:flex;align-items:center;gap:7px;
  font-family:var(--dato);font-size:11px;color:rgba(255,255,255,.42);
}
.recensione-fonte svg{width:14px;height:14px;flex:none}

.azione-recensioni{margin-top:34px;text-align:center}



/* ==================================================================
   ADATTAMENTO DELLA HOME
   ------------------------------------------------------------------
   Queste regole DEVONO stare qui e non in base.css: base.css viene
   caricato prima, e una media query non aumenta la specificita'.
   Scritte in base.css verrebbero sopraffatte dalle regole a larghezza
   piena definite in questo file, e l'adattamento mobile non avrebbe
   alcun effetto.
   ================================================================== */

@media (max-width:900px){
  /* Su tablet la barra resta su UNA riga come da desktop.
     La disposizione a due colonne lasciava una casella vuota, perche'
     i campi sono tre e il pulsante occupava tutta la larghezza.
     Qui si stringono solo le spaziature per farli stare. */
  .campi-ricerca{grid-template-columns:1.4fr 1fr 1fr auto}
  .campo{padding:11px 13px}
  .campo select,.campo input{font-size:14px}
  .campo-coppia input{font-size:14px}
  .cerca{padding:14px 22px;font-size:14px}
  .cerca i{font-size:15px}

  .zone{grid-template-columns:1fr;gap:34px}
  .griglia-recensioni{grid-template-columns:repeat(2,1fr)}

  /* la velatura ruota: il testo occupa tutta la larghezza,
     quindi il contrasto va costruito dal basso verso l'alto */
  .hero-velo{
    background:
      linear-gradient(180deg,
        rgba(10,10,11,.82) 0%,
        rgba(10,10,11,.42) 26%,
        rgba(10,10,11,.72) 58%,
        rgba(10,10,11,.96) 100%);
  }
  .hero-media img{object-position:58% 46%}
}

@media (max-width:620px){
  /* Solo su schermo stretto i campi si impilano. Il pulsante torna a
     larghezza piena e prende un'altezza propria: in colonna non puo'
     piu' allungarsi per pareggiare la riga, e senza spaziatura
     verticale resterebbe alto quanto la sola scritta. */
  .campi-ricerca{grid-template-columns:1fr}
  .campo{padding:13px 16px}
  .cerca{padding:16px;font-size:15px;min-height:52px}
  .hero{min-height:auto;padding-top:calc(var(--altezza-testata) + 40px)}
  .griglia-recensioni{grid-template-columns:1fr}
}