/*
|--------------------------------------------------------------------------
| PRCF RESPONSIVE SYSTEM
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| MEMBER ORGANIZATION DETAIL — DESKTOP BASE
|--------------------------------------------------------------------------
*/

.member-organization-layout {
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .5fr);
}


.member-organization-main,
.member-organization-meta,
.member-organization-card {
    min-width: 0;
}


.member-organization-title,
.member-organization-summary,
.member-organization-description,
.member-organization-fallback,
.member-organization-meta,
.member-organization-back {
    overflow-wrap: anywhere;
    word-break: normal;
}



/*
|--------------------------------------------------------------------------
| TABLET / SMALL DESKTOP
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .primary-navigation {
        gap: 14px;
    }


    .primary-navigation a {
        font-size: 0.78rem;
    }


    .page-card-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}



/*
|--------------------------------------------------------------------------
| TABLET / MOBILE NAVIGATION
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .mobile-menu-toggle {
        display: inline-flex;

        align-items: center;

        justify-content: center;
    }


    .primary-navigation {
        display: none;

        position: absolute;

        top: 100%;

        left: 0;
        right: 0;

        padding: 20px;

        background: var(--surface);

        border-bottom:
            1px solid var(--border);

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }


    .primary-navigation.open {
        display: flex;
    }


    .primary-navigation a {
        padding: 12px 5px;

        border-bottom:
            1px solid var(--border);
    }


    .section-grid,
    .feature-panel,
    .institutional-notice {
        grid-template-columns: 1fr;
    }


    .principle-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .roadmap-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .publication-grid {
        grid-template-columns: 1fr;
    }


    .page-overview-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /*
    |--------------------------------------------------------------------------
    | MEMBER ORGANIZATION DETAIL
    |--------------------------------------------------------------------------
    */

    .member-organization-layout {
        grid-template-columns: 1fr;
    }


    .member-organization-main,
    .member-organization-meta {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    .member-organization-meta {
        order: 2;
    }


    /*
    |--------------------------------------------------------------------------
    | MEMBER ORGANIZATION TABLET SPACING
    |--------------------------------------------------------------------------
    |
    | Overrides section inline padding intentionally.
    |
    */

    .member-organization-hero {
        padding:
            3rem
            0
            2.5rem
            !important;
    }


    .member-organization-section {
        padding:
            2.5rem
            0
            3rem
            !important;
    }


    .footer-grid {
        grid-template-columns:
            1fr 1fr;
    }

}



/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .top-bar-inner {
        align-items: flex-start;

        flex-direction: column;

        padding:
            10px 0;
    }


    .display-controls {
        width: 100%;
    }


    .main-header-inner {
        min-height: 72px;
    }


    .brand-mark {
        min-width: 48px;

        height: 48px;

        font-size: 0.8rem;
    }


    .brand-text strong {
        font-size: 0.78rem;
    }


    .brand-text span {
        display: none;
    }


    .language-bar-inner {
        overflow-x: auto;

        white-space: nowrap;
    }


    .language-dropdown {
        position: fixed;

        top: 50%;

        left: 50%;

        right: auto;

        width:
            min(
                90vw,
                320px
            );

        max-height: 75vh;

        overflow-y: auto;

        transform:
            translate(
                -50%,
                -50%
            );
    }


    .hero {
        padding:
            70px 0;
    }


    .home-section,
    .page-section {
        padding:
            65px 0;
    }


    .page-hero {
        padding:
            65px 0;
    }


    .page-breadcrumb {
        margin-bottom: 30px;
    }


    .principle-grid,
    .roadmap-grid,
    .page-card-grid {
        grid-template-columns: 1fr;
    }


    .feature-panel,
    .institutional-notice {
        padding: 28px;
    }


    .section-heading-row {
        align-items: flex-start;

        flex-direction: column;
    }


    .hero-actions {
        align-items: stretch;

        flex-direction: column;
    }


    /*
    |--------------------------------------------------------------------------
    | MEMBER ORGANIZATION MOBILE LAYOUT
    |--------------------------------------------------------------------------
    */

    .member-organization-layout {
        grid-template-columns: 1fr;

        gap: 1.25rem;
    }


    .member-organization-main,
    .member-organization-card,
    .member-organization-meta {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /*
    |--------------------------------------------------------------------------
    | MEMBER ORGANIZATION MOBILE SPACING
    |--------------------------------------------------------------------------
    |
    | Compact public profile spacing.
    | These two !important declarations override the existing inline
    | section padding in view.php.
    |
    */

    .member-organization-hero {
        padding:
            2.25rem
            0
            2rem
            !important;
    }


    .member-organization-section {
        padding:
            2rem
            0
            2.75rem
            !important;
    }


    .member-organization-breadcrumb {
        max-width: 100%;

        margin-bottom:
            1.5rem
            !important;

        overflow-wrap: anywhere;

        line-height: 1.7;
    }


    .member-organization-identity {
        max-width: 100%;
    }


    .member-organization-title {
        max-width: 100%;

        overflow-wrap: anywhere;

        line-height: 1.15;
    }


    .member-organization-summary {
        max-width: 100%;

        margin-top:
            1.15rem
            !important;

        overflow-wrap: anywhere;

        word-break: normal;
    }


    .member-organization-fallback {
        max-width: 100%;

        margin-top:
            1.15rem
            !important;

        overflow-wrap: anywhere;

        word-break: normal;
    }


    .member-organization-description {
        max-width: 100%;

        overflow-wrap: anywhere;

        word-break: normal;
    }


    .member-organization-back a {
        display: inline;

        overflow-wrap: anywhere;
    }


    .footer-grid {
        grid-template-columns: 1fr;
    }

}



/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 420px) {

    .member-organization-hero {
        padding:
            1.75rem
            0
            1.5rem
            !important;
    }


    .member-organization-section {
        padding:
            1.5rem
            0
            2.25rem
            !important;
    }


    .member-organization-card,
    .member-organization-meta {
        padding:
            1.25rem
            !important;
    }


    .member-organization-section {
        overflow-x: hidden;
    }


    .member-organization-title {
        line-height: 1.15;
    }


    .member-organization-fallback {
        padding:
            .85rem
            !important;
    }

}