/* ============================================================
   Open House - regole di pagina
   Caricato dopo style.css. Componenti, colori, raggi e breakpoint
   restano quelli del design system (.phead--media, .ohc, .oh).
   Prefisso .ohp- per le classi che esistono solo in questa pagina.
   ============================================================ */

/* ── Testata: testo del cliente + foto a destra ───────────────── */
.ohp-head{min-height:460px;display:flex;align-items:center;padding-top:30px}
.ohp-head .container{width:100%}
.ohp-head .phead__media img{object-position:50% 55%}
.ohp-head .phead__cta{margin-top:28px}
.ohp-head .phead__cta .ic{width:17px;height:17px}

@media (max-width:900px){
  .ohp-head{min-height:0;align-items:stretch;padding-top:24px}
  .ohp-head .phead__media{height:300px}
}
@media (max-width:680px){
  .ohp-head .phead__media{height:240px}
  .ohp-head .phead__x{font-size:1rem;line-height:1.6}
}

/* ── Elenco eventi: foto più grandi ─────────────────────────────
   Desktop: la foto prende quasi metà della card.                  */
@media (min-width:1081px){
  .ohp-list .ohc{grid-template-columns:minmax(0,5fr) 104px minmax(0,6fr)}
  /* la foto riempie la colonna senza deciderne l'altezza: la card è alta
     quanto il testo (minimo 320px), niente vuoto prima dei pulsanti */
  .ohp-list .ohc__ph{min-height:320px}
  .ohp-list .ohc__ph img{position:absolute;inset:0;min-height:0}
}
@media (min-width:901px) and (max-width:1080px){
  .ohp-list .ohc{grid-template-columns:300px 92px minmax(0,1fr)}
}

#ev-minghetti .ohc__ph img{object-position:42% 70%}
#ev-giardini .ohc__ph img{object-position:58% 60%}
#ev-q100 .ohc__ph img{object-position:50% 45%}

/* conto alla rovescia dentro la card del prossimo evento */
.ohc__cd .cd{margin:18px 0 0}
.ohc__cd .cd__done{margin:16px 0 0}

/* dati dell'immobile con icona al posto dei punti separatori */
.ohc__spec{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ohc__spec .ic{width:15px;height:15px;color:var(--muted)}
.ohc__prop .nw{display:inline-flex;align-items:center;gap:10px}

@media (max-width:680px){
  #ev-minghetti .ohc__ph img{object-position:50% 72%}
  .ohc__cta{row-gap:6px}
}
@media (max-width:680px),(pointer:coarse){
  /* area di tocco più alta senza cambiare l'interlinea */
  .ohc__t a{padding-block:9px}
}

/* ── Come si svolge: foto grande + tre passaggi ─────────────────── */
.ohp-how{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:center}
.ohp-how__ph{margin:0;overflow:hidden;border-radius:var(--r)}
.ohp-how__ph img{width:100%;aspect-ratio:8/7;object-fit:cover;object-position:50% 40%}
.ohp-how .h2{max-width:16ch}

/* passaggi uniti da un filo verticale, icone in cerchi navy.
   Il filo si disegna quando il passaggio entra (reveal di main.js). */
.ohp-steps{margin-top:32px}
.ohp-steps li{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding-bottom:30px}
.ohp-steps li:last-child{padding-bottom:0}
.ohp-steps li:not(:last-child)::before{
  content:"";position:absolute;left:26px;top:60px;bottom:8px;width:1px;background:var(--blu-100);
  transform-origin:top;transition:transform .9s var(--ease-out,ease) calc(var(--rv-d,0ms) + .2s);
}
.ohp-steps li.reveal:not(.is-in)::before{transform:scaleY(0)}
.ohp-steps__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
               background:var(--blu-900);color:#fff}
.ohp-steps__ic .ic{width:22px;height:22px}
.ohp-steps b{display:block;padding-top:4px;font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--blu-900)}
.ohp-steps p{margin-top:6px;max-width:48ch;font-size:.9375rem;color:var(--muted)}
.ohp-how__cta{margin-top:34px}

@media (max-width:1080px){
  .ohp-how{gap:44px}
}
@media (max-width:900px){
  .ohp-how{grid-template-columns:minmax(0,1fr);gap:36px}
  .ohp-how__ph img{aspect-ratio:16/10}
  .ohp-how .h2{max-width:none}
}
@media (max-width:680px){
  .ohp-how__ph img{aspect-ratio:5/4}
  .ohp-steps li{grid-template-columns:44px minmax(0,1fr);gap:14px;padding-bottom:24px}
  .ohp-steps li:not(:last-child)::before{left:22px;top:52px}
  .ohp-steps__ic{width:44px;height:44px}
  .ohp-steps__ic .ic{width:20px;height:20px}
  .ohp-steps b{padding-top:2px;font-size:1.0625rem}
}

/* ── Archivio: foto, data, titolo, immobile ─────────────────────
   Tutta la riga porta al link del titolo.                         */
.ohp-past{border-top:1px solid var(--line)}
.ohp-past__it{position:relative;display:grid;grid-template-columns:200px 190px minmax(0,1fr);
              grid-template-areas:"ph d t" "ph d w";column-gap:32px;align-items:center;
              padding:20px 0;border-bottom:1px solid var(--line)}
.ohp-past__ph{grid-area:ph;display:block;overflow:hidden;border-radius:var(--r)}
.ohp-past__ph img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.ohp-past__d{grid-area:d;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--blu-900)}
.ohp-past__d .ic{width:17px;height:17px;opacity:.7}
.ohp-past__t{grid-area:t;align-self:end;font-size:1.25rem;font-weight:600;line-height:1.25;color:var(--blu-900)}
.ohp-past__t a{text-decoration:none}
.ohp-past__t a::after{content:"";position:absolute;inset:0}
.ohp-past__t a:focus-visible{outline:0}
.ohp-past__it:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.ohp-past__w{grid-area:w;align-self:start;display:flex;align-items:flex-start;gap:7px;margin-top:6px;
             font-size:.9375rem;color:var(--muted)}
.ohp-past__w .ic{flex:none;width:16px;height:16px;margin-top:3px}
.ohp-past__it:hover .ohp-past__t a{text-decoration:underline;text-underline-offset:3px}
.ohp-past__it:hover .ohp-past__ph img{transform:scale(1.05)}

@media (max-width:900px){
  .ohp-past__it{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"ph d" "ph t" "ph w";
                column-gap:24px;row-gap:4px}
  .ohp-past__d{align-self:end;font-size:.875rem}
  .ohp-past__t{align-self:center}
}
@media (max-width:680px){
  .ohp-past__it{grid-template-columns:112px minmax(0,1fr);column-gap:16px;padding:16px 0}
  .ohp-past__ph img{aspect-ratio:1}
  .ohp-past__t{font-size:1.0625rem}
  .ohp-past__w{margin-top:2px;font-size:.875rem}
}

/* ── Anno per anno: Open House fatti e venduti ──────────────────
   Una riga per anno (la più recente in alto), senza riquadri:
   solo filetti, numeri grandi navy ed etichette normali.          */
.ohp-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:72px;align-items:start}
.ohp-stats .h2{max-width:13ch}
.ohp-stats__list{border-top:1px solid var(--line)}
.ohp-stats__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
                column-gap:32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.ohp-stats__y{font-size:1.125rem;font-weight:600;color:var(--blu-900)}
.ohp-stats__n{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ohp-stats__n b{font-family:var(--display);font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);font-weight:700;
                line-height:1;letter-spacing:-.02em;color:var(--blu-900);font-variant-numeric:tabular-nums}
.ohp-stats__n span{font-size:1rem}

@media (max-width:900px){
  .ohp-stats{grid-template-columns:minmax(0,1fr);gap:28px}
  .ohp-stats .h2{max-width:none}
}
@media (max-width:680px){
  .ohp-stats__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:10px;column-gap:20px;padding:20px 0}
  .ohp-stats__y{grid-column:1/-1;font-size:1rem}
}

/* ── Per chi vende (componente .oh della home) ───────────────── */
/* foto quadrata: il cartello VENDESI sta nella metà bassa, il viso al 25% */
.ohsell .oh__ph img{object-position:50% 86%}
.ohsell .oh__b{align-self:center}
.ohsell .oh__cta{margin-top:26px}

@media (max-width:900px){
  .ohsell .oh__ph{min-height:320px}
  .ohsell .oh__ph img{object-position:50% 30%}
}
@media (min-width:681px) and (max-width:900px){
  .ohsell .oh__ph{min-height:0;aspect-ratio:4/3}
  .ohsell .oh__ph img{object-position:50% 84%}
}
@media (max-width:680px){
  .ohsell .oh__cta{row-gap:6px}
}

/* ── Movimento ──────────────────────────────────────────────────
   Testata, card degli eventi, foto e righe dell'archivio usano il
   movimento comune (style.css + reveal di main.js, attributi data-rv).
   (nessuna animazione propria della pagina)                     */