/* ============================================================
   Nuove costruzioni - regole di pagina
   Si carica dopo style.css. Usa solo i token di :root e i
   componenti del core (.phead--media, .cantmini, .pager, .costr,
   .cant__ico): qui ci sono la testata con il render, la griglia dei
   cantieri, le due fasce di servizio e i ritagli delle foto.
   Breakpoint: gli stessi del core (1080, 900, 680).
   ============================================================ */

/* ── Testata: testo a sinistra, un render a destra ───────────────
   Stesso schema della testata di Open House (.phead--media):
   foto a tutta altezza sul lato destro, sotto il testo da tablet. */
.nc-head{min-height:460px;display:flex;align-items:center;padding-top:30px}
.nc-head .container{width:100%}
.nc-head .phead__media img{object-position:55% 50%}
.nc-head__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;max-width:52%}

@media (max-width:900px){
  .nc-head{min-height:0;align-items:stretch;padding-top:24px}
  .nc-head .phead__media{height:320px}
  .nc-head .phead__media img{object-position:50% 58%}
  .nc-head__cta{max-width:none}
}
@media (max-width:680px){
  .nc-head .phead__media{height:250px}
  .nc-head__cta .btn{flex:1 1 100%}
}

/* ── I cantieri: otto per pagina, quattro per riga da desktop ── */
.nc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
@media (min-width:681px) and (max-width:1080px){
  .nc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:680px){
  .nc-grid{grid-template-columns:1fr;gap:20px}
}
.nc-list .h2:focus{outline:none}

/* ritagli delle foto delle card */
#minghetti .cantmini__ph img{object-position:50% 60%}
#giardini .cantmini__ph img{object-position:50% 58%}
#sigonio .cantmini__ph img{object-position:50% 62%}
#le-vigne .cantmini__ph img{object-position:50% 60%}

/* rimando all'elenco completo: riga semplice tra due filetti */
.nc-all{display:flex;align-items:center;gap:20px 24px;margin-top:56px;padding:28px 0;
        border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nc-all__b{flex:1;min-width:0}
.nc-all__t{font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--blu-900)}
.nc-all__x{margin-top:4px;max-width:62ch;font-size:.9375rem;color:var(--muted)}
.nc-all .btn{flex:none}
@media (max-width:680px){
  .nc-all{flex-wrap:wrap;align-items:flex-start;margin-top:40px}
  .nc-all__b{flex:1 1 calc(100% - 66px)}
  .nc-all .btn{width:100%}
}

/* ── Se compri una casa in costruzione ──────────────────────── */
.nc-buy__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.nc-buy__ph{margin:0;overflow:hidden;border-radius:var(--r)}
.nc-buy__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:80% 50%;
                transition:transform .9s var(--ease-out,ease)}
.nc-buy__ph:hover img{transform:scale(1.03)}
.nc-buy__list{display:grid;gap:22px;margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
.nc-buy__list li{display:flex;align-items:flex-start;gap:16px}
.nc-buy__list p{font-size:.9375rem;line-height:1.55;color:var(--muted)}
.nc-buy__list strong{display:block;margin-bottom:3px;font-size:1.0625rem;font-weight:600;color:var(--blu-900)}
.nc-buy__list .cant__ico{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.nc-buy__list li:hover .cant__ico{background:var(--blu-900);border-color:var(--blu-900);color:#fff}
@media (max-width:900px){
  .nc-buy__in{grid-template-columns:1fr;gap:32px}
  .nc-buy__ph img{aspect-ratio:3/2;object-position:70% 62%}
}
@media (max-width:680px){
  .nc-buy__ph img{aspect-ratio:4/5;object-position:82% 50%}
}

/* ── Servizio per i costruttori (#costruttori) ───────────────── */
.costr__b .cant__lead{margin-top:18px;max-width:60ch}
.costr__b .cant__lead b{color:#fff;font-weight:600}

/* cinque attività in un elenco verticale: icona tonda, titolo e testo */
.nc-svc{margin-top:34px;border-top:1px solid var(--line-dark)}
.nc-svc li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start;
           padding:20px 0;border-bottom:1px solid var(--line-dark)}
.nc-svc__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:999px;
            border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--blu-300);
            transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .35s var(--ease-out,ease)}
.nc-svc__ic .ic{width:21px;height:21px}
.nc-svc li:hover .nc-svc__ic{background:#fff;border-color:#fff;color:var(--blu-900);transform:scale(1.06)}
.nc-svc h3{font-size:1.0625rem;font-weight:600;line-height:1.3;color:#fff}
.nc-svc p{margin-top:5px;font-size:.9375rem;line-height:1.55;color:var(--on-navy-2)}
.costr__b .cant__cta{margin-top:34px}

/* foto dei titolari: da desktop verticale e ferma accanto al testo */
#costruttori .costr__ph{overflow:hidden;border-radius:var(--r)}
#costruttori .costr__ph img{object-position:50% 35%}
@media (max-width:900px){
  #costruttori .costr__ph img{aspect-ratio:4/3;object-position:45% 30%}
}
/* telefono: foto più alta e centrata sulle due persone, senza tagliare le braccia */
@media (max-width:680px){
  #costruttori .costr__ph img{aspect-ratio:4/5;object-position:42% 45%}
  .nc-svc li{grid-template-columns:42px minmax(0,1fr);gap:14px;padding:18px 0}
  .nc-svc__ic{width:42px;height:42px}
}

/* progetti seguiti: fascia staccata dal blocco sopra, tre render */
.nc-works{margin-top:64px;padding-top:36px;border-top:1px solid var(--line-dark)}
.nc-works__h{margin-bottom:18px;font-size:1.0625rem;font-weight:600;color:#fff}
.nc-works .costr__works{margin-top:0}
.nc-works figure{overflow:hidden;border-radius:var(--r)}
.nc-works img{transition:transform .9s var(--ease-out,ease)}
.nc-works figure:hover img{transform:scale(1.04)}
@media (min-width:681px){
  .nc-works .costr__works{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (max-width:680px){
  .nc-works{margin-top:48px;padding-top:28px}
}
/* ritagli dei tre render (stesso ordine del markup) */
.nc-works figure:nth-child(1) img{object-position:50% 62%}
.nc-works figure:nth-child(2) img{object-position:45% 45%}
.nc-works figure:nth-child(3) img{object-position:55% 55%}

@media (prefers-reduced-motion:reduce){
  .nc-buy__ph:hover img,.nc-works figure:hover img,
  .nc-svc li:hover .nc-svc__ic{transform:none}
}

/* cambio pagina dei cantieri: le card nuove salgono una dopo l'altra (main.js, blocco "pagine") */
@keyframes nc-tile{from{opacity:0;translate:0 22px}}
.nc-grid > .is-paged{animation:nc-tile .6s var(--ease-out,ease) var(--pg-d,0ms) backwards}
@media (prefers-reduced-motion:reduce){
  .nc-grid > .is-paged{animation:none}
}
.nc-head .phead__x{text-wrap:pretty}