/* ============================================================
   Home (index.html) - regole di questa sola pagina.
   Si carica dopo style.css e usa solo i suoi token: qui ci sono
   i ritagli delle foto, il blocco Open House (testo del cliente,
   stato dell'evento), la card cantiere tutta
   cliccabile e i due titolari in Chi siamo. I componenti condivisi
   (card, rail, .cant, .oh, .nums…) restano in style.css.
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────────
   I titolari davanti alla sede (scelta del cliente, riunione del
   16 ottobre): le due persone restano fuori dal velo navy che sale
   da sinistra e stanno alte nel riquadro; l'insegna si può perdere
   (indicazione di Mattia). Sotto i 900px la foto sta sotto il
   titolo, con lo stesso criterio.                                 */
/* la foto è più alta del riquadro e sale di --lift: l'insegna in alto
   esce dal riquadro e le persone salgono sopra la barra di ricerca */
.hero__media{overflow:hidden}
.hero__media img{--lift:110px;height:calc(100% + var(--lift));transform:translateY(calc(var(--lift) * -1));object-position:50% 42%}
.hero__sub{text-wrap:pretty}   /* niente parola orfana a fine paragrafo */
@media (max-width:900px){
  .hero__media img{--lift:70px}
}
/* Chi siamo: foto verticale dei titolari, ritagliata su volti e insegna */
#chisiamo .about__ph img{object-position:50% 22%}

/* ── CANTIERI ──────────────────────────────────────────────────
   Tutta la card porta al link "Vedi il cantiere" (un solo stop di
   Tab): il ::after del link copre la card, che è già relative.    */
#cantieri .cant__b .linkish::after{content:"";position:absolute;inset:0;z-index:3} /* sopra anche al tag sulla foto */
#cantieri .cant:has(.cant__b .linkish:focus-visible){border-color:var(--blu-300)}

/* ── OPEN HOUSE ────────────────────────────────────────────────
   Intestazione con il testo del cliente (accorciato), poi la card
   del prossimo evento (.oh) e il link a tutti gli Open House.
   Le date successive e le statistiche stanno solo in open-house.html. */
/* intestazione impaginata come quella dei cantieri: titolo a sinistra, testo a destra */
.ohh__head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:44px}
.ohh__head .lead{margin-top:0;max-width:56ch;text-wrap:pretty}
@media (max-width:900px){
  .ohh__head{grid-template-columns:1fr;gap:18px;align-items:start;margin-bottom:30px}
}
.ohh__head .lead strong{font-weight:600;color:var(--blu-900)}
.ohh__sign{margin-top:14px;font-size:1.0625rem}

/* stato dell'evento (prossimo / in corso / concluso): pillola con icona */
.oh__tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 14px 6px 12px;
  border-radius:999px;background:var(--blu-050);color:var(--blu-900);
  font-size:.8125rem;font-weight:600;line-height:1.4;
}
.oh__tag .ic{width:15px;height:15px}

/* titolo dell'evento: un gradino sotto l'H2 di sezione */
.oh__t{font-family:var(--display);font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:700;line-height:1.18;
       letter-spacing:-.01em;color:var(--blu-900);text-wrap:balance}
/* orario e indirizzo: quando vanno a capo (telefono) l'icona resta sulla prima riga
   e l'ultima riga non resta con una parola sola */
#openhouse .oh__meta span{align-items:flex-start;text-wrap:pretty}
#openhouse .oh__meta .ic{flex:none;margin-top:.2em}
/* loggia apparecchiata: tavolo, bambù e frangisole dentro il riquadro */
.oh__ph img{object-position:40% 50%}

/* "Tutti gli Open House": link centrato sotto la card, diverso dai bottoni dell'evento */
.ohh__all{display:flex;justify-content:center;margin-top:28px}
.ohh__all a{min-height:44px;font-weight:600}

@media (max-width:900px){
  .oh__ph img{object-position:50% 62%}
}
@media (max-width:680px){
  /* telefono: pulsante a tutta larghezza come le altre CTA impilate */
  .oh__cta{flex-direction:column;align-items:stretch;gap:10px}
  .ohh__all{margin-top:16px}
}

/* ── CHI SIAMO ─────────────────────────────────────────────────
   I due titolari affiancati sotto il testo, poi "Conosci il team". */
/* il grassetto nel testo è navy come nelle altre sezioni (non il grigio del paragrafo) */
#chisiamo .about__b p strong{color:var(--blu-900);font-weight:600}
#chisiamo .team{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:16px 40px;
                margin:28px 0 30px}
@media (max-width:680px){
  /* telefono: 24 tra foto e titolo, 28 tra testo e ritratti (la foto non ha l'interlinea
     del paragrafo a fare da cuscino), 32 prima del bottone (28 + i 4 di .about__b > .btn) */
  #chisiamo .about{gap:24px}
  #chisiamo .team{margin:28px 0}
  #chisiamo .about__b > .btn{width:100%}
}
@media (max-width:480px){
  /* telefono stretto: una persona per riga, i nomi non vanno a capo */
  #chisiamo .team{grid-template-columns:1fr;gap:12px}
}

/* ── RITMO VERTICALE SU TELEFONO ───────────────────────────────
   Stessi stacchi in tutte le sezioni sotto i 680px: 60 di padding
   (.section), 16 tra titolo e testo, 24 tra intestazione e
   contenuto, 32 tra contenuto e bottoni.                          */
@media (max-width:680px){
  #novita .secthead{margin-bottom:24px}
  #novita .only-sm{margin-top:26px}          /* + i 6px che il carosello lascia sotto le card */
  #recensioni .secthead{margin-bottom:20px}  /* il widget ha già 4-5px di margine sopra le card */
}