/* =====================================================
   FACILITIES PAGE
===================================================== */


/* =====================================================
   PAGE HERO
   SAME VISUAL STYLE AS EVENTS / OTHER INNER PAGES
===================================================== */

.page-hero {

    padding:
        51px 0;

    color:
        white;

    background:
        var(--primary);

}


.page-hero h1 {

    margin-top:
        7px;

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


}


.page-hero p {

    margin-top:
        8px;

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



}


/* =====================================================
   FACILITIES SECTION
===================================================== */

.facilities {

    background:
        var(--white);

}


/* =====================================================
   FACILITIES HEADING
===================================================== */

.facilities-heading {

    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.facilities-heading .eyebrow {

    display:
        inline-block;

    color:
        var(--accent);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.8px;

}


.facilities-heading h2 {

    margin-top:
        7px;

    font-size:
        clamp(32px, 5vw, 46px);

    line-height:
        1.05;

}


.facilities-heading h2 strong {

    color:
        var(--primary);

}


.facilities-heading p {

    max-width:
        650px;

    margin:
        12px auto 0;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.7;

}


/* =====================================================
   FACILITY CARD
===================================================== */

.facility-card {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    min-height:
        390px;

    margin-bottom:
        55px;

    overflow:
        hidden;

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

    border-radius:
        12px;

    background:
        var(--white);

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.04);

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

}


.facility-card:hover {

    transform:
        translateY(-4px);

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

}


.facility-card:last-child {

    margin-bottom:
        0;

}


/* =====================================================
   REVERSE CARD

   IMAGE RIGHT
===================================================== */

.facility-reverse .facility-image {

    order:
        2;

}


.facility-reverse .facility-content {

    order:
        1;

}


/* =====================================================
   FACILITY IMAGE
===================================================== */

.facility-image {

    width:
        100%;

    height:
        390px;

    overflow:
        hidden;

    background:
        #e8eeeb;

}


.facility-image img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .35s ease;

}


.facility-card:hover .facility-image img {

    transform:
        scale(1.04);

}


/* =====================================================
   IMAGE PLACEHOLDER
   FOR FACILITIES WHERE IMAGE IS NOT ADDED YET
===================================================== */

.facility-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--primary);

    background:
        #edf2ef;

    font-size:
        70px;

}


/* =====================================================
   FACILITY CONTENT
===================================================== */

.facility-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        50px;

}


.facility-label {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.8px;

}


.facility-content h2 {

    margin:
        0 0 15px;

    color:
        var(--text);

    font-size:
        clamp(28px, 4vw, 38px);

    line-height:
        1.1;

}


.facility-content p {

    max-width:
        570px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;

}


/* =====================================================
   FACILITY FEATURE
===================================================== */

.facility-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        25px;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;

}


.facility-feature i {

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(22,76,59,.09);

}


/* =====================================================
   HIGHLIGHT SECTION
===================================================== */

.facilities-highlight {

    background:
        var(--light);

}


.highlight-box {

    position:
        relative;

    overflow:
        hidden;

    padding:
        60px;

    border-radius:
        12px;

    background:
        var(--primary);

}


.highlight-box::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -140px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        rgba(201,164,92,.12);

}


.highlight-box::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    left:
        -90px;

    bottom:
        -100px;

    border-radius:
        50%;

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

}


.highlight-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

}


.highlight-content > span {

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.highlight-content h2 {

    margin:
        10px 0 15px;

    color:
        var(--white);

    font-size:
        clamp(32px, 5vw, 50px);

    line-height:
        1.1;

}


.highlight-content h2 strong {

    color:
        var(--accent);

}


.highlight-content p {

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

    font-size:
        14px;

    line-height:
        1.8;

}


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

@media (max-width: 850px) {

    .facility-card {

        grid-template-columns:
            1fr;

    }


    .facility-reverse .facility-image {

        order:
            1;

    }


    .facility-reverse .facility-content {

        order:
            2;

    }


    .facility-image {

        height:
            330px;

    }


    .facility-content {

        padding:
            38px;

    }

}


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

@media (max-width: 550px) {

    .page-hero {

        padding:
            65px 0;

    }


    .facilities-heading {

        margin-bottom:
            35px;

    }


    .facilities-heading h2 {

        font-size:
            34px;

    }


    .facilities-heading p {

        font-size:
            14px;

    }


    .facility-card {

        margin-bottom:
            30px;

    }


    .facility-image {

        height:
            250px;

    }


    .facility-content {

        padding:
            28px 24px;

    }


    .facility-content h2 {

        font-size:
            28px;

    }


    .facility-content p {

        font-size:
            13px;

    }


    .highlight-box {

        padding:
            35px 25px;

    }


    .highlight-content h2 {

        font-size:
            34px;

    }

}