/* ============= Catalog (Lessons / Devoirs / Exams) ============= */

/* 1) أساسيات */
:root{
  --gap: 16px;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --text: #1f2937;      /* gray-800 */
  --muted: #6b7280;     /* gray-500 */
  --bg: #ffffff;
  --chip-bg: #f3f4f6;   /* gray-100 */
  --chip-tx: #374151;   /* gray-700 */

  /* توحيد: أي عنصر يعتمد --accent سيأخذ لون السلك */
  --accent: var(--brand, #2c7be5);
}

/* ألوان حسب السلك (body_class يضيفها: cycle-*) */
.cycle-primary  { --brand: #43a047; } /* أزرق سماوي */
.cycle-college  { --brand: #1e88e5; } /* أخضر */
.cycle-lycee    { --brand: #f59e0b; } /* برتقالي */

/* توافق إضافي لو عندك .primary .college .lycee في أماكن أخرى */
.primary { --brand: #0ea5e9; }
.college { --brand: #22c55e; }
.lycee   { --brand: #5b2b00; }

/* 2) غلاف الصفحة */
.mx-catalog{
  max-width: 1160px;
  margin: 24px auto 48px;
  padding: 0 clamp(10px, 3vw, 16px);
  direction: rtl;
  color: var(--text);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .mx-catalog {
    margin: 12px auto 24px;
    padding: 0 12px;
  }
}
@media (max-width: 480px) {
  .mx-catalog {
    margin: 8px auto 16px;
    padding: 0 10px;
  }
}
.mx-catalog .mx-head{
  margin-bottom: 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.mx-catalog .mx-title{
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
}
.mx-catalog .mx-sub{
  color: var(--muted);
  font-size: 14px;
}

/* 3) Grid */
.mx-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
@media (max-width: 1280px){ .mx-grid{ grid-template-columns: repeat(12, 1fr);} }
@media (max-width: 1024px){ .mx-grid{ grid-template-columns: repeat(8, 1fr);} }
@media (max-width: 640px) { .mx-grid{ grid-template-columns: repeat(4, 1fr);} }

/* حجم الأعمدة للكروت */
.mx-col-3 { grid-column: span 3; }
.mx-col-4 { grid-column: span 4; }
@media (max-width:1024px){ .mx-col-3{ grid-column: span 4; } .mx-col-4{ grid-column: span 4; } }
@media (max-width:640px){ .mx-col-3, .mx-col-4{ grid-column: span 4; } }

/* 4) الكارت */
.mx-card{
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #eee;
  padding: 14px 14px 12px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s;
  position: relative;
}
.mx-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.06);
}
.mx-card a{ color: inherit; text-decoration: none; display:block; }

/* 5) شريط علوي صغير باللون */
.mx-pill{
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
  margin-bottom: 10px;
  opacity: .85;
}

/* 6) عنوان + وصف صغير */
.mx-card-title{
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 800;
  margin: 4px 0 6px;
  line-height: 1.35;
}
.mx-card-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  color: var(--muted);
  font-size: 13px;
}

/* 7) Chips */
.mx-chip{
  background: var(--chip-bg);
  color: var(--chip-tx);
  border-radius: 999px;
  padding: 6px 10px;
  line-height: 1;
  display:inline-flex; align-items:center; gap:6px;
  border: 1px dashed rgba(0,0,0,.06);
}
.mx-chip i{ font-style: normal; opacity:.8; }

/* 8) Placeholder */
.mx-empty{
  grid-column: 1 / -1;
  background: #fff;
  border: 1px dashed #ddd;
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* 9) شارة صغيرة */
.mx-badge{
  position:absolute; top:10px; left:10px;
  background: rgba(0,0,0,.04);
  color:#111; font-size:11px; padding:4px 8px; border-radius:999px;
}

/* 10) Breadcrumb مرئي */
.mx-bc{ display:flex; gap:6px; flex-wrap:wrap; margin: 6px 0 14px; font-size:13px; color:var(--muted); }
.mx-bc a{ color: var(--brand); text-decoration: none; }
.mx-bc .sep{ opacity:.5; }

/* ===== Titles-Only List (منظّف + غير متكرر) ===== */
.mx-list-titles{
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mx-list-titles__item{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: all .18s ease;
}
.mx-list-titles__link{
  display: block;
  width: 100%;
  padding: 14px 18px;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.8;
  color: var(--brand, #2c7be5);   /* الخط بلون السلك */
  position: relative;
}
.mx-list-titles__item:hover{
  background: var(--brand, #2c7be5); /* خلفية تصبح بلون السلك عند التحويم */
  transform: translateY(-1px);
}
.mx-list-titles__item:hover .mx-list-titles__link{
  color: #fff;
}
.mx-list-titles__link::after{
  content:"";
  position:absolute;
  bottom:6px;
  inset-inline-start:18px;
  height:2px;
  width:0;
  background: currentColor;
  transition: width .25s ease;
}
.mx-list-titles__item:hover .mx-list-titles__link::after{
  width:40%;
}

/* Pagination موحّد */
.mx-pagination{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.mx-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  margin:0 4px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:700;
  color:#111827;
  text-decoration:none;
  transition:all .18s ease;
}
.mx-pagination .page-numbers:hover{
  border-color: var(--brand, #2c7be5);
  color: var(--brand, #2c7be5);
}
.mx-pagination .page-numbers.current{
  background: var(--brand, #2c7be5);
  color:#fff;
  border-color: var(--brand, #2c7be5);
}