/*========================================================
ABOUT PAGE — RESPONSIVE
Load AFTER style.css / text.css / about.css
========================================================*/


/*========================================================
GLOBAL SAFETY
========================================================*/

.about-hero,
.about-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.about-hero *,
.about-section * {
    box-sizing: border-box;
}

.about-hero img,
.about-section img {
    max-width: 100%;
    height: auto;
}


/*========================================================
FLUID TYPE
========================================================*/

.about-hero p {
    font-size: clamp(1.1rem, 2.5vw, 2rem);
}


/*========================================================
MEET THE AUTHOR
KEEP "AUTHOR" UNDER "MEET THE"
========================================================*/

.about-hero h1,
.about-hero .hero-title {
    width: 100%;
    max-width: 100%;
    text-align: center;

    /* Prevent individual letters from being separated */
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;

    line-height: 1.05;
}


/*
If the heading is written as:

MEET THE AUTHOR

force the line break before AUTHOR
*/

.about-hero h1 .author-word,
.about-hero .hero-title .author-word {
    display: block;
    width: 100%;
    text-align: center;
}


/*========================================================
AUTHOR IMAGE — FIT IMAGE PROPERLY
========================================================*/

.author-frame {
    position: relative;

    width: min(100%, 420px);

    /*
    Height is automatic so the border follows
    the image instead of forcing the image to crop.
    */
    height: auto;

    aspect-ratio: auto;

    margin: 0 auto;

    overflow: hidden;

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

    box-sizing: border-box;
}


/*
Image stays completely visible inside the frame.
*/

.author-frame img,
.author-frame .author-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;
    object-position: center;

    margin: 0 auto;
}


/*========================================================
TABLET / LAPTOP
≤ 991px
========================================================*/

@media (max-width: 991px) {

    /*--------------------------
      HERO
    --------------------------*/

    .about-hero {
        width: 100%;
        min-height: 380px;

        padding: 110px 20px 50px;

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

        text-align: center;
    }

    .about-hero .container {
        width: 100%;
        max-width: 900px;

        margin: 0 auto;
    }


    /*--------------------------
      HEADING
    --------------------------*/

    .about-hero h1,
    .about-hero .hero-title {
        text-align: center;

        font-size: clamp(2.5rem, 7vw, 4.5rem);

        line-height: 1.05;

        letter-spacing: normal;

        word-break: normal;
        overflow-wrap: normal;
    }


    .about-hero h1 .author-word,
    .about-hero .hero-title .author-word {
        display: block;
        text-align: center;
    }


    /*--------------------------
      AUTHOR IMAGE
    --------------------------*/

    .author-frame {
        width: min(100%, 380px);

        height: auto;

        aspect-ratio: auto;

        margin-left: auto;
        margin-right: auto;

        overflow: hidden;
    }

    .author-frame img,
    .author-frame .author-image {
        width: 100%;
        height: auto;

        object-fit: contain;
    }


    /*--------------------------
      DIVIDER
    --------------------------*/

    .gold-divider {
        width: 100%;
        max-width: 320px;

        margin-left: auto;
        margin-right: auto;
    }


    /*--------------------------
      CONTENT
    --------------------------*/

    .about-wrapper {
        gap: 45px;

        text-align: center;
    }

    .about-right p {
        text-align: justify;
    }

    .featured-label {
        margin-left: auto;
        margin-right: auto;
    }
}


/*========================================================
TABLET / LARGE PHONE
≤ 768px
========================================================*/

@media (max-width: 768px) {

    .about-section {
        width: 100%;

        padding: 60px 0;
    }


    /*--------------------------
      HERO
    --------------------------*/

    .about-hero {
        min-height: 360px;

        padding: 100px 20px 45px;

        text-align: center;
    }


    .about-hero h1,
    .about-hero .hero-title {
        width: 100%;

        font-size: clamp(2.3rem, 9vw, 3.8rem);

        line-height: 1.08;

        text-align: center;

        white-space: normal;

        word-break: normal;

        overflow-wrap: normal;
    }


    .about-hero h1 .author-word,
    .about-hero .hero-title .author-word {
        display: block;

        width: 100%;

        text-align: center;
    }


    /*--------------------------
      AUTHOR IMAGE
    --------------------------*/

    .author-frame {
        width: min(88vw, 340px);

        height: auto;

        margin: 0 auto;

        overflow: hidden;

        border-radius: 15px;

        aspect-ratio: auto;
    }

    .author-frame img,
    .author-frame .author-image {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;

        object-fit: contain;
        object-position: center;
    }


    /*--------------------------
      CONTENT
    --------------------------*/

    .about-wrapper {
        gap: 40px;
    }

    .about-right p {
        font-size: 1.15rem;

        line-height: 1.7;
    }


    /*--------------------------
      DIVIDER
    --------------------------*/

    .gold-divider {
        width: 80%;

        max-width: 300px;

        margin-left: auto;
        margin-right: auto;
    }


    /*--------------------------
      QUOTE
    --------------------------*/

    .quote-card {
        width: 100%;

        max-width: 280px;

        margin-left: auto;
        margin-right: auto;
    }


    .author-features {
        gap: 20px;
    }
}


/*========================================================
PHONE
≤ 576px
========================================================*/

@media (max-width: 576px) {

    .about-section {
        padding: 45px 15px;
    }


    /*--------------------------
      HERO
    --------------------------*/

    .about-hero {
        width: 100%;

        min-height: 300px;

        padding: 90px 15px 35px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;
    }


    .about-hero .container {
        width: 100%;

        padding-left: 10px;
        padding-right: 10px;

        margin: 0 auto;
    }


    /*--------------------------
      MEET THE AUTHOR
    --------------------------*/

    .about-hero h1,
    .about-hero .hero-title {
        width: 100%;

        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        font-size: clamp(2rem, 10vw, 3rem);

        line-height: 1.08;

        text-align: center;

        white-space: normal;

        word-break: normal;

        overflow-wrap: normal;
    }


    /*
    AUTHOR is ALWAYS placed underneath
    MEET THE and centered.
    */

    .about-hero h1 .author-word,
    .about-hero .hero-title .author-word {
        display: block;

        width: 100%;

        text-align: center;

        margin-top: 3px;
    }


    /*--------------------------
      AUTHOR IMAGE
    --------------------------*/

    .author-frame {
        width: min(88vw, 320px);

        height: auto;

        margin: 0 auto;

        overflow: hidden;

        aspect-ratio: auto;

        border-radius: 14px;
    }


    .author-frame img,
    .author-frame .author-image {
        display: block;

        width: 100%;

        height: auto;

        max-width: 100%;

        object-fit: contain;

        object-position: center;

        margin: 0 auto;
    }


    /*--------------------------
      TEXT
    --------------------------*/

    .about-right h2 {
        font-size: clamp(2rem, 8vw, 2.8rem);

        line-height: 1.15;

        text-align: center;
    }

    .about-right h4 {
        text-align: center;
    }

    .about-right p {
        font-size: 1rem;

        line-height: 1.7;

        text-align: left;
    }


    /*--------------------------
      DIVIDER
    --------------------------*/

    .gold-divider {
        width: 75%;

        max-width: 260px;

        margin-left: auto;
        margin-right: auto;
    }


    /*--------------------------
      SIGNATURE
    --------------------------*/

    .signature {
        font-size: 2rem;

        text-align: center;
    }
}


/*========================================================
SMALL PHONES
≤ 400px
========================================================*/

@media (max-width: 400px) {

    .about-hero {
        padding: 85px 12px 30px;
    }


    .about-hero h1,
    .about-hero .hero-title {
        font-size: 1.9rem;

        line-height: 1.1;

        letter-spacing: 0;
    }


    .about-hero h1 .author-word,
    .about-hero .hero-title .author-word {
        margin-top: 2px;
    }


    /*--------------------------
      IMAGE
    --------------------------*/

    .author-frame {
        width: min(88vw, 285px);

        height: auto;

        aspect-ratio: auto;

        border-radius: 12px;
    }

    .author-frame img,
    .author-frame .author-image {
        width: 100%;

        height: auto;

        object-fit: contain;
    }


    /*--------------------------
      CONTENT
    --------------------------*/

    .about-right p {
        font-size: 0.95rem;

        line-height: 1.65;
    }

    .signature {
        font-size: 1.8rem;
    }
}


/*========================================================
VERY SMALL PHONES
≤ 360px
========================================================*/

@media (max-width: 360px) {

    .about-hero {
        padding-left: 10px;
        padding-right: 10px;
    }


    .about-hero h1,
    .about-hero .hero-title {
        font-size: 1.75rem;

        line-height: 1.1;
    }


    .author-frame {
        width: min(90vw, 270px);
    }


    .about-right p {
        font-size: 0.9rem;
    }
}


/*========================================================
ACCESSIBILITY
========================================================*/

@media (prefers-reduced-motion: reduce) {

    .about-hero *,
    .about-section * {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}

.about-right p {
    text-align: justify;
}