/* static/assets/css/contact.css */

/* HERO simile ad About/Home */
.cf-contact-hero{
  position:relative;
  overflow:hidden;
  background:#f7f2ea;
  border-bottom: 1px solid rgba(0,0,0,.06);

  margin-top: -110px;          /* valore base che funziona bene */
  padding-top: 100px;          /* spazio per non finire sotto navbar */
}
.cf-contact-hero__bg{
  position:absolute; inset:0;
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}
.cf-contact-hero__bg .blob{
  position:absolute; width:520px; height:520px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(140, 20, 20, .28), rgba(255, 190, 140, .12) 55%, rgba(255,255,255,0) 70%);
  animation: cfContactFloat 12s ease-in-out infinite;
}
.cf-contact-hero__bg .b1{ left:-140px; top:-120px; animation-duration: 13s; }
.cf-contact-hero__bg .b2{ right:-160px; top:-80px; animation-duration: 15s; }
.cf-contact-hero__bg .b3{ left:35%; bottom:-260px; width:680px; height:680px; animation-duration: 18s; }

@keyframes cfContactFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(18px,-16px,0) scale(1.04); }
}

.cf-contact-hero__kicker{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.cf-contact-hero__title{
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.05;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: .75rem;
}
.cf-contact-hero__title .accent{ color:#7b1212; }
.cf-contact-hero__subtitle{
  color: rgba(0,0,0,.65);
  font-size: 1.05rem;
  max-width: 54ch;
}

.cf-contact-hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cf-contact-hero__chips .chip{
  display:inline-flex; align-items:center;
  padding:.45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  font-size: .9rem;
  color: rgba(0,0,0,.75);
}

/* Card rapida */
.cf-contact-hero__card .mini{
  display:flex; align-items:center; gap:.7rem;
  padding:.65rem .7rem;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.6);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cf-contact-hero__card .mini:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.cf-contact-hero__card .mini__icon{
  width:38px; height:38px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123,18,18,.08);
  color:#7b1212;
}
.cf-contact-hero__card .mini__title{ font-weight:800; line-height:1.1; }
.cf-contact-hero__card .mini__sub{ font-size:.85rem; color: rgba(0,0,0,.6); }
.cf-contact-hero__card .mini__go{ margin-left:auto; color: rgba(0,0,0,.35); }
.link-plain{ color: inherit; text-decoration: none; }

/* Form */
.cf-contact-form .form-control,
.cf-contact-form .form-select{
  border-radius: 14px;
}
.cf-contact-form textarea.form-control{
  border-radius: 16px;
}

/* Side info */
.cf-contact-side .info{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.7rem .75rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
}
.cf-contact-side .info__icon{
  width:40px; height:40px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(123,18,18,.08);
  color:#7b1212;
  flex: 0 0 auto;
}
.cf-contact-side .info__t{ font-weight:800; }
.cf-contact-side .info__s{ font-size:.9rem; color: rgba(0,0,0,.6); }

.cf-contact-cta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding:.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
}

.cf-contact-bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding:.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
}
@media (max-width: 576px){
  .cf-contact-cta,
  .cf-contact-bottom{ flex-direction: column; align-items: flex-start; }
}

/* Spaziatura se “cf-section” è stretta */
.cf-section{ padding-top: 1.25rem; padding-bottom: 1.25rem; }