/* ══ OPEN HOUSE - PAGINA EVENTO (open-house-evento.html) ══════════════
   Solo ritocchi di pagina: i componenti (.ohhero, .ohfacts, .cd, .gal,
   .keyspecs, .feats, .utable, .ohhost, .vbox, .askbox, .dbar) stanno in
   style.css e qui non vengono ridisegnati.
   Prefisso .ohe- per le classi che esistono solo in questa pagina. */

/* ── testata: ritaglio del render della palazzina ─────────────────────
   Da desktop si tiene la fascia dei piani con i terrazzi; il testo cade
   sul giardino, sotto il velo navy di .ohhero::after. */
.ohe-hero > img{object-position:50% 62%}
/* render grande: la testata prende più altezza dello standard */
.ohe-hero{min-height:clamp(420px,60vh,560px)}
/* render più luminoso: foto piena e velo leggero, più scuro solo in basso
   a sinistra, dove stanno briciole, titolo e data */
.ohe-hero > img{opacity:1}
.ohe-hero::after{
  background:
    linear-gradient(90deg,rgba(10,16,48,.5) 0%,rgba(10,16,48,.2) 55%,rgba(10,16,48,0) 100%),
    linear-gradient(0deg,rgba(10,16,48,.72) 0%,rgba(10,16,48,.34) 50%,rgba(10,16,48,.12) 100%);
}
@media (max-width:900px){
  /* da tablet in giù c'è già la barra fissa .dbar con "Prenota la visita":
     il pulsante della testata sarebbe un doppione nella stessa schermata */
  .ohe-hero .ohhero__cta{display:none}
}
@media (max-width:680px){
  /* telefono: foto quasi intera in larghezza, si vede tutta la palazzina */
  .ohe-hero{min-height:420px}
  .ohe-hero > img{object-position:50% 70%}
}

/* ── conto alla rovescia subito sotto il riquadro data/orario/luogo ── */
.ohe-cd .cd{margin:28px 0 4px}

/* ── galleria dentro un .block (in style.css è pensata a tutta pagina) */
.block > .ohe-gal{margin-block:16px 0}
@media (min-width:1081px){
  /* colonna da ~800px: il mosaico resta più basso dello schermo */
  .ohe-gal:has(> .gal__side){height:clamp(380px,50vh,460px)}
}

/* ── il progetto: dati chiave e dotazioni ────────────────────────────── */
.block > .ohe-specs{margin:16px 0 0}
.ohe-specs + p{margin-top:18px}
/* voci che vanno a capo: icona allineata alla prima riga */
.ohe-feats li{align-items:flex-start;line-height:1.45}
.ohe-feats .ic{margin-top:2px}

/* ── appartamenti in vendita: link verso le altre nuove costruzioni ── */
.block .ohe-more{margin-top:14px}

/* ── chi ti accoglie: ritaglio della foto e contatti diretti ─────────── */
/* foto orizzontale in un riquadro 4:5 (4:3 su telefono): il viso al centro */
.ohe-host img{object-position:36% 30%}
.ohhost .ohe-host__c{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px}
.ohe-host__c .linkish{overflow-wrap:anywhere}

/* ── il progetto raccontato: video affiancato al titolo della puntata ─ */
.ohe-video{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:16px}
.ohe-video .vbox{margin-top:0}
.ohe-video__s{display:flex;align-items:center;gap:7px;font-size:.875rem;font-weight:600;color:var(--muted)}
.ohe-video__s .ic{width:16px;height:16px;color:var(--blu-900)}
.block .ohe-video__s{margin-top:0}
.ohe-video__t{margin-top:8px;font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--blu-900);text-wrap:balance}
.block .ohe-video__b p:not(.ohe-video__s){margin-top:8px;font-size:.9375rem}
.ohe-video__b .linkish{margin-top:10px}
/* YouTube e, se c'è il link nel pannello, il post Instagram dell'evento (campo facoltativo) */
.ohe-video__links{display:flex;flex-wrap:wrap;gap:4px 22px}
@media (max-width:680px){
  .ohe-video{grid-template-columns:1fr;gap:16px}
}

/* ── prenotazione: tablet con il form a due colonne (681-900) ─────────
   style.css mette il form su due colonne; qui le coppie restano
   nome|cognome ed email|telefono. */
@media (min-width:681px) and (max-width:900px){
  .ohe-form > .form__row2{display:contents}
}