/**
 * Home Page Styles - CSS للصفحة الرئيسية
 * Version: 2.0
 */

/* إزالة كل التأثيرات الحركية */
* { 
    transition: none !important; 
    animation: none !important; 
    transform: none !important; 
}

/* الفراغات = 10 بكسل في كل مكان */
.home-category-section { 
    margin: 10px 0 !important; 
    padding: 10px !important;
}

.section-title-wrapper {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

.section-content-wrapper {
    padding: 10px !important;
}

/* إزالة اللون الأخضر من الأيقونات */
.section-title-icon {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    color: initial !important;
}

/* Grid */
.grid-layout { gap: 10px !important; }
.grid-item-content { padding: 10px !important; }

/* List */
.list-layout { gap: 10px !important; }
.list-item-link { gap: 10px !important; padding: 10px !important; }

/* Featured */
.featured-layout { gap: 10px !important; }
.featured-small-grid { gap: 10px !important; }
.featured-small-link { gap: 10px !important; padding: 10px !important; }

/* Compact */
.compact-layout { gap: 10px !important; }
.compact-item-link { gap: 10px !important; padding: 10px !important; }

/* Magazine */
.magazine-layout { gap: 10px !important; }
.magazine-main-content { padding: 10px !important; }
.magazine-main-title { margin-bottom: 10px !important; padding-bottom: 6px !important; }
.magazine-sidebar { gap: 10px !important; }
.magazine-side-link { gap: 10px !important; padding: 10px !important; }

/* Masonry */
.masonry-layout { gap: 10px !important; }
.masonry-content { padding: 10px !important; }
.masonry-title { margin-bottom: 10px !important; padding-bottom: 6px !important; }

/* Timeline */
.timeline-layout { gap: 10px !important; }
.timeline-link { gap: 10px !important; padding: 10px !important; }
.timeline-title { margin-bottom: 10px !important; padding-bottom: 6px !important; }

/* Tabs */
.tabs-layout { gap: 10px !important; }
.section-tabs-nav { gap: 10px !important; padding: 10px !important; }
.tabs-grid { gap: 10px !important; }
.tabs-item-content { padding: 10px !important; }
.tabs-item-title { margin-bottom: 10px !important; padding-bottom: 10px !important; }

/* التاريخ على الصورة (position: absolute) */
.post-time-badge {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: linear-gradient(135deg, #00A859, #00c46e) !important;
    color: #fff !important;
    padding: 8px 18px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 15px rgba(0,168,89,0.6) !important;
    border: 2px solid #fff !important;
}

/* إخفاء التاريخ في شكل القائمة */
.section-style-list .post-time-badge {
    display: none !important;
}

/* تأكيد position: relative للصور */
.grid-item-img,
.list-item-img,
.featured-big-img,
.featured-small-img,
.compact-item-img,
.magazine-main-img,
.magazine-side-img,
.masonry-item-img,
.timeline-img,
.tabs-item-img {
    position: relative !important;
}

/* ===============================
   STYLE 5: MAGAZINE - مجلة
   =============================== */

.section-style-magazine { 
    background: #f8f9fa !important; 
}

.section-style-magazine .magazine-layout { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 10px !important; 
}

.section-style-magazine .magazine-main { 
    background: #fff !important; 
    border: 3px solid #e9ecef !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
}

.section-style-magazine .magazine-main:hover { 
    border-color: #00A859 !important; 
}

.section-style-magazine .magazine-main-img { 
    width: 100% !important; 
    height: 250px !important; 
    position: relative !important;
}

.section-style-magazine .magazine-main-img img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

.section-style-magazine .magazine-main-content { 
    padding: 10px !important; 
}

.section-style-magazine .magazine-main-title { 
    border-bottom: 3px solid #e9ecef !important; 
    padding-bottom: 6px !important; 
    margin-bottom: 10px !important; 
}

.section-style-magazine .magazine-main:hover .magazine-main-title { 
    color: #00A859 !important; 
    border-color: #00A859 !important; 
}

.section-style-magazine .magazine-sidebar { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 10px !important; 
}

.section-style-magazine .magazine-side-item { 
    background: #fff !important; 
    border: 3px solid #e9ecef !important; 
    border-radius: 12px !important; 
}

.section-style-magazine .magazine-side-item:hover { 
    border-color: #00A859 !important; 
}

.section-style-magazine .magazine-side-link { 
    display: flex !important; 
    gap: 12px !important; 
    padding: 10px !important; 
}

.section-style-magazine .magazine-side-img { 
    width: 100px !important; 
    height: 100px !important; 
    border-radius: 8px !important; 
    overflow: hidden !important; 
    position: relative !important;
}

.section-style-magazine .magazine-side-img img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

.section-style-magazine .magazine-side-title { 
    border-bottom: 2px solid transparent !important; 
    padding-bottom: 4px !important; 
}

.section-style-magazine .magazine-side-item:hover .magazine-side-title { 
    color: #00A859 !important; 
    border-color: #00A859 !important; 
}

/* ===============================
   STYLE 6: MASONRY - بناء حر
   =============================== */

.section-style-masonry { 
    background: #f8f9fa !important; 
}

.section-style-masonry .masonry-layout { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 10px !important; 
}

.section-style-masonry .masonry-item { 
    background: #fff !important; 
    border: 3px solid #e9ecef !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
}

.section-style-masonry .masonry-item:hover { 
    border-color: #00A859 !important; 
}

.section-style-masonry .masonry-item-img { 
    width: 100% !important; 
    height: 200px !important; 
    position: relative !important; 
}

.section-style-masonry .masonry-item-img img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

.section-style-masonry .masonry-overlay { 
    position: absolute !important; 
    top: 0 !important; 
    right: 0 !important; 
    padding: 12px !important; 
}

.section-style-masonry .masonry-content { 
    padding: 10px !important; 
}

.section-style-masonry .masonry-title { 
    border-bottom: 2px solid transparent !important; 
    padding-bottom: 6px !important; 
    margin-bottom: 10px !important; 
}

.section-style-masonry .masonry-item:hover .masonry-title { 
    color: #00A859 !important; 
    border-color: #00A859 !important; 
}

/* ===============================
   STYLE 7: TIMELINE - خط زمني
   =============================== */

.section-style-timeline { 
    background: #f8f9fa !important; 
}

.section-style-timeline .timeline-layout { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 10px !important; 
}

.section-style-timeline .timeline-item { 
    background: #fff !important; 
    border: 3px solid #e9ecef !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
}

.section-style-timeline .timeline-item:hover { 
    border-color: #00A859 !important; 
}

.section-style-timeline .timeline-link { 
    display: flex !important; 
    gap: 10px !important; 
    padding: 10px !important; 
    text-decoration: none !important; 
    color: inherit !important; 
}

.section-style-timeline .timeline-img { 
    width: 200px !important; 
    height: 150px !important; 
    flex-shrink: 0 !important; 
    border-radius: 8px !important; 
    overflow: hidden !important; 
}

.section-style-timeline .timeline-img img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

.section-style-timeline .timeline-text { 
    flex: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: center !important; 
}

.section-style-timeline .timeline-title { 
    border-bottom: 3px solid transparent !important; 
    padding-bottom: 6px !important; 
    margin-bottom: 10px !important; 
}

.section-style-timeline .timeline-item:hover .timeline-title { 
    color: #00A859 !important; 
    border-color: #00A859 !important; 
}

/* ===============================
   STYLE 8: TABS - تبويبات
   =============================== */

.section-style-tabs { 
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important; 
}

.section-style-tabs .section-tabs-nav { 
    display: flex !important; 
    gap: 12px !important; 
    flex-wrap: wrap !important; 
    padding: 20px !important; 
    background: #fff !important; 
    border-radius: 15px !important; 
}

.section-style-tabs .tab-btn { 
    padding: 12px 28px !important; 
    background: #f8f9fa !important; 
    border: 3px solid #e9ecef !important; 
    border-radius: 50px !important; 
    font-size: 15px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
}

.section-style-tabs .tab-btn:hover { 
    background: #e8f9f0 !important; 
    border-color: #00A859 !important; 
}

.section-style-tabs .tab-btn.active { 
    background: linear-gradient(135deg, #00A859, #00c46e) !important; 
    color: #fff !important; 
    border-color: #00A859 !important; 
}

.section-style-tabs .tab-content-pane { 
    display: none !important; 
}

.section-style-tabs .tab-content-pane.active { 
    display: block !important; 
}

.section-style-tabs .tabs-grid { 
    display: grid !important; 
    gap: 10px !important; 
}

.section-style-tabs .tabs-grid.cols-2 { 
    grid-template-columns: repeat(2, 1fr) !important; 
}

.section-style-tabs .tabs-grid.cols-3 { 
    grid-template-columns: repeat(3, 1fr) !important; 
}

.section-style-tabs .tabs-grid.cols-4 { 
    grid-template-columns: repeat(4, 1fr) !important; 
}

.section-style-tabs .tabs-grid.cols-5 { 
    grid-template-columns: repeat(5, 1fr) !important; 
}

.section-style-tabs .tabs-grid.cols-6 { 
    grid-template-columns: repeat(6, 1fr) !important; 
}

.section-style-tabs .tabs-grid-item { 
    background: #fff !important; 
    border: 3px solid #d1fae5 !important; 
    border-radius: 15px !important; 
    overflow: hidden !important; 
}

.section-style-tabs .tabs-grid-item:hover { 
    border-color: #00A859 !important; 
}

.section-style-tabs .tabs-item-img { 
    width: 100% !important; 
    height: 200px !important; 
    overflow: hidden !important; 
    position: relative !important;
}

.section-style-tabs .tabs-item-img img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

.section-style-tabs .tabs-item-content { 
    padding: 10px !important; 
}

.section-style-tabs .tabs-item-title { 
    position: relative !important; 
    padding-bottom: 10px !important; 
    margin: 0 0 12px !important; 
}

.section-style-tabs .tabs-item-title::after { 
    content: '' !important; 
    position: absolute !important; 
    bottom: 0 !important; 
    right: 0 !important; 
    width: 0 !important; 
    height: 3px !important; 
    background: #00A859 !important; 
    transition: width 0.3s !important; 
}

.section-style-tabs .tabs-grid-item:hover .tabs-item-title::after { 
    width: 50% !important; 
}

.section-style-tabs .tabs-grid-item:hover .tabs-item-title { 
    color: #00A859 !important; 
}

/* ===============================
   RESPONSIVE DESIGN
   =============================== */

@media (max-width: 768px) {
    .section-style-magazine .magazine-layout { 
        grid-template-columns: 1fr !important; 
    }
    
    .section-style-masonry .masonry-layout { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    
    .section-style-timeline .timeline-link { 
        flex-direction: column !important; 
    }
    
    .section-style-timeline .timeline-img { 
        width: 100% !important; 
        height: 180px !important; 
    }
    
    .section-style-tabs .tabs-grid,
    .section-style-tabs .tabs-grid.cols-3,
    .section-style-tabs .tabs-grid.cols-4,
    .section-style-tabs .tabs-grid.cols-5,
    .section-style-tabs .tabs-grid.cols-6 { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 480px) {
    .section-style-masonry .masonry-layout { 
        grid-template-columns: 1fr !important; 
    }
    
    .section-style-tabs .tabs-grid,
    .section-style-tabs .tabs-grid.cols-2,
    .section-style-tabs .tabs-grid.cols-3,
    .section-style-tabs .tabs-grid.cols-4,
    .section-style-tabs .tabs-grid.cols-5,
    .section-style-tabs .tabs-grid.cols-6 { 
        grid-template-columns: 1fr !important; 
    }
}