/**
 * ثهلان – تنسيقات الجوال (≤640px)
 * هيكلة موحدة لجميع المتصفحات (Brave، Safari، Chrome، إلخ): عرض كامل، سحب أفقي للأقسام، نفس السلوك.
 */

/* ========== أساسيات الجوال – متوافق مع Safari و Brave ========== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: hidden;
  min-width: 0;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
  box-sizing: border-box !important;
}

/* ========== الهيدر ========== */
.topbar {
  padding: 10px 0 !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* ========== الهيرو وقصة الغلاف – خلفية صلبة بنية داكنة على الجوال (مثل الصورة) ========== */
.hero {
  padding: 20px 0 !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  background: #362A20 !important;
  background-image: none !important;
  animation: none !important;
}

.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hero-tagline {
  grid-column: 1 !important;
}

.cover {
  padding: 18px !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cover .badge {
  margin-bottom: 8px !important;
}

.cover h1 {
  font-size: 1.4rem !important;
  margin-bottom: 10px !important;
}

.cover p {
  font-size: 0.9rem !important;
  margin-bottom: 12px !important;
}

.editor-picks {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  gap: 10px !important;
}

.pick {
  padding: 14px !important;
}

/* ========== المحتوى الرئيسي – عمود واحد كامل العرض ========== */
.layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 20px !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.layout > div,
.layout > aside {
  min-width: 0 !important;
  width: 100% !important;
}

/* سحب لليمين لعرض المزيد – الموبايل */
.grid-scroll-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.grid-scroll-viewport {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

/* قصة الغلاف على الجوال – يتغير حسب النمط: فاتح = إطار فاتح ونص أسود، داكن = إطار أسود ونص أبيض */
html:not([data-theme="dark"]) .hero .cover {
  background: #ffffff !important;
}
html[data-theme="dark"] .hero .cover {
  background: #0d0d0d !important;
}
html:not([data-theme="dark"]) .cover .badge,
html:not([data-theme="dark"]) .cover h1,
html:not([data-theme="dark"]) .cover p,
html:not([data-theme="dark"]) .hero .cover .badge,
html:not([data-theme="dark"]) .hero .cover h1,
html:not([data-theme="dark"]) .hero .cover p {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
html[data-theme="dark"] .cover .badge,
html[data-theme="dark"] .cover h1,
html[data-theme="dark"] .cover p,
html[data-theme="dark"] .hero .cover .badge,
html[data-theme="dark"] .hero .cover h1,
html[data-theme="dark"] .hero .cover p {
  color: #f5f0e8 !important;
  -webkit-text-fill-color: #f5f0e8 !important;
}
.cover .btn,
html:not([data-theme="dark"]) .hero .cover .btn,
html[data-theme="dark"] .hero .cover .btn {
  background: linear-gradient(135deg, #C9A227 0%, #A0522D 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* المربعات الثلاث السفلى على الجوال – بيضاء ونص أسود دائماً في النمطين */
.pick,
.editor-picks .pick,
html[data-theme="dark"] .pick,
html[data-theme="dark"] .editor-picks .pick,
html:not([data-theme="dark"]) .pick,
html:not([data-theme="dark"]) .editor-picks .pick {
  background: #ffffff !important;
}
.pick strong,
.pick .muted,
.editor-picks .pick strong,
.editor-picks .pick .muted,
html[data-theme="dark"] .pick strong,
html[data-theme="dark"] .pick .muted,
html[data-theme="dark"] .editor-picks .pick strong,
html[data-theme="dark"] .editor-picks .pick .muted {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.pick .muted,
.editor-picks .pick .muted,
html[data-theme="dark"] .pick .muted,
html[data-theme="dark"] .editor-picks .pick .muted {
  color: #4a4238 !important;
  -webkit-text-fill-color: #4a4238 !important;
}

/* قائمة الفعاليات – لون النص حسب الثيم */
a.event--card,
a.event--card strong {
  color: var(--text) !important;
}
a.event--card .event-student {
  color: var(--text-soft) !important;
}
html:not([data-theme="dark"]) .events-calendar-link {
  color: #1a1a1a !important;
}
[data-theme="dark"] .events-calendar-link {
  color: #fff !important;
}
html:not([data-theme="dark"]) #events .lane h3 {
  color: #1a1a1a !important;
}
[data-theme="dark"] #events .lane h3 {
  color: #fff !important;
}

/* ========== الأقسام والبطاقات – جوال: عرض عنصرين ثم سحب لليمين للمزيد ========== */
.lane {
  margin: 20px 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.lane h3 {
  margin-bottom: 12px !important;
  padding-right: 12px !important;
  font-size: 1.15rem !important;
}
/* سهم لليسار بجانب عنوان كل قائمة: دلالة على السحب لليمين لعرض المزيد (بدلاً من «عرض المزيد») */
.lane h3::after {
  content: ' \2190';
  margin-right: 6px;
  opacity: 0.9;
  font-size: 1.1em;
}

/* كل الأقسام: صف أفقي – أول عنصرين ظاهران، سحب لليمين للمزيد (نفس Brave على Safari وكل المتصفحات) */
.lane .grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: unset !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-scroll-snap-type: x mandatory !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  scroll-padding-inline-start: max(14px, env(safe-area-inset-left)) !important;
  touch-action: pan-x pan-y !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  margin-left: calc(-1 * max(14px, env(safe-area-inset-left))) !important;
  margin-right: calc(-1 * max(14px, env(safe-area-inset-right))) !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
  width: calc(100% + max(14px, env(safe-area-inset-left)) + max(14px, env(safe-area-inset-right))) !important;
  box-sizing: border-box !important;
}

.lane .grid::-webkit-scrollbar {
  height: 6px !important;
}

.lane .grid::-webkit-scrollbar-track {
  background: var(--bg-soft, rgba(0,0,0,0.06)) !important;
  border-radius: 3px !important;
}

.lane .grid::-webkit-scrollbar-thumb {
  background: var(--border, rgba(0,0,0,0.15)) !important;
  border-radius: 3px !important;
}

.lane .grid .card {
  flex: 0 0 auto !important;
  min-width: calc(50vw - 26px) !important;
  width: calc(50vw - 26px) !important;
  max-width: none !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
  box-sizing: border-box !important;
}

.card .card-image-wrap {
  width: 100% !important;
  overflow: hidden !important;
}

.card .thumb {
  height: 140px !important;
  width: 100% !important;
  object-fit: cover !important;
  max-width: 100% !important;
}

.card .content {
  padding: 12px !important;
}

.card h4 {
  margin-bottom: 6px !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

/* حديث الكتب – نفس السلوك: عنصرين ثم سحب لليمين */
.books-lane {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lane .books-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: unset !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-scroll-snap-type: x mandatory !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  scroll-padding-inline-start: max(14px, env(safe-area-inset-left)) !important;
  touch-action: pan-x pan-y !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  margin-left: calc(-1 * max(14px, env(safe-area-inset-left))) !important;
  margin-right: calc(-1 * max(14px, env(safe-area-inset-right))) !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
  width: calc(100% + max(14px, env(safe-area-inset-left)) + max(14px, env(safe-area-inset-right))) !important;
  box-sizing: border-box !important;
}

.lane .books-grid .book-card {
  flex: 0 0 auto !important;
  min-width: calc(50vw - 26px) !important;
  width: calc(50vw - 26px) !important;
  max-width: none !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

/* ========== التايملاين والفعاليات – عنصرين ثم سحب لليمين (Safari = Brave) ========== */
.timeline {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-scroll-snap-type: x mandatory !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  scroll-padding-inline-start: max(14px, env(safe-area-inset-left)) !important;
  touch-action: pan-x pan-y !important;
  margin-left: calc(-1 * max(14px, env(safe-area-inset-left))) !important;
  margin-right: calc(-1 * max(14px, env(safe-area-inset-right))) !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
  width: calc(100% + max(14px, env(safe-area-inset-left)) + max(14px, env(safe-area-inset-right))) !important;
  box-sizing: border-box !important;
}

.timeline .event,
.timeline a.event--card {
  flex: 0 0 auto !important;
  min-width: calc(50vw - 26px) !important;
  width: calc(50vw - 26px) !important;
  max-width: none !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.event {
  padding: 12px !important;
}

.event--featured {
  min-width: calc(50vw - 26px) !important;
}

a.event--card {
  min-width: calc(50vw - 26px) !important;
}

.event-student {
  font-size: 0.85rem !important;
  margin-top: 6px !important;
}

.event-desc {
  font-size: 0.82rem !important;
  margin-top: 8px !important;
}

/* ========== السايدبار ========== */
.side-block {
  padding: 16px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  position: static !important;
}

.side-block h4 {
  margin-bottom: 10px !important;
}

.side-block li {
  padding: 10px 0 !important;
}

/* ========== النشرة ========== */
.newsletter {
  padding: 20px 14px !important;
  margin: 20px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.newsletter h3 {
  margin-bottom: 8px !important;
  font-size: 1.2rem !important;
}

.newsletter p {
  margin-bottom: 12px !important;
  font-size: 0.95rem !important;
}

.newsletter form {
  gap: 10px !important;
}

/* ========== الفوتر ========== */
footer {
  margin-top: 24px !important;
  width: 100% !important;
}

footer .footer-inner {
  padding-top: 20px !important;
  padding-bottom: 14px !important;
  gap: 16px !important;
}

footer .footer-brand {
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.footer-copy {
  padding-top: 10px !important;
  padding-bottom: 16px !important;
  font-size: 0.88rem !important;
}

/* شعار المجلة – يظهر دائماً على الجوال (تجنب كسور lazy ومساحة صفر) */
footer .footer-magazine-logo {
  display: block !important;
  margin-top: 14px !important;
  visibility: visible !important;
  text-align: center !important;
}
footer .footer-magazine-logo img {
  display: block !important;
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
  min-height: 40px !important;
  margin: 0 auto !important;
}
/* تبديل الشعار حسب النمط على الجوال */
footer .footer-magazine-logo .logo-light {
  display: block !important;
}
footer .footer-magazine-logo .logo-dark {
  display: none !important;
}
html[data-theme="dark"] footer .footer-magazine-logo .logo-light {
  display: none !important;
}
html[data-theme="dark"] footer .footer-magazine-logo .logo-dark {
  display: block !important;
  filter: brightness(1.4) drop-shadow(0 0 6px rgba(201, 162, 39, 0.2));
}

footer .footer-links {
  gap: 8px !important;
}

/* ========== منع تجاوز أي عنصر عرض الشاشة ========== */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* ========== صفحة المقال ========== */
.article-header {
  margin-bottom: 16px !important;
}

.article-header h1 {
  font-size: 1.5rem !important;
  margin-bottom: 10px !important;
}

.article-header .dek {
  font-size: 1.05rem !important;
  margin-bottom: 12px !important;
}

.article-featured-image {
  margin: 16px 0 !important;
  max-width: 100% !important;
}

.article-featured-image img {
  width: 100% !important;
  height: auto !important;
}

.article-featured-image figcaption {
  padding: 10px 12px !important;
}

.article-body {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

.author-box {
  margin: 20px 0 !important;
  padding: 16px 14px !important;
}

.related {
  margin: 24px 0 !important;
}

.related h3 {
  margin-bottom: 12px !important;
  font-size: 1.15rem !important;
}

.related-grid {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* ========== صفحة الأرشيف ========== */
.archive-header {
  margin-bottom: 20px !important;
  padding: 18px 0 !important;
}

.archive-header h1 {
  font-size: 1.5rem !important;
  margin-bottom: 8px !important;
}

.issues-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding-bottom: 24px !important;
}

.issue-card {
  min-width: 0 !important;
  width: 100% !important;
}

.issue-card .cover-img {
  width: 100% !important;
  max-width: 100% !important;
}

.issue-card .issue-info {
  padding: 14px !important;
}

.issue-card .issue-info h3 {
  font-size: 1.05rem !important;
  margin-bottom: 6px !important;
}

.issue-card .issue-info .meta {
  margin-bottom: 10px !important;
}

/* ========== بوابة الدخول على الجوال ========== */
.gate-overlay {
  padding: 16px !important;
}

.gate-box {
  padding: 24px 20px !important;
  max-width: 100% !important;
}

.gate-title {
  font-size: 1.35rem !important;
}

.gate-sub {
  font-size: 0.9rem !important;
}