/* Stili base info */
body.info-page {
    background-color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.info-layout {
    display: flex;
    position: relative;
    min-height: 100vh;
    width: 100%;
    background-color: white;
}
.info-left { flex: 0 0 55%; width: 55%; min-height: 100%; background-size: cover; background-position: center; position: relative; }
.info-right { flex: 0 0 45%; width: 45%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 100px 0 120px; box-sizing: border-box; background-color: white; }
.info-content-right { padding: 0 10%; display: flex; flex-direction: column; gap: 50px; } .about-section { display: flex; flex-direction: column; gap: 15px; } .contact-section { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; } .title { font-size: 12px; font-weight: bold; color: #999; }
.text-content p { font-size: 24px; margin-bottom: 15px; line-height: 1.5; } .contact-section ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } .contact-section a { text-decoration: none; color: black; font-weight: bold; }

/* Adatta i colori di header e footer in base allo sfondo su cui si trovano, diventeranno scuri sul bianco e resteranno chiari sul nero! */
body.info-page header, body.info-page footer { mix-blend-mode: normal; }


/* Sezione Competenze */
.competence-section {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 50px;
}

.competence-col {
    flex: 1;
}

.competence-col h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 25px;
}

.competence-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.competence-col li {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .competence-section {
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
    }
}

/* Responsive info.css */
@media (max-width: 1024px) {
    .info-layout {
        flex-direction: column;
        height: auto;
        position: relative;
    }
    body.info-page {
    background-color: #fff;
        overflow: auto;
        height: auto;
    }
    .info-left, .info-right {
        width: 100%;
        flex: 0 0 auto;
    }
    .info-left {
        height: 50vh;
    }
    .info-right {
        height: auto;
        padding: 80px 0 80px 0;
    }
    .info-content-right {
        padding: 0 8%;
    }
}

/* iPad landscape tweaks */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .info-layout { flex-direction: column; }
    .info-left { height: 45vh; background-position: center; }
    .info-right { padding: 60px 4% 80px; }
    .info-content-right { padding: 0 6%; }
    .text-content p { font-size: 20px; }
}
@media (max-width: 768px) {
    .text-content p {
        font-size: 18px;
    }
    .contact-section ul {
        flex-direction: column;
        gap: 10px;
    }
    .info-left {
        height: 60vh;
    }
}