/* ==========================================================================
   مرصدك — pages/listing.css
   صفحات القوائم الموحّدة: /opportunities («الفرص» والخانات) · /events (قائمة الفعاليات)
   خصائص منطقية فقط (RTL أولاً). كل الألوان والمسافات من tokens.css.
   البطاقات نفسها (.ucard) ومربعات الخانات (.otiles) في components.css لأنها تظهر في صفحات أخرى.
   ========================================================================== */

/* حاجز التحسين التدريجي: بلا جافاسكربت لا تُخفى البطاقات أبداً */
html:not(.js-ready) .lst-page .reveal,
html:not(.js-ready) .lst-page .reveal-stagger > *{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   1) الترويسة
   -------------------------------------------------------------------------- */

.lst-hero{padding-block-end:calc(var(--sp-8) + var(--sp-2))}

.lst-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  align-self:flex-start;
  padding:4px 12px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:var(--violet-200);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
}

.lst-hero .page-hero__meta strong{color:var(--white)}

.lst-hero .page-hero__meta > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.lst-hero .page-hero__meta svg{flex:0 0 auto;color:var(--violet-300)}

/* المربعات ترتفع فوق حافة الترويسة لتبدو جزءاً منها */
.lst-tiles{
  position:relative;
  z-index:2;
  margin-block-start:calc(var(--sp-8) * -1 + var(--sp-2));
}

.lst-page{padding-block-start:0}

/* --------------------------------------------------------------------------
   2) الشريط التعريفي (الذكاء الاصطناعي / الزائر / الجهة)
   -------------------------------------------------------------------------- */

.lst-banner{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--grad-soft);
  border:1px solid var(--violet-200);
}

.lst-banner__icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  inline-size:48px;
  block-size:48px;
  border-radius:var(--r-md);
  background:var(--violet-100);
  color:var(--violet-600);
}

.lst-banner__text{flex:1 1 auto;min-inline-size:0}

.lst-banner__title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  margin:0 0 2px;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.lst-banner__desc{
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--ink-soft);
}

.lst-banner__pill{
  display:inline-flex;
  align-items:center;
  padding:1px 10px;
  border-radius:var(--r-pill);
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  background:rgba(255,255,255,.18);
  color:var(--white);
  border:1px solid rgba(255,255,255,.28);
}

.lst-banner__cta{flex:0 0 auto}

/* نسخة الذكاء الاصطناعي: تدرّج الهوية */
.lst-banner--ai{
  background-image:var(--grad-brand);
  border-color:transparent;
  box-shadow:var(--shadow-glow);
}

.lst-banner--ai .lst-banner__icon{background:rgba(255,255,255,.14);color:var(--white)}
.lst-banner--ai .lst-banner__title{color:var(--white)}
.lst-banner--ai .lst-banner__desc{color:rgba(250,247,241,.9)}

/* --------------------------------------------------------------------------
   3) شريط الأدوات والفلاتر
   -------------------------------------------------------------------------- */

.lst-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-block-end:var(--sp-3);
  border-block-end:1px solid var(--line);
}

.lst-toolbar .result-count{margin:0}

.lst-filters{align-items:flex-end;row-gap:var(--sp-4)}

.lst-filters .filter-bar__group{
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-1);
  flex:1 1 150px;
  min-inline-size:140px;
}

.lst-filters .filter-bar__label{padding-inline-start:var(--sp-1)}

.lst-filters .select,
.lst-filters .input{block-size:var(--field-h-sm);font-size:var(--fs-sm)}

.lst-filters .input-group{inline-size:100%}

.lst-filters__switch{justify-content:center;min-block-size:var(--field-h-sm)}

.lst-filters__actions{
  flex-direction:row !important;
  align-items:center;
  flex:0 0 auto !important;
  min-inline-size:0 !important;
  gap:var(--sp-2);
}

.lst-filters__toggle{display:none}

/* --------------------------------------------------------------------------
   4) أقسام العرض المجمّع
   -------------------------------------------------------------------------- */

.lst-section{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

.lst-section + .lst-section{
  padding-block-start:var(--sp-6);
  border-block-start:1px dashed var(--line);
}

.lst-section__head{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}

.lst-section__titles{flex:1 1 auto;min-inline-size:0}

.lst-section__title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  line-height:var(--lh-tight);
}

.lst-section__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-inline-size:28px;
  padding:1px 9px;
  border-radius:var(--r-pill);
  background:var(--violet-100);
  color:var(--violet-700);
  font-family:var(--font-sans);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
}

.lst-section__hint{
  margin:2px 0 0;
  font-size:var(--fs-sm);
  color:var(--muted);
}

.lst-section__more{flex:0 0 auto}

/* --------------------------------------------------------------------------
   5) الشبكات
   -------------------------------------------------------------------------- */

.lst-grid{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.lst-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1200px){
  .lst-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .lst-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .lst-grid,
  .lst-grid--3,
  .lst-grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   6) قائمة الفعاليات /events
   ========================================================================== */

/* مربعات أنواع الفعاليات — ظاهرة على الجوال كشريط تمرير */
.etypes{min-inline-size:0}

.etypes__list{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:var(--sp-2);
  margin:0;
  padding:0;
  list-style:none;
}

.etypes__item{margin:0;min-inline-size:0}

.etype{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  block-size:100%;
  min-block-size:96px;
  padding:var(--sp-3) var(--sp-2);
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}

.etype:hover{
  text-decoration:none;
  color:var(--ink);
  transform:translateY(-3px);
  border-color:var(--violet-300);
  box-shadow:var(--shadow-md);
}

.etype:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--violet-400)}

.etype__icon{
  display:grid;
  place-items:center;
  inline-size:40px;
  block-size:40px;
  border-radius:var(--r-md);
  color:var(--type,var(--violet-600));
  background:color-mix(in srgb,var(--type,var(--violet-500)) 12%,#fff);
}

.etype__icon svg{inline-size:20px;block-size:20px}

.etype__label{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  white-space:nowrap;
}

.etype__count{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.etype.is-empty{opacity:.72}

.etype.is-active{
  color:var(--white);
  background-image:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 10px 24px rgba(91,63,209,.26);
}

.etype.is-active .etype__label,
.etype.is-active .etype__count{color:var(--white)}
.etype.is-active .etype__icon{background:rgba(255,255,255,.16);color:var(--white)}

@media (max-width:1100px){
  .etypes__list{
    display:flex;
    gap:var(--sp-2);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-block:4px var(--sp-2);
  }
  .etypes__list::-webkit-scrollbar{display:none}
  .etypes__item{flex:0 0 auto;scroll-snap-align:start}
  .etype{inline-size:100px;min-block-size:92px}
}

/* التخطيط: فلاتر جانبية + نتائج */
.evl-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:var(--sp-6);
  align-items:start;
}

.evl-main{min-inline-size:0}

.evl-filters{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  padding:var(--sp-5);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  position:sticky;
  inset-block-start:calc(var(--header-h) + var(--sp-4));
}

.evl-filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-block-end:var(--sp-4);
  border-block-end:1px solid var(--line);
}

.evl-filters__title{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.evl-filters__title svg{color:var(--violet-500)}

.evl-filters__close{display:none}

.evl-filters__block{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin:0;
  padding:0;
  border:0;
  min-inline-size:0;
}

.evl-filters__block legend{padding:0;margin-block-end:var(--sp-2)}

.evl-filters__actions{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding-block-start:var(--sp-4);
  border-block-start:1px solid var(--line);
}

/* ملاحظة صغيرة تحت المفتاح */
.evl-switch-hint{
  margin:-6px 0 0;
  padding-inline-start:56px;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.5;
}

.evl-aside-card{
  margin-block-start:var(--sp-4);
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--grad-soft);
  border:1px solid var(--violet-200);
}

.evl-aside-card__title{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0 0 var(--sp-2);
  font-family:var(--font-display);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.evl-aside-card__title svg{color:var(--violet-500)}

.evl-aside-card__text{
  margin:0 0 var(--sp-4);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--ink-soft);
}

.evl-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3) var(--sp-4);
  margin-block-end:var(--sp-5);
  padding-block-end:var(--sp-4);
  border-block-end:1px solid var(--line);
}

.evl-toolbar .result-count{margin:0}

.evl-toolbar__controls{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
}

.evl-toolbar__sort{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
}

.evl-toolbar__sort .field__label{margin:0;white-space:nowrap}
.evl-toolbar__sort .select{inline-size:auto;min-inline-size:160px}

.evl-toggle{display:none}

/* فلاتر نشطة كرقائق قابلة للإزالة */
.evl-active{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin-block-end:var(--sp-4);
}

.evl-active .chip{block-size:34px;font-size:var(--fs-xs)}

.evl-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);
}

.evl-grid{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (min-width:1360px){
  .evl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* رقائق الراديو داخل النماذج (نوع الفعالية/الموعد) */
.lst-radio-chips{flex-wrap:wrap !important;overflow:visible !important;margin-inline:0 !important;padding-inline:0 !important}

.lst-radio-chips .chip{position:relative;block-size:36px;padding-inline:var(--sp-3);font-size:var(--fs-xs)}

.lst-radio-chips .chip input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}

.lst-radio-chips .chip:has(input:checked){
  color:var(--white);
  background-image:var(--grad-brand);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(91,63,209,.24);
}

.lst-radio-chips .chip:has(input:focus-visible){outline:2px solid var(--violet-500);outline-offset:2px}

/* ==========================================================================
   7) الاستجابة
   ========================================================================== */

@media (max-width:1024px){
  .evl-layout{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .evl-filters{position:static}
  .evl-aside-card{display:none}
  html.js-ready .evl-toggle{display:inline-flex}
  .evl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* لوحة الفلاتر تنزلق من الأسفل فوق شريط التبويب (z drawer > tabbar).
     مشروطة بـ js-ready: بدون جافاسكربت تبقى في مكانها وقابلة للاستخدام. */
  html.js-ready .evl-filters{
    position:fixed;
    inset-inline:0;
    inset-block-start:auto; /* يلغي إزاحة الوضع اللاصق على سطح المكتب */
    inset-block-end:0;
    z-index:var(--z-drawer);
    max-block-size:86vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding-block-end:calc(var(--sp-5) + env(safe-area-inset-bottom));
    transform:translateY(100%);
    visibility:hidden;
    transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3);
    box-shadow:0 -12px 40px rgba(7,12,38,.22);
  }

  html.js-ready .evl-filters.is-open{
    transform:translateY(0);
    visibility:visible;
    transition:transform var(--dur-3) var(--ease),visibility 0s linear 0s;
  }

  html.js-ready .evl-filters__close{display:inline-flex}
  html.js-ready.is-filters-open{overflow:hidden}

  html.js-ready.is-filters-open body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:var(--z-backdrop);
    background:rgba(7,12,38,.42);
    pointer-events:none;
  }
  html.js-ready .evl-filters.is-open{z-index:calc(var(--z-backdrop) + 1)}
}

@media (max-width:900px){
  .lst-banner{flex-wrap:wrap}
  .lst-banner__cta{inline-size:100%;justify-content:center}
}

@media (max-width:768px){
  .lst-tiles{margin-block-start:calc(var(--sp-7) * -1 + var(--sp-2))}
  .lst-hero{padding-block-end:calc(var(--sp-7) + var(--sp-2))}

  .lst-filters .select,
  .lst-filters .input{block-size:var(--field-h);font-size:16px}

  .lst-filters .filter-bar__group{flex:1 1 100%}

  html.js-ready .lst-filters__toggle{display:inline-flex;justify-content:center;gap:var(--sp-2)}
  html.js-ready .lst-filters:not(.is-expanded) > .filter-bar__group{display:none}
  .lst-filters__toggle[aria-expanded='true']{background:var(--violet-100)}

  .lst-section__title{font-size:var(--fs-lg)}
  .lst-section__hint{display:none}

  .evl-toolbar__controls{inline-size:100%;justify-content:space-between}
  .evl-toolbar__sort .select{min-inline-size:0;font-size:16px}
}

@media (max-width:640px){
  .evl-grid{grid-template-columns:minmax(0,1fr)}
  .lst-banner{padding:var(--sp-4)}
  .lst-banner__icon{inline-size:40px;block-size:40px}
}

@media (prefers-reduced-motion:reduce){
  .etype,.etype:hover{transition:none;transform:none}
  html.js-ready .evl-filters{transition:none}
}

@media print{
  .lst-tiles,
  .lst-banner,
  .lst-filters,
  .etypes,
  .evl-filters,
  .evl-aside-card,
  .pagination{display:none !important}
}