/*
 * ============================================================
 * M.H College
 * File: 43-contact.css
 * Purpose:
 * Contact options, process, course inquiries, FAQ and location
 * ============================================================
 */

/*
 * ============================================================
 * Contact page
 * ============================================================
 */

/*
 * Contact options
 */

.contact-options-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-top: 76px;
    padding-bottom: 68px;

    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(217, 173, 87, .085),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(122, 77, 27, .06),
            transparent 27%
        ),
        #0a0908;

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

.contact-options-section::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 480px;
    height: 480px;

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

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

    border-radius: 50%;

    filter: blur(94px);

    pointer-events: none;
}

.contact-options-section .section-heading {
    max-width: 860px;

    margin-inline: auto;
}

.contact-options-section .section-heading p:last-child {
    max-width: 720px;

    margin-inline: auto;
}

/*
 * Contact option cards
 */

.contact-options-grid {
    display: grid;

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

    gap: 18px;
}

.contact-option-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

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

    padding: 28px;

    background:
        radial-gradient(
            circle at 92% 0,
            rgba(217, 173, 87, .085),
            transparent 31%
        ),
        linear-gradient(
            155deg,
            rgba(26, 23, 18, .98),
            rgba(12, 12, 11, .99)
        );

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

    box-shadow:
        0 18px 46px rgba(0, 0, 0, .28),
        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);
}

.contact-option-card::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    inset-block-start: -112px;
    inset-inline-end: -76px;

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

    border-radius: 50%;

    filter: blur(44px);

    pointer-events: none;
}

.contact-option-card:hover {
    transform: translateY(-6px);

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

    box-shadow:
        0 27px 58px rgba(0, 0, 0, .37),
        0 0 24px rgba(217, 173, 87, .07),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.contact-option-primary {
    background:
        radial-gradient(
            circle at 92% 0,
            rgba(217, 173, 87, .15),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(39, 31, 21, .99),
            rgba(14, 13, 11, .99)
        );

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

    box-shadow:
        0 22px 54px rgba(0, 0, 0, .32),
        0 0 26px rgba(166, 109, 38, .07),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.contact-option-card .icon-box {
    position: relative;
    z-index: 1;

    margin-bottom: 22px;
}

.contact-option-card .eyebrow {
    position: relative;
    z-index: 1;

    margin-bottom: 8px;
}

.contact-option-card h3 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--cream);

    font-size: 1.35rem;
    line-height: 1.5;

    text-wrap: balance;
}

.contact-option-card > p:not(.eyebrow) {
    position: relative;
    z-index: 1;

    margin: 13px 0 25px;

    color: #bfb4a5;

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

.contact-option-card .button {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 50px;

    margin-top: auto;
    padding-inline: 16px;

    justify-content: center;

    line-height: 1.5;
    text-align: center;

    white-space: normal;
}

/*
 * Contact phone strip
 */

.contact-phone-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    margin-top: 22px;
    padding: 22px 26px;

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

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

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

.contact-phone-content {
    display: flex;
    align-items: center;

    gap: 15px;

    flex: 0 0 auto;
}

.contact-phone-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    color: var(--gold-light);
    background: rgba(217, 173, 87, .1);

    border: 1px solid rgba(245, 220, 152, .28);
    border-radius: 14px;
}

.contact-phone-icon .icon {
    width: 25px;
    height: 25px;
}

.contact-phone-content p {
    margin: 0 0 3px;

    color: #aa9f90;

    font-size: .8rem;
    font-weight: 800;
    line-height: 1.5;
}

.contact-phone-content a {
    color: var(--cream);

    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.4;
}

.contact-phone-content a:hover {
    color: var(--gold-light);
}

.contact-phone-strip > p {
    max-width: 590px;

    margin: 0;

    color: #b9ae9f;

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

/*
 * ============================================================
 * Contact process
 * ============================================================
 */

.contact-process-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 23%,
            rgba(217, 173, 87, .095),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 77%,
            rgba(122, 77, 27, .065),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0d0c0a,
            #080808
        );

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

.contact-process-section::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 500px;
    height: 500px;

    inset-block-start: -345px;
    inset-inline-end: -185px;

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

    border-radius: 50%;

    filter: blur(96px);

    pointer-events: none;
}

.contact-process-section .section-heading {
    max-width: 860px;

    margin-inline: auto;
}

.contact-process-section .section-heading p:last-child {
    max-width: 720px;

    margin-inline: auto;
}

.contact-process-grid {
    display: grid;

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

    gap: 18px;
}

.contact-process-card {
    position: relative;
    overflow: hidden;

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

    padding: 26px;

    background:
        linear-gradient(
            155deg,
            rgba(25, 22, 18, .98),
            rgba(12, 12, 11, .99)
        );

    border: 1px solid rgba(217, 173, 87, .22);
    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);
}

.contact-process-card:hover {
    transform: translateY(-5px);

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

    box-shadow:
        0 25px 52px rgba(0, 0, 0, .35),
        0 0 22px rgba(217, 173, 87, .06);
}

.contact-process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 22px;
}

.contact-process-number {
    color: rgba(245, 220, 152, .62);

    font-size: .87rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.contact-process-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

.contact-process-icon .icon {
    width: 27px;
    height: 27px;
}

.contact-process-card h3 {
    margin: 0;

    color: var(--cream);

    font-size: 1.22rem;
    line-height: 1.55;
}

.contact-process-card p {
    margin: 11px 0 0;

    color: #bcb1a2;

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

/*
 * ============================================================
 * Course-specific contact options
 * ============================================================
 */

.contact-courses-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 83% 12%,
            rgba(217, 173, 87, .07),
            transparent 30%
        ),
        #0a0908;

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

.contact-courses-section .section-heading {
    max-width: 860px;

    margin-inline: auto;
}

.contact-courses-section .section-heading p:last-child {
    max-width: 720px;

    margin-inline: auto;
}

.contact-course-grid {
    display: grid;

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

    gap: 18px;
}

.contact-course-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

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

    padding: 27px;

    background:
        radial-gradient(
            circle at 92% 0,
            rgba(217, 173, 87, .08),
            transparent 32%
        ),
        linear-gradient(
            155deg,
            rgba(26, 23, 18, .98),
            rgba(12, 12, 11, .99)
        );

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

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .27),
        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);
}

.contact-course-card::before {
    content: "";

    position: absolute;

    width: 155px;
    height: 155px;

    inset-block-start: -102px;
    inset-inline-end: -72px;

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

    border-radius: 50%;

    filter: blur(42px);

    pointer-events: none;
}

.contact-course-card:hover {
    transform: translateY(-6px);

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

    box-shadow:
        0 26px 55px rgba(0, 0, 0, .36),
        0 0 22px rgba(217, 173, 87, .065);
}

.contact-course-number {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;

    margin-bottom: 20px;

    color: #17110b;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    border: 1px solid rgba(255, 240, 199, .68);
    border-radius: 50%;

    font-size: .88rem;
    font-weight: 900;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .42);
}

.contact-course-card h3 {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--cream);

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

    text-wrap: balance;
}

.contact-course-card > p {
    position: relative;
    z-index: 1;

    margin: 12px 0 24px;

    color: #bcb1a2;

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

.contact-course-actions {
    position: relative;
    z-index: 1;

    display: grid;

    gap: 12px;

    margin-top: auto;
}

.contact-course-actions .text-link {
    min-height: 42px;

    justify-content: flex-start;
}

.contact-course-actions .button {
    width: 100%;
    min-height: 49px;

    justify-content: center;

    padding-inline: 15px;

    font-size: .88rem;
    line-height: 1.5;
    text-align: center;

    white-space: normal;
}

/*
 * ============================================================
 * Contact FAQ
 * ============================================================
 */

.contact-faq-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 26%,
            rgba(217, 173, 87, .085),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #0d0c0a,
            #080808
        );

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

.contact-faq-section::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 460px;
    height: 460px;

    inset-block-end: -315px;
    inset-inline-end: -165px;

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

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}

.contact-faq-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, .82fr)
        minmax(0, 1.18fr);

    align-items: start;

    gap: 66px;

    direction: ltr;
}

.contact-faq-heading {
    position: sticky;

    top: 118px;

    direction: rtl;
    text-align: right;
}

.contact-faq-heading h2 {
    max-width: 560px;

    margin: 0;

    color: var(--cream);

    font-size: clamp(
        2rem,
        3.35vw,
        3.15rem
    );

    line-height: 1.25;

    text-wrap: balance;
}

.contact-faq-heading > p:not(.eyebrow) {
    max-width: 560px;

    margin: 16px 0 0;

    color: #bdb2a3;

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

.contact-faq-heading .button {
    margin-top: 24px;
}

.contact-faq-list {
    display: grid;

    gap: 12px;

    direction: rtl;
}

.contact-faq-item {
    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            rgba(27, 24, 19, .98),
            rgba(12, 12, 11, .99)
        );

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

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

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.contact-faq-item[open] {
    border-color: rgba(245, 220, 152, .42);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .3),
        0 0 18px rgba(217, 173, 87, .05);
}

.contact-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 66px;

    padding: 18px 20px;

    color: var(--cream);

    cursor: pointer;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.65;

    list-style: none;
}

.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.contact-faq-item summary::marker {
    content: "";
}

.contact-faq-item summary:hover {
    color: var(--gold-light);
}

.contact-faq-toggle {
    position: relative;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    border: 1px solid rgba(245, 220, 152, .26);
    border-radius: 9px;
}

.contact-faq-toggle::before,
.contact-faq-toggle::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 12px;
    height: 2px;

    background: var(--gold-light);

    border-radius: 999px;

    transform:
        translate(-50%, -50%);

    transition:
        opacity .25s ease,
        transform .3s ease;
}

.contact-faq-toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.contact-faq-item[open] .contact-faq-toggle::after {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        rotate(180deg);
}

.contact-faq-answer {
    padding: 0 20px 20px;
}

.contact-faq-answer p {
    margin: 0;

    color: #bcb1a2;

    font-size: .92rem;
    line-height: 1.82;
}

/*
 * ============================================================
 * Contact location
 * ============================================================
 */

.contact-location-section {
    position: relative;
    overflow: hidden;

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

.contact-location-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 42px;
}

.contact-location-header > div {
    max-width: 720px;
}

.contact-location-header h2 {
    margin: 0;

    color: var(--cream);

    font-size: clamp(
        2rem,
        3.4vw,
        3.2rem
    );

    line-height: 1.25;

    text-wrap: balance;
}

.contact-location-header > div > p:last-child {
    max-width: 650px;

    margin: 14px 0 0;

    color: #bdb2a3;

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

.contact-location-header .button {
    flex: 0 0 auto;

    min-height: 50px;

    white-space: nowrap;
}

/*
 * Map
 */

.map-shell {
    overflow: hidden;

    min-height: 480px;

    margin-top: 30px;

    background: #111;

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

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

.map-shell iframe {
    display: block;

    width: 100%;
    height: 480px;

    border: 0;

    filter:
        grayscale(.25)
        contrast(1.08);
}