/* =========================================================
   BELAIR HILL JUNIOR SCHOOL
   PUBLIC WEBSITE — UPDATES
   MASTER CSS
========================================================= */


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

.updates-section {

    position: relative;

    width: 100%;

    padding:
        85px 0
        90px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffaf6 0%,
            #ffffff 48%,
            #f8fbfa 100%
        );
}


/* =========================================================
   SUBTLE BACKGROUND DECORATION
========================================================= */

.updates-section::before {

    position: absolute;

    top: -120px;
    left: -100px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(
            7,
            91,
            67,
            0.045
        );

    content: "";

    pointer-events: none;
}


.updates-section::after {

    position: absolute;

    right: -120px;
    bottom: -150px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background:
        rgba(
            198,
            106,
            50,
            0.055
        );

    content: "";

    pointer-events: none;
}


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

.updates-section .container {

    position: relative;

    z-index: 1;

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

    margin:
        0 auto;
}


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

.updates-heading {

    position: relative;

    max-width: 820px;

    margin:
        0 auto 38px;

    padding:
        0 20px;

    text-align: center;
}


/* =========================================================
   DECORATIVE TOP LINE
========================================================= */

.updates-heading::before {

    display: block;

    width: 72px;

    height: 5px;

    margin:
        0 auto 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #075b43 0%,
            #075b43 50%,
            #c66a32 50%,
            #c66a32 100%
        );

    content: "";
}


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

.updates-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 9px;

    color:
        #c66a32;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    line-height:
        1;

    text-transform:
        uppercase;
}


/* =========================================================
   SMALL DECORATIVE DOTS AROUND EYEBROW
========================================================= */

.updates-eyebrow::before,
.updates-eyebrow::after {

    display: inline-block;

    width: 5px;

    height: 5px;

    margin:
        0 10px;

    border-radius: 50%;

    background:
        #075b43;

    content: "";
}


/* =========================================================
   MAIN TITLE
========================================================= */

.updates-title {

    margin:
        0 auto 13px;

    color:
        #243238;

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

    font-size:
        clamp(
            2.35rem,
            5vw,
            4rem
        );

    font-weight:
        700;

    letter-spacing:
        -0.025em;

    line-height:
        1.05;

    text-align:
        center;
}


/* =========================================================
   TITLE ACCENT
========================================================= */

.updates-title::after {

    display: block;

    width: 42px;

    height: 3px;

    margin:
        13px auto 0;

    border-radius:
        20px;

    background:
        #c66a32;

    content: "";
}


/* =========================================================
   INTRODUCTION
========================================================= */

.updates-intro {

    max-width:
        650px;

    margin:
        17px auto 0;

    color:
        #718087;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        clamp(
            0.9rem,
            1.5vw,
            1rem
        );

    font-weight:
        400;

    line-height:
        1.75;

    text-align:
        center;
}


/* =========================================================
   CATEGORY FILTERS
========================================================= */

.updates-filters {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        0 auto 30px;
}


/* =========================================================
   FILTER BUTTON
========================================================= */

.updates-filter {

    display:
        inline-flex;

    min-height:
        38px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px 17px;

    border:
        1px solid
        #ded8d3;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #59676c;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.02em;

    cursor:
        pointer;

    transition:
        all 0.2s ease;
}


.updates-filter:hover {

    border-color:
        #075b43;

    background:
        #f3f9f6;

    color:
        #075b43;

    transform:
        translateY(-1px);
}


/* =========================================================
   ACTIVE FILTER
========================================================= */

.updates-filter.active {

    border-color:
        #075b43;

    background:
        #075b43;

    color:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(
            7,
            91,
            67,
            0.15
        );
}


.updates-filter.active:hover {

    background:
        #044936;

    border-color:
        #044936;

    color:
        #ffffff;
}


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

.updates-loading {

    display:
        flex;

    min-height:
        120px;

    align-items:
        center;

    justify-content:
        center;

    color:
        #718087;

    font-size:
        0.85rem;
}


/* =========================================================
   ERROR
========================================================= */

.updates-error {

    max-width:
        600px;

    margin:
        20px auto;

    padding:
        25px;

    border:
        1px solid
        #e7bcbc;

    border-radius:
        14px;

    background:
        #fbeaea;

    text-align:
        center;
}


.updates-error h3 {

    margin:
        0 0 7px;

    color:
        #963232;

    font-size:
        1rem;
}


.updates-error p {

    margin:
        0 0 15px;

    color:
        #718087;

    font-size:
        0.8rem;

    line-height:
        1.6;
}


.updates-error button {

    min-height:
        38px;

    padding:
        8px 15px;

    border:
        1px solid
        #963232;

    border-radius:
        8px;

    background:
        #963232;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.75rem;

    font-weight:
        800;

    cursor:
        pointer;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.updates-empty {

    max-width:
        600px;

    margin:
        25px auto;

    padding:
        35px 25px;

    border:
        1px dashed
        #d9d2cd;

    border-radius:
        15px;

    background:
        #fffaf6;

    text-align:
        center;
}


.updates-empty h3 {

    margin:
        0 0 7px;

    color:
        #243238;

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

    font-size:
        1.3rem;
}


.updates-empty p {

    margin:
        0;

    color:
        #718087;

    font-size:
        0.8rem;
}


/* =========================================================
   SLIDER
========================================================= */

.updates-slider {

    position:
        relative;

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding:
        5px 2px 18px;

    scroll-behavior:
        smooth;

    scrollbar-width:
        thin;

    scrollbar-color:
        #c66a32
        #eee8e3;
}


/* =========================================================
   WEBKIT SCROLLBAR
========================================================= */

.updates-slider::-webkit-scrollbar {

    height:
        7px;
}


.updates-slider::-webkit-scrollbar-track {

    border-radius:
        20px;

    background:
        #eee8e3;
}


.updates-slider::-webkit-scrollbar-thumb {

    border-radius:
        20px;

    background:
        #c66a32;
}


.updates-slider::-webkit-scrollbar-thumb:hover {

    background:
        #a94f22;
}


/* =========================================================
   UPDATES LIST
   THREE CARDS VISIBLE
========================================================= */

.updates-list {

    display:
        grid;

    grid-auto-flow:
        column;

    grid-auto-columns:
        calc(
            (100% - 28px) / 3
        );

    gap:
        14px;

    width:
        max-content;

    min-width:
        100%;
}


/* =========================================================
   UPDATE CARD
========================================================= */

.update-card {

    position:
        relative;

    display:
        flex;

    min-width:
        0;

    height:
        315px;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        #e4ddd7;

    border-radius:
        16px;

    background:
        #ffffff;

    cursor:
        pointer;

    box-shadow:
        0 7px 20px
        rgba(
            36,
            50,
            56,
            0.07
        );

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.update-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #c66a32;

    box-shadow:
        0 14px 30px
        rgba(
            36,
            50,
            56,
            0.12
        );
}


/* =========================================================
   CARD MEDIA
========================================================= */

.update-media {

    position:
        relative;

    width:
        100%;

    height:
        115px;

    flex:
        0 0 115px;

    overflow:
        hidden;

    background:
        #edf3f0;
}


.update-media::after {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        45%;

    background:
        linear-gradient(
            transparent,
            rgba(
                0,
                0,
                0,
                0.16
            )
        );

    content:
        "";

    pointer-events:
        none;
}


.update-image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.35s ease;
}


.update-card:hover
.update-image {

    transform:
        scale(1.04);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.update-content {

    display:
        flex;

    min-width:
        0;

    flex:
        1;

    flex-direction:
        column;

    padding:
        13px 15px 14px;
}


/* =========================================================
   UPDATE TYPE
========================================================= */

.update-type {

    display:
        inline-flex;

    align-self:
        flex-start;

    margin-bottom:
        5px;

    padding:
        4px 8px;

    border-radius:
        999px;

    background:
        #e8f4ef;

    color:
        #075b43;

    font-size:
        0.61rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


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

.update-title {

    display:
        -webkit-box;

    margin:
        0;

    overflow:
        hidden;

    color:
        #243238;

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

    font-size:
        1.02rem;

    line-height:
        1.25;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


/* =========================================================
   CARD SUMMARY
========================================================= */

.update-summary {

    display:
        -webkit-box;

    margin:
        6px 0 0;

    overflow:
        hidden;

    color:
        #718087;

    font-size:
        0.73rem;

    line-height:
        1.45;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;
}


/* =========================================================
   DETAILS
========================================================= */

.update-details {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        auto;

    padding-top:
        9px;
}


.update-detail {

    display:
        flex;

    min-width:
        0;

    align-items:
        center;

    gap:
        6px;
}


.update-detail-icon {

    display:
        grid;

    width:
        27px;

    height:
        27px;

    flex:
        0 0 27px;

    place-items:
        center;

    border-radius:
        8px;

    background:
        #f3f9f6;

    color:
        #075b43;
}


.update-detail div {

    min-width:
        0;
}


.update-detail small {

    display:
        block;

    color:
        #8a9599;

    font-size:
        0.57rem;

    line-height:
        1.1;
}


.update-detail strong {

    display:
        block;

    max-width:
        115px;

    overflow:
        hidden;

    color:
        #39484d;

    font-size:
        0.65rem;

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   READ MORE
========================================================= */

.update-read-more {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin-top:
        8px;

    color:
        #c66a32;

    font-size:
        0.68rem;

    font-weight:
        800;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.update-card:hover
.update-read-more {

    gap:
        8px;

    color:
        #a94f22;
}


.update-read-more svg {

    flex:
        0 0 auto;
}


/* =========================================================
   CARD COLOUR VARIATIONS
========================================================= */

.update-card:nth-child(4n + 1)
.update-type {

    background:
        #e8f4ef;

    color:
        #075b43;
}


.update-card:nth-child(4n + 2)
.update-type {

    background:
        #f9e8dc;

    color:
        #a94f22;
}


.update-card:nth-child(4n + 3)
.update-type {

    background:
        #e9eef8;

    color:
        #385b91;
}


.update-card:nth-child(4n + 4)
.update-type {

    background:
        #f5e6ef;

    color:
        #8a3560;
}


/* =========================================================
   MORE BUTTON
========================================================= */

.updates-more {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        25px;
}


.updates-more-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        43px;

    padding:
        10px 17px;

    border:
        1px solid
        #075b43;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #075b43;

    font-family:
        inherit;

    font-size:
        0.76rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all 0.2s ease;
}


.updates-more-button:hover {

    transform:
        translateY(-2px);

    background:
        #075b43;

    color:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(
            7,
            91,
            67,
            0.15
        );
}


/* =========================================================
   MODAL
========================================================= */

.update-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;
}


.update-modal[hidden] {

    display:
        none;
}


.update-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            20,
            29,
            31,
            0.68
        );

    backdrop-filter:
        blur(5px);
}


/* =========================================================
   MODAL DIALOG
========================================================= */

.update-modal-dialog {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            850px,
            100%
        );

    max-height:
        calc(
            100vh - 50px
        );

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #ffffff;

    box-shadow:
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


/* =========================================================
   MODAL CLOSE
========================================================= */

.update-modal-close {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    z-index:
        5;

    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    color:
        #243238;

    cursor:
        pointer;

    box-shadow:
        0 4px 15px
        rgba(
            0,
            0,
            0,
            0.12
        );

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.update-modal-close:hover {

    transform:
        rotate(90deg);

    background:
        #ffffff;
}


/* =========================================================
   MODAL MEDIA
========================================================= */

.update-modal-media {

    width:
        100%;

    max-height:
        360px;

    overflow:
        hidden;

    background:
        #edf3f0;
}


.update-modal-media img {

    display:
        block;

    width:
        100%;

    max-height:
        360px;

    object-fit:
        cover;
}


/* =========================================================
   MODAL CONTENT
========================================================= */

.update-modal-content {

    max-height:
        calc(
            100vh - 410px
        );

    overflow-y:
        auto;

    padding:
        30px 34px 35px;
}


/* =========================================================
   MODAL TYPE
========================================================= */

.update-modal-type {

    display:
        inline-flex;

    margin-bottom:
        10px;

    padding:
        5px 10px;

    border-radius:
        999px;

    background:
        #e8f4ef;

    color:
        #075b43;

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


/* =========================================================
   MODAL TITLE
========================================================= */

.update-modal-title {

    margin:
        0 0 18px;

    color:
        #243238;

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

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.6rem
        );

    line-height:
        1.18;
}


/* =========================================================
   MODAL META
========================================================= */

.update-modal-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    margin-bottom:
        22px;

    padding:
        15px 0;

    border-top:
        1px solid
        #eee8e3;

    border-bottom:
        1px solid
        #eee8e3;
}


.update-modal-meta-item {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.update-modal-meta-icon {

    display:
        grid;

    width:
        32px;

    height:
        32px;

    place-items:
        center;

    border-radius:
        9px;

    background:
        #f3f9f6;

    color:
        #075b43;
}


.update-modal-meta-item small {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #8a9599;

    font-size:
        0.62rem;
}


.update-modal-meta-item strong {

    display:
        block;

    color:
        #39484d;

    font-size:
        0.72rem;
}


/* =========================================================
   MODAL BODY
========================================================= */

.update-modal-body {

    color:
        #39484d;

    font-size:
        0.92rem;

    line-height:
        1.8;
}


.update-modal-body p {

    margin:
        0 0 15px;
}


.update-modal-body p:last-child {

    margin-bottom:
        0;
}


.update-modal-body h3,
.update-modal-body h4 {

    margin:
        22px 0 9px;

    color:
        #243238;

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


.update-modal-body ul,
.update-modal-body ol {

    margin:
        0 0 18px;

    padding-left:
        22px;
}


.update-modal-body img {

    max-width:
        100%;

    height:
        auto;

    border-radius:
        10px;
}


/* =========================================================
   HIDDEN
========================================================= */

.updates-section [hidden] {

    display:
        none !important;
}


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

@media (max-width: 900px) {

    .updates-section {

        padding:
            70px 0
            75px;
    }


    .updates-list {

        grid-auto-columns:
            calc(
                (100% - 14px) / 2
            );
    }


    .update-card {

        height:
            305px;
    }
}


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

@media (max-width: 600px) {

    .updates-section {

        padding:
            60px 0
            65px;
    }


    .updates-section .container {

        width:
            calc(
                100% - 28px
            );
    }


    .updates-heading {

        padding:
            0 8px;

        margin-bottom:
            30px;
    }


    .updates-heading::before {

        width:
            58px;

        height:
            4px;

        margin-bottom:
            15px;
    }


    .updates-eyebrow {

        font-size:
            0.64rem;

        letter-spacing:
            0.15em;
    }


    .updates-eyebrow::before,
    .updates-eyebrow::after {

        width:
            4px;

        height:
            4px;

        margin:
            0 7px;
    }


    .updates-title {

        font-size:
            clamp(
                2rem,
                11vw,
                2.7rem
            );
    }


    .updates-intro {

        font-size:
            0.82rem;

        line-height:
            1.65;
    }


    .updates-filters {

        gap:
            6px;

        margin-bottom:
            25px;
    }


    .updates-filter {

        min-height:
            35px;

        padding:
            7px 13px;

        font-size:
            0.68rem;
    }


    .updates-list {

        grid-auto-columns:
            88%;
    }


    .update-card {

        height:
            310px;
    }


    .update-modal {

        padding:
            12px;
    }


    .update-modal-dialog {

        max-height:
            calc(
                100vh - 24px
            );

        border-radius:
            16px;
    }


    .update-modal-content {

        max-height:
            calc(
                100vh - 250px
            );

        padding:
            24px 20px 28px;
    }


    .update-modal-title {

        font-size:
            1.65rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .updates-section .container {

        width:
            calc(
                100% - 22px
            );
    }


    .updates-title {

        font-size:
            2rem;
    }


    .updates-intro {

        font-size:
            0.78rem;
    }


    .updates-list {

        grid-auto-columns:
            92%;
    }


    .update-card {

        height:
            305px;
    }


    .update-details {

        gap:
            8px;
    }


    .update-detail strong {

        max-width:
            95px;
    }
}