/**
 * Latest News - Final Working Version
 * Version: 13.0
 */

/* Latest News - Complete CSS */
.news-section-wrapper { 
    margin: 50px 0; 
    padding: 40px; 
    background: linear-gradient(to bottom, #f8f9fa, #ffffff); 
    border-radius: 15px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); 
}

.news-main-title { 
    font-size: 28px; 
    font-weight: 900; 
    color: #fff; 
    text-align: center; 
    padding: 18px 50px; 
    background: linear-gradient(135deg, #00A859, #00c46e); 
    border-radius: 50px; 
    margin: 0 auto 40px; 
    display: table; 
    box-shadow: 0 8px 25px rgba(0,168,89,0.3); 
    position: relative; 
    overflow: hidden; 
}

.news-main-title::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); 
}

.lazy-latest-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    background: #e5e5e5; 
}

/* STYLE 1 */
.section-style1 { 
    background: linear-gradient(135deg, #f0f4f8, #e8eef5); 
}

.grid-three-cols { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important; 
}

.col-item-vertical { 
    background: #fff; 
    border: 3px solid #dce4ec; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

.col-item-vertical:hover { 
    border-color: #00A859; 
}

.vertical-card-link { 
    display: block; 
    text-decoration: none; 
    color: inherit; 
}

.img-top-wrapper { 
    width: 100%; 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
}

.img-top-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.time-badge-on-img { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    background: linear-gradient(135deg, #00A859, #00c46e); 
    color: #fff; 
    padding: 8px 18px; 
    font-size: 12px; 
    font-weight: 800; 
    border-radius: 25px; 
    box-shadow: 0 4px 15px rgba(0,168,89,0.6); 
    border: 2px solid #fff; 
}

.text-below-img { 
    padding: 16px; 
    background: #f9f9f9; 
}

.text-below-img h4 { 
    margin: 0; 
    font-size: 16px; 
    font-weight: 800; 
    line-height: 1.5; 
    color: #1a1a1a; 
}

.col-item-vertical:hover .text-below-img h4 { 
    color: #00A859; 
}

/* STYLE 2 - العنوان يمين والصورة شمال */
.section-style2 { 
    background: linear-gradient(to right, #fef6f8, #ffe8f0); 
}

.grid-two-cols { 
    display: grid !important; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 20px !important; 
}

.row-item-horizontal { 
    background: #fff; 
    border: 3px solid #f5d0df; 
    border-radius: 15px; 
    box-shadow: 0 4px 16px rgba(240,147,251,0.15); 
    height: 150px; 
}

.row-item-horizontal:hover { 
    border-color: #f5576c; 
}

.horizontal-row-link { 
    display: flex !important; 
    align-items: stretch !important; 
    height: 100%; 
    text-decoration: none; 
    color: inherit; 
}

.content-right-side { 
    width: 55%; 
    padding: 16px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    order: 2; 
}

.content-right-side h4 { 
    margin: 0 0 10px; 
    font-size: 15px; 
    font-weight: 800; 
    line-height: 1.4; 
    color: #1a1a1a; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

.row-item-horizontal:hover .content-right-side h4 { 
    color: #f5576c; 
}

.time-text { 
    margin: 0; 
    font-size: 12px; 
    color: #888; 
    font-weight: 700; 
}

.img-left-side { 
    width: 45%; 
    flex-shrink: 0; 
    order: 1; 
}

.img-left-side img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* STYLE 3 - 2 فوق + 4 تحت */
.section-style3 { 
    background: linear-gradient(135deg, #e8f4f8, #d4e9f7); 
}

.featured-plus-small { 
    display: block; 
}

.big-featured-box { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
    margin-bottom: 20px; 
}

.big-featured-box > div { 
    background: #fff; 
    border: 3px solid #b8d4e8; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 4px 18px rgba(0,0,0,0.12); 
}

.big-featured-box > div:hover { 
    border-color: #667eea; 
}

.featured-link { 
    display: block; 
    text-decoration: none; 
    color: inherit; 
}

.featured-img-left { 
    width: 100%; 
    height: 250px; 
    position: relative; 
}

.featured-img-left img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.time-badge-big { 
    position: absolute; 
    top: 12px; 
    right: 12px; 
    background: linear-gradient(135deg, #667eea, #764ba2); 
    color: #fff; 
    padding: 10px 20px; 
    font-size: 13px; 
    font-weight: 800; 
    border-radius: 25px; 
    box-shadow: 0 5px 18px rgba(102,126,234,0.6); 
    border: 2px solid #fff; 
}

.featured-text-right { 
    padding: 18px; 
    background: #f9f9f9; 
}

.featured-text-right h3 { 
    margin: 0; 
    font-size: 18px; 
    font-weight: 900; 
    line-height: 1.4; 
    color: #1a1a1a; 
}

.small-horizontal-strip { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 20px !important; 
}

.small-box-item { 
    background: #fff; 
    border: 3px solid #c8e0f0; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 3px 12px rgba(0,0,0,0.1); 
}

.small-box-item:hover { 
    border-color: #667eea; 
}

.small-link { 
    display: block; 
    text-decoration: none; 
    color: inherit; 
}

.small-img-top { 
    width: 100%; 
    height: 120px; 
    position: relative; 
}

.small-img-top img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.time-small { 
    position: absolute; 
    bottom: 8px; 
    right: 8px; 
    background: linear-gradient(135deg, #667eea, #764ba2); 
    color: #fff; 
    padding: 6px 14px; 
    font-size: 11px; 
    font-weight: 800; 
    border-radius: 18px; 
    box-shadow: 0 3px 12px rgba(102,126,234,0.5); 
    border: 2px solid #fff; 
}

.small-text { 
    padding: 14px; 
    background: #f9f9f9; 
}

.small-text h5 { 
    margin: 0; 
    font-size: 14px; 
    font-weight: 800; 
    line-height: 1.4; 
    color: #1a1a1a; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

.small-box-item:hover .small-text h5 { 
    color: #667eea; 
}

/* MOBILE - 2 في صف */
@media (max-width: 768px) {
    .news-section-wrapper { 
        padding: 22px 15px; 
    }
    
    .news-main-title { 
        font-size: 20px; 
        padding: 14px 30px; 
    }
    
    .grid-three-cols { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important; 
    }
    
    .img-top-wrapper { 
        height: 140px; 
    }
    
    .text-below-img { 
        padding: 12px; 
    }
    
    .text-below-img h4 { 
        font-size: 14px; 
    }
    
    .grid-two-cols { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important; 
    }
    
    .row-item-horizontal { 
        flex-direction: column; 
        height: auto; 
    }
    
    .content-right-side, 
    .img-left-side { 
        width: 100%; 
        order: unset; 
    }
    
    .img-left-side { 
        height: 130px; 
    }
    
    .content-right-side { 
        padding: 12px; 
    }
    
    .content-right-side h4 { 
        font-size: 13px; 
    }
    
    .big-featured-box { 
        grid-template-columns: 1fr; 
        gap: 15px; 
    }
    
    .featured-img-left { 
        height: 160px; 
    }
    
    .featured-img-left img { 
        min-height: 160px; 
    }
    
    .featured-text-right { 
        padding: 15px; 
    }
    
    .featured-text-right h3 { 
        font-size: 16px; 
    }
    
    .small-horizontal-strip { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important; 
    }
    
    .small-img-top { 
        height: 100px; 
    }
    
    .small-text h5 { 
        font-size: 12px; 
    }
}