/* ============================================================
   WI Homepage — Frontend CSS v1.0.0  |  RTL | Cairo
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
  --wi-gold:#f0b429; --wi-dark:#0f1923; --wi-dark2:#1a2535; --wi-dark3:#243044;
  --wi-red:#e53e3e; --wi-green:#38a169; --wi-blue:#1d72f3;
  --wi-text:#1a202c; --wi-muted:#718096; --wi-bg:#f0f2f5; --wi-card:#fff;
  --wi-radius:14px; --wi-radius-sm:8px; --wi-shadow:0 2px 12px rgba(0,0,0,.07);
  --wi-transition:.22s ease;
}
.wi-hp-main { font-family:'Cairo',sans-serif; direction:rtl; background:var(--wi-bg); }
.wi-hp-container { max-width:1400px; margin:0 auto; padding:0 20px; }

/* ---- Shared Section ---------------------------------------- */
.wi-hp-section { padding:40px 0; }
.wi-hp-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap; }
.wi-hp-section-title-wrap { display:flex; align-items:center; gap:10px; }
.wi-hp-accent { display:block; width:4px; height:26px; background:linear-gradient(180deg,#f0b429,#d49e20); border-radius:4px; flex-shrink:0; }
.wi-hp-accent--fire { background:linear-gradient(180deg,#ff6b35,#f0b429); }
.wi-hp-section-title { font-size:20px; font-weight:800; color:var(--wi-dark); margin:0; }
.wi-hp-view-all { font-size:13px; font-weight:700; color:var(--wi-gold); text-decoration:none; transition:color var(--wi-transition); }
.wi-hp-view-all:hover { color:#d49e20; }
.wi-hp-cat-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; background:var(--wi-gold); color:var(--wi-dark); }
.wi-hp-cat-badge--sm { font-size:10px; padding:2px 8px; }
.wi-hp-img { width:100%; height:100%; object-fit:cover; display:block; }
.wi-hp-img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,var(--wi-dark2),var(--wi-dark3)); display:flex; align-items:center; justify-content:center; font-size:36px; }
.wi-hp-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.wi-hp-sep { color:var(--wi-muted); }
.wi-hp-meta-date { font-size:12px; color:var(--wi-muted); }
.wi-hp-period-label { font-size:12px; background:var(--wi-gold); color:var(--wi-dark); padding:2px 10px; border-radius:20px; font-weight:700; }

/* ---- Breaking News Bar ------------------------------------- */
.wi-hp-breaking-bar { display:flex; align-items:center; gap:0; background:var(--wi-dark); color:#fff; direction:rtl; position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,.2); }
.wi-hp-breaking-label { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--wi-red); font-size:12px; font-weight:800; white-space:nowrap; flex-shrink:0; }
.wi-hp-breaking-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:wi-blink 1.2s ease-in-out infinite; }
@keyframes wi-blink { 0%,100%{opacity:1}50%{opacity:.3} }
.wi-hp-breaking-ticker-wrap { flex:1; overflow:hidden; position:relative; }
.wi-hp-breaking-ticker { display:flex; gap:40px; white-space:nowrap; animation:wi-ticker 30s linear infinite; padding:10px 16px; }
.wi-hp-breaking-ticker:hover { animation-play-state:paused; }
.wi-hp-breaking-item { font-size:13px; font-weight:600; color:#fff; text-decoration:none; opacity:.85; transition:opacity var(--wi-transition); flex-shrink:0; }
.wi-hp-breaking-item::before { content:'●'; margin-left:16px; color:var(--wi-gold); font-size:8px; vertical-align:middle; }
.wi-hp-breaking-item:hover { opacity:1; color:var(--wi-gold); }
@keyframes wi-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.wi-hp-breaking-all { padding:10px 16px; font-size:12px; font-weight:700; color:var(--wi-gold); text-decoration:none; white-space:nowrap; flex-shrink:0; border-right:1px solid rgba(255,255,255,.1); transition:background var(--wi-transition); }
.wi-hp-breaking-all:hover { background:rgba(255,255,255,.05); }

/* ---- Hero Section ------------------------------------------ */
.wi-hp-hero { background:var(--wi-card); }
.wi-hp-hero-grid { display:grid; grid-template-columns:1fr 380px; gap:20px; min-height:520px; }
.wi-hp-hero-main { display:block; border-radius:var(--wi-radius); overflow:hidden; position:relative; text-decoration:none; }
.wi-hp-hero-main-img { position:relative; height:100%; min-height:420px; overflow:hidden; }
.wi-hp-hero-main-img:hover .wi-hp-img { transform:scale(1.04); }
.wi-hp-hero-main-img .wi-hp-img { transition:transform .4s ease; }
.wi-hp-hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 50%,transparent 100%); }
.wi-hp-hero-main-body { position:absolute; bottom:0; right:0; left:0; padding:28px; }
.wi-hp-hero-main-title { font-size:24px; font-weight:800; color:#fff; margin:8px 0 12px; line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.wi-hp-hero-meta { display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.8); flex-wrap:wrap; }
.wi-hp-hero-meta .wi-hp-avatar { width:28px; height:28px; }
.wi-hp-hero-side { display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.wi-hp-hero-side-card { display:flex; gap:12px; text-decoration:none; border-radius:var(--wi-radius-sm); overflow:hidden; background:#f9fafb; border:1px solid #f0f2f5; transition:all var(--wi-transition); flex:1; min-height:0; }
.wi-hp-hero-side-card:hover { transform:translateY(-2px); box-shadow:var(--wi-shadow); border-color:var(--wi-gold); }
.wi-hp-hero-side-img { width:100px; flex-shrink:0; overflow:hidden; }
.wi-hp-hero-side-img .wi-hp-img { height:100%; }
.wi-hp-img-placeholder--sm { font-size:20px; }
.wi-hp-hero-side-body { padding:12px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.wi-hp-hero-side-title { font-size:13px; font-weight:700; color:var(--wi-dark); line-height:1.45; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Shorts Strip ------------------------------------------ */
.wi-hp-shorts { background:var(--wi-dark); padding:36px 0; }
.wi-hp-shorts .wi-hp-section-title { color:#fff; }
.wi-hp-shorts .wi-hp-view-all { color:var(--wi-gold); }
.wi-hp-shorts-track { position:relative; overflow:hidden; }
.wi-hp-shorts-strip { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:8px; scrollbar-width:none; }
.wi-hp-shorts-strip::-webkit-scrollbar { display:none; }
.wi-hp-short-card { flex-shrink:0; width:200px; background:#1a2535; border-radius:12px; overflow:hidden; text-decoration:none; scroll-snap-align:start; transition:transform var(--wi-transition); border:1.5px solid transparent; }
.wi-hp-short-card:hover { transform:translateY(-4px); border-color:var(--wi-gold); }
.wi-hp-short-card-img { position:relative; height:120px; overflow:hidden; background:var(--wi-dark3); }
.wi-hp-short-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.wi-hp-short-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:32px; }
.wi-hp-short-breaking { position:absolute; top:6px; right:6px; background:var(--wi-red); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.wi-hp-short-cat { position:absolute; bottom:6px; right:6px; background:rgba(240,180,41,.9); color:var(--wi-dark); font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }
.wi-hp-short-card-body { padding:10px; }
.wi-hp-short-title { font-size:12px; font-weight:700; color:#f7fafc; line-height:1.45; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wi-hp-short-meta { display:flex; gap:8px; font-size:11px; color:rgba(255,255,255,.5); }
.wi-hp-short-age { margin-right:auto; }
.wi-hp-shorts-nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:22px; border-radius:50%; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:background var(--wi-transition); backdrop-filter:blur(4px); }
.wi-hp-shorts-nav:hover { background:var(--wi-gold); color:var(--wi-dark); }
.wi-hp-shorts-prev { right:8px; }
.wi-hp-shorts-next { left:8px; }

/* ---- Latest Grid ------------------------------------------- */
.wi-hp-latest { background:var(--wi-bg); }
.wi-hp-grid { display:grid; gap:20px; }
.wi-hp-grid--3 { grid-template-columns:repeat(3,1fr); }
.wi-hp-grid--2 { grid-template-columns:repeat(2,1fr); }
.wi-hp-grid--4 { grid-template-columns:repeat(4,1fr); }
.wi-hp-article-card { background:var(--wi-card); border-radius:var(--wi-radius); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; border:1.5px solid transparent; box-shadow:var(--wi-shadow); transition:all var(--wi-transition); }
.wi-hp-article-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.12); border-color:var(--wi-gold); }
.wi-hp-article-card-img { position:relative; height:180px; overflow:hidden; }
.wi-hp-article-card-img:hover img { transform:scale(1.04); }
.wi-hp-article-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.wi-hp-article-card-body { padding:16px; display:flex; flex-direction:column; flex:1; gap:8px; }
.wi-hp-article-title { font-size:15px; font-weight:700; color:var(--wi-dark); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wi-hp-article-excerpt { font-size:13px; color:var(--wi-muted); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wi-hp-article-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:1px solid #f0f2f5; }
.wi-hp-article-author { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--wi-muted); }
.wi-hp-article-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--wi-muted); }
.wi-hp-read-time { background:#f0f2f5; padding:2px 8px; border-radius:10px; font-weight:600; }

/* ---- Category Section -------------------------------------- */
.wi-hp-cat-section { background:var(--wi-card); }
.wi-hp-cat-layout { display:grid; grid-template-columns:1fr 340px; gap:20px; min-height:360px; }
.wi-hp-cat-main { display:block; position:relative; border-radius:var(--wi-radius); overflow:hidden; text-decoration:none; }
.wi-hp-cat-main-img { position:relative; height:360px; overflow:hidden; }
.wi-hp-cat-main-img .wi-hp-img { transition:transform .4s ease; }
.wi-hp-cat-main:hover .wi-hp-img { transform:scale(1.04); }
.wi-hp-cat-main-body { position:absolute; bottom:0; right:0; left:0; padding:24px; }
.wi-hp-cat-main-title { font-size:18px; font-weight:800; color:#fff; margin:0 0 8px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.wi-hp-cat-side { display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.wi-hp-cat-side-item { display:flex; gap:12px; align-items:center; text-decoration:none; padding:10px; background:#f9fafb; border-radius:var(--wi-radius-sm); border:1px solid #f0f2f5; transition:all var(--wi-transition); }
.wi-hp-cat-side-item:hover { background:#fff; border-color:var(--wi-gold); transform:translateX(-3px); }
.wi-hp-cat-side-thumb { width:64px; height:48px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.wi-hp-cat-side-title { font-size:13px; font-weight:700; color:var(--wi-dark); line-height:1.4; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Trending ---------------------------------------------- */
.wi-hp-trending { background:var(--wi-bg); }
.wi-hp-trending-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.wi-hp-trending-item { display:flex; gap:10px; align-items:center; text-decoration:none; background:var(--wi-card); border-radius:var(--wi-radius-sm); padding:12px; box-shadow:var(--wi-shadow); border:1.5px solid transparent; transition:all var(--wi-transition); }
.wi-hp-trending-item:hover { border-color:var(--wi-gold); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.wi-hp-trending-rank { font-size:20px; font-weight:800; color:#e2e8f0; min-width:24px; text-align:center; flex-shrink:0; }
.wi-hp-trending-item:nth-child(1) .wi-hp-trending-rank{color:var(--wi-gold)} .wi-hp-trending-item:nth-child(2) .wi-hp-trending-rank{color:#a0aec0} .wi-hp-trending-item:nth-child(3) .wi-hp-trending-rank{color:#cd7f32}
.wi-hp-trending-thumb { position:relative; width:64px; height:48px; border-radius:6px; overflow:hidden; flex-shrink:0; }
.wi-hp-trending-thumb img { width:100%; height:100%; object-fit:cover; }
.wi-hp-trending-no-img { width:100%; height:100%; background:var(--wi-dark2); display:flex; align-items:center; justify-content:center; font-size:18px; }
.wi-hp-trending-type { position:absolute; bottom:2px; right:2px; background:rgba(240,180,41,.9); color:var(--wi-dark); font-size:9px; font-weight:700; padding:1px 5px; border-radius:6px; }
.wi-hp-trending-body { flex:1; min-width:0; }
.wi-hp-trending-cat { font-size:10px; font-weight:700; color:var(--wi-gold); display:block; }
.wi-hp-trending-title { font-size:12px; font-weight:700; color:var(--wi-dark); line-height:1.45; margin:2px 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wi-hp-trending-meta { display:flex; gap:8px; font-size:11px; color:var(--wi-muted); }

/* ---- Authors ---------------------------------------------- */
.wi-hp-authors { background:var(--wi-card); }
.wi-hp-authors-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.wi-hp-author-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 12px; background:#f9fafb; border-radius:var(--wi-radius); border:1.5px solid #f0f2f5; transition:all var(--wi-transition); }
.wi-hp-author-card:hover { background:#fff; border-color:var(--wi-gold); transform:translateY(-3px); box-shadow:var(--wi-shadow); }
.wi-hp-author-link { text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:10px; }
.wi-hp-author-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid var(--wi-gold); }
.wi-hp-author-name { font-size:13px; font-weight:700; color:var(--wi-dark); }
.wi-hp-author-bio { font-size:11px; color:var(--wi-muted); line-height:1.5; margin:4px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wi-hp-author-stats { display:flex; gap:10px; font-size:11px; color:var(--wi-muted); font-weight:600; }
.wi-hp-follow-btn { margin-top:8px; padding:6px 16px; background:transparent; border:1.5px solid var(--wi-gold); color:var(--wi-dark); border-radius:20px; font-family:'Cairo',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:all var(--wi-transition); }
.wi-hp-follow-btn:hover, .wi-hp-follow-btn.followed { background:var(--wi-gold); color:var(--wi-dark); }

/* ---- Newsletter -------------------------------------------- */
.wi-hp-newsletter { background:linear-gradient(135deg,var(--wi-dark) 0%,var(--wi-dark3) 100%); }
.wi-hp-newsletter-inner { max-width:600px; margin:0 auto; text-align:center; padding:20px 0; }
.wi-hp-newsletter-deco { font-size:48px; margin-bottom:8px; }
.wi-hp-newsletter-title { font-size:26px; font-weight:800; color:#fff; margin:0 0 12px; }
.wi-hp-newsletter-subtitle { font-size:15px; color:rgba(255,255,255,.7); line-height:1.7; margin:0 0 28px; }
.wi-hp-newsletter-form { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.wi-hp-nl-input-wrap { width:100%; }
.wi-hp-nl-input { width:100%; padding:13px 18px; border:1.5px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font-family:'Cairo',sans-serif; font-size:14px; direction:rtl; transition:border-color var(--wi-transition); }
.wi-hp-nl-input:focus { outline:none; border-color:var(--wi-gold); background:rgba(255,255,255,.12); }
.wi-hp-nl-input::placeholder { color:rgba(255,255,255,.4); }
.wi-hp-nl-btn { padding:14px 32px; background:var(--wi-gold); color:var(--wi-dark); border:none; border-radius:10px; font-family:'Cairo',sans-serif; font-size:15px; font-weight:800; cursor:pointer; transition:all var(--wi-transition); letter-spacing:.5px; }
.wi-hp-nl-btn:hover { background:#d49e20; transform:translateY(-2px); box-shadow:0 8px 24px rgba(240,180,41,.4); }
.wi-hp-nl-msg { font-size:14px; font-weight:700; padding:12px; border-radius:8px; }
.wi-hp-nl-msg.success { background:rgba(56,161,105,.2); color:#68d391; border:1px solid rgba(56,161,105,.3); }
.wi-hp-nl-msg.error   { background:rgba(229,62,62,.2);  color:#fc8181; border:1px solid rgba(229,62,62,.3); }
.wi-hp-nl-privacy { font-size:12px; color:rgba(255,255,255,.4); margin-top:12px; }

/* ---- Ad Banner -------------------------------------------- */
.wi-hp-ad-banner { text-align:center; padding:20px; background:var(--wi-bg); }

/* ---- Responsive ------------------------------------------- */
@media (max-width:1200px) { .wi-hp-trending-grid{grid-template-columns:repeat(2,1fr)} .wi-hp-authors-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px)  { .wi-hp-hero-grid{grid-template-columns:1fr} .wi-hp-hero-side{display:none} .wi-hp-cat-layout{grid-template-columns:1fr} .wi-hp-cat-side{display:none} .wi-hp-grid--3,.wi-hp-grid--4{grid-template-columns:repeat(2,1fr)} .wi-hp-authors-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px)  { .wi-hp-trending-grid{grid-template-columns:1fr} .wi-hp-grid--3,.wi-hp-grid--2,.wi-hp-grid--4{grid-template-columns:1fr} .wi-hp-authors-grid{grid-template-columns:1fr 1fr} .wi-hp-section-title{font-size:17px} .wi-hp-hero-main-title{font-size:18px} }

/* Dark mode */
body.dark-mode .wi-hp-main { background:var(--wi-dark); }
body.dark-mode .wi-hp-hero,.body.dark-mode .wi-hp-latest,.body.dark-mode .wi-hp-cat-section,.body.dark-mode .wi-hp-authors { background:var(--wi-dark2); }
body.dark-mode .wi-hp-section-title,.body.dark-mode .wi-hp-article-title,.body.dark-mode .wi-hp-trending-title { color:#f7fafc; }
body.dark-mode .wi-hp-article-card,.body.dark-mode .wi-hp-trending-item,.body.dark-mode .wi-hp-author-card,.body.dark-mode .wi-hp-cat-side-item { background:var(--wi-dark3); border-color:rgba(255,255,255,.05); }
body.dark-mode .wi-hp-article-card:hover { border-color:var(--wi-gold); }