/*
 * ============================================================
 * M.H College
 * File: 93-responsive-about.css
 * Purpose:
 * Responsive About page layouts and components
 * ============================================================
 */

/*
 * ============================================================
 * Medium desktop and tablet landscape
 * Maximum width: 1050px
 * ============================================================
 */

@media (max-width: 1050px) {
    /*
     * Training approach
     */

    .about-approach-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .about-approach-card {
        min-height: 220px;
    }

    /*
     * Dubai professional presence
     */

    .about-dubai-layout {
        grid-template-columns:
            minmax(270px, 330px)
            minmax(0, 1fr);

        gap: 46px;
    }

    .about-dubai-media {
        max-width: 330px;
    }

    .about-dubai-content h2 {
        font-size: clamp(
            2.2rem,
            4.2vw,
            3.35rem
        );
    }
}

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

@media (max-width: 820px) {
    /*
     * ========================================================
     * About story and trainer layouts
     * ========================================================
     */

    .about-story .split-grid,
    .trainer-profile .split-grid {
        gap: 30px;
    }

    .about-story .split-copy,
    .trainer-profile .split-copy {
        width: 100%;
        max-width: 680px;

        margin-inline: auto;
    }

    .about-story .split-copy .button {
        min-height: 50px;
    }

    /*
     * ========================================================
     * Training approach
     * ========================================================
     */

    .about-approach {
        padding-top: 60px;
        padding-bottom: 56px;
    }

    .about-approach .section-heading {
        max-width: 720px;
    }

    .about-approach .section-heading p:last-child {
        max-width: 640px;
    }

    .about-approach-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;
    }

    .about-approach-card {
        min-height: 210px;

        padding: 22px;

        border-radius: 20px;
    }

    .about-approach-icon {
        width: 50px;
        height: 50px;

        margin-bottom: 18px;

        border-radius: 15px;
    }

    .about-approach-icon .icon {
        width: 26px;
        height: 26px;
    }

    .about-approach-card h3 {
        font-size: 1.14rem;
    }

    .about-approach-card p {
        font-size: .9rem;
        line-height: 1.78;
    }

    /*
     * ========================================================
     * Trainer profile
     * ========================================================
     */

    .trainer-profile .split-media {
        min-height: 0;

        height: clamp(
            360px,
            68vw,
            460px
        );
    }

    .trainer-profile .split-media img {
        object-position: center 14%;
    }

    .about-trainer-quote {
        max-width: 620px;

        margin-top: 22px;

        font-size: 1.02rem;
        line-height: 1.82;
    }

    .experience-badge {
        padding: 17px 23px;
    }

    .experience-badge strong {
        font-size: 3rem;
    }

    /*
     * ========================================================
     * Dubai professional presence
     * ========================================================
     */

    .about-dubai {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .about-dubai-layout {
        grid-template-columns: minmax(0, 1fr);

        grid-template-areas:
            "content"
            "visual";

        gap: 34px;

        direction: rtl;
    }

    .about-dubai-content {
        width: 100%;
        max-width: 720px;

        margin-inline: auto;

        text-align: center;
    }

    .about-dubai-content h2,
    .about-dubai-lead {
        margin-inline: auto;
    }

    .about-dubai-content h2 {
        font-size: clamp(
            2.1rem,
            6.6vw,
            3.2rem
        );
    }

    .about-dubai-lead {
        max-width: 640px;

        font-size: 1rem;
        line-height: 1.86;
    }

    .about-dubai-meta {
        display: flex;

        width: max-content;
        max-width: 100%;

        margin-inline: auto;
    }

    .about-dubai-media {
        width: min(100%, 360px);
        max-width: 360px;

        margin-inline: auto;
    }
}

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

@media (max-width: 560px) {
    /*
     * ========================================================
     * About story and trainer layouts
     * ========================================================
     */

    .about-story .split-grid,
    .trainer-profile .split-grid {
        gap: 25px;
    }

    .about-story .split-copy .button {
        width: 100%;
        min-height: 50px;

        justify-content: center;
    }

    /*
     * ========================================================
     * Training approach
     * ========================================================
     */

    .about-approach {
        padding-top: 50px;
        padding-bottom: 46px;
    }

    .about-approach-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .about-approach-card {
        min-height: 0;

        padding: 22px;

        border-radius: 18px;
    }

    .about-approach-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 17px;

        border-radius: 14px;
    }

    .about-approach-icon .icon {
        width: 25px;
        height: 25px;
    }

    .about-approach-card h3 {
        font-size: 1.13rem;
        line-height: 1.52;
    }

    .about-approach-card p {
        margin-top: 9px;

        font-size: .9rem;
        line-height: 1.76;
    }

    /*
     * ========================================================
     * Trainer profile
     * ========================================================
     */

    .trainer-profile .split-media {
        height: clamp(
            350px,
            102vw,
            400px
        );

        border-radius: 20px;
    }

    .about-trainer-quote {
        margin-top: 20px;
        padding: 16px 18px;

        border-radius: 14px;

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

    .experience-badge {
        gap: 8px;

        margin-top: 22px;
        padding: 15px 19px;

        border-radius: 16px;
    }

    .experience-badge strong {
        font-size: 2.55rem;
    }

    .experience-badge span {
        font-size: .92rem;
    }

    /*
     * ========================================================
     * Dubai professional presence
     * ========================================================
     */

    .about-dubai {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .about-dubai-layout {
        gap: 26px;
    }

    .about-dubai-content h2 {
        font-size: clamp(
            1.95rem,
            9.2vw,
            2.65rem
        );

        line-height: 1.23;
    }

    .about-dubai-lead {
        margin-top: 16px;

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

    .about-dubai-meta {
        margin-top: 18px;
        padding: 10px 13px;

        border-radius: 17px;

        font-size: .83rem;
        line-height: 1.55;

        white-space: normal;
    }

    .about-dubai-content .button {
        width: min(100%, 360px);
        min-height: 50px;

        justify-content: center;

        margin-top: 22px;

        text-align: center;
        white-space: normal;
    }

    .about-dubai-media {
        width: min(100%, 340px);

        padding: 7px;

        border-radius: 23px;
    }

    .about-dubai-media img {
        border-radius: 17px;
    }

    .about-dubai-media figcaption {
        padding: 10px 8px 4px;

        font-size: .73rem;
        line-height: 1.5;
    }
}

/*
 * ============================================================
 * Extra-small phones
 * Maximum width: 380px
 * ============================================================
 */

@media (max-width: 380px) {
    /*
     * Training approach
     */

    .about-approach-card {
        padding: 19px;
    }

    /*
     * Trainer profile
     */

    .about-trainer-quote {
        padding: 15px 16px;

        font-size: .94rem;
    }

    .experience-badge {
        padding-inline: 16px;
    }

    .experience-badge strong {
        font-size: 2.35rem;
    }

    /*
     * Dubai professional presence
     */

    .about-dubai-layout {
        gap: 22px;
    }

    .about-dubai-content h2 {
        font-size: clamp(
            1.78rem,
            9.5vw,
            2.18rem
        );
    }

    .about-dubai-meta {
        padding-inline: 11px;

        font-size: .79rem;
    }

    .about-dubai-media {
        width: 100%;

        padding: 6px;

        border-radius: 20px;
    }

    .about-dubai-media img {
        border-radius: 15px;
    }
}