/* ITALMEDIA — pagina "Hai uno spazio privato?" (condomini.html)
   Base nera come il resto del sito; la lavanda e' il colore di questa pagina:
   evidenzia, accompagna e contiene il modulo, senza cambiare l'identita' del sito. */
.acc{ color:var(--condo) }
.pill--condo{ color:var(--condo); background:rgba(182,181,216,.08); border-color:rgba(182,181,216,.28) }

/* ---- apertura: testo a sinistra, modulo su scheda lavanda a destra ---- */
.condo-hero{ padding:17rem 0 12rem; position:relative; overflow:hidden }
.condo-hero::before{ content:''; position:absolute; right:-20vw; top:-30vh; width:70vw; height:120vh; pointer-events:none;
  background:radial-gradient(closest-side, rgba(182,181,216,.11), transparent 70%) }
.condo-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:9rem; align-items:center }
.condo-intro .feat__title{ font-size:7.2rem; margin-bottom:2.6rem }
.condo-intro .lead{ max-width:52rem }


/* scheda del modulo */
.condo-card{ background:var(--condo); color:var(--indaco); border-radius:1.6rem; padding:5rem 5rem 4rem;
  box-shadow:0 3rem 8rem rgba(0,0,0,.45) }
.condo-form__head{ margin-bottom:3.2rem }
.condo-form__t{ font-family:var(--disp); font-weight:700; font-size:3.4rem; letter-spacing:-.01em; line-height:1.1; color:var(--indaco) }
.condo-card .field input, .condo-card .field textarea{ color:var(--indaco); border-bottom-color:rgba(29,27,58,.32) }
.condo-card .field ::placeholder{ color:rgba(29,27,58,.58) }
.condo-card .field .fl{ background:var(--indaco) }
.condo-card .privacy{ color:rgba(29,27,58,.72) }
.condo-card .privacy a{ color:var(--indaco) }
.condo-card .privacy input{ --ck-b:rgba(29,27,58,.5); --ck-on:var(--indaco);
  --ck-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") }
.condo-card .formnote{ color:var(--indaco) !important }
.c-bttn.is-dark{ background:var(--indaco); color:#fff }
.c-bttn.is-dark::before{ background:#000 }
.c-bttn.is-dark:hover, .c-bttn.is-dark:hover .lbl{ color:#fff }

/* ---- cosa cerchiamo ---- */
.condo-spazi{ background:var(--warm); padding:14rem 0 }
.condo-spazi__head{ max-width:70rem; margin-bottom:6rem }
.condo-spazi__head .feat__title{ margin-bottom:2.4rem }
.condo-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem }
.ctile{ position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--condo); color:var(--indaco); border-radius:1.8rem;
  transition:transform .5s var(--ease) }
.ctile:hover{ transform:translateY(-.4rem) }
/* testo in alto, sul lilla */
.ctile__txt{ position:relative; z-index:1; padding:3.6rem 3.4rem 2rem }
.ctile__n{ display:block; font:500 1.5rem var(--body); color:rgba(29,27,58,.7); margin-bottom:1.6rem; font-variant-numeric:tabular-nums }
.ctile h3{ font:700 3.4rem var(--disp); letter-spacing:-.02em; line-height:1.05; color:var(--indaco); margin-bottom:1.4rem }
.ctile p{ font-size:1.65rem; line-height:1.55; color:rgba(29,27,58,.82); max-width:38rem }
/* illustrazione in basso, sullo stesso lilla del riquadro (img/condo/parete.jpg, tetto.jpg, terreno.jpg).
   Come in Affinity l'immagine e' piu' larga del riquadro: esce dai lati e dal fondo, mai dall'alto.
   Nessuna sfocatura sul disegno: si ammorbidisce solo la fascia piu' alta dell'immagine, che e' sfondo vuoto.
   --largo = quanto e' larga rispetto al riquadro, --sposta = spostamento orizzontale, --taglio = quanto si taglia sul fondo. */
.ctile__img{ --largo:118%; --sposta:0%; --taglio:6%;
  position:relative; margin-top:auto; overflow:hidden; line-height:0 }
.ctile__img img{ display:block; width:var(--largo); max-width:none; height:auto;
  margin:0 0 calc(var(--taglio) * -1) calc((100% - var(--largo)) / 2 + var(--sposta));
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 9%);
  transform-origin:50% 100%; transition:transform 1.2s var(--ease) }
.ctile:hover .ctile__img img{ transform:scale(1.03) }
/* per spostare una sola immagine: .ctile:nth-child(N) .ctile__img{ --sposta:-5% } (negativo = verso sinistra) */

@media (max-width:991px){
  .condo-hero{ padding:13rem 0 8rem }
  .condo-grid{ grid-template-columns:1fr; gap:5rem }
  .condo-intro .feat__title{ font-size:4.8rem }
  .condo-card{ padding:3.6rem 2.6rem 3rem }
  .condo-spazi{ padding:9rem 0 }
  .condo-tiles{ grid-template-columns:1fr }
  .ctile__img{ --largo:112% }
  .ctile__txt{ padding:3rem 2.6rem 1.6rem }
  .ctile h3{ font-size:2.8rem }
}
@media (max-width:767px){ .condo-intro .feat__title{ font-size:4rem } .condo-form__t{ font-size:2.8rem } }