/* ==================================================================
   PUSTORINO IMMOBILIARE — CSS delle SCHEDE IMMOBILE
   Griglia e card degli annunci. Condiviso fra la home (immobili in
   evidenza) e la pagina catalogo immobili.php.
   Caricato dopo base.css sulle pagine che mostrano annunci.
   ================================================================== */

/* ==================================================================
   SCHEDE IMMOBILE
   ================================================================== */

.griglia-immobili{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}

/* Le regole responsive della griglia DEVONO stare in questo file, non
   in base.css: base.css viene caricato prima, e una media query non
   aumenta la specificita'. La regola a 3 colonne qui sopra, arrivando
   dopo nel foglio successivo, vincerebbe su qualsiasi breakpoint
   scritto in base.css, lasciando tre schede per riga anche sul
   telefono. */
@media (max-width:1100px){
  .griglia-immobili{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .griglia-immobili{grid-template-columns:1fr}
}

.scheda{
  background:var(--bianco);border:1px solid var(--linea);
  border-radius:var(--bordo-r);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.scheda:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(10,10,11,.13);border-color:#CFCFD5}

.scheda-foto{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(140deg,#26282D 0%,#3A3E45 48%,#191B1E 100%);
  display:flex;align-items:center;justify-content:center;
}
.scheda-foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.scheda:hover .scheda-foto img{transform:scale(1.04)}
.scheda-foto .attesa-foto{color:rgba(255,255,255,.28);font-size:34px}

.etichette{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:7px;align-items:flex-start}
.etichetta{
  font-family:var(--dato);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 11px;border-radius:2px;
  background:rgba(10,10,11,.74);color:var(--bianco);backdrop-filter:blur(6px);
}
.etichetta.vendita{background:var(--rosso)}
.etichetta.affitto{background:var(--bianco);color:var(--nero)}
.etichetta.esclusiva{margin-left:auto;border:1px solid rgba(255,255,255,.32)}

.riferimento{
  position:absolute;bottom:12px;right:14px;
  font-family:var(--dato);font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.68);
}

.scheda-corpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.scheda-luogo{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fumo);margin-bottom:9px}
.scheda-luogo i{color:var(--rosso);font-size:13px}
.scheda h3{font-size:18.5px;font-weight:600;line-height:1.28;font-variation-settings:'wdth' 105;margin-bottom:16px}
.scheda h3 a:hover{color:var(--rosso)}

.scheda-prezzo{
  font-family:var(--display);font-variation-settings:'wdth' 116;
  font-weight:700;font-size:25px;color:var(--nero);
  letter-spacing:-.02em;line-height:1;margin-top:auto;padding-bottom:16px;
}
.scheda-prezzo .periodo{font-family:var(--testo);font-size:13px;font-weight:500;color:var(--fumo);letter-spacing:0}
.scheda-prezzo.riservato{font-size:17px;color:var(--fumo);font-weight:600}

.dati-immobile{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid var(--linea);padding-top:15px}
.dato-immobile{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--chiaro);border-radius:2px;padding:6px 11px;
  font-family:var(--dato);font-size:12px;color:var(--grafite);
}
.dato-immobile i{font-size:13px;color:var(--rosso);line-height:1}
.dato-immobile.energia{background:none;border:1px solid var(--linea);padding:5px 10px}

/* --- icone delle schede: Font Awesome solide --- */
.dato-immobile i.fa-solid{
  font-size:13px;color:var(--rosso);line-height:1;
  width:15px;text-align:center;   /* larghezza uniforme: le voci restano allineate */
}

/* --- icona dei vani: e' un PNG, non un glifo del font ---
   Si usa una maschera, cosi' l'immagine prende esattamente il rosso
   del marchio come le altre icone, invece di restare del colore
   originale del file. Richiede un PNG con sfondo trasparente.
   Il blocco @supports garantisce un ripiego dignitoso (l'immagine
   cosi' com'e') sui browser che non gestiscono le maschere. */
.dato-immobile .icona-png{
  display:inline-block;
  width:15px;height:15px;
  background:url('../img/icons-floor-plan.png') center/contain no-repeat;
  flex:none;
}
@supports (mask-image: url('')) or (-webkit-mask-image: url('')){
  .dato-immobile .icona-png{
    background:var(--rosso);
    -webkit-mask:url('../img/icons-floor-plan.png') center/contain no-repeat;
    mask:url('../img/icons-floor-plan.png') center/contain no-repeat;
  }
}

/* messaggio quando non ci sono annunci da mostrare */
.nessun-immobile{
  grid-column:1/-1;text-align:center;color:var(--fumo);
  padding:50px 20px;border:1px dashed var(--linea);border-radius:var(--bordo-r);
}
.nessun-immobile a{color:var(--rosso);text-decoration:underline;text-underline-offset:3px}




/* ==================================================================
   CAMPI DI RICERCA — condivisi
   ------------------------------------------------------------------
   Usati sia dal modulo nella hero della home sia dalla barra filtri
   del catalogo. Stanno qui, e non in home.css, proprio perche'
   immobili.css e' l'unico foglio caricato da entrambe le pagine.
   ================================================================== */

.campo{background:rgba(16,16,19,.94);padding:14px 18px;position:relative}
.campo label{
  display:block;font-family:var(--dato);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:5px;
}
.campo select,.campo input{
  width:100%;background:none;border:0;color:var(--bianco);
  font-family:var(--testo);font-size:15px;font-weight:500;padding:0;appearance:none;
}
.campo select optgroup{
  background:var(--carbone);
  color:var(--rosso);
  font-style:normal;
  font-weight:600;
  font-family:var(--dato);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.campo select option{background:var(--carbone);color:var(--bianco);font-style:normal}
.campo::after{
  content:'\F229';font-family:'bootstrap-icons';
  position:absolute;right:16px;bottom:15px;
  color:rgba(255,255,255,.35);font-size:12px;pointer-events:none;
}
.campo.doppio::after{display:none}
.campo-coppia{display:flex;align-items:center;gap:8px}
/* anche le select: senza questa larghezza si dimensionerebbero sul
   testo piu' lungo, e le due meta' risulterebbero sbilanciate */
.campo-coppia input,
.campo-coppia select{width:100%;min-width:0;flex:1}
.campo-coppia span{color:rgba(255,255,255,.3);font-size:13px}

.cerca{
  background:var(--rosso);color:var(--bianco);
  /* La spaziatura verticale c'e' SEMPRE, non solo quando il pulsante
     si allunga per pareggiare la riga: impilato in colonna quel
     pareggio non avviene, e senza padding proprio resterebbe alto
     quanto la sola scritta. L'altezza minima e' una seconda rete di
     sicurezza, indipendente dal contesto. */
  padding:16px 34px;
  min-height:54px;
  align-self:stretch;
  font-family:var(--display);font-variation-settings:'wdth' 110;
  font-weight:600;font-size:15px;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s ease;
}
.cerca:hover{background:var(--rosso-cupo)}
.cerca i{font-size:17px}



/* ==================================================================
   SELETTORE VENDITA / AFFITTO — condiviso
   ------------------------------------------------------------------
   Usato dal modulo nella hero della home e dalla barra filtri del
   catalogo. Sono <label> con dentro un radio: il radio resta
   raggiungibile da tastiera ma non a vista, e l'etichetta fa da
   pulsante. Lo stato attivo e' una classe, non aria-pressed, perche'
   quello vale per i <button> e qui non ne abbiamo piu'.
   ================================================================== */

.tipi-contratto{display:flex;gap:4px;padding:4px 4px 12px}
.tipo-contratto{
  position:relative;cursor:pointer;
  font-family:var(--dato);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding:9px 20px;border-radius:var(--bordo-r);
  transition:color .2s ease,background .2s ease;
}
.tipo-contratto input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;
}
.tipo-contratto.attivo{background:var(--rosso);color:var(--bianco)}
.tipo-contratto:not(.attivo):hover{color:var(--bianco);background:rgba(255,255,255,.08)}
.tipo-contratto:focus-within{outline:2px solid var(--rosso);outline-offset:2px}

@media (max-width:620px){
  .tipi-contratto{gap:6px}
  .tipo-contratto{flex:1;text-align:center;padding:9px 10px;font-size:11px}
}

/* spese condominiali accanto al prezzo (solo affitti): stesso rigo,
   corpo piu' piccolo, cosi' non compete con la cifra principale */
.scheda-prezzo .spese-scheda{
  display:inline-block;
  font-family:var(--testo);font-size:12.5px;font-weight:500;
  color:var(--fumo);letter-spacing:0;margin-left:8px;
  white-space:nowrap;
}
@media (max-width:620px){
  .scheda-prezzo .spese-scheda{
    display:block;margin-left:0;margin-top:3px;white-space:normal;
  }
}