/*
 * ============================================================
 * M.H College
 * File: 41-about.css
 * Purpose:
 * About page story, training approach, trainer and Dubai sections
 * ============================================================
 */

/*
 * ============================================================
 * College story
 * ============================================================
 */

.about-story {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(217, 173, 87, .065),
            transparent 31%
        ),
        #0a0908;
}

.about-story::before {
    content: "";

    position: absolute;

    width: 440px;
    height: 440px;

    inset-block-start: -300px;
    inset-inline-start: -170px;

    background: rgba(166, 109, 38, .055);

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}

.about-story > .container {
    position: relative;
    z-index: 1;
}

.about-story .split-media {
    position: relative;
}

.about-story .split-media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(8, 8, 8, .01),
            rgba(8, 8, 8, .15)
        );

    opacity: .58;
}

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

.about-approach {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 24%,
            rgba(217, 173, 87, .09),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 76%,
            rgba(123, 75, 25, .065),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0d0c0a,
            #080808
        );

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

.about-approach::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 500px;
    height: 500px;

    inset-block-start: -340px;
    inset-inline-end: -190px;

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

    border-radius: 50%;

    filter: blur(96px);

    pointer-events: none;
}

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

    margin-inline: auto;
}

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

    margin-inline: auto;
}

/*
 * Training approach grid
 */

.about-approach-grid {
    display: grid;

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

    gap: 18px;
}

.about-approach-card {
    position: relative;
    overflow: hidden;

    min-width: 0;
    min-height: 245px;

    padding: 26px 23px;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(217, 173, 87, .09),
            transparent 33%
        ),
        linear-gradient(
            155deg,
            rgba(27, 24, 19, .98),
            rgba(12, 12, 11, .99)
        );

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

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

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

.about-approach-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

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

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

    border-radius: 50%;

    filter: blur(42px);

    pointer-events: none;
}

.about-approach-card:hover {
    transform: translateY(-6px);

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

    box-shadow:
        0 26px 54px rgba(0, 0, 0, .36),
        0 0 22px rgba(217, 173, 87, .065),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.about-approach-icon {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom: 21px;

    color: var(--gold-light);

    background:
        linear-gradient(
            145deg,
            rgba(217, 173, 87, .15),
            rgba(217, 173, 87, .045)
        );

    border: 1px solid rgba(245, 220, 152, .3);
    border-radius: 16px;

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

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

.about-approach-card h3 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--cream);

    font-size: 1.18rem;
    line-height: 1.55;

    text-wrap: balance;
}

.about-approach-card p {
    position: relative;
    z-index: 1;

    margin: 10px 0 0;

    color: #bdb2a3;

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

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

.trainer-profile {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(217, 173, 87, .07),
            transparent 33%
        ),
        #0d0c0b;
}

.trainer-profile::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    inset-block-end: -300px;
    inset-inline-start: -160px;

    background: rgba(166, 109, 38, .055);

    border-radius: 50%;

    filter: blur(88px);

    pointer-events: none;
}

.trainer-profile > .container {
    position: relative;
    z-index: 1;
}

/*
 * Trainer portrait
 */

.trainer-profile .split-media {
    position: relative;

    min-height: 0;

    height: clamp(
        440px,
        34vw,
        480px
    );
}

.trainer-profile .split-media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(8, 8, 8, .01),
            rgba(8, 8, 8, .14)
        );

    opacity: .55;
}

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

/*
 * Trainer quotation
 */

.about-trainer-quote {
    position: relative;

    max-width: 620px;

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

    color: var(--cream-2);

    background:
        linear-gradient(
            90deg,
            rgba(217, 173, 87, .075),
            rgba(255, 255, 255, .018)
        );

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

    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.85;

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

/*
 * Experience badge
 */

.experience-badge {
    display: inline-flex;
    align-items: baseline;

    gap: 10px;

    margin-top: 28px;
    padding: 20px 28px;

    background:
        linear-gradient(
            180deg,
            rgba(218, 173, 87, .08),
            rgba(218, 173, 87, .035)
        );

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

    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;
}

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

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

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

    box-shadow:
        0 15px 34px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

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

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

.experience-badge span {
    color: var(--cream);

    font-weight: 800;
}

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

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

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

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

.about-dubai::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 520px;
    height: 520px;

    inset-block-start: -335px;
    inset-inline-start: -190px;

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

    border-radius: 50%;

    filter: blur(94px);

    pointer-events: none;
}

.about-dubai::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 layout
 */

.about-dubai-layout {
    display: grid;

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

    grid-template-areas:
        "visual content";

    align-items: center;

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

    direction: ltr;
}

/*
 * Dubai poster
 */

.about-dubai-media {
    grid-area: visual;

    position: relative;
    overflow: hidden;

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

    margin: 0;
    padding: 9px;

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

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

    box-shadow:
        0 30px 76px rgba(0, 0, 0, .48),
        0 0 32px rgba(166, 109, 38, .075),
        inset 0 1px 0 rgba(255, 255, 255, .04);

    justify-self: center;
}

.about-dubai-media::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    inset-block-start: -110px;
    inset-inline-end: -75px;

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

    border-radius: 50%;

    filter: blur(48px);

    pointer-events: none;
}

.about-dubai-media img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 9 / 16;

    object-fit: cover;

    background: #050505;

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

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

.about-dubai-media:hover img {
    transform: scale(1.015);

    filter:
        brightness(1.025)
        saturate(1.025);
}

.about-dubai-media figcaption {
    position: relative;
    z-index: 1;

    padding: 12px 10px 5px;

    color: #aa9f90;

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

/*
 * Dubai content
 */

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

    max-width: 700px;

    direction: rtl;
    text-align: right;
}

.about-dubai-content h2 {
    max-width: 690px;

    margin: 0;

    color: var(--cream);

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

    line-height: 1.18;
    letter-spacing: -.023em;

    text-wrap: balance;
}

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

    margin: 22px 0 0;

    color: #d3c9ba;

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

.about-dubai-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: .91rem;
    font-weight: 700;
    line-height: 1.45;
}

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

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

.about-dubai-content .button {
    margin-top: 26px;
}