/* =====================================================================
   landing.css — صفحة الهبوط العامة
   ---------------------------------------------------------------------
   الألوان كلها مشتقّة من theme.css: لا لون جديد يُخترع هنا، وإنما تُبنى
   الأسطح والحدود من رموز العلامة نفسها. فمتى غيّر مديرُ النظام لونَ
   المنصة تغيّرت هذه الصفحة معه بلا لمسِ ملفٍ ثانٍ.

   كل قيمة لونية حرفية محصورةٌ في :root و[data-bs-theme="dark"] أدناه.
   ===================================================================== */

:root {
  --lp-surface:      #ffffff;
  --lp-surface-2:    #f8fbfb;
  --lp-ground:       #f4f8f9;
  --lp-ink:          #16262a;
  --lp-ink-2:        #46595e;
  --lp-line:         rgba(var(--app-primary-rgb), .14);
  --lp-line-soft:    rgba(var(--app-primary-rgb), .07);
  --lp-glow:         rgba(var(--app-accent-rgb), .13);
  --lp-glow-2:       rgba(var(--app-secondary-rgb), .11);
  --lp-track:        rgba(var(--app-primary-rgb), .10);
  --lp-header-bg:    rgba(255, 255, 255, .82);
  --lp-onbrand:      #ffffff;

  /* ترميز الجنس — على الخريطة والأشرطة والوسوم معاً، فلا يتعلّم القارئ رمزين */
  --lp-boys:         var(--app-accent);
  --lp-girls:        var(--app-secondary);

  --lp-radius:       1rem;
  --lp-radius-sm:    .6rem;
  --lp-gap:          1rem;
}

/* الوضع الداكن — إعادة تعريف الرموز وحدها، لا قواعد جديدة */
[data-bs-theme="dark"] {
  --lp-surface:      #16282b;
  --lp-surface-2:    #132326;
  --lp-ground:       #0f1c1f;
  --lp-ink:          #e6eef0;
  --lp-ink-2:        #9fb2b6;
  --lp-line:         rgba(var(--app-accent-light-rgb), .16);
  --lp-line-soft:    rgba(var(--app-accent-light-rgb), .09);
  --lp-glow:         rgba(var(--app-accent-rgb), .20);
  --lp-glow-2:       rgba(var(--app-secondary-rgb), .16);
  --lp-track:        rgba(var(--app-accent-light-rgb), .14);
  --lp-header-bg:    rgba(15, 28, 31, .84);
}

/* لا تفضيل محفوظ ولا سكربت — يُتبع تفضيل النظام */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --lp-surface:   #16282b;
    --lp-surface-2: #132326;
    --lp-ground:    #0f1c1f;
    --lp-ink:       #e6eef0;
    --lp-ink-2:     #9fb2b6;
    --lp-header-bg: rgba(15, 28, 31, .84);
  }
}

/* ===================== الأساس ===================== */

.lp {
  background: var(--lp-ground);
  color: var(--lp-ink);
}

.lp-wrap {
  width: min(1240px, 100% - 2rem);
  margin-inline: auto;
}

.lp-section { padding-block: 3.5rem; }
.lp-section--tint { background: var(--lp-surface-2); }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  color: var(--app-accent);
  background: rgba(var(--app-accent-rgb), .10);
  padding: .3rem .7rem; border-radius: 2rem;
}

.lp-h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800; margin-block: .7rem .4rem;
  text-wrap: balance;
}

.lp-lede {
  color: var(--lp-ink-2); max-width: 62ch; margin-bottom: 0;
  font-size: .98rem; line-height: 1.9;
}

.lp-num { font-variant-numeric: tabular-nums; }

/* ===================== شريط الجهة والهيدر ===================== */

.lp-utility {
  background: var(--app-dark); color: var(--lp-onbrand);
  font-size: .78rem; padding-block: .5rem;
}

.lp-utility .lp-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.lp-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--lp-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lp-line);
}

.lp-header .lp-wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}

/* ‏العلامة تنكمش ولا تدفع: بعرض ثابت يهبط زرُّ الدخول سطراً على الجوال
   فيبتلع الهيدرُ ثلثَ الشاشة قبل أن يُقرأ حرفٌ من المحتوى */
.lp-brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit; flex: 0 0 auto; min-width: 0;
}

.lp-brand > span { min-width: 0; }
.lp-brand-name, .lp-brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lp-brand-name { font-weight: 800; line-height: 1.15; font-size: 1.02rem; }
.lp-brand-sub  { font-size: .7rem; color: var(--lp-ink-2); }

.lp-nav {
  display: flex; gap: .25rem; margin-inline-start: auto;
  overflow-x: auto; scrollbar-width: none;
}

.lp-nav::-webkit-scrollbar { display: none; }

.lp-nav a {
  color: var(--lp-ink-2); text-decoration: none; font-size: .88rem;
  font-weight: 600; padding: .45rem .7rem; border-radius: var(--lp-radius-sm);
  white-space: nowrap;
}

.lp-nav a:hover { color: var(--app-accent); background: rgba(var(--app-accent-rgb), .09); }

.lp-header-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

@media (max-width: 991.98px) {
  .lp-nav {
    order: 3; width: 100%; margin-inline-start: 0; padding-bottom: .5rem;
    /* تلاشٍ عند الحافة يقول للقارئ إن وراءها بقية — بدله يبدو الرابط مقصوصاً */
    mask-image: linear-gradient(to left, #000 88%, transparent 100%);
  }

  .lp-header .lp-wrap { flex-wrap: wrap; padding-top: .5rem; min-height: 0; }
  .lp-header-actions { margin-inline-start: auto; }

  /* أساسٌ صفريّ لا تلقائي: مع الالتفاف يُوزَّن العنصر بمقاسه الأصلي قبل
     الانكماش، فيهبط زرُّ الدخول سطراً كاملاً وإن كان في السطر متسع */
  .lp-brand { flex: 1 1 0; }
}

@media (max-width: 575.98px) {
  .lp-brand-name { font-size: .92rem; }
  .lp-brand-sub { display: none; }
}

/* ===================== الواجهة (Hero) ===================== */

.lp-hero {
  position: relative; overflow: hidden;
  padding-block: 3.2rem 3.6rem;
  background: var(--lp-surface);
  border-bottom: 1px solid var(--lp-line);
}

/* هالتان لونيتان خفيفتان — عمقٌ بلا صورةٍ تُحمَّل */
.lp-hero::before,
.lp-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}

.lp-hero::before {
  width: 520px; height: 520px; inset-block-start: -240px; inset-inline-start: -140px;
  background: radial-gradient(circle, var(--lp-glow) 0%, transparent 70%);
}

.lp-hero::after {
  width: 460px; height: 460px; inset-block-end: -260px; inset-inline-end: -120px;
  background: radial-gradient(circle, var(--lp-glow-2) 0%, transparent 70%);
}

.lp-hero .lp-wrap { position: relative; }

.lp-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem; align-items: center;
}

.lp-hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 800; line-height: 1.35; text-wrap: balance; margin-bottom: 1rem;
}

.lp-mark {
  background: linear-gradient(transparent 62%, rgba(var(--app-secondary-rgb), .28) 62%);
  padding-inline: .12em;
}

.lp-hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.6rem 2rem; }

.lp-figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid var(--lp-line); padding-top: 1.3rem;
}

.lp-figure-v { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-weight: 800; line-height: 1; }
.lp-figure-l { font-size: .78rem; color: var(--lp-ink-2); margin-top: .3rem; }

/* بطاقة «المنطقة اليوم» */
.lp-pulse {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 1.4rem;
  box-shadow: var(--app-shadow-lg);
}

.lp-pulse-row + .lp-pulse-row { margin-top: 1.1rem; }

.lp-pulse-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; font-size: .86rem; margin-bottom: .4rem;
}

.lp-pulse-head b { font-size: 1rem; }

.lp-track {
  height: 8px; border-radius: 6px; background: var(--lp-track); overflow: hidden;
}

.lp-track > span { display: block; height: 100%; border-radius: 6px; }

.lp-fill-brand { background-image: var(--app-gradient); }
.lp-fill-ok    { background: var(--app-success); }
.lp-fill-warn  { background: var(--app-warning); }
.lp-fill-info  { background: var(--app-accent); }

@media (max-width: 1039.98px) {
  .lp-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .lp-figures { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== الخدمات ===================== */

.lp-svc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--lp-line);
  border: 1px solid var(--lp-line); border-radius: var(--lp-radius); overflow: hidden;
}

.lp-svc {
  background: var(--lp-surface); padding: 1.4rem 1.25rem;
  display: flex; flex-direction: column; gap: .55rem;
}

.lp-svc-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem; color: var(--lp-onbrand); background-image: var(--app-gradient);
}

.lp-svc h3 { font-size: 1rem; font-weight: 800; margin: 0; }
.lp-svc p  { font-size: .85rem; color: var(--lp-ink-2); margin: 0; line-height: 1.8; }

.lp-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .5rem; }

.lp-tag {
  font-size: .7rem; font-weight: 600; color: var(--lp-ink-2);
  border: 1px solid var(--lp-line); border-radius: 2rem; padding: .15rem .55rem;
}

/* ‏سبعُ بطاقاتٍ في شبكةٍ زوجية تترك خانةً فارغة — وفاصلُ الشبكة يُظهرها لوحاً
   رمادياً يبدو عطلاً في التخطيط. فتُمدّ الأخيرة على خانتين فيستوي الصف */
@media (min-width: 576px) { .lp-svc-grid > :last-child { grid-column: span 2; } }

@media (max-width: 1199.98px) { .lp-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  {
  .lp-svc-grid { grid-template-columns: 1fr; }
  .lp-svc-grid > :last-child { grid-column: span 1; }
}

/* ===================== اللوحات والأشرطة ===================== */

.lp-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lp-gap); }

.lp-panel {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 1.3rem;
}

.lp-panel h3 { font-size: 1rem; font-weight: 800; margin-bottom: 1.1rem; }

.lp-barrow + .lp-barrow { margin-top: .95rem; }

.lp-barrow-head {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .85rem; margin-bottom: .35rem;
}

.lp-stack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--lp-track); }
.lp-stack > span { display: block; height: 100%; }
.lp-seg-m { background: var(--lp-boys); }
.lp-seg-f { background: var(--lp-girls); }

.lp-legend { display: flex; gap: 1rem; font-size: .78rem; color: var(--lp-ink-2); margin-top: 1rem; }
.lp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-inline-end: .3rem; }

@media (max-width: 991.98px) { .lp-panels { grid-template-columns: 1fr; } }

/* ===================== الخريطة ===================== */

.lp-map-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--lp-gap); }

/* الخريطة وحدها بعرض الصفحة — بعد نقل اللوحة والجدول إلى لوحة معلومات القطاع */
.lp-map-solo #lpMap, .lp-map-solo .lp-map-fallback { height: 600px; }

.lp-map-card {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); overflow: hidden;
}

.lp-filters {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .8rem 1rem; border-bottom: 1px solid var(--lp-line);
}

.lp-filters .form-select { max-width: 220px; }

.lp-chipset { display: inline-flex; border: 1px solid var(--lp-line); border-radius: 2rem; overflow: hidden; }

.lp-chip {
  border: 0; background: transparent; color: var(--lp-ink-2);
  font-size: .82rem; font-weight: 600; padding: .35rem .8rem; cursor: pointer;
}

.lp-chip[aria-pressed="true"] { background-image: var(--app-gradient); color: var(--lp-onbrand); }

#lpMap, .lp-map-fallback { width: 100%; height: 520px; }

.lp-map-fallback { display: block; background: var(--lp-surface-2); }

.lp-map-note {
  border-top: 1px solid var(--lp-line); padding: .7rem 1rem;
  font-size: .8rem; color: var(--lp-ink-2); background: var(--lp-surface-2);
}

.lp-side {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 1.2rem;
  position: sticky; top: 88px; align-self: start;
}

.lp-side-title { font-size: .95rem; font-weight: 800; margin-bottom: .9rem; }

.lp-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.2rem; }

.lp-side-box {
  border: 1px solid var(--lp-line-soft); border-radius: var(--lp-radius-sm);
  padding: .6rem .7rem; background: var(--lp-surface-2);
}

.lp-side-box b { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.lp-side-box span { font-size: .72rem; color: var(--lp-ink-2); }

.lp-table-wrap { overflow-x: auto; }
.lp-table-wrap table { margin-bottom: 0; white-space: nowrap; }

@media (max-width: 1039.98px) {
  .lp-map-grid { grid-template-columns: 1fr; }
  .lp-side { position: static; }
  #lpMap, .lp-map-fallback,
  .lp-map-solo #lpMap, .lp-map-solo .lp-map-fallback { height: 420px; }
}

/* ===================== التخصصات ===================== */

.lp-spec + .lp-spec { margin-top: .8rem; }

.lp-spec-head { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .3rem; }

/* ===================== عدّادات الخدمات ===================== */

/* ‏شبكةٌ تتكيّف مع العدد: أعمدةٌ ثابتة تترك صفاً أخيراً فيه بطاقةٌ يتيمة كلما
   أُضيفت وحدة أو حُذفت، وauto-fit يملأ الصف مهما كان العدد */
.lp-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--lp-gap);
}

.lp-counter {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 1.2rem;
  display: flex; gap: .9rem; align-items: flex-start;
}

.lp-counter-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(var(--app-accent-rgb), .12); color: var(--app-accent);
  font-size: 1.1rem; flex: 0 0 auto;
}

.lp-counter h4 { font-size: .95rem; font-weight: 800; margin: 0 0 .15rem; }
.lp-counter p  { font-size: .78rem; color: var(--lp-ink-2); margin: .35rem 0 0; line-height: 1.75; }

.lp-counter-v { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.lp-counter-u { font-size: .78rem; color: var(--lp-ink-2); margin-inline-start: .25rem; }

.lp-ready {
  font-size: .72rem; font-weight: 700; color: var(--app-success);
  background: rgba(var(--app-secondary-rgb), .14);
  border-radius: 2rem; padding: .15rem .6rem; display: inline-block;
}

@media (max-width: 575.98px) { .lp-counters { grid-template-columns: 1fr; } }

/* ===================== الفوتر ===================== */

.lp-footer {
  background: var(--app-dark); color: var(--lp-onbrand);
  padding-block: 2.8rem 1.2rem; margin-top: 0;
}

.lp-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.6rem; }
.lp-footer h5 { font-size: .92rem; font-weight: 800; margin-bottom: .9rem; }
.lp-footer p, .lp-footer li { font-size: .84rem; opacity: .82; line-height: 1.9; }
.lp-footer ul { list-style: none; padding: 0; margin: 0; }
.lp-footer a { color: inherit; text-decoration: none; opacity: .82; }
.lp-footer a:hover { opacity: 1; text-decoration: underline; }

.lp-footer-bar {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: 2rem; padding-top: 1rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .78rem; opacity: .75;
}

@media (max-width: 767.98px) { .lp-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479.98px) { .lp-footer-grid { grid-template-columns: 1fr; } }

/* الحركة تُطفأ لمن طلب ذلك — القاعدة العامة في site.css، وهذه للأشرطة النامية */
.lp-track > span, .lp-stack > span { transition: width .6s ease; }

@media (prefers-reduced-motion: reduce) {
  .lp-track > span, .lp-stack > span { transition: none; }
}