/*
 * BNI Perugia — Mission desktop fix
 * Interviene SOLO da 768px in su.
 * La versione mobile resta invariata.
 */

@media (min-width: 768px) {

    /* Contenitore generale Mission */
    #aboutOurMission {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    /* Riga principale */
    #aboutOurMission > .row {
        display: flex !important;
        align-items: stretch !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Colonna immagine */
    #aboutOurMission > .row > .col-md-8 {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        width: 66.66666667% !important;
        float: none !important;
        min-height: 520px;
        overflow: visible !important;
    }

    /* Immagine */
    #aboutOurMission > .row > .col-md-8 > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 520px;
        object-fit: cover;
        margin: 0 !important;
    }

    /* Colonna rossa */
    #aboutOurMission > .row > .col-md-4 {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        width: 33.33333333% !important;
        float: none !important;
        min-height: 520px;
        background: #cf2030 !important;
        overflow: visible !important;
    }

    /* Nasconde sempre la versione mobile su desktop */
    #aboutOurMission .mobile_aboutMissionContent {
        display: none !important;
    }

    /* Titolo desktop */
    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading {
        display: flex !important;
        position: absolute !important;
        right: -2px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 42% !important;
        min-width: 320px;
        max-width: 460px;

        min-height: 190px;
        padding: 38px 34px !important;

        align-items: center !important;
        justify-content: flex-start !important;

        background: #ffffff !important;
        box-sizing: border-box !important;
        z-index: 4 !important;
    }

    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading .headingTitle {
        margin: 0 !important;
        padding: 0 24px 0 0 !important;

        color: #cf2030 !important;
        font-size: 36px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;

        border-right: 4px solid #cf2030 !important;
        box-sizing: border-box !important;
    }

    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading .headingTitle::after {
        display: none !important;
    }

    /* Testo desktop */
    #aboutOurMission > .row > .col-md-4 > .aboutMissionDescription {
        display: flex !important;
        position: absolute !important;

        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: calc(100% + 110px) !important;
        max-width: 520px;

        min-height: 190px;
        padding: 34px 38px !important;

        align-items: center !important;

        background: #ffffff !important;
        box-sizing: border-box !important;
        z-index: 3 !important;
    }

    #aboutOurMission > .row > .col-md-4 > .aboutMissionDescription p {
        margin: 0 !important;
        padding: 0 !important;

        color: #292727 !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
        text-align: left !important;
    }
}

/* Desktop più stretto / tablet landscape */
@media (min-width: 768px) and (max-width: 991px) {

    #aboutOurMission > .row > .col-md-8,
    #aboutOurMission > .row > .col-md-4 {
        min-height: 440px;
    }

    #aboutOurMission > .row > .col-md-8 > img {
        min-height: 440px;
    }

    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading {
        width: 48% !important;
        min-width: 280px;
        min-height: 160px;
        padding: 28px 24px !important;
    }

    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading .headingTitle {
        font-size: 28px !important;
    }

    #aboutOurMission > .row > .col-md-4 > .aboutMissionDescription {
        width: calc(100% + 70px) !important;
        min-height: 160px;
        padding: 26px 28px !important;
    }

    #aboutOurMission > .row > .col-md-4 > .aboutMissionDescription p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}


/* ============================================================
   V2 — FIX FINALE SEPARATORE / CUCITURA DESKTOP
   ============================================================ */

@media (min-width: 768px) {

    /* Neutralizza bordi e pseudo-elementi ereditati da vecchi CSS */
    #aboutOurMission .aboutMissionHeading,
    #aboutOurMission .aboutMissionDescription {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    #aboutOurMission .aboutMissionHeading::before,
    #aboutOurMission .aboutMissionHeading::after,
    #aboutOurMission .aboutMissionDescription::before,
    #aboutOurMission .aboutMissionDescription::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
    }

    /* Unico separatore rosso: quello accanto al titolo */
    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading .headingTitle {
        border-left: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-right: 4px solid #cf2030 !important;
    }

    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading .headingTitle::before,
    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading .headingTitle::after {
        content: none !important;
        display: none !important;
    }

    /* Chiude la piccola fessura tra i due pannelli */
    #aboutOurMission > .row > .col-md-8 > .aboutMissionHeading {
        right: -1px !important;
    }

    #aboutOurMission > .row > .col-md-4 > .aboutMissionDescription {
        left: -1px !important;
    }
}