/*
 *  * =========================================================
 *   * ASPIRE TO CHANGE THERAPY, LLC
 *    * ABOUT PAGE STYLES
 *     *
 *      * File:
 *       * /newsite/assets/css/about.css
 *        *
 *         * Loaded after:
 *          * style.css
 *           * blog.css
 *            *
 *             * Used by the pages under the About section.
 *              * =========================================================
 *               */


/* =========================================================
 *    BASE
 *       ========================================================= */

.about-page {
    background: var(--white);
}

.about-page main {
    overflow: hidden;
}


/* =========================================================
 *    SHARED TWO-COLUMN FEATURE LAYOUT
 *       ========================================================= */

.about-feature-section {
    padding: 105px 0 110px;

    background: var(--white);
}

.about-feature-grid {
    display: grid;

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

    /*
 *      * Important:
 *           * image and right-hand copy begin at the same height.
 *                */
    align-items: start;

    gap: 70px;
}


/* =========================================================
 *    FEATURE IMAGE
 *       Rounded corners + homepage-style hover sweep
 *          ========================================================= */

.about-feature-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 18px;
}

.about-feature-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: inherit;

    transition:
        transform 0.45s ease;
}


/*
 *  * Same diagonal light sweep used on Markeena's
 *   * homepage image treatment.
 *    */

.about-feature-image::after {
    content: "";

    position: absolute;

    top: -35%;
    left: -45%;

    width: 16%;
    height: 170%;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.03) 30%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(255, 255, 255, 0.03) 70%,
            transparent 100%
        );

    transform: rotate(20deg);

    pointer-events: none;

    transition: left 0.9s ease;
}

.about-feature-image:hover::after {
    left: 130%;
}

.about-feature-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
 *    FEATURE CONTENT
 *       ========================================================= */

.about-feature-content {
    min-width: 0;
}

.about-feature-content h2 {
    margin:
        -9px 0 13px;

    color: var(--heading);

    font-family: var(--font-heading);
    font-size:
        clamp(46px, 4.2vw, 62px);
    font-weight: 400;
    line-height: 1.08;
}

.about-feature-content h3 {
    margin:
        0 0 27px;

    color: var(--peach);

    font-family: var(--font-heading);
    font-size:
        clamp(20px, 1.8vw, 25px);
    font-weight: 400;
    line-height: 1.4;
}


/* =========================================================
 *    BODY COPY
 *       ========================================================= */

.about-copy {
    color: var(--body-text);

    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
}

.about-copy p {
    margin:
        0 0 23px;

    font-size: inherit;
    line-height: inherit;
}

.about-copy p:last-child {
    margin-bottom: 0;
}

.about-copy ul,
.about-copy ol {
    margin:
        18px 0 26px;

    padding-left: 25px;
}

.about-copy li {
    margin-bottom: 9px;

    line-height: 1.75;
}

.about-copy strong {
    color: var(--heading);

    font-weight: 700;
}

.about-copy a {
    color: var(--purple);

    text-decoration: underline;
    text-underline-offset: 3px;

    transition:
        color 0.25s ease;
}

.about-copy a:hover,
.about-copy a:focus-visible {
    color: var(--peach);
}


/* =========================================================
 *    CONSULTATION BUTTON
 *       ========================================================= */

/*
 *  * The actual button colors and slide-over behavior come from:
 *   *
 *    * style.css:
 *     * .slide-button
 *      * .slide-button-white
 *       *
 *        * about.css only controls placement.
 *         */

.about-consultation-button {
    margin-top: 14px;
}


/* =========================================================
 *    LONG-FORM / POLICY CONTENT
 *       Used by Terms, Privacy and Cancellation pages.
 *          ========================================================= */

.about-document-section {
    padding:
        90px 0 110px;

    background: var(--white);
}

.about-document {
    width: min(
        100%,
        1050px
    );

    margin: 0 auto;

    color: var(--body-text);

    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.8;
}

.about-document h2 {
    margin:
        46px 0 18px;

    color: var(--heading);

    font-family: var(--font-heading);
    font-size:
        clamp(34px, 3.3vw, 46px);
    font-weight: 400;
    line-height: 1.18;
}

.about-document h2:first-child {
    margin-top: 0;
}

.about-document h3 {
    margin:
        32px 0 14px;

    color: var(--peach);

    font-family: var(--font-heading);
    font-size:
        clamp(22px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.35;
}

.about-document p {
    margin:
        0 0 22px;

    font-size: inherit;
    line-height: inherit;
}

.about-document ul,
.about-document ol {
    margin:
        12px 0 28px;

    padding-left: 27px;
}

.about-document li {
    margin-bottom: 10px;
}

.about-document strong {
    color: var(--heading);

    font-weight: 700;
}

.about-document a {
    color: var(--purple);

    text-decoration: underline;
    text-underline-offset: 3px;

    transition:
        color 0.25s ease;
}

.about-document a:hover,
.about-document a:focus-visible {
    color: var(--peach);
}


/* =========================================================
 *    RESPONSIVE
 *       ========================================================= */

@media (max-width: 1100px) {

    .about-feature-section {
        padding:
            85px 0 90px;
    }

    .about-feature-grid {
        gap: 48px;
    }

    .about-feature-content h2 {
        font-size:
            clamp(42px, 4.7vw, 54px);
    }

}


@media (max-width: 900px) {

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

        gap: 44px;
    }

    .about-feature-image {
        width: min(
            100%,
            650px
        );

        margin: 0 auto;
    }

    .about-feature-content {
        width: 100%;
    }

    .about-feature-content h2 {
        margin-top: 0;
    }

}


@media (max-width: 767px) {

    .about-feature-section {
        padding:
            65px 0 78px;
    }

    .about-feature-grid {
        gap: 35px;
    }

    .about-feature-content h2 {
        font-size:
            clamp(38px, 11vw, 50px);
    }

    .about-feature-content h3 {
        margin-bottom: 22px;

        font-size: 21px;
    }

    .about-copy {
        font-size: 17px;
        line-height: 1.78;
    }

    .about-copy p {
        margin-bottom: 20px;
    }

    .about-consultation-button {
        margin-top: 10px;
    }

    .about-document-section {
        padding:
            65px 0 80px;
    }

    .about-document {
        font-size: 17px;
    }

}


@media (max-width: 480px) {

    .about-feature-section {
        padding:
            55px 0 68px;
    }

    .about-feature-grid {
        gap: 30px;
    }

    .about-feature-content h2 {
        font-size: 38px;
    }

}