/* =========================================================
   NEWS AREA
========================================================= */

.news-area {
    position: relative;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    padding: 30px 20px 80px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns: 170px minmax(0, 1fr) 170px;

    gap: 25px;

    align-items: start;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.news-content {
    grid-column: 2;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   SIDE ADS
========================================================= */

.side-ad {
    width: 170px;
}


/* =========================================================
   LEFT AD
========================================================= */

.side-ad-left {
    grid-column: 1;
}


/* =========================================================
   RIGHT AD
========================================================= */

.side-ad-right {
    grid-column: 3;
}


/* =========================================================
   STICKY AD
========================================================= */

.side-ad-sticky {
    position: sticky;

    top: 90px;

    width: 170px;
    height: 600px;

    overflow: hidden;

    background: #eee;
}


/* =========================================================
   AD LINK
========================================================= */

.side-ad-sticky a {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   AD IMAGE
========================================================= */

.side-ad-sticky img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */
/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .news-area {
        grid-template-columns: 180px minmax(0, 1200px) 180px;
        justify-content: center;
        gap: 25px;
    }

    .side-ad {
        width: 180px;
    }

    .side-ad-sticky {
        width: 180px;
        height: 620px;
    }
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1450px) {

    .news-area {
        grid-template-columns: 150px minmax(0, 1fr) 150px;
        gap: 15px;
    }

    .side-ad {
        width: 150px;
    }

    .side-ad-sticky {
        width: 150px;
        height: 560px;
    }
}


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

@media (max-width: 1100px) {

    .news-area {
        display: block;
        width: 100%;
        padding: 20px 15px 60px;
    }

    .side-ad {
        display: none;
    }

    .news-content {
        width: 100%;
        max-width: 100%;
    }
}


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

@media (max-width: 768px) {

    /* الصفحة الرئيسية للقسم */
    .news-area {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 10px 8px 40px;
        margin: 0;
        overflow: hidden;
    }


    /* المحتوى الرئيسي */
    .news-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }


    /* منع أي عنصر من توسيع الصفحة */
    .news-area *,
    .news-content * {
        max-width: 100%;
    }


    /* الصور */
    .news-area img {
        max-width: 100%;
        height: auto;
    }


    /* الإعلانات الجانبية */
    .side-ad,
    .side-ad-sticky {
        display: none !important;
    }


    /* لو فيه Grid داخل الأخبار */
    .news-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
    }


    /* الكروت */
    .news-card {
        width: 100%;
        min-width: 0;
        margin: 0;
    }


    /* العناوين */
    .news-card h1,
    .news-card h2,
    .news-card h3,
    .news-card h4 {
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* أي عنوان رئيسي */
    .news-title {
        font-size: 21px;
        line-height: 1.5;
    }


    /* نص الخبر */
    .news-content p {
        font-size: 15px;
        line-height: 1.8;
    }
}


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

@media (max-width: 576px) {

    .news-area {
        padding: 8px 6px 35px;
    }

    .news-title {
        font-size: 19px;
        line-height: 1.5;
    }

    .news-content p {
        font-size: 14px;
        line-height: 1.8;
    }
}


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

@media (max-width: 400px) {

    .news-area {
        padding: 6px 5px 30px;
    }

    .news-title {
        font-size: 18px;
    }
}