/* ثهلان – تنقل شبكات البطاقات (سهم لليمين / عرض المزيد) */

/* ----- غلاف القسم القابل للتمرير ----- */
.grid-scroll-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* نافذة التمرير الأفقي – سحب لليمين على الكمبيوتر والهواتف */
.grid-scroll-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  touch-action: pan-x pan-y;
}
.grid-scroll-viewport::-webkit-scrollbar {
  height: 6px;
}
.grid-scroll-viewport::-webkit-scrollbar-track {
  background: var(--bg-soft);
  border-radius: 3px;
}
.grid-scroll-viewport::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.grid-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* الشبكة داخل النافذة: صف أفقي على الديسكتوب */
.grid-scroll-wrap .grid-scroll-viewport > .grid,
.grid-scroll-wrap .grid-scroll-viewport > .books-grid,
.grid-scroll-wrap .grid-scroll-viewport > .related-grid,
.grid-scroll-wrap .grid-scroll-viewport > .issues-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  grid-template-columns: unset;
  min-width: min-content;
}
.grid-scroll-wrap .grid-scroll-viewport > .grid > *,
.grid-scroll-wrap .grid-scroll-viewport > .books-grid > *,
.grid-scroll-wrap .grid-scroll-viewport > .related-grid > *,
.grid-scroll-wrap .grid-scroll-viewport > .issues-grid > * {
  flex: 0 0 auto;
  width: min(100%, 320px);
  min-width: 260px;
}

/* ----- زر السهم لليمين (ديسكتوب فقط) ----- */
.grid-scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: var(--shadow);
  transition: background 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.grid-scroll-btn:hover {
  background: var(--bg-soft);
  box-shadow: var(--shadow-hover);
}
.grid-scroll-btn:active {
  transform: translateY(-50%) scale(0.96);
}
.grid-scroll-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
/* السهم «لليمين» على يمين النافذة (في RTL = بداية المحتوى) */
.grid-scroll-btn--right {
  right: 0;
  left: auto;
}

/* سحب لليمين على جميع الأجهزة (كمبيوتر وموبايل) */
.grid-scroll-btn {
  display: flex;
}

.grid-scroll-wrap .grid-scroll-viewport {
  padding-left: 52px;
}
[dir="rtl"] .grid-scroll-wrap .grid-scroll-viewport {
  padding-left: 0;
  padding-right: 52px;
}

@media (max-width: 640px) {
  .grid-scroll-wrap .grid-scroll-viewport {
    padding-left: 44px;
  }
  [dir="rtl"] .grid-scroll-wrap .grid-scroll-viewport {
    padding-right: 44px;
  }
  /* إبقاء المحتوى أفقياً للسحب لليمين على الجوال */
  .grid-scroll-viewport > .grid,
  .grid-scroll-viewport > .books-grid,
  .grid-scroll-viewport > .related-grid,
  .grid-scroll-viewport > .issues-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
  }
  .grid-scroll-wrap .grid-scroll-viewport > .grid > *,
  .grid-scroll-wrap .grid-scroll-viewport > .books-grid > *,
  .grid-scroll-wrap .grid-scroll-viewport > .related-grid > *,
  .grid-scroll-wrap .grid-scroll-viewport > .issues-grid > * {
    width: min(100%, 280px) !important;
    min-width: 240px !important;
  }
}

/* زر «عرض المزيد» مخفي – نستخدم التمرير الأفقي فقط */
.grid-more-btn {
  display: none !important;
}
