/* Hugo-specific global CSS for modern flexbox layout */
/* This file overrides and replaces the old float-based CSS from pc1200.css */

@media (min-width: 1200px) {
    /* #page sections: Two-column bilingual layout with flexbox */
    #page {
        width: 1200px;
        margin: 30px 0;
        padding: 0;
        display: block;
    }

    /* Section container - use flexbox for two-column layout */
    #page .about-section {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    /* Two equal columns: English left, Russian right */
    #page .about-section > div {
        flex: 1 1 50% !important;
        text-align: justify !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 30px !important;
    }

    /* First div (English) - left column */
    #page .about-section > div:first-child {
        order: 1 !important;
    }

    /* Second div (Russian) - right column */
    #page .about-section > div:last-child {
        order: 2 !important;
    }

    /* Headings in sections */
    #page .about-section h2 {
        font-family: CSB !important;
        font-size: 24px !important;
        line-height: 32px !important;
        color: #222222 !important;
        margin: 20px 0 10px 0 !important;
        float: none !important;
        width: 100% !important;
        clear: none !important;
    }

    #page .about-section h2.en {
        text-align: right !important;
    }

    #page .about-section h2.ru {
        text-align: left !important;
    }

    /* Paragraphs and lists in sections */
    #page .about-section p {
        margin: 0 0 20px 0 !important;
        font-family: CS !important;
        font-size: 16px !important;
        line-height: 22px !important;
        text-transform: none !important;
    }

    #page .about-section ol {
        margin: 0 0 20px 10px !important;
        padding: 0 !important;
    }

    #page .about-section li {
        margin: 5px 10px !important;
        font-family: CS !important;
        font-size: 16px !important;
        line-height: 22px !important;
        text-transform: none !important;
    }

    #page .about-section a {
        color: #0066cc !important;
        text-decoration: none !important;
    }

    #page .about-section a:hover {
        text-decoration: underline !important;
    }

    /* Management gallery - full width spanning across sections */
    #page #management {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        clear: both !important;
        margin: 40px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    #page #management h2 {
        font-family: CSB !important;
        font-size: 24px !important;
        line-height: 32px !important;
        color: #222222 !important;
        margin: 40px 0 30px 0 !important;
        text-align: center !important;
        clear: both !important;
        width: 100% !important;
    }

    /* Management grid layout */
    #page .management-grid {
        display: grid !important;
        gap: 30px !important;
        padding: 0 30px !important;
        margin-bottom: 40px !important;
        width: 100% !important;
        clear: both !important;
    }

    #page .management-person {
        text-align: center !important;
        margin: 0 auto !important;
        float: none !important;
        width: auto !important;
    }

    /* Mobile layout: horizontal card with image left, text right */
    @media (max-width: 767px) {
        #page .management-person {
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important;
            text-align: left !important;
            margin: 0 0 20px 0 !important;
            gap: 15px !important;
        }

        #page .management-person img {
            width: 140px !important;
            min-width: 140px !important;
            max-width: 140px !important;
            height: auto !important;
            flex-shrink: 0 !important;
        }

        #page .management-person > div {
            flex: 1 !important;
            text-align: left !important;
        }

        #page .management-person .name-en,
        #page .management-person .name-ru,
        #page .management-person .position-en,
        #page .management-person .position-ru {
            text-align: left !important;
        }
    }

    /* Reset legacy float rules for management section divs */
    #page .management-person > div {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    #page .management-person div {
        float: none !important;
        width: auto !important;
        display: block !important;
    }

    #page .management-person a,
    #page .management-person .person-link {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    #page .management-person img {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }

    #page .management-person img.landscape {
        object-fit: cover !important;
        object-position: center top !important;
    }

    #page .management-person h3 {
        font-family: CSB !important;
        font-size: 16px !important;
        line-height: 20px !important;
        color: #222222 !important;
        margin: 0 0 10px 0 !important;
    }

    #page .management-person .name-en {
        font-family: CS !important;
        font-size: 14px !important;
        line-height: 18px !important;
        color: #555555 !important;
        margin: 0 0 3px 0 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    #page .management-person .name-ru {
        font-family: CSB !important;
        font-size: 16px !important;
        line-height: 20px !important;
        color: #222222 !important;
        margin: 0 0 10px 0 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    #page .management-person .position-en {
        font-family: CS !important;
        font-size: 13px !important;
        line-height: 16px !important;
        color: #777777 !important;
        margin: 0 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    #page .management-person .position-ru {
        font-family: CS !important;
        font-size: 14px !important;
        line-height: 18px !important;
        color: #666666 !important;
        margin: 0 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    /* Management person roles */
    #page .management-person.role-president {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        max-width: 373px !important;
    }

    #page .management-person.role-vp,
    #page .management-person.role-ceo {
        grid-row: 2 !important;
    }

    #page .management-person.role-council {
        grid-row: 3 !important;
    }

    #page .management-divider {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        color: #999 !important;
        font-size: 18px !important;
        margin: 20px 0 !important;
    }

    #page .management-person .person-link {
        display: block !important;
        text-decoration: none !important;
    }

    /* Clear floats */
    #page div.clear {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        height: 10px !important;
    }
}

@media (min-width: 1200px) {
    #page .management-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-auto-flow: dense !important;
    }

    #page .management-person {
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    #page .management-person.role-president {
        grid-column: 1 / -1 !important;
        max-width: 33% !important;
        justify-self: center !important;
    }

    #page .management-person img {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3/4 !important;
    }

    /* Center Business Council if 1 item */
    #page .management-person.role-council:first-of-type:last-of-type {
        grid-column: 2 / 4 !important;
    }

    /* Center Business Council if 2 items */
    #page .management-person.role-council:first-of-type:nth-last-of-type(2) {
        grid-column: 2 !important;
    }
    #page .management-person.role-council:nth-of-type(2):last-of-type {
        grid-column: 3 !important;
    }

    /* Center Business Council if 3 items */
    #page .management-person.role-council:first-of-type:nth-last-of-type(3) {
        grid-column: 1 !important;
    }
    #page .management-person.role-council:nth-of-type(2):nth-last-of-type(2) {
        grid-column: 2 !important;
    }
    #page .management-person.role-council:nth-of-type(3):last-of-type {
        grid-column: 3 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #page {
        width: 100% !important;
        margin: 20px 0 !important;
    }

    #page .about-section {
        flex-direction: column !important;
    }

    #page .about-section > div {
        width: 100% !important;
    }

    #page .management-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }

    #page .management-person {
        max-width: 280px !important;
        text-align: center !important;
    }

    #page .management-person.role-president {
        grid-column: 1 / -1 !important;
        max-width: 33% !important;
        justify-self: center !important;
    }

    #page .management-person img {
        aspect-ratio: 3/4 !important;
    }

    #page .management-person .name-en {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    #page .management-person .name-ru {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    #page #management h2 {
        padding: 0 20px !important;
    }
}

@media (max-width: 767px) {
    #page {
        width: 100% !important;
        margin: 15px 0 !important;
    }

    #page .about-section {
        flex-direction: column !important;
    }

    #page .about-section > div {
        width: 100% !important;
        text-align: left !important;
    }

    #page .about-section h2.en,
    #page .about-section h2.ru {
        text-align: left !important;
        margin: 20px 15px 10px 15px !important;
    }

    #page .about-section p {
        margin: 0 15px 15px 15px !important;
        font-size: 14px !important;
    }

    #page .about-section ol {
        margin: 0 15px 15px 30px !important;
    }

    #page #management {
        width: 100% !important;
        margin: 30px auto !important;
    }

    #page .management-grid {
        display: block !important;
        padding: 0 15px !important;
    }

    #page .management-person {
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin: 0 0 20px 0 !important;
        gap: 15px !important;
    }

    #page .management-person img {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        flex-shrink: 0 !important;
    }

    #page .management-person > div {
        flex: 1 !important;
        text-align: left !important;
    }

    #page .management-person.role-president {
        grid-column: auto !important;
        max-width: 100% !important;
        justify-self: auto !important;
    }

    #page .management-person .name-en {
        font-size: 13px !important;
        line-height: 16px !important;
        text-align: left !important;
    }

    #page .management-person .name-ru {
        font-size: 15px !important;
        line-height: 18px !important;
        text-align: left !important;
    }

    #page .management-person .position-en {
        font-size: 12px !important;
        line-height: 15px !important;
        text-align: left !important;
    }

    #page .management-person .position-ru {
        font-size: 13px !important;
        line-height: 16px !important;
        text-align: left !important;
    }

    #page .management-divider {
        display: block !important;
        margin: 20px 0 !important;
        text-align: center !important;
    }

    #page #management h2 {
        padding: 0 15px !important;
        font-size: 20px !important;
        line-height: 26px !important;
    }
}