/* --- CONTATTI (layout-only) --- */

/* Hero: riuso il tuo schema, con spaziatura adattata */
#contatti-hero {
    position: relative;
    background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.5));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 720px; /* più basso della home per differenziare */
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #contatti-hero > .container-fluid {
        margin-top: -120px; /* simile all'hero home, ma più “leggero” */
    }

/* Sezione principale */
.section-contatti {
    position: relative;
    padding-top: 180px; /* allineato a services/about */
    padding-bottom: 120px;
}

.contatti-row {
    /* niente extra qui: delego alle card */
}

/* Card form (stile simile alla services-card bianca) */
.contact-card {
    background-color: #ffffffcc !important;
    border: none;
}

.contact-content {
    margin: calc(72/1920 * 100vw) calc(96/1920 * 100vw);
}

.contact-title {
    font-family: "Merriweather";
    font-weight: 400;
    color: #00a084;
}

.contact-desc {
    font-family: "Chivo";
    font-weight: 300;
    margin-bottom: 24px;
}

/* Form */
.contact-form .form-label {
    font-family: "Montserrat";
    font-weight: 600;
}

.contact-form .form-control,
.contact-form .form-select {
    border-color: #e5e7eb;
}

    .contact-form .form-control:focus,
    .contact-form .form-select:focus {
        outline: none;
        box-shadow: 0 0 0 0.05rem white, 0 0 0 0.2rem #00a08433; /* brand delicato */
        border-color: #00a084;
    }

/* Card info (stile scuro come partners-card ma con opacità) */
.contact-info-card {
    background-color: #333333cc !important;
    color: white;
    border: none;
}

.contact-info-content {
    margin: calc(50/1920 * 100vw) calc(40/1920 * 100vw);
    padding: calc(20/1920 * 100vw);
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 12px;
}

.contact-label {
    display: block;
    font-family: "Montserrat";
    font-size: 0.9rem;
    letter-spacing: .02em;
    opacity: .85;
}

.contact-link, .contact-text {
    font-family: "Chivo";
    font-weight: 300;
    color: white;
    text-decoration: none;
}

    .contact-link:hover {
        color: #00a084;
    }

/* Mappa responsive */
.contact-map {
    overflow: hidden;
    margin-top: 8px;
    aspect-ratio:1 / 1; /* mantiene proporzione elegante */
}

    .contact-map iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

.map-placeholder {
    background: #f2f3f5;
    height: 240px;
    display: grid;
    place-items: center;
    color: #333;
    font-family: "Montserrat";
    font-weight: 600;
    letter-spacing: .08em;
}

/* Responsive */
@media (max-width: 992px) {
    .section-contatti {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .contact-content,
    .contact-info-content {
        margin: 0 !important;
        padding: 20px;
    }

    #contatti-hero {
        height: 560px;
    }

        #contatti-hero > .container-fluid {
            margin-top: -60px;
        }
}

@media (max-width: 576px) {
    .contact-title {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .contact-desc {
        font-size: 1rem;
        line-height: 1.6;
    }

    .map-placeholder {
        height: 200px;
    }
}

/* Riutilizzo dei tuoi pulsanti: niente btn-success qui. 
   Se vuoi un primario pieno brand, puoi eventualmente aggiungere:
   (commentato perché per ora usiamo btn-white/btn-grey già presenti)
*/
/*
.btn-brand {
  display: inline-block;
  font-family: "Montserrat";
  font-weight: 600;
  font-size: 16px;
  min-width: 200px;
  height: 48px;
  line-height: 48px;
  color: #fff;
  background-color: #00a084;
  border: 1px solid #00a084;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: filter .3s ease;
}
.btn-brand:hover { filter: brightness(.9); }
*/

/* --- Fix spaziatura sopra il footer solo nella pagina Contatti --- */
body.page-contatti .section-contatti {
    padding-bottom: 40px; /* meno fondo: prima era 120px */
}

body.page-contatti .contact-card,
body.page-contatti .contact-info-card {
    margin-bottom: 0; /* nessun margine extra dalle card */
}

/* --- Pulsante invia richiesta --- */
.btn-submit {
    display: inline-block;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 16px;
    width: 240px;
    height: 48px;
    line-height: 48px;
    background-color: #333; /* sfondo scuro */
    color: #fff; /* testo bianco */
    border: 1px solid #333; /* bordo stesso colore */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-submit:hover {
        background-color: #00a084; /* passa al verde brand */
        border-color: #00a084;
        color: #fff;
    }

.form-check, .form-check > * {
    cursor: pointer;
}