/* ============================================================
   Contatti - regole di pagina
   Caricato dopo style.css. Solo ritocchi locali: componenti,
   colori, raggi e breakpoint restano quelli del design system
   (.phead--media, .askbox, .form, .map).
   ============================================================ */

/* ── Testata con foto: Vincenzo Tecce alla scrivania ──────────
   Foto a destra come nell'hero della home, ma con una testata più
   alta: il riquadro si avvicina al 3:2 della foto e il volto si
   vede intero. Il velo navy è stretto, sul bordo sinistro della
   foto, perché lì c'è solo il muro bianco dell'ufficio.
   La foto non va a tutta larghezza: il volto è al centro dello
   scatto e finirebbe sotto il testo.                            */
.ct-head{display:flex;min-height:clamp(400px,32vw,480px);padding:34px 0 56px}
.ct-head > .container{display:flex;flex-direction:column}
/* titolo, testo e bottoni centrati nello spazio sotto le briciole */
.ct-head .phead__h1{margin-top:auto;padding-top:18px}
.ct-head .phead__cta{margin-bottom:auto}
.ct-head .phead__media{width:48%}
.ct-head .phead__media img{object-position:42% 30%}
.ct-head .phead__media::after{
  background:linear-gradient(90deg,var(--blu-900) 0%,rgba(19,29,88,.5) 7%,rgba(19,29,88,0) 24%);
}
.ct-head .phead__x{text-wrap:pretty}

/* Due azioni affiancate (chiama / scrivi), vanno a capo se serve */
.ct-head .phead__cta{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1080px){
  .ct-head .phead__media img{object-position:40% 30%}
}
@media (max-width:900px){
  /* foto sotto il testo, a tutta larghezza; un velo leggero
     dall'alto la raccorda al navy della testata                  */
  .ct-head{display:flex;flex-direction:column;min-height:0;padding:34px 0 0}
  .ct-head .phead__h1{margin-top:0}
  .ct-head .phead__media{width:100%;height:auto;aspect-ratio:2/1}
  .ct-head .phead__media img{object-position:50% 32%}
  .ct-head .phead__media::after{
    background:linear-gradient(180deg,var(--blu-900) 0%,rgba(19,29,88,.35) 9%,rgba(19,29,88,0) 24%);
  }
}
@media (max-width:680px){
  /* sul telefono la foto 3:2 entra intera */
  .ct-head{padding-top:24px}
  .ct-head .phead__h1{padding-top:10px}
  .ct-head .phead__media{aspect-ratio:3/2}
  .ct-head .phead__media img{object-position:50% 50%}
  .ct-head .phead__cta .btn{flex:1 1 auto}
}

/* ── Recapiti e orari (colonna accanto al modulo) ─────────────
   Un elenco solo: icona navy, etichetta grigia, valore scuro.
   Niente riquadri, niente righe: l'ordine lo dà l'allineamento.
   Su desktop il titolo parte alla stessa altezza di quello del
   modulo (padding 32px + bordo 1px dell'askbox).                */
.ctside{padding-top:33px}
.ctside > .h3{margin-bottom:28px}
.ctinfo{display:grid;gap:26px}
.ctinfo__i{display:grid;grid-template-columns:20px minmax(0,1fr);gap:16px;align-items:start}
.ctinfo__i > .ic{width:20px;height:20px;margin-top:1px;color:var(--blu-900)}
.ctinfo__l{display:block;font-size:.875rem;font-weight:500;line-height:1.4;color:var(--muted)}
.ctinfo__v{margin-top:4px;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.ctinfo__v a{color:var(--blu-900);font-weight:600;text-decoration:none}
.ctinfo__v a:hover{text-decoration:underline;text-underline-offset:3px}
.ctinfo__go{margin-top:6px;font-size:.9375rem}
/* orari: giorno a sinistra, fasce a destra, due righe */
.ctinfo__h{display:grid;grid-template-columns:8.25em minmax(0,1fr);gap:0 12px}
.ctinfo__h + .ctinfo__h{margin-top:2px}
.ctinfo__d{color:var(--muted)}

.ctsocial{margin-top:34px;padding-left:36px}
.ctsocial__l{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:6px}
.ctsocial__l a{display:inline-flex;align-items:center;gap:8px;
               color:var(--blu-900);font-weight:600;text-decoration:none}
.ctsocial__l a:hover{text-decoration:underline;text-underline-offset:3px}
.ctsocial__l .ic{width:18px;height:18px}

@media (max-width:900px){
  /* una colonna sopra il modulo: niente allineamento col form,
     i recapiti su due colonne per non allungare la pagina        */
  .ctside{padding-top:0}
  .ctinfo{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
  /* colonna stretta: le due fasce del pomeriggio vanno una sotto l'altra */
  .ctinfo__e{display:none}
  .ctinfo__t .nw{display:block}
}
@media (max-width:900px),(pointer:coarse){
  .ctinfo__v a,.ctsocial__l a{display:inline-flex;align-items:center;min-height:44px}
  .ctinfo__v:has(a){margin-top:-6px;margin-bottom:-10px}
  .ctsocial__l{gap:0 22px;margin-top:0}
}
@media (max-width:680px){
  .ctinfo{grid-template-columns:1fr;gap:24px}
  .ctside > .h3{margin-bottom:24px}
  /* le icone dei social si allineano a quelle dei recapiti: i tre link stanno su una riga */
  .ctsocial{margin-top:26px;padding-left:0}
  .ctsocial__l{gap:0 16px}
  .ctsocial__l a{gap:6px}
}

/* ── Mappa: da bordo a bordo, attaccata alla banda sotto ────── */
.ct-map .map{margin-top:0;border:0;border-radius:0}

/* ── Banda finale: servizio per i costruttori ─────────────────
   Foto verticale dei titolari col caschetto + testo e CTA.
   La CTA principale riporta al modulo qui sopra (motivo
   "Sono un costruttore"), senza mandare l'utente su un'altra
   pagina; "Come lavoriamo" resta come approfondimento.         */
.cbuild{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:center}
.cbuild__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 32%;
                border-radius:var(--r)}
.cbuild__x{margin-top:14px;max-width:60ch;color:var(--muted)}
/* niente parola sola in fondo al paragrafo ("denaro.") */
.cbuild__b p{text-wrap:pretty}
.cbuild strong{color:var(--blu-900);font-weight:600}
.cbuild__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}

@media (max-width:1080px){
  .cbuild{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:44px}
}
@media (max-width:900px){
  .cbuild{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:32px;align-items:start}
}
@media (max-width:680px){
  .cbuild{grid-template-columns:1fr;gap:26px}
  /* in orizzontale: si tengono caschetti e volti */
  .cbuild__ph img{aspect-ratio:4/3;object-position:50% 46%}
  .cbuild__cta{flex-direction:column;align-items:stretch;gap:6px}
  .cbuild__cta .btn{width:100%}
  .cbuild__cta .linkish{align-self:flex-start}
}

/* recapiti e modulo affiancati (la regola stava in style.css, ora vive qui) */
.contatti{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
@media (max-width:1080px){
  .contatti{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
}
@media (max-width:900px){
  .contatti{grid-template-columns:1fr;gap:44px}
}