/* ===== صفحة: المرافق والخدمات ===== */

/* الطقم لا يُرى — لكنّه يشغل مكاناً في التدفّق إن لم يُخرَج منه */
.s-fx__sprite{position:absolute; width:0; height:0; overflow:hidden}

/* الرقم في الواجهة — أكبر من العنوان، فهو المعلومة والعنوانُ تكملتُها */
.fc-hero__n{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(56px, 9vw, 108px); line-height:1;
  color:var(--gold-3);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  margin-bottom:2px;
}

/* ---------- بطاقة المرفق ----------
   ⚠ حجزُ سطرين للعنوان وسطرين للوصف: أسماءُ المرافق تتفاوت بين سطرٍ
   وسطرين، فتخرج صفوفٌ غيرُ مستوية وإن تساوت بطاقاتُ الصفّ الواحد. */
/* ⚠ ثلاثةُ أعمدة إلا في مجموعتين: «للعبادة» و«للحركة والخدمات» فيهما
   بطاقتان، وفي ثلاثة أعمدةٍ يبقى ثلثُ الصفّ فارغاً فتُقرأ ناقصة. */
.fc-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.fc-grid--2{grid-template-columns:repeat(2, 1fr)}
.fc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px 24px;
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s;
}
.fc:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(22,33,26,.09);
}
/* أيقوناتٌ خطّية ترث لونها من هنا — لا صور ثابتة اللون */
.fc__i{
  width:44px; height:44px; display:block;
  color:var(--green); margin-bottom:16px;
  transition:color .4s, transform .4s var(--ease);
}
.fc:hover .fc__i{color:var(--gold-2); transform:scale(1.06)}
.fc h3{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:19px; line-height:1.5; color:var(--green);
  margin-bottom:7px;
  min-height:calc(2 * 1.5em);
}
.fc p{
  font-size:14px; line-height:1.85; color:var(--muted);
  margin-top:auto;
  min-height:calc(2 * 1.85em);
}

@media (max-width:960px){ .fc-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:560px){
  .fc-grid, .fc-grid--2{grid-template-columns:1fr}
  .fc h3, .fc p{min-height:0}
}
@media (prefers-reduced-motion: reduce){
  .fc:hover{transform:none}
  .fc:hover .fc__i{transform:none}
}