/* نيوز فيد — قسم أخبار المدن الفلسطينية.
   ============================================================
   يبني على رموز home-redesign.css (--surface, --border, --text,
   --muted, --radius) فيتبع الوضعين الفاتح والداكن بلا تكرار ألوان.
   القيم بعد الفاصلة احتياطية للصفحات التي لا تُحمّل تلك الورقة.

   ── مبادئ اللون هنا، وكلّها مكتسَبة من خطأ سابق ──
   النسخة الأولى وضعت شارة حمراء على كل مدينة. وبما أن كل المدن نشطة في
   يوم عادي، عمّ الأحمر — ولونٌ يعمّ لا يميّز شيئاً. القاعدة الآن:
     • الأخضر يميّز المدينة المختارة وحدها.
     • الأحمر في موضعين لا ثالث لهما: نقطة النبض، وشريط الحرارة.
     • كل ما عدا ذلك رمادي هادئ — العين تحتاج راحة كي ترى التأكيد. */

:root {
  --nfc-red: #CE1126;
  --nfc-green: #1B7A3D;
  --nfc-black: #1F2A1C;
}

/* يطابق حاوية الرئيسية (critical-home: max-width 1400 / padding 20).
   غيابه كان يجعل القسم يتمدّد بعرض الشاشة كاملاً — على شاشة ٢٠٠٠px
   يصير عمود الخبر ~٩٠٠px، ونسبة 16:9 تعطي ٥٠٠px ارتفاعاً فينتفخ
   القسم ويخرج عن حدود الشاشة. */
.nfc { max-width: 1400px; margin: 0 auto 40px; padding: 0 20px; }

/* ══ الترويسة ════════════════════════════════════════════════ */

.nfc-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--text, #2C2416);
}
.nfc-h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 21px; font-weight: 900;
  letter-spacing: -.3px; color: var(--text, #2C2416);
}
/* شريط بألوان العلم الأربعة — هوية بلا شعار ولا صورة. */
.nfc-flag {
  width: 5px; height: 24px; border-radius: 2px;
  background: linear-gradient(180deg,
    var(--nfc-black) 0 25%, #ffffff 25% 50%,
    var(--nfc-green) 50% 75%, var(--nfc-red) 75% 100%);
  box-shadow: 0 0 0 1px var(--border, #E7E1D4);
}
.nfc-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--muted, #7A6E5D);
}
.nfc-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--nfc-red);
  animation: nfcPulse 2.2s ease-in-out infinite;
}
@keyframes nfcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.7); }
}
.nfc-all {
  margin-inline-start: auto;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--muted, #7A6E5D); padding: 6px 10px; border-radius: 8px;
}
.nfc-all:hover { background: var(--bg-3, #EFEAE0); color: var(--text, #2C2416); }

/* ══ التقسيم: فهرس ثابت + لوحة متغيّرة ═══════════════════════ */

.nfc-split {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px;
  /* stretch لا start: الفهرس أطول بطبيعته (ثلاث عشرة مدينة)، فبـstart
     يبقى فراغ ميّت مقابل آخر مدينتين. بـstretch تمتدّ اللوحة فتوزّع
     القائمة صفوفها على الارتفاع كلّه ويختفي الفراغ. */
  align-items: stretch;
}

/* ── فهرس المدن ─────────────────────────────────────────────── */
.nfc-nav { display: flex; flex-direction: column; gap: 12px; }
.nfc-group { display: flex; flex-direction: column; gap: 1px; }
.nfc-group-label {
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  color: var(--muted, #7A6E5D); opacity: .7;
  padding: 0 10px 5px; margin-bottom: 1px;
  border-bottom: 1px solid var(--border, #E7E1D4);
}

/* ترميز الحرارة — المحاولة الثالثة، وسبب تغيير سابقتيها موثّق:
     ١. شريط أفقي مستقلّ تحت كل صفّ ← أضاف ٩px × ١٣ = ١١٧px فأطال
        الفهرس عن المحتوى.
     ٢. تدرّج خلفية بحافّة حادّة ← يُقرأ ككتلة وردية مكسورة لا كتدرّج،
        ويزاحم اسم المدينة على الانتباه.
   الآن: شريط رفيع على حافّة الصفّ + تدرّج لون الرقم من الرمادي إلى
   الأحمر. لا خلفية ملوّنة إطلاقاً — الاسم يبقى بطل الصفّ، والحرارة
   تُقرأ في الطرف بلا أن تلمسه. إشارتان (طول ولون) بدل واحدة، فتُقرأ
   حتى لمن لا يميّز الأحمر. */
.nfc-city {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 5px 12px 5px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .15s ease;
}
/* شريط الحافّة: ارتفاعه نسبة النشاط. inset-inline-end يضعه على الحافّة
   اليسرى في الواجهة العربية — أي بعد الرقم، فلا يزاحم الاسم. */
.nfc-city::after {
  content: ''; position: absolute; inset-inline-end: 2px;
  top: 50%; transform: translateY(-50%);
  width: 3px; border-radius: 2px;
  height: calc(6px + (var(--heat, 0) * 16px));
  background: var(--nfc-red);
  opacity: calc(.28 + (var(--heat, 0) * .72));
}
.nfc-city:hover { background-color: var(--bg-3, #EFEAE0); }
.nfc-city:focus-visible { outline: 2px solid var(--nfc-green); outline-offset: -2px; }

.nfc-city-nm {
  font-size: 14px; font-weight: 700; line-height: 1.45;
  color: var(--text, #2C2416);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nfc-city-n {
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  margin-inline-end: 9px;   /* فسحة لشريط الحافّة */
  flex: none;               /* أرقام الأرشيف من خمس خانات — لا تُضغط */
  color: var(--muted, #7A6E5D);
  /* المتصفّحات الحديثة تُظهر التدرّج، والقديمة ترى الرمادي أعلاه. */
  color: color-mix(in srgb, var(--nfc-red) calc(var(--heat, 0) * 85%), var(--muted, #7A6E5D));
}

/* شريط الحرارة: يُظهر نشاط اليوم دون أن يُزحزح المدينة عن مكانها —
   وهذا جوهر الحلّ. الترتيب ثابت فتُبنى ذاكرة الموقع، والحرارة مرئية
   فلا تُفقَد الحداثة. */
.nfc-city.is-on { background-color: var(--nfc-green); }
.nfc-city.is-on::after { background: #fff; opacity: .85; }
.nfc-city.is-on .nfc-city-nm { color: #fff; font-weight: 800; }
.nfc-city.is-on .nfc-city-n  { color: rgba(255,255,255,.88); }

/* ── لوحة المحتوى ───────────────────────────────────────────── */
.nfc-panel { min-width: 0; display: flex; flex-direction: column; }
.nfc-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.nfc-panel-head h3 {
  margin: 0; font-size: 17px; font-weight: 800;
  color: var(--text, #2C2416);
}
.nfc-panel-head a {
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: var(--nfc-green); white-space: nowrap;
}
.nfc-panel-head a:hover { text-decoration: underline; }

.nfc-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  flex: 1;            /* تمتدّ لتملأ ارتفاع اللوحة */
}

/* الخبر المتصدّر — واحد يقود، لا أربعة متساوية. */
.nfc-lead { display: flex; flex-direction: column; min-width: 0; }
/* سقف الارتفاع: نسبةٌ وحدها تنمو بلا حدّ كلّما اتّسع العمود. */
.nfc-lead-img {
  position: relative; display: block;
  aspect-ratio: 16 / 9; max-height: 296px; overflow: hidden;
  border-radius: var(--radius, 14px);
  background: var(--bg-3, #EFEAE0);
}
.nfc-lead-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.nfc-lead:hover .nfc-lead-img img { transform: scale(1.035); }
.nfc-lead-tag {
  position: absolute; top: 10px; inset-inline-start: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: #fff;
  background: rgba(31, 42, 28, .82);
  backdrop-filter: blur(6px);
}
.nfc-lead-body { padding-top: 12px; }
.nfc-lead-title { margin: 0 0 7px; font-size: 18px; line-height: 1.5; font-weight: 800; }
.nfc-lead-title a { color: var(--text, #2C2416); text-decoration: none; }
.nfc-lead:hover .nfc-lead-title a { color: var(--nfc-green); }
.nfc-lead-ex {
  margin: 0 0 9px; font-size: 13.5px; line-height: 1.75;
  color: var(--muted, #7A6E5D);
}

/* القائمة المضغوطة — تُمسح بالعين في ثانيتين. */
/* تتمدّد لتملأ ارتفاع العمود: الفهرس الجانبي أطول بطبيعته (ثلاث عشرة
   مدينة)، وترك فراغ أسفل القائمة يجعل القسم يبدو ناقصاً. */
.nfc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100%;
}
.nfc-row + .nfc-row { border-top: 1px solid var(--border, #E7E1D4); }
.nfc-row-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; text-decoration: none;
}
.nfc-row:first-child .nfc-row-link { padding-top: 0; }
.nfc-row-thumb {
  flex: 0 0 92px; width: 92px; height: 68px;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-3, #EFEAE0);
}
.nfc-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nfc-row-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nfc-row-title {
  font-size: 14px; line-height: 1.6; font-weight: 700;
  color: var(--text, #2C2416);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nfc-row-link:hover .nfc-row-title { color: var(--nfc-green); }

/* بيانات المصدر والتوقيت — موحّدة بين المتصدّر والقائمة. */
.nfc-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted, #7A6E5D);
}
.nfc-src { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.nfc-src i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.nfc-time { font-variant-numeric: tabular-nums; }

.nfc-empty {
  grid-column: 1 / -1;
  padding: 44px 20px; text-align: center;
  font-size: 14px; color: var(--muted, #7A6E5D);
  background: var(--bg-2, #FBF9F4);
  border: 1px dashed var(--border, #E7E1D4);
  border-radius: var(--radius, 14px);
}
.nfc-empty a { color: var(--nfc-green); font-weight: 800; }

/* هيكل التحميل — بالبنية نفسها فلا يقفز ارتفاع القسم عند التبديل. */
.nfc-skel {
  border-radius: var(--radius, 14px);
  background: linear-gradient(100deg,
    var(--surface, #fff) 30%, var(--bg-3, #EFEAE0) 50%, var(--surface, #fff) 70%);
  background-size: 250% 100%;
  animation: nfcSkel 1.15s ease-in-out infinite;
  border: 1px solid var(--border, #E7E1D4);
}
.nfc-skel-lead { grid-row: span 4; min-height: 296px; }
.nfc-skel-row  { height: 68px; }
@keyframes nfcSkel {
  0%   { background-position: 100% 0; }
  100% { background-position: -60% 0; }
}

/* ══ التكيّف ═════════════════════════════════════════════════ */

/* الشاشات المتوسطة: المحتوى يصير عموداً واحداً، والفهرس يبقى جانبياً. */
@media (max-width: 1080px) {
  .nfc-content { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nfc-skel-lead { grid-row: auto; min-height: 220px; }
}

/* الجوّال: الفهرس ينزلق أفقياً — عمود جانبي على شاشة ضيّقة يخنق المحتوى. */
@media (max-width: 820px) {
  .nfc-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .nfc-nav {
    flex-direction: row; gap: 8px;
    overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin; scrollbar-color: var(--border-2, #D7CEBC) transparent;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border, #E7E1D4);
  }
  .nfc-nav::-webkit-scrollbar { height: 4px; }
  .nfc-nav::-webkit-scrollbar-thumb { background: var(--border-2, #D7CEBC); border-radius: 8px; }

  .nfc-group { flex-direction: row; gap: 6px; align-items: center; flex: 0 0 auto; }
  /* عنوان المحافظة يصير فاصلاً رأسياً بدل ترويسة عمود. */
  .nfc-group-label {
    padding: 0 4px 0 0; margin: 0; border: 0;
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 9.5px; opacity: .55; align-self: stretch;
  }
  .nfc-city {
    flex: 0 0 auto; scroll-snap-align: start;
    padding: 8px 13px; border-radius: 999px;
    border: 1px solid var(--border, #E7E1D4);
  }
  .nfc-city.is-on { border-color: var(--nfc-green); }
  .nfc-city-nm { font-size: 13px; }

  .nfc-head { gap: 10px; flex-wrap: wrap; }
  .nfc-h2 { font-size: 18px; }
  .nfc-lead-title { font-size: 17px; }
}

@media (max-width: 480px) {
  .nfc-row-thumb { flex-basis: 76px; width: 76px; height: 58px; }
  .nfc-row-title { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .nfc-pulse, .nfc-skel { animation: none; }
  .nfc-lead-img img, .nfc-city { transition: none; }
  .nfc-lead:hover .nfc-lead-img img { transform: none; }
}

/* ══ صفحة قسم مدينة — /city/<slug> ═══════════════════════════
   بُنيت خصّيصاً بدل إعادة استخدام بطاقة الرئيسية: تلك مصمَّمة لسياق
   شبكة الرئيسية وتعتمد على home.min.css، فبدت هنا مكسورة (صورة فوق
   صندوق فارغ، ونصّ بلا صورة). مكوّنٌ يُنقَل خارج سياقه لا يُنقَل معه
   تصميمه. */

.cty { max-width: 1240px; margin: 0 auto; padding: 34px 24px 64px; }

/* ── الترويسة: محاذاة يمين لا توسيط ──────────────────────────
   التوسيط يضعف الرأس التحريري ويجعل العين تبحث عن بداية السطر في كل
   عنصر. المحاذاة تبني عموداً بصرياً واحداً يقود القراءة. */
.cty-back {
  display: inline-block; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: var(--muted, #7A6E5D);
}
.cty-back:hover { color: var(--nfc-green); }

.cty-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cty-title h1 {
  margin: 0; font-size: 34px; font-weight: 900; letter-spacing: -.6px;
  color: var(--text, #2C2416);
}
.cty-kicker {
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px;
  background: var(--bg-3, #EFEAE0); color: var(--muted, #7A6E5D);
}
.cty-stats {
  margin: 9px 0 0; font-size: 14px; line-height: 1.8;
  color: var(--muted, #7A6E5D);
}
.cty-stats b { color: var(--text, #2C2416); font-weight: 800; }

/* ── شريط الأدوات: مقسّم مجزّأ لا حبّات متفرّقة ─────────────── */
.cty-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 24px 0 0; padding-bottom: 22px;
  border-bottom: 1px solid var(--border, #E7E1D4);
}
.cty-sort { font-size: 12.5px; font-weight: 700; color: var(--muted, #7A6E5D); }
.cty-seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--bg-3, #EFEAE0);
  border: 1px solid var(--border, #E7E1D4);
}
.cty-seg a {
  padding: 7px 17px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--muted, #7A6E5D);
  transition: color .15s ease, background .15s ease;
}
.cty-seg a:hover { color: var(--text, #2C2416); }
.cty-seg a.is-on {
  background: var(--surface, #fff); color: var(--text, #2C2416); font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── الخبر المتصدّر ─────────────────────────────────────────── */
.cty-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 28px; align-items: center;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--border, #E7E1D4);
}
.cty-lead-txt { min-width: 0; }
.cty-lead-kick { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.cty-tag {
  font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 5px;
  background: var(--nfc-green); color: #fff;
}
.cty-cat {
  font-size: 11px; font-weight: 800; color: var(--nfc-green);
  letter-spacing: .2px;
}
.cty-lead h2 { margin: 0 0 11px; font-size: 26px; line-height: 1.45; font-weight: 900; }
.cty-lead h2 a { color: var(--text, #2C2416); text-decoration: none; }
.cty-lead h2 a:hover { color: var(--nfc-green); }
.cty-lead p {
  margin: 0 0 13px; font-size: 14px; line-height: 1.8;
  color: var(--muted, #7A6E5D);
}
.cty-lead-img {
  display: block; aspect-ratio: 16 / 10; max-height: 320px;
  border-radius: 16px; overflow: hidden;
  background: var(--bg-3, #EFEAE0);
}
.cty-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease; }
.cty-lead:hover .cty-lead-img img { transform: scale(1.03); }

/* ── الشبكة: ثلاثة أعمدة، بطاقات موحّدة الارتفاع ────────────
   الارتفاع الموحّد ليس تجميلاً: شبكةٌ بارتفاعات مختلفة تُنتج «سلّماً»
   مكسوراً تتعثّر فيه العين عند كل صفّ. الصورة بنسبة ثابتة والعنوان
   محدود بسطرين يضمنان صفّاً مستقيماً. */
.cty-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; padding-top: 30px;
}
.cty-card {
  display: flex; flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E7E1D4);
  border-radius: 14px; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cty-card:hover {
  border-color: var(--border-2, #D7CEBC);
  box-shadow: var(--shadow-md, 0 10px 28px -16px rgba(60,40,20,.2));
  transform: translateY(-2px);
}
.cty-card-img {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--bg-3, #EFEAE0); overflow: hidden;
}
.cty-card-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease; }
.cty-card:hover .cty-card-img img { transform: scale(1.04); }
.cty-srcs {
  position: absolute; top: 11px; inset-inline-start: 11px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; color: #fff;
  background: rgba(31, 42, 28, .8);
  backdrop-filter: blur(6px);
}
.cty-card-body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px 15px; flex: 1;
}
.cty-card-body h3 {
  margin: 0; font-size: 15.5px; line-height: 1.55; font-weight: 800;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1;
}
.cty-card-body h3 a { color: var(--text, #2C2416); text-decoration: none; }
.cty-card:hover .cty-card-body h3 a { color: var(--nfc-green); }

/* ── بيانات المصدر: موحّدة بين المتصدّر والبطاقة ───────────── */
.cty-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted, #7A6E5D);
}
.cty-src { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.cty-src i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cty-time { font-variant-numeric: tabular-nums; }
.cty-n {
  padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 10px;
  background: var(--bg-3, #EFEAE0);
}

/* ── فارغ · صفحات · مدن أخرى ────────────────────────────────── */
.cty-empty {
  text-align: center; padding: 72px 20px; color: var(--muted, #7A6E5D);
  border: 1px dashed var(--border, #E7E1D4); border-radius: 16px; margin-top: 30px;
}
.cty-empty h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--text, #2C2416); }
.cty-empty p { margin: 0; line-height: 1.8; }
.cty-empty a { color: var(--nfc-green); font-weight: 800; }

.cty-pager {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 36px; font-size: 13.5px;
}
.cty-pager a { font-weight: 800; color: var(--nfc-green); text-decoration: none; }
.cty-pager a:hover { text-decoration: underline; }
.cty-pager span { color: var(--muted, #7A6E5D); font-variant-numeric: tabular-nums; }

.cty-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border, #E7E1D4);
}
.cty-switch span {
  font-size: 11px; font-weight: 800; color: var(--muted, #7A6E5D);
  opacity: .7; margin-inline-end: 4px;
}
.cty-switch a {
  padding: 6px 13px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: var(--muted, #7A6E5D);
  border: 1px solid var(--border, #E7E1D4);
  transition: all .16s ease;
}
.cty-switch a:hover { color: #fff; background: var(--nfc-green); border-color: var(--nfc-green); }

@media (max-width: 980px) {
  .cty-lead { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cty-lead-img { order: -1; max-height: 260px; }
  .cty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .cty-lead h2 { font-size: 22px; }
}
@media (max-width: 620px) {
  .cty { padding: 24px 16px 48px; }
  .cty-title h1 { font-size: 26px; }
  .cty-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cty-tools { justify-content: flex-end; }
  .cty-sort { display: none; }
  .cty-seg { width: 100%; justify-content: center; }
  .cty-lead h2 { font-size: 20px; }
}

/* ══ فهرس /cities ════════════════════════════════════════════ */

.cities-page { max-width: 1240px; margin: 0 auto; padding: 34px 24px 64px; }
.cities-head { text-align: center; margin-bottom: 30px; }
.cities-head h1 {
  font-size: 30px; font-weight: 900; margin: 0 0 10px;
  letter-spacing: -.4px; color: var(--text, #2C2416);
}
.cities-head .sub {
  font-size: 14.5px; color: var(--muted, #7A6E5D); line-height: 1.85;
  margin: 0 auto; max-width: 620px;
}
.cities-head .sub b { color: var(--text, #2C2416); }

.cities-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.city-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 26px 16px 20px; text-align: center; text-decoration: none;
  color: var(--text, #2C2416);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E7E1D4);
  border-radius: 18px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.city-card::before {
  content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--nfc-red), var(--nfc-green));
  opacity: 0; transition: opacity .2s ease;
}
.city-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2, #D7CEBC);
  box-shadow: var(--shadow-lg, 0 22px 48px -24px rgba(60,40,20,.28));
}
.city-card:hover::before { opacity: 1; }
.city-card.is-empty { opacity: .5; }

/* المحافظة بدل الأيقونة: تصنيف حقيقي يفيد القارئ، ويؤدّي دور المرساة
   البصرية أعلى البطاقة الذي كان الرمز يشغله بلا معلومة. */
.city-gov {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted, #7A6E5D);
  /* يلتصق باسمه: فجوة الشبكة (7px) تفصل عناصر متكافئة، والسطر
     التمهيدي تابعٌ للاسم لا عنصرٌ مستقلّ بجانبه. */
  margin-bottom: -4px;
}
.city-name  { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.city-stats { font-size: 12.5px; color: var(--muted, #7A6E5D); }
.city-stats b { color: var(--text, #2C2416); font-weight: 800; }
.city-today {
  position: absolute; top: 12px; inset-inline-start: 12px;
  background: var(--nfc-red); color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}

/* شريط الحرارة على الحافّة السفلى — نشاط اليوم نسبةً إلى أنشط مدينة.
   عرضه يحمل المقدار، وبقاؤه بلا عرض عند الصفر يبقي الحافّة نظيفة
   بدل خطٍّ باهت يوحي بنشاطٍ لا وجود له. */
.city-heat {
  position: absolute; bottom: 0; inset-inline-start: 0;
  height: 3px; width: calc(var(--heat, 0) * 100%);
  background: linear-gradient(90deg, var(--nfc-red), var(--nfc-green));
  border-start-end-radius: 3px;
  transition: width .3s ease;
}
.cities-empty { text-align: center; padding: 70px 20px; color: var(--muted, #7A6E5D); }
.cities-empty-ico { font-size: 52px; margin-bottom: 16px; }
.cities-empty h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--text, #2C2416); }
.cities-empty p { margin: 0 0 20px; line-height: 1.85; }
.cities-btn {
  display: inline-block; padding: 11px 22px; border-radius: 10px;
  background: var(--nfc-green); color: #fff; font-weight: 800; font-size: 13.5px;
  text-decoration: none;
}

@media (max-width: 640px) {
  .cities-page { padding: 22px 16px 44px; }
  .cities-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .cities-head h1 { font-size: 23px; }
  .city-card { padding: 20px 12px 16px; }
  .city-name { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cty-card, .cty-card-img img, .cty-lead-img img, .city-card { transition: none; }
  .cty-card:hover, .city-card:hover { transform: none; }
  .cty-card:hover .cty-card-img img, .cty-lead:hover .cty-lead-img img { transform: none; }
}