/* =========================================================
   ZNILATHOSS SPORTS
   NEWS.CSS
   قسم الأخبار + بطاقة الأخبار الثابتة
   ========================================================= */


/* =========================================================
   NEWS SECTION
   قسم الأخبار
   ========================================================= */

#news-section {

    width: 100%;

}


/* =========================================================
   NEWS CONTAINER
   حاوية الأخبار
   ========================================================= */

.news-container {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                280px,
                1fr
            )
        );

    gap: 16px;

    margin-top: 20px;

}


/* =========================================================
   NEWS CARD
   بطاقة الخبر
   ========================================================= */

.news-card {

    width: 100%;

    background: #ffffff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 4px 14px
        rgba(
            0,
            0,
            0,
            0.07
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


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

.news-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(
            0,
            0,
            0,
            0.11
        );

}


/* =========================================================
   NEWS IMAGE
   صورة الخبر
   ========================================================= */

.news-card-image {

    width: 100%;

    height: 190px;

    display: block;

    object-fit: cover;

    background:
        #eef2f6;

}


/* =========================================================
   NEWS CONTENT
   محتوى الخبر
   ========================================================= */

.news-card-content {

    padding: 16px;

}


/* =========================================================
   NEWS CATEGORY
   تصنيف الخبر
   ========================================================= */

.news-card-category {

    display: inline-flex;

    align-items: center;

    padding:
        5px 10px;

    margin-bottom: 9px;

    border-radius: 999px;

    background:
        #0b1f3a;

    color:
        #ffffff;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;

}


/* =========================================================
   NEWS TITLE
   عنوان الخبر
   ========================================================= */

.news-card-title {

    margin: 0;

    color:
        #0b1f3a;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.55;

}


/* =========================================================
   NEWS SUMMARY
   ملخص الخبر
   ========================================================= */

.news-card-summary {

    margin:
        10px 0 0;

    color:
        #667281;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   NEWS META
   معلومات الخبر
   ========================================================= */

.news-card-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid
        #edf0f4;

    color:
        #7b8694;

    font-size: 12px;

}


.news-card-source {

    color:
        #0b1f3a;

    font-weight: 700;

}


.news-card-date {

    white-space: nowrap;

}


/* =========================================================
   NEWS LINK
   رابط الخبر
   ========================================================= */

.news-card-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 14px;

    padding:
        9px 14px;

    border-radius: 10px;

    background:
        #0b1f3a;

    color:
        #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition:
        opacity 0.2s ease;

}


.news-card-link:hover {

    opacity:
        0.88;

}


/* =========================================================
   NEWS EMPTY
   ========================================================= */

.news-empty {

    width: 100%;

    padding:
        40px 20px;

    text-align: center;

    background:
        #ffffff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 16px;

    color:
        #657181;

    font-size: 15px;

    line-height: 1.7;

    box-shadow:
        0 3px 12px
        rgba(
            0,
            0,
            0,
            0.05
        );

}


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

.news-loading {

    width: 100%;

    padding:
        40px 20px;

    text-align: center;

    background:
        #ffffff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 16px;

    color:
        #657181;

    font-size: 15px;

    line-height: 1.7;

}


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

.news-error {

    width: 100%;

    padding:
        40px 20px;

    text-align: center;

    background:
        #ffffff;

    border:
        1px solid
        #e5eaf0;

    border-radius: 16px;

    color:
        #657181;

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BOTTOM NEWS NAVIGATION
   بطاقة الأخبار الثابتة أسفل التطبيق
   ========================================================= */

.bottom-news-navigation {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        8px 12px;

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

    border-top:
        1px solid
        #e2e7ed;

    box-shadow:
        0 -4px 14px
        rgba(
            0,
            0,
            0,
            0.08
        );

    z-index: 2000;

}


/* =========================================================
   BOTTOM NEWS BUTTON
   ========================================================= */

.bottom-news-button {

    width: 110px;

    min-height: 62px;

    padding:
        7px 10px;

    margin: 0;

    border:
        1px solid
        #e2e7ed;

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        #0b1f3a;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap:
        5px;

    cursor: pointer;

    font-family:
        inherit;

    font-size:
        inherit;

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            0.08
        );

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.bottom-news-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 14px
        rgba(
            0,
            0,
            0,
            0.10
        );

}


/* =========================================================
   BUTTON ACTIVE
   ========================================================= */

.bottom-news-button.active {

    background:
        #9be564;

    color:
        #0b1f3a;

    border-color:
        #9be564;

}


/* =========================================================
   NEWS ICON
   ========================================================= */

.bottom-news-icon {

    display:
        block;

    font-size:
        25px;

    line-height:
        1;

}


/* =========================================================
   NEWS TEXT
   ========================================================= */

.bottom-news-text {

    display:
        block;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.3;

}


/* =========================================================
   MAIN CONTENT SPACE
   مساحة أسفل المحتوى
   ========================================================= */

.main-content {

    padding-bottom:
        95px;

}


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

@media (
    max-width: 600px
) {

    .news-container {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .news-card-image {

        height:
            180px;

    }


    .news-card-content {

        padding:
            14px;

    }


    .news-card-title {

        font-size:
            17px;

    }


    .news-card-summary {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .bottom-news-navigation {

        padding:
            7px 10px;

    }


    .bottom-news-button {

        width:
            100px;

        min-height:
            58px;

    }


    .bottom-news-icon {

        font-size:
            23px;

    }


    .bottom-news-text {

        font-size:
            12px;

    }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (
    max-width: 380px
) {

    .bottom-news-button {

        width:
            94px;

        min-height:
            56px;

    }


    .bottom-news-icon {

        font-size:
            22px;

    }


    .bottom-news-text {

        font-size:
            12px;

    }

}