/* ============================================================
   Cantiere - I Giardini di Carpi (cantiere.html)
   Caricato dopo style.css. Solo ritocchi di pagina: i componenti
   (.ohhero, .keyspecs, .gal, .utable, .ohfacts, .cd, .cfollow,
   .askbox, .cantmini, .dbar) stanno in style.css e qui non si
   ridefiniscono. Prefisso .cg- per le classi che esistono solo qui.
   ============================================================ */

/* ── testata: ritaglio del render aereo ──────────────────────
   Da desktop resta la fascia con le tre palazzine; il testo cade
   sul prato in primo piano, sotto il velo di .ohhero::after.     */
.cg-hero > img{object-position:50% 55%}
@media (max-width:680px){
  /* telefono: restano il blocco di sinistra e quello centrale */
  .cg-hero > img{object-position:40% 50%}
}

/* ── galleria dentro un .block ───────────────────────────────
   In style.css .gal è pensata a tutta pagina (scheda immobile):
   qui sta nella colonna da ~760px, quindi margini e altezza del
   mosaico si riducono.                                           */
.block > .cg-gal{margin-block:16px 0}
.block > .cg-gal + .note{margin-top:12px}
@media (min-width:1081px){
  .cg-gal:has(> .gal__side){height:clamp(360px,48vh,440px)}
}

/* ── ti seguiamo fino alla consegna ─────────────────────────── */
.cg-follow__more{margin-top:14px}
/* foto quadrata del sopralluogo: Elena è sul lato destro */
.cfollow img{object-position:84% 50%}
@media (max-width:680px){
  .cfollow img{object-position:50% 72%}
}

/* ── gli altri cantieri ──────────────────────────────────────
   Tra 681 e 900px .grid--3 va su due colonne e la terza card
   prende tutta la riga: la mettiamo orizzontale (foto | testo)
   invece di allungarla con una foto alta quanto lo schermo.       */
@media (min-width:681px) and (max-width:900px){
  .cg-more > .cantmini:last-child:nth-child(odd){flex-direction:row}
  /* la foto si allinea alla colonna di sinistra della riga sopra (metà meno metà gap) */
  .cg-more > .cantmini:last-child:nth-child(odd) .cantmini__ph{flex:0 0 calc(50% - 11px);aspect-ratio:auto;min-height:220px}
  .cg-more > .cantmini:last-child:nth-child(odd) .cantmini__b{justify-content:center}
}

/* ── ritagli delle foto (al posto degli style="" in pagina) ── */
.cg-ask .askbox__ref img{object-position:45% 60%}
.cantmini__ph .cg-vigne{object-position:50% 60%}
.cantmini__ph .cg-ming{object-position:50% 60%}
.cantmini__ph .cg-sigonio{object-position:50% 62%}

/* ── tabella delle villette ──────────────────────────────────
   7 colonne servono ~630px (~720px con le spaziature da desktop):
   tra 901 e 1199px diventa a schede, due per riga (regola comune
   di .utable in style.css, vale anche per la pagina evento).      */
@media (min-width:681px) and (max-width:720px){
  /* colonna unica appena sopra il telefono: 2px in meno per lato e la tabella non scorre */
  .cg-units .utable th,.cg-units .utable td{padding-inline:8px}
}

/* ── caratteristiche del progetto: un'icona diversa per voce ── */
.block--desc .feats{gap:12px 24px;margin-top:22px}
.block--desc .feats li{gap:12px}
.block--desc .feats .ic{box-sizing:content-box;width:17px;height:17px;padding:8px;border-radius:999px;
                        background:var(--blu-050);color:var(--blu-900)}

/* "Indicazioni stradali" staccato dalla mappa */
.cg-map__go{margin-top:16px}