/* ==========================================================================
   شِعاري — الخدمات المميزة في الصفحة الرئيسية (المرحلة: الخدمات المميزة)
   يُحمَّل في index.html فقط بعد styles.css و design-flat.css.
   يمثل قيم الهوية الحصرية الثلاثة: #110A05 (حادٍ)، #DBE4FF (سطعي)، #C5D8FF.
   يلتزم بتوأم الوضعَين عبر المتغيرات الحية فائقة، بلا إخفاق.
   ========================================================================== */

#featuredServices{ padding-top:74px; }

/* عند عدم وجود أي خدمة مميزة — نخفي القسم بالكامل (الحالة الفارغة تُدار
   بعنصر "is-empty" الذي تخلطه الجافاسكريبت فقط عندما توجد الخدمات). */
#featuredServices.is-empty{ display:none; }

/* ============ الشبكة العامة ============ */
.featured-services-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}
.featured-services-grid .fs-rest-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

/* ============ البطاقة (= الوحدة الأساسية) ============ */
.fs-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--card-border);
  border-radius:20px;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .22s ease, transform .22s ease, background .22s ease;
}
.fs-card:hover{
  border-color:var(--ink);
  transform:translateY(-4px);
}
html.dark-mode .fs-card:hover{ background:var(--paper-2); }

.fs-media{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  background:var(--sand-bg);
}
.fs-media-img{
  background:var(--paper-2);
  padding:0;
  aspect-ratio:16 / 9;
  overflow:hidden;
}
.fs-media-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fs-media-icon{
  aspect-ratio:21 / 9;
}
.fs-media-icon svg{ color:var(--ink); }
.fs-media-icon-lg{ aspect-ratio:21 / 7; }
.fs-media-icon-lg svg{ width:44px; height:44px; }

.fs-card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.fs-card-body .fs-cat{
  align-self:flex-start;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--ink);
  background:var(--sand-bg);
  border:1px solid var(--line);
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:12px;
}
.fs-card h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  line-height:1.45;
}
.fs-card .fs-desc{
  margin:0 0 14px;
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
  flex:1;
}
.fs-price{
  margin:0 0 16px;
  font-size:13px;
  color:var(--muted-2);
}
.fs-price strong{ color:var(--ink); font-weight:700; }
.fs-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}

/* ============ البطاقة المميزة الكبيرة ============ */
.fs-card-featured .fs-card-body{ padding:26px 26px 28px; }
.fs-card-featured h3{ font-size:24px; }

/* ============ وضع داكن — نغيّر القشرة دون كسر الهوية ============ */
html.dark-mode .fs-media-icon{ background:var(--sand-bg); }
html.dark-mode .fs-card{ background:var(--paper-2); }

/* ============ موبايل: عمود واحد للبطاقة الكبرى والبقية ============ */
@media (max-width:760px){
  #featuredServices{ padding-top:54px; }
  .featured-services-grid{ grid-template-columns:1fr; }
  .featured-services-grid .fs-rest-col{ grid-template-columns:1fr; }
  .fs-card-featured h3{ font-size:21px; }
  .fs-media-icon-lg{ aspect-ratio:21 / 9; }
}

/* ============ tablet: عمودين متوازنين بلا تسوية ثقيلة ============ */
@media (min-width:761px) and (max-width:980px){
  .featured-services-grid{ grid-template-columns:1fr; }
}