/* ============================================================================
   contact.css — pagina Contact us
   Stessa struttura di about.css
   ============================================================================ */

.contact-wrapper {
    box-shadow: none !important;
    padding-top: 70px !important;
    padding-right: 100px;
    padding-bottom: 100px;
}

.contact-title {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 36px;
    color: #2B75F5;
    /* Era 0 (attaccato al breadcrumb): ora 20px, così con i 10px del breadcrumb
       arriva a 30px totali, standard del sito */
    margin: 20px 0 50px 0;
}

.contact-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
}

/* Colonna sinistra */
.contact-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-tag {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #2B75F5;
    margin: 0;
}

.contact-text {
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    color: #323E48;
}

.contact-text p { margin: 0 0 20px 0; }
.contact-text p:last-child { margin-bottom: 0; }
.contact-text strong, .contact-text b { font-weight: 700; }
.contact-text ul li,
.contact-text ol li {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 300 !important;
}

.contact-text .wp-block-list {
    line-height: 24px !important;
}

/* Colonna destra */
.contact-right {
    flex: 0 0 650px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Riquadro contatto */
.contact-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    padding: 20px 30px;
    background: rgba(190, 204, 214, 0.2);
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
}

.contact-card__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.contact-card__name {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    color: #323E48;
    margin: 0;
}

.contact-card__email {
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 20px;
    color: #2B75F5;
    text-decoration: underline;
}

.contact-card__divider {
    width: 0;
    height: 80px;
    border-left: 0.5px solid #323E48;
    flex-shrink: 0;
}

.contact-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-card__job {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #323E48;
    margin: 0;
}

.contact-card__company,
.contact-card__address {
    font-family: 'Geologica', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: #323E48;
    margin: 0;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .contact-wrapper { padding-right: 60px; }
    .contact-right { flex: 0 0 420px; }
}

@media screen and (max-width: 900px) {
    .contact-content { flex-direction: column; }
    .contact-right { flex: none; width: 100%; }
    .contact-wrapper { padding-right: 40px; }
}

/* Mobile: nei riquadri contatto la seconda parte (job title, company, address) va a capo
   sotto la prima, invece di stare accanto separata dalla riga verticale (troppo stretto) */
@media screen and (max-width: 600px) {
    .contact-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .contact-card__main { width: 100%; }
    .contact-card__divider { display: none; }
    .contact-card__email { overflow-wrap: anywhere; }
}