/* ============================================================
   نيوز فيد — أحدث الأخبار الفلسطينية
   «اللوحة»: خبران في الصدر بصورةٍ عريضة وخلاصة، ثم ستٌّ أفقيّةٌ
   مضغوطة في عمودين.

   القسم داخل العمود الرئيس بجانب الشريط الجانبي — عرضه ٩٨٠px لا
   ١٤٠٠ كالصدارة. فالمقاسات هنا مقاسات عمودٍ لا مقاسات صفحة، وهذا
   وحده ما يبرّر خطّاً أصغر من خطّ «آخر الأخبار».
   ============================================================ */

/* ---- شريط العنوان: طبق الأصل من الصدارة و«آخر الأخبار» ---- */
.nfp { margin: 0 0 var(--nf-section-gap, 38px); }
.nfp-rail { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nfp-rail-mark { flex: none; width: 4px; height: 19px; border-radius: 2px; background: var(--accent, #5B7F3B); }
.nfp-rail-title {
  margin: 0; font-family: inherit;
  font-size: var(--nf-rail-title, 17px); font-weight: 800; line-height: 1.5;
  color: var(--text, #2C2416); white-space: nowrap;
}
.nfp-rail-rule { flex: 1 1 auto; min-width: 12px; height: 1px; background: var(--border, #E7E1D4); }
.nfp-rail-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--accent-2, #3D5A28);
  text-decoration: none; white-space: nowrap; padding: 4px 2px; border-radius: 8px;
}
.nfp-rail-link svg { opacity: .6; }

/* جغرافيا الساعة: «غزة ٦ · القدس ١». تُقال مرّةً في الرأس لأن تكرارها
   شارةً تحت كل عنوان يعيد ذنب شارة «سياسة» التي حُذفت — ستّ «غزة»
   تحت ستّة عناوين ضجيجٌ لا معلومة. */
.nfp-geo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--muted-2, #968B78); white-space: nowrap;
}
.nfp-geo-city b { color: var(--accent-2, #3D5A28); font-weight: 800; font-variant-numeric: tabular-nums; }
.nfp-geo-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ---- اللوحة ---- */
.nfp-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
/* البطاقة تملأ ارتفاع صفّها، والرابط يملأ البطاقة: بطاقةٌ بلا صورة
   بجانب أخرى بصورةٍ عريضة تترك ثلاثمئة بكسل بياضاً مفتوحاً تحتها
   إن لم تمتدّ. */
.nfp-card { display: flex; min-width: 0; }
.nfp-card-link { flex: 1 1 auto; display: flex; gap: 14px; color: inherit; text-decoration: none; min-width: 0; }
.nfp-card-media { flex: 0 0 116px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bg-3, #EFEAE0); }
.nfp-card-img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .45s ease; }
.nfp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.nfp-card-title {
  margin: 0; font-family: inherit;
  font-size: 14.5px; font-weight: 700; line-height: 1.6;
  color: var(--text, #2C2416);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nfp-card-digest {
  margin: 0; font-size: 13px; line-height: 1.75; color: var(--text-2, #4A4030);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nfp-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: auto; padding-top: 2px;
  font-size: 11.5px; font-weight: 600; color: var(--muted, #7A6E5D);
}
.nfp-src { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-2, #4A4030); min-width: 0; }
.nfp .src-dot {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 17px; height: 17px; border-radius: 50%;
  color: #fff; font-size: 9px; font-weight: 800; line-height: 1;
}
.nfp-place { position: relative; padding-inline-start: 10px; }
.nfp-place::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%; margin-top: -1.5px;
  width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5;
}
.nfp-time { white-space: nowrap; }

/* ---- الصدر: خبران بصورةٍ فوق النصّ ---- */
.nfp-card.is-feature .nfp-card-link { flex-direction: column; gap: 12px; }
.nfp-card.is-feature .nfp-card-media { flex: none; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; }
.nfp-card.is-feature .nfp-card-title { font-size: 18.5px; font-weight: 800; line-height: 1.5; -webkit-line-clamp: 2; }
/* شعرةٌ تفصل الصدر عمّا تحته: الفرق بين «الأهمّ» و«أيضاً» يُرى قبل
   أن يُقرأ. وهي على البطاقتين الثالثة والرابعة لا على اللوحة كلّها
   كي تمتدّ بعرض العمودين معاً. */
.nfp-card:nth-child(3), .nfp-card:nth-child(4) { padding-top: 18px; border-top: 1px solid var(--border, #E7E1D4); }

/* بلا صورة: تُحذف ولا تُستبدل بلوحٍ ملوّن — كان placeholderImage() يملأ
   ثلث البطاقة بمستطيلٍ داكن مكتوبٍ عليه «نيوز فيد»، وهو يجذب العين
   إلى أفقر بطاقةٍ في القسم. شعرةٌ علوية بلون العلامة تُبقي للبطاقة
   رأساً تُعرف به، والمكان المحرَّر يذهب إلى نصٍّ أطول. */
/* المضغوطة: شعرةٌ زيتونية في موضع الصورة — أي عند البداية لا في
   الأعلى. الحدّ العلوي محجوزٌ لفاصل الصفّ الرمادي بين الصدر وما
   تحته، ولو وُضعت الشعرة هناك لاختلف لون الخطّ بين بطاقتين
   متجاورتين في الصفّ نفسه فيُقرأ عطباً. */
.nfp-card.is-textonly:not(.is-feature) .nfp-card-link {
  padding-inline-start: 13px;
  border-inline-start: 2px solid var(--accent, #5B7F3B);
}
/* الصدر بلا صورة: لوحٌ خفيف يملأ ارتفاع الصفّ. النصّ وحده في ذلك
   الحيّز يطفو فوق فراغٍ مفتوح، واللوح يجعل الفراغ حاشيةً لا فجوة. */
.nfp-card.is-feature.is-textonly .nfp-card-link {
  padding: 18px 20px 20px;
  background: var(--surface-2, #FBF9F4);
  border: 1px solid var(--border, #E7E1D4);
  border-top: 3px solid var(--accent, #5B7F3B);
  border-radius: 14px;
}
.nfp-card.is-textonly .nfp-card-title { -webkit-line-clamp: 3; }
.nfp-card.is-feature.is-textonly .nfp-card-digest { -webkit-line-clamp: 6; }

/* ---- التفاعل ---- */
.nfp-card-link:hover .nfp-card-title { color: var(--accent-2, #3D5A28); }
.nfp-card-link:hover .nfp-card-img { transform: scale(1.05); }
.nfp-card-link:focus-visible { outline: 2px solid var(--accent, #5B7F3B); outline-offset: 4px; border-radius: 10px; }
.nfp-rail-link:focus-visible { outline: 2px solid var(--accent, #5B7F3B); outline-offset: 2px; }

/* ---- الاستجابة ---- */
@media (max-width: 900px) {
  .nfp-card.is-feature .nfp-card-title { font-size: 17px; }
}
@media (max-width: 760px) {
  .nfp-board { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* عمودٌ واحد: الفصل بين كل بطاقتين لا بين الصدر وما تحته. */
  .nfp-card:nth-child(3), .nfp-card:nth-child(4) { padding-top: 0; border-top: 0; }
  .nfp-card + .nfp-card { padding-top: 14px; border-top: 1px solid var(--border, #E7E1D4); }
  /* الشعرة الجانبية باقية على عمودٍ واحد أيضاً: هي علامة «بلا صورة»
     لا فاصلَ صفّ، فلا تتعارض مع الفواصل الأفقية. */
}
@media (max-width: 640px) {
  .nfp-rail { gap: 10px; margin-bottom: 12px; }
  .nfp-geo { display: none; }
  .nfp-card.is-feature .nfp-card-title { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .nfp-card-img { transition: none; }
}