/*
 * ============================================================
 * M.H College
 * File: 92-responsive-home.css
 * Purpose:
 * Responsive homepage sections and homepage-specific layouts
 * ============================================================
 */

/*
 * ============================================================
 * Medium desktop
 * Width: 821px to 1100px
 * ============================================================
 */

@media (min-width: 821px) and (max-width: 1100px) {
    /*
     * Homepage trainer portrait
     */

    body.page-home .trainer-visual {
        height: clamp(
            440px,
            45vw,
            490px
        );
    }

    body.page-home .trainer-visual img {
        object-position: center 13%;
    }

    /*
     * Dubai masterclass video
     */

    .dubai-video-layout {
        grid-template-columns:
            minmax(280px, 350px)
            minmax(0, 1fr);

        gap: 44px;
    }

    .dubai-video-content h2 {
        font-size: clamp(
            2.25rem,
            4.4vw,
            3.4rem
        );
    }

    .dubai-video-card {
        max-width: 350px;

        border-radius: 27px;
    }

    .dubai-video-player {
        border-radius: 19px;
    }
}

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

@media (max-width: 1050px) {
    /*
     * ========================================================
     * Hero
     * ========================================================
     */

    .hero-layout {
        width: min(
            calc(100% - 40px),
            1180px
        );

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, .92fr);
    }

    .hero-copy {
        padding-left: 38px;
    }

    .hero h1 {
        font-size: clamp(
            2.5rem,
            4.7vw,
            3.75rem
        );
    }

    /*
     * ========================================================
     * Trust strip
     * ========================================================
     */

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

    .trust-item:nth-child(2) {
        border-inline-end: 0;
    }

    /*
     * ========================================================
     * Course preview
     * ========================================================
     */

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

    .course-card:last-child {
        grid-column: 1 / -1;

        max-width: 560px;

        margin-inline: auto;
    }

    /*
     * ========================================================
     * Trainer section
     * ========================================================
     */

    .trainer-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, 1fr);

        gap: 40px;
    }

    .trainer-content h2 {
        font-size: clamp(
            2.3rem,
            4.5vw,
            3.6rem
        );
    }

    /*
     * ========================================================
     * Dubai masterclass video
     * ========================================================
     */

    .dubai-video-layout {
        grid-template-columns:
            minmax(280px, 340px)
            minmax(0, 1fr);

        gap: 42px;
    }

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

    .dubai-video-card {
        max-width: 340px;
    }

    /*
     * ========================================================
     * Techniques
     * ========================================================
     */

    .tech-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    /*
     * ========================================================
     * Why choose us
     * ========================================================
     */

    .why-layout {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(430px, 1.1fr);

        gap: 40px;
    }

    /*
     * ========================================================
     * Gallery
     * ========================================================
     */

    .gallery-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .gallery-item:nth-child(4),
    .gallery-item:nth-child(5) {
        display: none;
    }
}

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

@media (max-width: 820px) {
    /*
     * ========================================================
     * Homepage section spacing
     * ========================================================
     */

    .courses-preview {
        padding-top: 64px;
        padding-bottom: 50px;
    }

    .trainer-section,
    .why-section {
        padding: 56px 0 64px;
    }

    .dubai-video-section {
        padding: 60px 0;
    }

    .techniques-section {
        padding-top: 64px;
        padding-bottom: 52px;
    }

    .gallery-section {
        padding-top: 60px;
        padding-bottom: 64px;
    }

    .cta-section {
        padding: 52px 0;
    }

    /*
     * ========================================================
     * Hero
     * ========================================================
     */

    .hero {
        padding-top: 78px;
    }

    .hero-layout {
        width: min(
            calc(100% - 28px),
            var(--container)
        );

        min-height: 0;

        grid-template-columns: 1fr;

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

        gap: 0;
    }

    /*
     * Keep the image prominent without allowing it to occupy
     * the entire first mobile viewport.
     */

    .hero-visual {
        min-height: 0;

        height: clamp(
            340px,
            58vw,
            480px
        );

        border-radius: 24px 24px 0 0;
    }

    .hero-visual img {
        object-position: center 42%;
    }

    .hero-visual::after {
        background: linear-gradient(
            180deg,
            rgba(8, 8, 8, .01) 46%,
            rgba(8, 8, 8, .24) 70%,
            #080808 100%
        );
    }

    /*
     * Hero content
     */

    .hero-copy {
        padding: 30px 14px 46px;

        text-align: center;
    }

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

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

    .hero h1 {
        max-width: 760px;

        margin-inline: auto;

        font-size: clamp(
            2.2rem,
            7vw,
            3.65rem
        );

        line-height: 1.2;
        letter-spacing: -.018em;

        text-wrap: balance;
    }

    .hero h1 span {
        margin-top: 2px;
    }

    .hero-intro {
        max-width: 620px;

        margin: 18px auto 22px;

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

    .hero-actions {
        justify-content: center;

        gap: 12px;
    }

    .hero-actions .button {
        min-height: 50px;
    }

    .hero-meta {
        justify-content: center;

        gap: 12px 18px;

        margin-top: 20px;

        line-height: 1.6;
    }

    /*
     * ========================================================
     * Trust strip
     * ========================================================
     */

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

    .trust-item {
        padding: 22px 18px;
    }

    .trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

    .trust-item:nth-child(2n) {
        border-inline-end: 0;
    }

    .trust-item .icon {
        width: 44px;
        height: 44px;
    }

    /*
     * ========================================================
     * Course preview
     * ========================================================
     */

    .course-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .course-card,
    .course-card:last-child {
        grid-column: auto;

        width: 100%;
        max-width: 620px;

        margin-inline: auto;

        border-radius: 22px;
    }

    .course-image {
        aspect-ratio: 16 / 10;
    }

    .course-body {
        padding: 22px;
    }

    .course-body h3 {
        margin-bottom: 7px;

        font-size: 1.28rem;
    }

    .course-body p {
        margin-bottom: 18px;

        line-height: 1.8;
    }

    .course-number {
        top: 14px;
        inset-inline-end: 14px;

        width: 46px;
        height: 46px;
    }

    .center-action {
        margin-top: 24px;
    }

    /*
     * ========================================================
     * Trainer section
     * ========================================================
     */

    .trainer-layout {
        grid-template-columns: 1fr;

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

        gap: 30px;
    }

    .trainer-visual {
        min-height: 0;

        height: clamp(
            430px,
            72vw,
            560px
        );

        border-radius: 24px;
    }

    /*
     * Homepage-specific trainer dimensions take precedence
     * over the shared trainer dimensions above.
     */

    body.page-home .trainer-visual {
        min-height: 0;

        height: clamp(
            390px,
            68vw,
            470px
        );
    }

    body.page-home .trainer-visual img {
        object-position: center 13%;
    }

    .trainer-content {
        text-align: center;
    }

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

    .trainer-content h2 {
        font-size: clamp(
            2.2rem,
            6.5vw,
            3.4rem
        );
    }

    .trainer-lead {
        font-size: 1.02rem;
        line-height: 1.9;
    }

    .trainer-experience {
        margin-inline: auto;
        padding: 14px 20px;
    }

    .trainer-experience strong {
        font-size: 2.5rem;
    }

    .trainer-content blockquote {
        margin-inline: auto;

        font-size: 1.05rem;
        line-height: 1.85;
        text-align: start;
    }

    .trainer-content .text-link {
        justify-content: center;
    }

    /*
     * ========================================================
     * Dubai masterclass video
     * ========================================================
     */

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

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

        gap: 34px;

        direction: rtl;
    }

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

        margin-inline: auto;

        text-align: center;
    }

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

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

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

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

    .dubai-video-meta,
    .dubai-video-prompt {
        justify-content: center;
    }

    .dubai-video-card {
        width: min(100%, 390px);
        max-width: 390px;

        margin-inline: auto;
    }

    /*
     * ========================================================
     * Techniques
     * ========================================================
     */

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

        gap: 12px;
    }

    .tech-card {
        display: grid;
        place-items: center;
        align-content: center;

        min-height: 145px;

        padding: 22px 10px;
    }

    .tech-card .icon {
        width: 44px;
        height: 44px;
    }

    .tech-card h3 {
        font-size: .95rem;
        line-height: 1.55;
    }

    /*
     * ========================================================
     * Why choose us
     * ========================================================
     */

    .why-layout {
        grid-template-columns: 1fr;

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

        gap: 30px;
    }

    .why-visual {
        min-height: 0;

        height: clamp(
            360px,
            58vw,
            480px
        );

        border-radius: 24px;
    }

    .why-content {
        text-align: right;
    }

    .why-content .section-heading {
        margin-bottom: 24px;
    }

    .why-grid {
        gap: 12px 16px;
    }

    .why-item {
        min-height: 132px;

        padding: 18px 16px;
    }

    /*
     * ========================================================
     * Gallery
     * ========================================================
     */

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

        gap: 10px;
    }

    .gallery-item:nth-child(n) {
        display: block;

        min-height: 190px;
    }

    .gallery-item:last-child {
        grid-column: 1 / -1;

        min-height: 240px;
    }

    /*
     * ========================================================
     * CTA
     * ========================================================
     */

    .cta-inner {
        flex-direction: column;
        align-items: center;

        width: 100%;

        gap: 24px;
        padding: 34px 30px;

        border-radius: 24px;

        text-align: center;
    }

    .cta-inner::after {
        border-radius: 23px;
    }

    .cta-inner > div {
        max-width: 680px;
    }

    .cta-inner h2,
    .cta-inner p {
        margin-inline: auto;
    }

    .cta-inner h2 {
        font-size: clamp(
            2rem,
            6vw,
            3rem
        );
    }

    .cta-inner .button {
        min-width: 220px;
    }
}

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

@media (max-width: 560px) {
    /*
     * ========================================================
     * Homepage section spacing
     * ========================================================
     */

    .courses-preview {
        padding: 52px 0 42px;
    }

    .trainer-section,
    .why-section {
        padding: 44px 0 52px;
    }

    .dubai-video-section {
        padding: 50px 0;
    }

    .techniques-section {
        padding: 52px 0 44px;
    }

    .gallery-section {
        padding: 50px 0;
    }

    .cta-section {
        padding: 44px 0;
    }

    /*
     * ========================================================
     * Hero
     * ========================================================
     */

    .hero {
        padding-top: 70px;
    }

    .hero-layout {
        width: min(
            calc(100% - 24px),
            var(--container)
        );
    }

    .hero-visual {
        min-height: 0;

        height: clamp(
            300px,
            84vw,
            370px
        );

        border-radius: 20px 20px 0 0;
    }

    .hero-visual img {
        object-position: center 40%;
    }

    .hero-copy {
        padding: 24px 0 38px;
    }

    .hero-copy .eyebrow {
        margin-bottom: 6px;

        font-size: .82rem;
    }

    .hero h1 {
        max-width: 100%;

        font-size: clamp(
            1.95rem,
            9.2vw,
            2.75rem
        );

        line-height: 1.2;
        letter-spacing: -.012em;
    }

    .hero-intro {
        margin: 16px auto 20px;

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

    /*
     * Stack the main hero actions into comfortable
     * full-width touch targets.
     */

    .hero-actions {
        display: grid;

        width: 100%;
        max-width: 420px;

        gap: 10px;

        margin-inline: auto;
    }

    .hero-actions .button {
        width: 100%;
        min-height: 50px;

        padding: 11px 18px;
    }

    /*
     * Keep location and audience information readable instead
     * of allowing the items to wrap unpredictably.
     */

    .hero-meta {
        display: grid;

        width: 100%;
        max-width: 420px;

        gap: 8px;

        margin: 18px auto 0;
    }

    .hero-meta a,
    .hero-meta > span {
        justify-content: center;

        min-height: 42px;

        padding: 8px 12px;

        background: rgba(255, 255, 255, .018);

        border: 1px solid rgba(217, 173, 87, .18);
        border-radius: 12px;

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

    /*
     * ========================================================
     * Trust strip
     * ========================================================
     */

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

    .trust-item,
    .trust-item:nth-child(-n + 2) {
        padding: 18px 0;

        border-inline-end: 0;
        border-bottom: 1px solid var(--line);
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .trust-item .icon {
        width: 42px;
        height: 42px;
    }

    .trust-item h2 {
        font-size: .96rem;
    }

    .trust-item p {
        font-size: .82rem;
        line-height: 1.6;
    }

    /*
     * ========================================================
     * Course preview
     * ========================================================
     */

    .course-grid {
        gap: 16px;
    }

    .course-card,
    .course-card:last-child {
        max-width: none;

        border-radius: 20px;
    }

    .course-image {
        aspect-ratio: 16 / 10;
    }

    .course-body {
        padding: 20px;
    }

    .course-body h3 {
        font-size: 1.2rem;
    }

    .course-body p {
        margin-bottom: 16px;

        font-size: .94rem;
        line-height: 1.78;
    }

    .course-number {
        width: 44px;
        height: 44px;
    }

    .course-body .text-link {
        min-height: 44px;
    }

    /*
     * ========================================================
     * Trainer section
     * ========================================================
     */

    .trainer-layout {
        gap: 26px;
    }

    .trainer-visual {
        min-height: 0;

        height: clamp(
            360px,
            110vw,
            430px
        );

        border-radius: 20px;
    }

    body.page-home .trainer-visual {
        height: clamp(
            340px,
            100vw,
            400px
        );

        border-radius: 20px;
    }

    body.page-home .trainer-visual img {
        object-position: center 12%;
    }

    .trainer-content h2 {
        font-size: clamp(
            2rem,
            9vw,
            2.7rem
        );
    }

    .trainer-lead {
        font-size: .96rem;
        line-height: 1.85;
    }

    .trainer-experience {
        padding: 12px 16px;
    }

    .trainer-experience strong {
        font-size: 2.2rem;
    }

    .trainer-content blockquote {
        margin-block: 20px;
        padding: 16px 18px;

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

    .trainer-content .text-link {
        min-height: 44px;
    }

    /*
     * ========================================================
     * Dubai masterclass video
     * ========================================================
     */

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

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

        line-height: 1.23;
    }

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

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

    .dubai-video-meta {
        max-width: 100%;

        margin-top: 18px;
        padding: 10px 13px;

        border-radius: 17px;

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

        white-space: normal;
    }

    .dubai-video-prompt {
        margin-top: 18px;

        font-size: .93rem;
    }

    .dubai-video-card {
        width: min(100%, 350px);

        padding: 7px;

        border-radius: 23px;
    }

    .dubai-video-player {
        border-radius: 17px;
    }

    .dubai-video-card figcaption {
        padding: 10px 8px 4px;

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

    /*
     * ========================================================
     * Techniques
     * ========================================================
     */

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

        gap: 10px;
    }

    .tech-card {
        min-height: 128px;

        padding: 18px 8px;

        border-radius: 15px;
    }

    .tech-card .icon {
        width: 40px;
        height: 40px;
    }

    .tech-card h3 {
        font-size: .88rem;
        line-height: 1.5;
    }

    /*
     * ========================================================
     * Why choose us
     * ========================================================
     */

    .why-layout {
        gap: 26px;
    }

    .why-visual {
        min-height: 0;

        height: clamp(
            280px,
            78vw,
            340px
        );

        border-radius: 20px;
    }

    .why-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .why-item {
        min-height: 0;

        padding: 18px;

        background: linear-gradient(
            180deg,
            rgba(217, 173, 87, .055),
            rgba(255, 255, 255, .01)
        );

        border: 1px solid var(--line);
        border-radius: 16px;
    }

    /*
     * ========================================================
     * Gallery
     * ========================================================
     */

    .gallery-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .gallery-item:nth-child(n),
    .gallery-item:last-child {
        display: block;

        grid-column: auto;

        min-height: 220px;

        border-radius: 15px;
    }

    /*
     * ========================================================
     * CTA
     * ========================================================
     */

    .cta-inner {
        align-items: stretch;

        gap: 22px;
        padding: 28px 20px;

        border-radius: 20px;

        text-align: center;
    }

    .cta-inner::after {
        border-radius: 19px;
    }

    .cta-inner h2 {
        font-size: clamp(
            1.85rem,
            8vw,
            2.45rem
        );
    }

    .cta-inner p {
        font-size: .95rem;
        line-height: 1.75;
    }

    .cta-inner .button {
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }

    .cta-inner .button-dark {
        white-space: normal;
    }
}

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

@media (max-width: 380px) {
    /*
     * Dubai masterclass video
     */

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

    .dubai-video-content h2 {
        font-size: clamp(
            1.82rem,
            10vw,
            2.2rem
        );
    }

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

        font-size: .79rem;
    }

    .dubai-video-card {
        width: 100%;

        padding: 6px;

        border-radius: 20px;
    }

    .dubai-video-player {
        border-radius: 15px;
    }

    /*
     * Techniques
     */

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

    .tech-card {
        min-height: 116px;
    }
}