/* =====================================================================
   مرصدك — pages/coverages.css
   التغطيات الميدانية (/coverages · /coverages/{slug}) و«اطلب تغطية» (/coverage-request).
   يُحمَّل بعد components.css و pages/news.css (الذي يحمل بلاطات المعرض وأساس نموذج الطلب).
   خصائص منطقية فقط (RTL)، وألوان من tokens.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) فريق التغطية داخل بلاطة المعرض (/coverages)
   --------------------------------------------------------------------- */

.cov-team{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-block-start:2px;
  min-inline-size:0;
  font-size:var(--fs-xs);
  color:rgba(250,247,241,.9);
}

.cov-team__faces{display:inline-flex;flex-shrink:0}

.cov-team__face{
  display:grid;
  place-items:center;
  inline-size:26px;
  block-size:26px;
  margin-inline-start:-8px;
  overflow:hidden;
  font-size:11px;
  font-weight:var(--fw-bold);
  color:var(--white);
  background:var(--grad-violet);
  border:2px solid var(--navy-900);
  border-radius:50%;
}

.cov-team__face:first-child{margin-inline-start:0}
.cov-team__face img{inline-size:100%;block-size:100%;object-fit:cover;aspect-ratio:1}

.cov-team__names{
  min-inline-size:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-weight:var(--fw-medium);
}

.cov-team__more{
  display:inline-block;
  margin-inline-start:4px;
  padding:0 6px;
  font-size:10px;
  line-height:18px;
  color:var(--white);
  background:rgba(255,255,255,.18);
  border-radius:var(--r-pill);
}

/* شريط الدعوة أسفل المعرض: زران متجاوران + عدّاد الفرص المفتوحة */
.cov-cta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

.cov-cta__count{
  display:inline-grid;
  place-items:center;
  min-inline-size:24px;
  block-size:24px;
  padding-inline:7px;
  margin-inline-start:4px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--navy-900);
  background:var(--white);
  border-radius:var(--r-pill);
}

/* ---------------------------------------------------------------------
   2) فريق التغطية في صفحة التقرير (/coverages/{slug})
   --------------------------------------------------------------------- */

.cov-crew{
  margin-block-start:var(--sp-6);
  padding:var(--sp-5);
  background:var(--cream-50);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

.cov-crew__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  flex-wrap:wrap;
  margin-block-end:var(--sp-4);
}

.cov-crew__title{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  color:var(--navy-800);
}

.cov-crew__title svg{color:var(--violet-500)}

.cov-crew__count{
  padding:3px 12px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--violet-700);
  background:var(--violet-100);
  border-radius:var(--r-pill);
}

.cov-crew__list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:var(--sp-3);
}

.cov-crew__item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  min-inline-size:0;
  padding:var(--sp-4);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
}

.cov-crew__item .avatar{flex-shrink:0}

.cov-crew__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  flex:1 1 auto;
  min-inline-size:0;
}

.cov-crew__name{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
  overflow-wrap:anywhere;
}

.cov-crew__name a{color:inherit;text-decoration:none}
.cov-crew__name a:hover{color:var(--violet-700);text-decoration:underline}

.cov-crew__role{
  margin:0;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:var(--violet-700);
}

.cov-crew__line{margin:0;font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}

.cov-crew__go{flex-shrink:0;align-self:center}

@media (max-width:560px){
  .cov-crew{padding:var(--sp-4)}
  .cov-crew__item{flex-wrap:wrap}
  .cov-crew__go{inline-size:100%;justify-content:center}
}

/* ---------------------------------------------------------------------
   3) «اطلب تغطية» — بطاقات التوجيه (إعلامي / جهة لم تُعتمد)
   --------------------------------------------------------------------- */

.cr-note{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  padding:var(--sp-6);
  background:var(--white);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--violet-500);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}

.cr-note--warn{border-inline-start-color:var(--warn)}
.cr-note--danger{border-inline-start-color:var(--danger)}

.cr-note__icon{
  display:grid;
  place-items:center;
  flex-shrink:0;
  inline-size:56px;
  block-size:56px;
  color:var(--violet-700);
  background:var(--violet-100);
  border-radius:var(--r-md);
}

.cr-note--warn .cr-note__icon{color:var(--warn-ink);background:var(--warn-soft)}
.cr-note--danger .cr-note__icon{color:var(--danger-ink);background:var(--danger-soft)}

.cr-note__body{display:flex;flex-direction:column;gap:var(--sp-2);min-inline-size:0}

.cr-note__title{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  color:var(--navy-800);
}

.cr-note__text{margin:0;max-inline-size:68ch;color:var(--ink-soft);line-height:var(--lh-body)}

.cr-note__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-block-start:var(--sp-2)}
.cr-note__actions .chip__count{margin-inline-start:4px;color:var(--violet-700);background:var(--white)}

@media (max-width:560px){
  .cr-note{flex-direction:column;padding:var(--sp-5) var(--sp-4)}
  .cr-note__actions .btn{inline-size:100%;justify-content:center}
}

/* ---------------------------------------------------------------------
   4) «اطلب تغطية» — التخطيط: النموذج + عمود جانبي
   --------------------------------------------------------------------- */

.cr-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:var(--sp-6);
  align-items:start;
}

.cr-form{min-inline-size:0}

.cr-aside{
  position:sticky;
  inset-block-start:calc(var(--header-h,72px) + var(--sp-4));
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  min-inline-size:0;
}

@media (max-width:1024px){
  .cr-layout{grid-template-columns:minmax(0,1fr)}
  .cr-aside{position:static}
}

/* بطاقة الجهة المقفلة أعلى النموذج */
.cr-org{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--grad-soft);
  border:1px solid var(--violet-200);
  border-radius:var(--r-md);
}

.cr-org__logo{
  display:grid;
  place-items:center;
  flex-shrink:0;
  inline-size:52px;
  block-size:52px;
  overflow:hidden;
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--white);
  background:var(--grad-brand);
  border-radius:var(--r-md);
}

.cr-org__logo img{inline-size:100%;block-size:100%;object-fit:contain;background:var(--white)}

.cr-org__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-inline-size:0}
.cr-org__eyebrow{font-size:var(--fs-xs);color:var(--muted)}

.cr-org__name{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  color:var(--navy-800);
  overflow-wrap:anywhere;
}

.cr-org__tick{display:inline-flex;color:var(--ok)}
.cr-org__link{flex-shrink:0}

@media (max-width:560px){
  .cr-types__grid{gap:var(--sp-2)}
  .cr-type{min-block-size:52px}
}

@media (max-width:480px){
  .cr-org{flex-wrap:wrap}
  .cr-org__link{inline-size:100%;justify-content:center}
}

/* ---------------------------------------------------------------------
   5) أنواع التغطية — بطاقات اختيار متعدد بأيقونات
   --------------------------------------------------------------------- */

.req-form fieldset.cr-types{margin-block-start:var(--sp-5)}
.cr-types > .field__label{display:block;margin-block-end:4px}

.cr-types__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));
  gap:var(--sp-3);
  margin-block-start:var(--sp-3);
}

.cr-type{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-block-size:56px;
  padding:var(--sp-3) var(--sp-4);
  padding-inline-end:40px;
  cursor:pointer;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}

.cr-type:hover{border-color:var(--violet-300);background:var(--violet-50)}

/* الحقل الأصلي يغطي البطاقة كلها بشفافية: نقرة واحدة ولوحة مفاتيح وقارئ شاشة بلا جافاسكربت */
.cr-type input{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.cr-type__icon{
  display:grid;
  place-items:center;
  flex-shrink:0;
  inline-size:38px;
  block-size:38px;
  color:var(--violet-700);
  background:var(--violet-100);
  border-radius:var(--r-sm);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}

.cr-type__label{font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--navy-800)}

.cr-type__check{
  position:absolute;
  inset-inline-end:12px;
  inset-block-start:50%;
  display:grid;
  place-items:center;
  inline-size:22px;
  block-size:22px;
  margin-block-start:-11px;
  color:transparent;
  background:var(--white);
  border:1.5px solid var(--cream-300);
  border-radius:50%;
  transition:all var(--dur-2) var(--ease);
}

.cr-type input:checked ~ .cr-type__icon{color:var(--white);background:var(--grad-violet)}
.cr-type input:checked ~ .cr-type__check{color:var(--white);background:var(--violet-600);border-color:var(--violet-600)}
.cr-type input:focus-visible ~ .cr-type__check{box-shadow:var(--ring)}

.cr-type:has(input:checked){border-color:var(--violet-500);background:var(--violet-50);box-shadow:0 0 0 3px rgba(129,57,214,.12)}
.cr-type:has(input:focus-visible){outline:2px solid var(--violet-500);outline-offset:2px}

.cr-types.field--invalid .cr-type{border-color:var(--danger-soft)}

/* ---------------------------------------------------------------------
   6) أقسام النموذج (fieldset) والفعالية غير المدرجة
   --------------------------------------------------------------------- */

.cr-section{
  margin:var(--sp-6) 0 0;
  padding:var(--sp-5) 0 0;
  min-inline-size:0;
  border:0;
  border-block-start:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

.cr-section__title{
  float:inline-start;
  inline-size:100%;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:0;
  margin-block-end:var(--sp-1);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  color:var(--navy-800);
}

.cr-section__title svg{color:var(--violet-500)}
.cr-section__title + *{clear:both}
.cr-section__hint{margin-block:calc(var(--sp-2) * -1) 0}

.cr-custom-event{
  padding:var(--sp-4);
  background:var(--cream-50);
  border:1px dashed var(--cream-300);
  border-radius:var(--r-md);
}

.cr-custom-event__lead{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 var(--sp-3);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--ink-soft);
}

/* حين تُختار فعالية مدرجة تختفي تفاصيل الفعالية الحرة (بلا جافاسكربت؛ المتصفحات بلا :has تُبقيها ظاهرة) */
.cr-form:has(#cr-event option:checked:not([value="0"])) .cr-custom-event{display:none}

.cr-days{max-inline-size:220px}

.cr-publish{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-4);
  background:var(--violet-50);
  border:1px solid var(--violet-200);
  border-radius:var(--r-md);
}

.cr-publish .switch span{font-weight:var(--fw-bold);color:var(--navy-800)}
.cr-publish .field__hint{margin:0}

/* ---------------------------------------------------------------------
   7) العمود الجانبي: التسجيل كجهة · الخطوات · لماذا مرصدك
   --------------------------------------------------------------------- */

.cr-join{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-5);
  overflow:hidden;
  color:var(--cream-100);
  background:var(--grad-brand);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-glow);
}

.cr-join::after{
  content:'';
  position:absolute;
  inset-block-start:-60px;
  inset-inline-end:-60px;
  inline-size:180px;
  block-size:180px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
  pointer-events:none;
}

.cr-join__icon{
  display:grid;
  place-items:center;
  inline-size:44px;
  block-size:44px;
  color:var(--white);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-md);
}

.cr-join__title{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--white)}
.cr-join__text{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:rgba(250,247,241,.86)}
.cr-join__actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cr-join__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sp-2);min-inline-size:0}

/* نسخة الشريط أعلى النموذج (للزوار) */
.cr-join--banner{margin-block-end:var(--sp-5)}

@media (min-width:768px){
  .cr-join--banner{flex-direction:row;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6)}
  .cr-join--banner .cr-join__icon{flex-shrink:0}
  .cr-join--banner .cr-join__body{flex:1 1 auto}
  .cr-join--banner .cr-join__actions{flex-shrink:0}
}

.cr-steps{display:flex;flex-direction:column;gap:var(--sp-4);margin:0;padding:0}

.cr-steps__item{display:flex;align-items:flex-start;gap:var(--sp-3)}

.cr-steps__num{
  display:grid;
  place-items:center;
  flex-shrink:0;
  inline-size:30px;
  block-size:30px;
  font-weight:var(--fw-bold);
  color:var(--white);
  background:var(--grad-violet);
  border-radius:50%;
}

.cr-steps__item div{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.cr-steps__item div strong{font-size:var(--fs-sm);color:var(--navy-800)}
.cr-steps__item div span{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--muted)}

.cr-why{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:0}

.cr-why li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
  color:var(--ink-soft);
}

.cr-why svg{flex-shrink:0;margin-block-start:2px;color:var(--violet-500)}

@media print{
  .cr-aside,.cov-cta{display:none}
}