/* =========================================================
   ZENITH KARATE ACADEMY
   DEDICATED COMPETITIONS PAGE
   /competitions.html
========================================================= */


/* =========================================================
   PAGE LABEL
========================================================= */

.competitions-page .competition-page-label {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-bottom:
        1rem;

    color:
        #fdb203;

    font-size:
        0.78rem;

    font-weight:
        800;

    letter-spacing:
        0.25rem;

    line-height:
        1.2;

}


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

.competitions-page .competition-section {

    position:
        relative;

    width:
        100%;

    padding:
        3.5rem
        clamp(
            1rem,
            6vw,
            5rem
        )
        7rem;

}


/* =========================================================
   COMPETITION GRID
========================================================= */

.competitions-page .competition-grid {

    width:
        min(
            100%,
            80rem
        );

    margin:
        0
        auto;

    padding:
        0;

    display:
        grid;

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

    gap:
        1.4rem;

}


/* =========================================================
   COMPETITION CARD
========================================================= */

.competitions-page .competition-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        24rem;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        rgba(
            18,
            18,
            18,
            0.72
        );

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        1rem;

    backdrop-filter:
        blur(
            12px
        );

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

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform
        0.3s
        ease,

        border-color
        0.3s
        ease,

        box-shadow
        0.3s
        ease;

}


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

.competitions-page .competition-card:hover {

    transform:
        translateY(
            -7px
        );

    border-color:
        rgba(
            253,
            178,
            3,
            0.38
        );

    box-shadow:
        0
        16px
        35px
        rgba(
            0,
            0,
            0,
            0.38
        );

}


/* =========================================================
   CARD IMAGE
========================================================= */

.competitions-page
.competition-card-image-wrapper {

    width:
        100%;

    height:
        12rem;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #181818,
            #080808
        );

}


.competitions-page
.competition-card-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform
        0.5s
        ease;

}


.competitions-page
.competition-card:hover
.competition-card-image {

    transform:
        scale(
            1.05
        );

}


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

.competitions-page
.competition-card-content {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    padding:
        1.4rem;

}


.competitions-page
.competition-card-date {

    color:
        #fdb203;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.12rem;

    line-height:
        1.2;

}


.competitions-page
.competition-card h2 {

    margin:
        0.6rem
        0
        0.65rem;

    color:
        #fff;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        2rem;

    font-weight:
        700;

    line-height:
        0.95;

    letter-spacing:
        0.06rem;

}


.competitions-page
.competition-card-location {

    margin:
        0;

    color:
        #888;

    font-size:
        0.82rem;

    line-height:
        1.55;

}


/* =========================================================
   CARD FOOTER
========================================================= */

.competitions-page
.competition-card-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-top:
        auto;

    padding-top:
        1.25rem;

    color:
        #777;

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.08rem;

}


.competitions-page
.competition-card-arrow {

    color:
        #fdb203;

    font-size:
        1.35rem;

    transition:
        transform
        0.25s
        ease;

}


.competitions-page
.competition-card:hover
.competition-card-arrow {

    transform:
        translateX(
            5px
        );

}


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

.competitions-page
.competition-loading {

    grid-column:
        1 /
        -1;

    min-height:
        12rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        2rem;

    border:
        1px
        dashed
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        0.8rem;

    color:
        #777;

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.12rem;

    text-align:
        center;

}


.competitions-page
.competition-loading.error {

    color:
        #e06b6b;

    border-color:
        rgba(
            230,
            15,
            50,
            0.2
        );

}


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

@media (max-width: 950px) {

    .competitions-page
    .competition-grid {

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

    }

}


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

@media (max-width: 600px) {

    .competitions-page
    .competition-section {

        padding:
            2.5rem
            1rem
            5rem;

    }


    .competitions-page
    .competition-grid {

        grid-template-columns:
            1fr;

        gap:
            1rem;

    }


    .competitions-page
    .competition-card {

        min-height:
            0;

    }


    .competitions-page
    .competition-card-image-wrapper {

        height:
            12rem;

    }


    .competitions-page
    .competition-card-content {

        padding:
            1.15rem;

    }


    .competitions-page
    .competition-card h2 {

        font-size:
            1.75rem;

    }

}