/* =========================================================
   BELAIR HILL JUNIOR SCHOOL
   OUR SCHOOLS
   SPLIT IMAGE + CONTENT CARD DESIGN
   ========================================================= */

.schools-section {

    width: 100%;

    padding: 55px 0 110px;

    background: var(--cream, #fffaf6);

    color: var(--text, #39484d);

}


/* =========================================================
   CONTAINER
   ========================================================= */

.schools-container {

    width: min(1220px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.schools-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, .85fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;

}


.schools-heading-main {

    max-width: 760px;

}


.schools-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--terracotta, #c95f43);

}


.schools-eyebrow::before {

    content: "";

    width: 34px;

    height: 2px;

    background:
        var(--terracotta, #c95f43);

}


.schools-heading h2 {

    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(38px, 5vw, 64px);

    line-height: 1.04;

    font-weight: 500;

    letter-spacing: -.025em;

    color:
        var(--dark, #243238);

}


.schools-heading h2 span {

    display: block;

    color:
        var(--teal, #0797a6);

}


.schools-heading > p {

    max-width: 470px;

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    color:
        var(--muted, #718087);

}


/* =========================================================
   SCHOOL GRID
   ========================================================= */

.schools-grid {

    display: grid;

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

    gap: 18px;

}


/* =========================================================
   SCHOOL CARD
   ========================================================= */

.school-card {

    position: relative;

    min-height: 520px;

    display: flex;

    flex-direction: column;

    padding: 0;

    border:
        1px solid
        var(--border, #e3e8e8);

    border-radius:
        var(--radius, 10px);

    background:
        var(--white, #ffffff);

    overflow: hidden;

    isolation: isolate;

    box-shadow:
        var(
            --shadow,
            0 12px 35px rgba(48, 65, 68, .08)
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


/* =========================================================
   CARD HOVER
   ========================================================= */

.school-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(
            --shadow-large,
            0 20px 55px rgba(48, 65, 68, .12)
        );

    border-color:
        rgba(7, 151, 166, .25);

}


/* =========================================================
   PHOTO AREA
   ========================================================= */

.school-card-photo {

    position: relative;

    width: 100%;

    height: 260px;

    flex: 0 0 260px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-color:
        var(--teal-light, #e8f7f8);

    opacity: 0;

    transform: scale(1);

    transition:
        opacity .35s ease,
        transform .45s ease;

    z-index: 0;

}


/* =========================================================
   IMAGE ACTIVE STATE
   ========================================================= */

.school-card.has-school-image
.school-card-photo {

    opacity: 1;

}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.school-card.has-school-image:hover
.school-card-photo {

    transform: scale(1.05);

}


/* =========================================================
   PHOTO OVERLAY
   ========================================================= */

.school-card-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 260px;

    background:

        linear-gradient(
            180deg,
            rgba(4, 86, 97, .10) 0%,
            rgba(4, 86, 97, .30) 65%,
            rgba(20, 31, 34, .58) 100%
        );

    z-index: 1;

    pointer-events: none;

}


/* =========================================================
   CARD TOP
   STAYS OVER PHOTO
   ========================================================= */

.school-card-top {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 25px 27px;

}


/* =========================================================
   SCHOOL NUMBER
   ========================================================= */

.school-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .92);

    color:
        var(--teal-deep, #045661);

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .08);

}


/* =========================================================
   LEARNING LEVEL
   ========================================================= */

.school-stage {

    display: inline-flex;

    align-items: center;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(255, 255, 255, .35);

    border-radius: 999px;

    background:
        rgba(4, 86, 97, .55);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        #ffffff;

}


/* =========================================================
   CONTENT AREA
   MOVED BELOW PHOTO
   ========================================================= */

.school-card-content {

    position: relative;

    z-index: 4;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        28px 30px 30px;

    background:
        var(--white, #ffffff);

}


/* =========================================================
   SCHOOL TITLE
   ========================================================= */

.school-card h3 {

    margin:
        0 0 13px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(29px, 3vw, 38px);

    line-height: 1.1;

    font-weight: 500;

    color:
        var(--dark, #243238);

}


/* =========================================================
   SCHOOL DESCRIPTION
   ========================================================= */

.school-card p {

    max-width: 510px;

    margin:
        0 0 22px;

    font-size: 15px;

    line-height: 1.7;

    color:
        var(--muted, #718087);

}


/* =========================================================
   CARD LINK
   ========================================================= */

.school-card-link {

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 15px;

    color:
        var(--terracotta-dark, #a94a34);

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .2s ease,
        gap .2s ease;

}


.school-card-link span {

    font-size: 19px;

    line-height: 1;

}


.school-card-link:hover {

    gap: 20px;

    color:
        var(--terracotta, #c95f43);

}


/* =========================================================
   REMOVE OLD IMAGE-TEXT COLOR RULES
   =========================================================

   The content is now on a white background, so the
   previous image-active white text treatment is no longer
   appropriate.
   ========================================================= */

.school-card.has-school-image
.school-card-number {

    color:
        var(--teal-deep, #045661);

}


/* =========================================================
   FALLBACK PHOTO AREA
   ========================================================= */

.school-card-preschool
.school-card-photo {

    background-color:
        var(--peach, #fff1e8);

}


.school-card-primary
.school-card-photo {

    background-color:
        var(--teal-light, #e8f7f8);

}


.school-card-junior
.school-card-photo {

    background-color:
        var(--cream, #fffaf6);

}


/* =========================================================
   LOADING STATE
   ========================================================= */

.school-card.school-media-loading
.school-card-photo {

    opacity: .18;

}


/* =========================================================
   CLOSING MESSAGE
   ========================================================= */

.schools-footer {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 48px;

}


.schools-footer-line {

    flex:
        0 0 55px;

    height: 2px;

    background:
        var(--terracotta, #c95f43);

}


.schools-footer p {

    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    color:
        var(--muted, #718087);

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .schools-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .schools-grid {

        grid-template-columns: 1fr;

    }


    .school-card {

        min-height: 500px;

    }


    .school-card-photo {

        height: 270px;

        flex-basis: 270px;

    }


    .school-card-overlay {

        height: 270px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .schools-section {

        padding:
            45px 0 70px;

    }


    .schools-container {

        width:
            min(
                calc(100% - 32px),
                1220px
            );

    }


    .schools-heading {

        margin-bottom: 38px;

    }


    .schools-heading h2 {

        font-size: 40px;

    }


    .school-card {

        min-height: 0;

    }


    .school-card-photo {

        height: 230px;

        flex-basis: 230px;

    }


    .school-card-overlay {

        height: 230px;

    }


    .school-card-top {

        padding:
            20px;

    }


    .school-card-content {

        padding:
            25px 23px 28px;

    }


    .school-card h3 {

        font-size: 31px;

    }


    .school-card p {

        font-size: 14px;

        line-height: 1.7;

    }


    .schools-footer {

        align-items:
            flex-start;

    }

}