/*
 * ============================================================
 * M.H College
 * File: 93-responsive-pages-core.css
 * Purpose:
 * Responsive shared internal-page hero and split layouts
 * ============================================================
 */

/*
 * ============================================================
 * Tablet and mobile
 * Maximum width: 820px
 * ============================================================
 */

@media (max-width: 820px) {
    /*
     * ========================================================
     * Internal page hero
     * ========================================================
     */

    .page-hero {
        min-height: clamp(
            350px,
            48vw,
            400px
        );

        padding: 116px 0 56px;
    }

    .page-hero-inner {
        max-width: 760px;
    }

    .page-hero .eyebrow {
        margin-bottom: 8px;

        font-size: .88rem;
        line-height: 1.6;
    }

    .page-hero h1 {
        font-size: clamp(
            2rem,
            6.2vw,
            3rem
        );

        line-height: 1.24;

        text-wrap: balance;
    }

    .page-hero p:last-child {
        margin-top: 14px;

        font-size: 1rem;
        line-height: 1.85;

        overflow-wrap: break-word;
    }

    /*
     * ========================================================
     * Shared split layouts
     * ========================================================
     */

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

    /*
     * Alternating desktop layouts return to their natural
     * content order on tablet and mobile.
     */

    .split-grid.reverse .split-media {
        order: 0;
    }

    /*
     * Shared split media
     */

    .split-media {
        min-height: 360px;
    }
}

/*
 * ============================================================
 * Small mobile
 * Maximum width: 560px
 * ============================================================
 */

@media (max-width: 560px) {
    /*
     * ========================================================
     * Internal page hero
     * ========================================================
     */

    .page-hero {
        min-height: 320px;

        padding: 100px 0 44px;
    }

    .page-hero .eyebrow {
        margin-bottom: 7px;

        font-size: .82rem;
    }

    .page-hero h1 {
        font-size: clamp(
            1.9rem,
            9vw,
            2.55rem
        );

        line-height: 1.25;
    }

    .page-hero p:last-child {
        margin-top: 12px;

        font-size: .95rem;
        line-height: 1.8;
    }

    /*
     * ========================================================
     * Shared split media
     * ========================================================
     */

    .split-media {
        min-height: 320px;

        border-radius: 20px;
    }
}