/*
 * ============================================================
 * M.H College
 * File: 40-pages-core.css
 * Purpose:
 * Shared internal-page hero and split-section layouts
 * ============================================================
 */

/*
 * ============================================================
 * Internal page hero
 * ============================================================
 */

.page-hero {
    display: grid;
    align-items: center;

    min-height: 480px;

    padding: 130px 0 70px;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, .97),
            rgba(8, 8, 8, .70)
        ),
        url("../images/luxury-texture.webp")
        center / cover;

    border-bottom: 1px solid var(--line);
}

.page-hero-inner {
    max-width: 850px;
}

.page-hero h1 {
    max-width: 850px;
}

.page-hero p:last-child {
    max-width: 760px;

    color: var(--muted);

    font-size: 1.1rem;
}

/*
 * ============================================================
 * Shared split sections
 * ============================================================
 */

.split-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 70px;

    direction: ltr;
}

.split-grid.reverse .split-media {
    order: 2;
}

/*
 * Split section image
 */

.split-media {
    overflow: hidden;

    min-height: 500px;

    background: #111;

    border: 1px solid var(--line);
    border-radius: 28px;

    box-shadow: var(--shadow);
}

.split-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .85s var(--ease-luxury),
        filter .55s ease;
}

.split-media:hover img {
    transform: scale(1.025);

    filter:
        brightness(1.035)
        saturate(1.025);
}

/*
 * Split section content
 */

.split-copy {
    direction: rtl;
    text-align: right;
}

.split-copy h2 {
    max-width: 650px;

    text-wrap: balance;
}

.split-copy p {
    max-width: 650px;

    color: var(--muted);

    font-size: 1.05rem;
    line-height: 1.9;
}

.split-copy .button {
    margin-top: 20px;
}