/* ============================================================
 * dlhs.css — بلوكات الشورت كود
 * ============================================================
 * كل نوع بمعرّفه وقواعده، فتعديل أحدها لا يمسّ الآخر.
 * والألوان والأحجام من متغيّرات نظام المقالات، فتتبع إعداداته
 * والوضع الفاتح بلا قاعدة إضافية.
 * ============================================================ */

.dlhs-block{
  --dlhs-accent:var(--dlha-c-accent,var(--hp-accent));
  --dlhs-bg:var(--dlha-c-card,var(--hp-surface));
  --dlhs-bd:var(--dlha-c-border,var(--hp-border));
  --dlhs-head:var(--dlha-c-head,var(--hp-heading));
  --dlhs-text:var(--dlha-c-text,var(--hp-text));
  --dlhs-muted:var(--dlha-c-muted,var(--hp-muted));
  --dlhs-radius:var(--dlha-radius,14px);
  --dlhs-gap:var(--dlha-gap,20px);

  position:relative;
  margin:0 0 var(--dlhs-gap);
}

/* ============ بلوك الأخبار الموسّع ============ */

/* ————— بلا صندوق —————
   البلوك ينزل على خلفية الصفحة: لا خلفية له ولا إطار ولا حشو، فيتبع
   حشو المكان الذي وُضع فيه.

   والرأس وحده يحمل الخطّين: الملوّن فوقه والخفيف تحته. */
.dlhs-news{background:transparent;border:0;padding:0;}

.dlhs-head{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 16px;
  padding-top:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--dlhs-bd);
}

/* الخطّ الملوّن أعلى الرأس */
.dlhs-head::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--dlhs-accent),transparent);
  pointer-events:none;
}

.dlhs-h{
  margin:0;
  padding-inline-start:12px;
  border-inline-start:4px solid var(--dlhs-accent);
  /* الحجم من إعدادات المقالات — تبويب «الخطوط» */
  font-size:var(--dlha-fs-sch,19px);
  font-weight:800;
  line-height:1.7;
  color:var(--dlhs-head);
}

.dlhs-head-e{
  display:flex;
  align-items:center;
  gap:16px;
}

/* ————— العدد وكلمته —————
   نصّان في الرأس نفسه: الكلمة صغيرة فوق، والعدد كاملًا تحتها.
   بلا خلفية ولا حدود — توضيحٌ لا شارة. */
.dlhs-count{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.25;
}

.dlhs-count-l{
  color:var(--dlhs-muted);
  font-size:10.5px;
  font-weight:600;
}

.dlhs-count-n{
  color:var(--dlhs-head);
  font-size:15px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* زرّ الرأس: بمساحة العدد نفسها، بلا سهم — توفيرًا للمكان */
.dlhs-more-h{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border:1px solid var(--dlhs-bd);
  border-radius:8px;
  color:var(--dlhs-head);
  font-size:12.5px;
  font-weight:700;
  line-height:1.6;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .16s ease, color .16s ease;
}

.dlhs-more-h:hover{border-color:var(--dlhs-accent);color:var(--dlhs-accent);}

/* الشبكة — أعمدتها تُطبع مع كل بلوك */
.dlhs-grid{display:grid;gap:var(--dlhs-gap);}

/* ============ قائمة آخر الأخبار ============ */

.dlhs-list{background:transparent;border:0;padding:0;}

/* رأس القائمة: الخطّان كرأس البلوك الموسّع */
.dlhs-h-line{
  position:relative;
  margin:0 0 12px;
  padding-top:12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--dlhs-bd);
  font-size:var(--dlha-fs-sb,16px);
}

.dlhs-h-line::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--dlhs-accent),transparent);
  pointer-events:none;
}

.dlhs-lis{
  display:flex;
  flex-direction:column;
}

/* ————— البطاقة الأفقية —————
   صورة 104×78 بنسبة 4:3، والعنوان سطران بارتفاعها نفسه — فتتساوى
   الصفوف ولا تتفاوت. */
.dlhs-li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--dlhs-bd);
  text-decoration:none;
  color:inherit;
}

.dlhs-li:last-child{border-bottom:0;padding-bottom:0;}
.dlhs-li:first-child{padding-top:0;}

.dlhs-li-img{
  flex:0 0 104px;
  width:104px;
  height:78px;
  border-radius:10px;
  overflow:hidden;
  background:var(--hp-bg-2);
}

.dlhs-li-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.dlhs-li-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.dlhs-li-ph svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:var(--dlhs-muted);
  stroke-width:1.5;
  stroke-linecap:round;
  opacity:.7;
}

.dlhs-li-t{
  color:var(--dlhs-head);
  font-weight:700;
  line-height:1.75;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.dlhs-li:hover .dlhs-li-t{color:var(--dlhs-accent);}

/* ============ زرّ إظهار المزيد ============ */

.dlhs-more{
  display:block;
  width:100%;
  margin:var(--dlhs-gap) 0 0;
  padding:9px 16px;
  border:1px solid var(--dlhs-bd);
  border-radius:10px;
  background:transparent;
  color:var(--dlhs-head);
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  line-height:1.7;
  cursor:pointer;
  text-align:center;
  transition:border-color .18s ease, color .18s ease;
}

.dlhs-more:hover{border-color:var(--dlhs-accent);color:var(--dlhs-accent);}
.dlhs-more[disabled]{opacity:.6;cursor:default;}

.dlhs-list .dlhs-more{margin-top:14px;}

@media (max-width:600px){
  .dlhs-li-img{flex-basis:88px;width:88px;height:66px;}
}

/* ————— جسم البطاقة الأفقية —————
   العنوان وتحته وقت النشر. والارتفاع الكليّ يطابق الصورة. */
.dlhs-li-b{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dlhs-li-m{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--dlhs-muted);
  font-size:11.5px;
  line-height:1.5;
}

.dlhs-li-ico{
  width:13px;
  height:13px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}