/* ════════ بنية حلول — مربعات التصفح ومسار التصفح ════════ */
:root{
  --hs-line:#dbe3ec; --hs-fg:#1f2937; --hs-muted:#64748b;
  --hs-accent:#06a1ff; --hs-bg:#fff;
}

/* ── المربعات ── */
.hs-tiles{
  display:grid;
  grid-template-columns:repeat(var(--hs-cols,4),1fr);
  gap:14px;
  margin:18px 0;
  padding:0;
  list-style:none;
}
@media (max-width:1000px){ .hs-tiles{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){  .hs-tiles{grid-template-columns:repeat(2,1fr);gap:10px} }

.hs-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px;
  background:var(--hs-bg);
  border:1px solid var(--hs-line);
  border-radius:12px;
  text-decoration:none;
  color:var(--hs-fg);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.hs-tile:hover{
  border-color:var(--hs-accent);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(6,161,255,.13);
  color:var(--hs-fg);
}

/* ارتفاع ثابت يمنع تقافز الصفحة عند تحميل الصور */
.hs-tile__img{
  display:flex; align-items:center; justify-content:center;
  width:120px; height:160px;
}
.hs-tile__img img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}
.hs-tile__ph{ color:var(--hs-accent); opacity:.55 }

.hs-tile__t{
  font:600 14px/1.7 inherit;
  text-align:center;
  overflow-wrap:anywhere;
}

.hs-empty{
  padding:12px 14px; border:1px dashed var(--hs-line); border-radius:10px;
  color:var(--hs-muted); font-size:14px;
}

/* ── مسار التصفح ── */
.hs-bc{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  justify-content:flex-start;
  text-align:right;
  margin:10px 0;
  font:400 13px/1.9 inherit;
  color:var(--hs-muted);
}
/* الإدراج التلقائي أسفل العنوان — يبدأ من اليمين مهما توسط القالب */
.hs-bc-auto{ text-align:right; direction:rtl }
.hs-bc-auto .hs-bc{ margin:4px 0 18px; justify-content:flex-start }
.hs-bc a{ color:var(--hs-muted); text-decoration:none }
.hs-bc a:hover{ color:var(--hs-accent); text-decoration:underline }
.hs-bc__sep{ opacity:.5 }
.hs-bc__cur{ color:var(--hs-fg); font-weight:600 }

@media print{ .hs-bc{display:none} }

/* ── روابط ذات صلة ── */
.hs-related{
  margin:34px 0 6px;
  padding-top:20px;
  border-top:1px solid var(--hs-line);
}
.hs-related__t{
  font:700 17px/1.7 inherit;
  color:var(--hs-fg);
  margin:0 0 12px;
}
.hs-tiles--sm .hs-tile{ padding:10px 8px; gap:6px }
.hs-tiles--sm .hs-tile__img{ width:90px; height:120px }
.hs-tiles--sm .hs-tile__t{ font-size:13px }

.hs-related__all{ margin:12px 0 0; font:600 14px/1.8 inherit }
.hs-related__all a{ color:var(--hs-accent); text-decoration:none }
.hs-related__all a:hover{ text-decoration:underline }