/* pages.css — أقسام خاصة بالصفحات */

/* البطل (Hero) */
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(16,185,129,.22), transparent 60%),
    linear-gradient(160deg, #0f231d, #0b1411);
  padding: clamp(34px, 6vw, 70px);
  margin-bottom: clamp(34px, 5vw, 60px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(16,185,129,.045) 36px 72px);
  pointer-events: none;
}
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .42; z-index: 0; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(16,185,129,.22), transparent 60%),
    linear-gradient(160deg, rgba(15,35,29,.72), rgba(11,20,17,.86));
}
.hero__inner { position: relative; z-index: 2; max-width: 720px; }
.hero h1 { margin-bottom: 18px; }
.hero p { font-size: 1.1rem; max-width: 600px; margin-bottom: 26px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__pitch {
  position: absolute; left: -40px; bottom: -60px;
  width: 360px; height: 360px; opacity: .35; pointer-events: none;
}
@media (max-width: 760px) { .hero__pitch { display: none; } }

/* رأس الصفحة الداخلية */
.pagehead {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    radial-gradient(500px 300px at 90% 10%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(160deg, #0f231d, #0b1411);
  padding: clamp(30px, 5vw, 54px);
  margin-bottom: 40px;
  position: relative; overflow: hidden;
}
.pagehead h1 { margin-bottom: 14px; max-width: 760px; }
.pagehead p { max-width: 680px; font-size: 1.05rem; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--text-dim); margin-bottom: 16px; }
.breadcrumbs a { color: var(--text-soft); }
.breadcrumbs .sep { opacity: .5; }

/* نص مقالة طويل */
.article { max-width: 820px; }
.article > p { margin-bottom: 20px; font-size: 1.04rem; }
.article h2 { margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.article h3 { margin: 28px 0 12px; color: var(--emerald-2); }
.article ul.bullets { margin: 8px 0 22px; }
.article ul.bullets li {
  position: relative; padding-inline-start: 24px; margin-bottom: 11px; color: var(--text-soft);
}
.article ul.bullets li::before {
  content: ""; position: absolute; right: 4px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-2);
}
.article figure { margin: 26px 0; }
.article figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border);
}
.article figcaption { font-size: .82rem; color: var(--text-dim); margin-top: 9px; text-align: center; }

/* صورة بطاقة المقال */
.post__media img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* صورة داخل لوحة المعلومات الجانبية */
.split__media {
  width: 100%; height: 100%; min-height: 240px;
  object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--border); aspect-ratio: 4 / 3;
}

/* تخطيط المقالة + لوحة جانبية */
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 22px; }
.aside .card { padding: 22px; }
.toc li { margin-bottom: 9px; }
.toc a { color: var(--text-soft); font-size: .9rem; }
.toc a:hover { color: var(--emerald-2); }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .aside { position: static; } }

/* خط زمني */
.timeline { position: relative; padding-inline-start: 28px; }
.timeline::before {
  content: ""; position: absolute; right: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.timeline__item { position: relative; margin-bottom: 26px; }
.timeline__item::before {
  content: ""; position: absolute; right: -28px; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--emerald-2); box-shadow: 0 0 0 4px rgba(16,185,129,.18);
}
.timeline__time { font-weight: 800; color: var(--emerald-2); font-size: .9rem; }
.timeline__item h4 { margin: 4px 0 6px; }
.timeline__item p { font-size: .92rem; margin: 0; }

/* بطاقة تواصل */
.contact-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  display: flex; gap: 16px; align-items: flex-start;
}
.contact-card .ic {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.28);
  display: grid; place-items: center;
}
.contact-card .ic svg { width: 24px; height: 24px; color: var(--emerald-2); }
.contact-card h4 { margin-bottom: 5px; }
.contact-card a, .contact-card p { font-size: .95rem; color: var(--text-soft); margin: 0; }
.contact-card a:hover { color: var(--emerald-2); }

/* روابط اجتماعية */
.socials { display: flex; gap: 12px; }
.socials a {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-soft);
  transition: var(--t);
}
.socials a:hover { color: #fff; border-color: var(--emerald-2); background: rgba(16,185,129,.10); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; }

/* صف لوحات */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(22px, 3vw, 34px);
}

/* مخطط نسب (أشرطة) */
.bars { display: flex; flex-direction: column; gap: 16px; }
.bar__top { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px; }
.bar__track { height: 10px; background: var(--bg-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.bar__fill { height: 100%; background: linear-gradient(90deg, var(--emerald-2), var(--emerald-deep)); border-radius: 999px; }

/* قائمة دول مشاركة */
.nations { display: flex; flex-wrap: wrap; gap: 10px; }

/* محتوى مركزي للصفحات القانونية */
.legal { max-width: 800px; }
.legal h2 { margin: 32px 0 12px; }
.legal p, .legal li { color: var(--text-soft); }
.legal ul { margin: 10px 0 18px; }
.legal ul li { position: relative; padding-inline-start: 22px; margin-bottom: 9px; }
.legal ul li::before { content: ""; position: absolute; right: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-2); }
.legal .updated { font-size: .85rem; color: var(--text-dim); margin-bottom: 24px; }