/* =========================================
   1. GLOBAL & RESET (أساسي لجميع العناصر)
   ========================================= */
.ahe-grid-wrapper {
    direction: rtl; width: 100%; box-sizing: border-box;
}
.ahe-grid-wrapper * { box-sizing: border-box; }

/* تنسيق زر الوضع الليلي */
.ahe-dark-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid transparent; cursor: pointer;
    background: transparent; font-family: inherit; transition: 0.3s;
}

/* =========================================
   2. GRID WIDGET STYLES (شبكة الأخبار)
   ========================================= */
.ahe-grid-wrapper { display: grid; gap: 20px; width: 100%; }

.ahe-grid-card {
    display: flex; background: #fff; 
    border: 1px solid #eee; border-radius: 10px; 
    overflow: hidden; transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.ahe-grid-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* Horizontal (القائمة) */
.layout-horizontal .ahe-grid-card { flex-direction: row; height: 170px; align-items: stretch; }
.layout-horizontal .ahe-card-image { width: 35%; flex-shrink: 0; position: relative; }
.layout-horizontal .ahe-card-content { width: 65%; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; }

/* Vertical (البطاقة) */
.layout-vertical .ahe-grid-card { flex-direction: column; height: 100%; }
.layout-vertical .ahe-card-image { width: 100%; height: 200px; flex-shrink: 0; }
.layout-vertical .ahe-card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }

.ahe-card-image img { width: 100%; height: 100%; object-fit: cover; }
.ahe-grid-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ahe-grid-title a { color: #333; text-decoration: none; transition: 0.3s; }
.ahe-grid-title a:hover { color: #6a1b9a; }
.ahe-grid-excerpt { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; }
.ahe-grid-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid #f5f5f5; display: flex; align-items: center; gap: 10px; }
.ahe-auth-box { display: flex; align-items: center; gap: 8px; }
.ahe-auth-box img { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; }
.ahe-grid-author { font-size: 12px; font-weight: bold; color: #444; }
.ahe-grid-date { font-size: 11px; color: #999; margin-right: auto; }

/* =========================================
   3. PAGINATION & BUTTONS
   ========================================= */
.ahe-pagination-container { margin-top: 30px; width: 100%; display: flex; justify-content: center; }
.ahe-action-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 25px; background: #6a1b9a; color: #fff; border-radius: 6px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: 0.3s; }
.ahe-action-btn:hover { background: #55147d; transform: translateY(-2px); }

/* =========================================
   4. READ MORE FUNCTIONALITY
   ========================================= */
.ahe-read-more .elementor-widget-container.ahe-collapsed {
    max-height: 150px; overflow: hidden; position: relative; transition: max-height 0.5s ease;
}
.ahe-read-more .elementor-widget-container.ahe-collapsed::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events: none;
}
.ahe-read-more-trigger { text-align: center; margin-top: 10px; cursor: pointer; }
.ahe-rm-btn { display: inline-block; font-size: 14px; font-weight: bold; color: #6a1b9a; border-bottom: 1px dashed #6a1b9a; transition: 0.3s; }

/* =========================================
   5. DARK MODE (الشامل)
   ========================================= */
body.ahe-dark-mode { background-color: #121212 !important; color: #e0e0e0 !important; }
body.ahe-dark-mode h1, body.ahe-dark-mode h2, body.ahe-dark-mode h3, body.ahe-dark-mode h4, body.ahe-dark-mode h5, body.ahe-dark-mode h6 { color: #ffffff !important; }
body.ahe-dark-mode .ahe-grid-card { background-color: #1e1e1e !important; border-color: #333 !important; }
body.ahe-dark-mode .ahe-read-more .elementor-widget-container.ahe-collapsed::after { background: linear-gradient(to bottom, rgba(18,18,18,0), rgba(18,18,18,1)); }