/* =====================================================
   ABOUT US PAGE
===================================================== */


/* =====================================================
   PAGE HERO

   SAME AS EVENTS PAGE
===================================================== */

.page-hero {

    padding:
        51px 0;

    color:
        white;

    background:
        var(--primary);

}


/* =====================================================
   PAGE HERO TITLE

   SAME SIZE AS EVENTS PAGE
===================================================== */

.page-hero h1 {

    margin-top:
        7px;

    font-size:
        clamp(40px, 6vw, 60px);

}


/* =====================================================
   PAGE HERO DESCRIPTION

   SAME AS EVENTS PAGE
===================================================== */

.page-hero p {

    margin-top:
        8px;

    color:
        rgba(255,255,255,.7);

}


/* =====================================================
   ABOUT STORY SECTION
===================================================== */

.about-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        55px;

    align-items:
        center;

}


/* =====================================================
   ABOUT STORY IMAGE

   IMAGE HEIGHT IS AUTO SO ORIGINAL
   IMAGE PROPORTION IS PRESERVED.
===================================================== */

.content-image {

    width:
        100%;

    height:
        auto;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        12px;

}


/* =====================================================
   ABOUT STORY HEADING
===================================================== */

.about-grid h2 {

    margin:
        7px 0 18px;

    font-size:
        37px;

    line-height:
        1.1;

}


/* =====================================================
   ABOUT STORY PARAGRAPHS
===================================================== */

.about-grid p {

    margin-bottom:
        13px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.7;

}


/* =====================================================
   PRINCIPAL'S MESSAGE SECTION
===================================================== */

.principal-section {

    background:
        var(--white);

}


/* =====================================================
   PRINCIPAL MESSAGE CARD

   PHOTO REMOVED.
   MESSAGE NOW USES THE FULL AVAILABLE WIDTH.
===================================================== */

.principal-message-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        58px 70px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcfa 65%,
            #f1f6f1 100%
        );

    box-shadow:
        0 18px 45px rgba(22,76,59,.08);

}


/* =====================================================
   DECORATIVE QUOTE
===================================================== */

.principal-message-decoration {

    position:
        absolute;

    right:
        55px;

    top:
        15px;

    font-family:
        Georgia,
        serif;

    font-size:
        170px;

    line-height:
        1;

    font-weight:
        700;

    color:
        rgba(22,76,59,.06);

    pointer-events:
        none;

}


/* =====================================================
   PRINCIPAL MESSAGE CONTENT
===================================================== */

.principal-message-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        1100px;

}


/* =====================================================
   PRINCIPAL HEADING ROW
===================================================== */

.principal-heading-row {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        25px;

}


/* =====================================================
   GOLD VERTICAL LINE
===================================================== */

.principal-line {

    width:
        4px;

    min-width:
        4px;

    height:
        92px;

    margin-top:
        2px;

    border-radius:
        10px;

    background:
        var(--accent);

}


/* =====================================================
   PRINCIPAL EYEBROW
===================================================== */

.principal-message-content .eyebrow {

    display:
        block;

    margin-bottom:
        8px;

}


/* =====================================================
   PRINCIPAL MAIN HEADING
===================================================== */

.principal-message-content h2 {

    margin:
        0;

    font-size:
        42px;

    line-height:
        1.12;

    color:
        var(--text);

}


/* =====================================================
   SMALL DIVIDER
===================================================== */

.principal-divider {

    width:
        80px;

    height:
        3px;

    margin:
        20px 0 24px;

    border-radius:
        10px;

    background:
        var(--primary);

}


/* =====================================================
   PRINCIPAL MESSAGE TEXT
===================================================== */

.principal-message-content > p {

    margin:
        0 0 18px;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.8;

}


/* =====================================================
   PRINCIPAL SIGNATURE
===================================================== */

.principal-signature {

    margin-top:
        30px;

}


/* =====================================================
   SIGNATURE LINE
===================================================== */

.signature-line {

    display:
        block;

    width:
        40px;

    height:
        3px;

    margin-bottom:
        12px;

    border-radius:
        10px;

    background:
        var(--primary);

}


/* =====================================================
   WARM REGARDS
===================================================== */

.principal-signature p {

    margin:
        0 0 4px;

    color:
        var(--primary);

    font-size:
        15px;

}


/* =====================================================
   PRINCIPAL NAME
===================================================== */

.principal-signature strong {

    display:
        block;

    color:
        var(--primary);

    font-size:
        18px;

}


/* =====================================================
   SCHOOL NAME
===================================================== */

.principal-signature > span:last-child {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        14px;

}


/* =====================================================
   LIGHT SECTION
===================================================== */

.light-section {

    background:
        var(--light);

}


/* =====================================================
   THREE INFORMATION CARDS
===================================================== */

.cards-3 {

    display:
        grid;

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

    gap:
        20px;

    justify-content:
        center;

}


/* =====================================================
   INFORMATION CARD
===================================================== */

.info-card {

    padding:
        22px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        white;

}


/* =====================================================
   INFORMATION CARD TITLE
===================================================== */

.info-card h3 {

    margin-bottom:
        8px;

    color:
        var(--primary);

    font-size:
        21px;

    line-height:
        1.25;

}


/* =====================================================
   INFORMATION CARD TEXT
===================================================== */

.info-card p {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;

}


/* =====================================================
   ABOUT HIGHLIGHTS

   OPTIONAL SECTION
   IF USED IN ABOUT PAGE
===================================================== */

.about-highlights {

    display:
        grid;

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

    gap:
        20px;

}


/* =====================================================
   HIGHLIGHT CARD
===================================================== */

.highlight-card {

    padding:
        22px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        white;

}


/* =====================================================
   HIGHLIGHT NUMBER
===================================================== */

.highlight-card strong {

    display:
        block;

    color:
        var(--primary);

    font-size:
        32px;

    line-height:
        1;

}


/* =====================================================
   HIGHLIGHT TITLE
===================================================== */

.highlight-card h3 {

    margin-top:
        10px;

    font-size:
        18px;

    line-height:
        1.25;

}


/* =====================================================
   HIGHLIGHT DESCRIPTION
===================================================== */

.highlight-card p {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;

}


/* =====================================================
   TABLET
   850px AND BELOW
===================================================== */

@media(max-width:850px) {


    /* -----------------------------------------------
       ABOUT STORY
    ----------------------------------------------- */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    /* -----------------------------------------------
       PRINCIPAL MESSAGE
    ----------------------------------------------- */

    .principal-message-card {

        padding:
            45px 40px;

    }


    .principal-message-content h2 {

        font-size:
            36px;

    }


    .principal-message-decoration {

        right:
            25px;

        font-size:
            130px;

    }


    /* -----------------------------------------------
       INFORMATION CARDS
    ----------------------------------------------- */

    .cards-3 {

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

    }


    /* -----------------------------------------------
       HIGHLIGHTS
    ----------------------------------------------- */

    .about-highlights {

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

    }

}


/* =====================================================
   MOBILE
   650px AND BELOW

   SAME BREAKPOINT AS EVENTS PAGE
===================================================== */

@media(max-width:650px) {


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

    .page-hero {

        padding:
            70px 0;

    }


    .page-hero h1 {

        font-size:
            clamp(40px, 10vw, 52px);

    }


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

    .content-image {

        height:
            auto;

    }


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

    .about-grid h2 {

        font-size:
            32px;

    }


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

    .about-grid p {

        font-size:
            14px;

    }


    /* -----------------------------------------------
       PRINCIPAL MESSAGE CARD
    ----------------------------------------------- */

    .principal-message-card {

        padding:
            35px 25px;

        border-radius:
            14px;

    }


    /* -----------------------------------------------
       PRINCIPAL HEADING ROW
    ----------------------------------------------- */

    .principal-heading-row {

        gap:
            16px;

    }


    /* -----------------------------------------------
       GOLD VERTICAL LINE
    ----------------------------------------------- */

    .principal-line {

        width:
            3px;

        min-width:
            3px;

        height:
            75px;

    }


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

    .principal-message-content h2 {

        font-size:
            30px;

    }


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

    .principal-message-content > p {

        font-size:
            14px;

        line-height:
            1.7;

    }


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

    .principal-message-decoration {

        right:
            8px;

        top:
            20px;

        font-size:
            100px;

    }


    /* -----------------------------------------------
       INFORMATION CARDS
    ----------------------------------------------- */

    .cards-3 {

        grid-template-columns:
            1fr;

    }


    /* -----------------------------------------------
       HIGHLIGHTS
    ----------------------------------------------- */

    .about-highlights {

        grid-template-columns:
            1fr;

    }

}


/* =====================================================
   SMALL MOBILE
   450px AND BELOW
===================================================== */

@media(max-width:450px) {


    .page-hero {

        padding:
            60px 0;

    }


    .about-grid h2 {

        font-size:
            30px;

    }


    .principal-message-card {

        padding:
            30px 20px;

    }


    .principal-message-content h2 {

        font-size:
            28px;

    }


    .info-card {

        padding:
            20px;

    }


    .highlight-card {

        padding:
            20px;

    }

}