/*
 * ============================================================
 * M.H College
 * File: 30-home.css
 * Purpose:
 * Homepage sections and homepage-specific layouts
 * ============================================================
 */

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

.hero {
    position: relative;
    overflow: hidden;

    padding: 104px 0 0;

    background:
        radial-gradient(
            circle at 22% 42%,
            rgba(217, 173, 87, .08),
            transparent 34%
        ),
        #080808;

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

.hero-layout {
    display: grid;

    width: min(
        1280px,
        calc(100% - 40px)
    );

    min-height: 640px;

    grid-template-columns:
        minmax(0, 1.17fr)
        minmax(430px, .83fr);

    grid-template-areas:
        "visual copy";

    align-items: stretch;

    direction: ltr;
}

/*
 * Hero visual
 */

.hero-visual {
    grid-area: visual;

    position: relative;
    overflow: hidden;

    min-height: 640px;

    background: #111;

    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 30px 0 0 0;

    box-shadow: var(--shadow);
}

.hero-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, 0) 54%,
            rgba(8, 8, 8, .24) 76%,
            rgba(8, 8, 8, .82) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 8, 8, .02),
            rgba(8, 8, 8, .12)
        );
}

.hero-visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    filter:
        saturate(.9)
        contrast(1.04);
}

/*
 * Hero content
 */

.hero-copy {
    grid-area: copy;

    align-self: center;

    padding: 48px 0 54px 54px;

    direction: rtl;
    text-align: right;
}

.hero h1 {
    max-width: 570px;

    margin: 0;

    font-size: clamp(
        2.7rem,
        3.95vw,
        4.05rem
    );

    line-height: 1.16;
    letter-spacing: -.026em;

    text-wrap: balance;
}

.hero h1 span {
    display: block;

    color: var(--gold-light);
}

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

    margin: 22px 0 26px;

    color: #e0d7c9;

    font-size: 1.06rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 24px;

    color: #d2c7b7;

    font-size: .94rem;
}

.hero-meta a,
.hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-meta .icon {
    color: var(--gold);
}

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

.trust-strip {
    background: linear-gradient(
        180deg,
        #0c0c0b,
        #080808
    );

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

.trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 25px 20px;

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

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

.trust-item h2 {
    margin: 0;

    font-size: 1rem;
}

.trust-item p {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: .84rem;
}

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

.courses-preview {
    padding-bottom: 58px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(193, 139, 49, .09),
            transparent 36%
        ),
        #090909;
}

.course-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}

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

.trainer-section {
    overflow: hidden;

    padding: 58px 0 74px;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(217, 173, 87, .07),
            transparent 34%
        ),
        #080808;

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

.trainer-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, 1fr);

    grid-template-areas:
        "visual content";

    align-items: center;

    gap: 64px;

    direction: ltr;
}

/*
 * Trainer visual
 */

.trainer-visual {
    grid-area: visual;

    position: relative;
    overflow: hidden;

    min-height: 560px;

    background: #111;

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

    box-shadow: var(--shadow);
}

/*
 * Homepage-specific portrait proportions.
 *
 * The higher-specificity selector ensures these proportions stay
 * active even when responsive rules are loaded after this file.
 */

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

    height: clamp(
        460px,
        32vw,
        510px
    );
}

.trainer-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, .01),
            rgba(8, 8, 8, .05) 72%,
            rgba(8, 8, 8, .28)
        ),
        linear-gradient(
            180deg,
            rgba(8, 8, 8, .02),
            rgba(8, 8, 8, .14)
        );
}

.trainer-visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    filter:
        saturate(.9)
        contrast(1.03);

    transition:
        transform .9s var(--ease-luxury),
        filter .6s ease;
}

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

.trainer-visual:hover img {
    transform: scale(1.025);

    filter:
        saturate(.96)
        contrast(1.035)
        brightness(1.025);
}

/*
 * Trainer content
 */

.trainer-content {
    grid-area: content;

    direction: rtl;
    text-align: right;
}

.trainer-content h2 {
    max-width: 620px;

    margin: 0;

    color: var(--gold-light);

    font-size: clamp(
        2.45rem,
        4vw,
        4rem
    );

    line-height: 1.2;

    text-wrap: balance;
}

.trainer-lead {
    max-width: 620px;

    margin: 20px 0 0;

    color: #ddd3c3;

    font-size: 1.06rem;
}

/*
 * Trainer experience badge
 */

.trainer-experience {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;

    margin-top: 22px;
    padding: 14px 20px;

    color: var(--cream);
    background: rgba(217, 173, 87, .07);

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025);

    transition:
        transform .34s var(--ease-luxury),
        border-color .34s ease,
        box-shadow .34s ease,
        background .34s ease;
}

.trainer-experience:hover {
    transform: translateY(-3px);

    border-color: rgba(245, 220, 152, .48);

    background: rgba(217, 173, 87, .105);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .22);
}

.trainer-experience strong {
    color: var(--gold-light);

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

.trainer-experience span {
    font-weight: 800;
}

/*
 * Trainer quotation
 */

.trainer-content blockquote {
    max-width: 610px;

    margin: 24px 0;
    padding: 18px 22px;

    color: var(--cream-2);
    background: rgba(255, 255, 255, .025);

    border-inline-start: 3px solid var(--gold);

    font-size: 1.12rem;
}

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

.dubai-video-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 76px 0;

    background:
        radial-gradient(
            circle at 16% 28%,
            rgba(217, 173, 87, .105),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 74%,
            rgba(122, 77, 27, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0d0c0a,
            #070707
        );

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

.dubai-video-section::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    inset-block-start: -320px;
    inset-inline-start: -180px;

    background: rgba(217, 173, 87, .075);

    border-radius: 50%;

    filter: blur(92px);

    pointer-events: none;
}

.dubai-video-section::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 0,
            transparent 43%,
            rgba(245, 220, 152, .025) 50%,
            transparent 57%,
            transparent 100%
        );
}

.dubai-video-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 390px)
        minmax(0, 1fr);

    grid-template-areas:
        "visual content";

    align-items: center;

    gap: clamp(
        48px,
        7vw,
        92px
    );

    direction: ltr;
}

/*
 * Dubai video content
 */

.dubai-video-content {
    grid-area: content;

    max-width: 690px;

    direction: rtl;
    text-align: right;
}

.dubai-video-content h2 {
    max-width: 680px;

    margin: 0;

    color: var(--cream);

    font-size: clamp(
        2.45rem,
        4.3vw,
        4.2rem
    );

    line-height: 1.17;
    letter-spacing: -.025em;

    text-wrap: balance;
}

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

    margin: 22px 0 0;

    color: #d8cebf;

    font-size: 1.06rem;
    line-height: 1.9;
}

.dubai-video-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin: 22px 0 0;
    padding: 11px 15px;

    color: var(--cream-2);
    background: rgba(217, 173, 87, .065);

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

    font-size: .92rem;
    font-weight: 700;
    line-height: 1.45;
}

.dubai-video-meta .icon {
    flex: 0 0 auto;

    color: var(--gold-light);
}

.dubai-video-prompt {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 24px 0 0;

    color: var(--gold-light);

    font-size: 1rem;
    font-weight: 800;
}

.dubai-video-prompt::before {
    content: "";

    width: 0;
    height: 0;

    border-top:
        6px solid transparent;
    border-bottom:
        6px solid transparent;
    border-left:
        10px solid var(--gold-light);

    filter:
        drop-shadow(
            0 0 7px rgba(217, 173, 87, .28)
        );
}

/*
 * Dubai video card
 */

.dubai-video-card {
    grid-area: visual;

    position: relative;
    isolation: isolate;
    overflow: hidden;

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

    margin: 0;
    padding: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(35, 29, 20, .98),
            rgba(10, 10, 9, .99)
        );

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

    box-shadow:
        0 30px 78px rgba(0, 0, 0, .5),
        0 0 34px rgba(166, 109, 38, .08),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    justify-self: center;
}

.dubai-video-card::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 190px;
    height: 190px;

    inset-block-start: -105px;
    inset-inline-end: -70px;

    background: rgba(217, 173, 87, .14);

    border-radius: 50%;

    filter: blur(48px);

    pointer-events: none;
}

.dubai-video-player {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 9 / 16;

    object-fit: cover;

    color-scheme: dark;
    background: #050505;

    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 21px;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .018);
}

.dubai-video-player:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
}

.dubai-video-card figcaption {
    padding: 12px 10px 5px;

    color: #aa9f90;

    font-size: .78rem;
    line-height: 1.55;
    text-align: center;
}

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

.techniques-section {
    padding-bottom: 58px;

    background: linear-gradient(
        180deg,
        #0b0a09,
        #080808
    );
}

.tech-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 14px;
}

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

.why-section {
    overflow: hidden;

    padding: 58px 0 74px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(217, 173, 87, .055),
            transparent 34%
        ),
        #080808;

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

.why-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .94fr)
        minmax(480px, 1.06fr);

    grid-template-areas:
        "visual content";

    align-items: center;

    gap: 64px;

    direction: ltr;
}

/*
 * Academy visual
 */

.why-visual {
    grid-area: visual;

    position: relative;
    overflow: hidden;

    min-height: 540px;

    background: #111;

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

    box-shadow: var(--shadow);
}

.why-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, .02),
            rgba(8, 8, 8, .08) 76%,
            rgba(8, 8, 8, .3)
        ),
        linear-gradient(
            180deg,
            rgba(8, 8, 8, .02),
            rgba(8, 8, 8, .13)
        );
}

.why-visual img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(.88)
        contrast(1.04);

    transition:
        transform .9s var(--ease-luxury),
        filter .6s ease;
}

.why-visual:hover img {
    transform: scale(1.025);

    filter:
        saturate(.95)
        contrast(1.045)
        brightness(1.025);
}

/*
 * Why-us content
 */

.why-content {
    grid-area: content;

    direction: rtl;
    text-align: right;
}

.why-content .section-heading {
    max-width: 680px;

    margin-bottom: 28px;
}

.why-grid {
    display: grid;

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

    gap: 14px 24px;
}

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

.gallery-section {
    padding-top: 70px;

    background: #0c0b09;
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        1.2fr
        1fr
        1.15fr
        1fr
        1.2fr;

    gap: 12px;
}

.gallery-item {
    position: relative;
    overflow: hidden;

    min-height: 210px;

    margin: 0;

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

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .22);

    transition:
        transform .4s var(--ease-luxury),
        border-color .35s ease,
        box-shadow .4s var(--ease-luxury);
}

.gallery-item::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 54%,
        rgba(10, 7, 3, .24)
    );

    opacity: .58;

    transition:
        opacity .35s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .78s var(--ease-luxury),
        filter .5s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 220, 152, .56);

    box-shadow:
        0 22px 46px rgba(0, 0, 0, .32),
        0 0 20px rgba(217, 173, 87, .08);
}

.gallery-item:hover::after {
    opacity: .2;
}

.gallery-item:hover img {
    transform: scale(1.045);

    filter:
        brightness(1.05)
        saturate(1.04);
}

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

.cta-section {
    position: relative;
    overflow: hidden;

    padding: 76px 0;

    color: var(--text);

    background:
        radial-gradient(
            circle at 80% 42%,
            rgba(217, 173, 87, .105),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 5%,
            rgba(166, 109, 38, .08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0b0a09,
            #060606
        );

    border-top: 1px solid rgba(217, 173, 87, .22);
    border-bottom: 1px solid rgba(217, 173, 87, .14);
}

.cta-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 0,
            transparent 43%,
            rgba(245, 220, 152, .035) 49%,
            transparent 56%,
            transparent 100%
        );

    opacity: .8;
}

.cta-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: min(100%, 1040px);

    gap: 32px;
    padding: 38px 42px;

    color: var(--text);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(217, 173, 87, .12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(29, 25, 18, .98),
            rgba(13, 13, 12, .985)
        );

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

    box-shadow:
        0 28px 72px rgba(0, 0, 0, .42),
        0 0 34px rgba(166, 109, 38, .07),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.cta-inner::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 290px;
    height: 290px;

    inset-block-start: -180px;
    inset-inline-end: -90px;

    background: rgba(217, 173, 87, .12);

    border-radius: 50%;

    filter: blur(58px);

    pointer-events: none;
}

.cta-inner::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 1px;

    border: 1px solid rgba(255, 255, 255, .018);
    border-radius: 27px;

    pointer-events: none;
}

.cta-inner > * {
    position: relative;
    z-index: 1;
}

.cta-inner > div {
    flex: 1 1 auto;

    max-width: 700px;
}

.cta-inner h2 {
    max-width: 680px;

    margin: 0;

    color: var(--cream);

    font-size: clamp(
        1.95rem,
        3.2vw,
        2.85rem
    );

    line-height: 1.28;

    text-wrap: balance;
}

.cta-inner p {
    max-width: 650px;

    margin: 12px 0 0;

    color: #c8beaf;

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

.cta-inner .eyebrow {
    margin-bottom: 8px;

    color: var(--gold-light);
}

.cta-inner .button-dark {
    flex: 0 0 auto;

    min-height: 52px;

    padding: 13px 23px;

    color: #17110a;

    background:
        linear-gradient(
            135deg,
            #f7e4aa,
            #d9ad57 58%,
            #bf8737
        );

    border: 1px solid rgba(255, 244, 211, .76);

    text-shadow: none;

    box-shadow:
        0 16px 34px rgba(166, 109, 38, .28),
        inset 0 1px 0 rgba(255, 255, 255, .48);

    white-space: nowrap;
}

.cta-inner .button-dark:hover {
    color: #0e0b07;

    background:
        linear-gradient(
            135deg,
            #fff0bd,
            #e6bc68 58%,
            #cb9442
        );

    transform:
        translateY(-3px)
        scale(1.015);

    box-shadow:
        0 20px 42px rgba(166, 109, 38, .36),
        0 0 20px rgba(217, 173, 87, .12),
        inset 0 1px 0 rgba(255, 255, 255, .58);
}

.cta-inner .button-dark .icon {
    color: currentColor;
}