/* ============================================================================
   Mawaddah Learn — عالم التعليم (التصميم المعتمد، نيليّ #4f46e5).
   يُبنى فوق world-landing.css (.wl-*) + world-themes.css (data-world="learn").
   مكوّنات خاصّة بالتعليم: مساران (أكاديميّ/خارج المنهج)، شبكة الميزات، المجالات.
   ============================================================================ */

.lrn-hero {
  background:
    radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--world-accent) 14%, transparent), transparent),
    var(--bg-canvas, var(--bg-surface));
  padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 36px);
}
.lrn-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.25; text-wrap: balance; }
.lrn-accent { color: var(--world-accent); }

/* شريط بحث الهيرو */
.lrn-search {
  display: flex; gap: 8px; align-items: stretch;
  background: var(--bg-surface); border: 1px solid var(--world-border);
  border-radius: 16px; padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.06);
  max-width: 820px; margin-inline: auto;
}
.lrn-search input { flex: 1; border: 0; background: transparent; padding: 10px 14px; font: inherit; color: var(--text-primary); }
.lrn-search input:focus { outline: none; }

/* مسارا التعلّم (أكاديميّ / خارج المنهج) */
.lrn-tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lrn-track {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 220px;
  padding: 26px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(140deg, var(--world-accent-strong), var(--world-accent));
}
.lrn-track.alt { background: linear-gradient(140deg, #0f766e, #14b8a6); }
.lrn-track h2 { color: #fff; font-size: var(--t-h3-size, 1.6rem); margin: 0 0 6px; }
.lrn-track p { color: rgba(255,255,255,.92); margin: 0 0 16px; }
.lrn-track .lrn-track-ico { font-size: 1.8rem; opacity: .9; margin-bottom: auto; }
.lrn-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lrn-chip { background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }

/* شبكة الميزات (بطاقات صغيرة بأيقونات) */
.lrn-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lrn-feature {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px;
  padding: 18px; text-align: center; transition: transform .15s ease, box-shadow .15s ease;
}
.lrn-feature:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.lrn-feature .lrn-fico {
  width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 15px;
  background: var(--world-accent-subtle); color: var(--world-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.lrn-feature h3 { font-size: var(--t-h6-size, 1rem); margin: 0 0 4px; }
.lrn-feature p { font-size: .85rem; color: var(--text-muted); margin: 0; line-height: 1.7; }

/* شبكة بطاقات (دورات/مجالات) */
.lrn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lrn-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.lrn-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.lrn-card-cover { aspect-ratio: 16/10; background: var(--world-accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--world-accent); font-size: 2rem; }
.lrn-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lrn-card-body h3 { font-size: var(--t-h6-size, 1rem); margin: 0; }

/* بطاقتا الانضمام (معلّم/مؤسّسة) */
.lrn-join { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lrn-join-card { border: 1px solid var(--world-border); border-radius: 18px; padding: 22px; background: var(--world-tint); }

/* شريط إحصاءات */
.lrn-stats { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 12px; }
.lrn-stat { text-align: center; padding: 14px; }
.lrn-stat .lrn-stat-n { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--world-accent); }
.lrn-stat .lrn-stat-l { font-size: .9rem; color: var(--text-muted); }

/* ===== كتالوج الدروس والأنشطة + قائمة المعلّمين (شريحة الواجهة 2) ===== */
.lrn-breadcrumb { font-size: .85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lrn-breadcrumb a { color: var(--world-accent); text-decoration: none; }
.lrn-breadcrumb a:hover { text-decoration: underline; }

.lrn-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 18px 0; }
.lrn-count { font-size: .9rem; color: var(--text-muted); }

.lrn-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--text-muted); margin-top: auto; }
.lrn-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lrn-tag { display: inline-block; background: var(--world-accent-subtle); color: var(--world-accent); border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; }
.lrn-card-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.lrn-empty { text-align: center; padding: clamp(32px, 6vw, 64px) 20px; border: 1px dashed var(--world-border); border-radius: 18px; background: var(--world-tint); }
.lrn-empty .lrn-fico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--world-accent-subtle); color: var(--world-accent); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }

/* بطاقات المعلّمين */
.lrn-teachers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lrn-teacher { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 20px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.lrn-teacher:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.lrn-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; object-fit: cover; background: var(--world-accent-subtle); color: var(--world-accent); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 700; overflow: hidden; }
.lrn-teacher h3 { font-size: 1.05rem; margin: 0 0 2px; }
.lrn-teacher .lrn-teacher-title { font-size: .85rem; color: var(--world-accent); margin: 0 0 8px; }
.lrn-teacher .lrn-teacher-bio { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lrn-verified { display: inline-flex; align-items: center; gap: 4px; color: #0f766e; font-size: .78rem; font-weight: 600; }

/* ===== صفحة المعلّم التفصيليّة + الحجز (شريحة الواجهة 3) ===== */
.lrn-alert { border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; font-size: .95rem; }
.lrn-alert-ok { background: color-mix(in srgb, #0f766e 12%, transparent); color: #0f766e; border: 1px solid color-mix(in srgb, #0f766e 30%, transparent); }
.lrn-alert-err { background: color-mix(in srgb, #dc2626 10%, transparent); color: #b91c1c; border: 1px solid color-mix(in srgb, #dc2626 28%, transparent); }

.lrn-teacher-layout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }

.lrn-teacher-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.lrn-avatar-lg { width: 108px; height: 108px; font-size: 2.4rem; margin: 0; flex: 0 0 auto; }

.lrn-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.lrn-panel-title { font-size: 1.1rem; margin: 0 0 12px; }
.lrn-chip-row-light { display: flex; flex-wrap: wrap; gap: 8px; }

.lrn-quals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lrn-quals li { display: flex; gap: 10px; align-items: baseline; }
.lrn-qual-sub { color: var(--text-muted); font-size: .9rem; }

.lrn-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* بطاقة الحجز (عمود جانبيّ لاصق) */
.lrn-booking { position: sticky; top: 84px; }
.lrn-booking-card { background: var(--bg-surface); border: 1px solid var(--world-border); border-radius: 18px; padding: 20px; box-shadow: 0 8px 28px rgba(0,0,0,.06); }

.lrn-slots { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.lrn-slot { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; font-size: .9rem; }
.lrn-slot-time { font-weight: 600; }
.lrn-slot-dur { color: var(--text-muted); font-size: .82rem; }
.lrn-slot-price { color: var(--world-accent); font-weight: 700; font-size: .85rem; }
.lrn-slot-radio { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.lrn-slot-radio input { margin-inline-end: 4px; }
.lrn-slot-radio:has(input:checked) { border-color: var(--world-accent); background: var(--world-accent-subtle); }

.lrn-field-label { display: block; font-size: .85rem; font-weight: 600; margin: 12px 0 6px; }
.lrn-select { width: 100%; padding: 10px 12px; border: 1px solid var(--world-border); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); font: inherit; }
.lrn-booking-note { font-size: .78rem; color: var(--text-muted); line-height: 1.7; margin: 12px 0 0; }

/* ===== لوحة المتعلّم (شريحة الواجهة 4) ===== */
.lrn-section-h { font-size: 1.25rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }

.lrn-session-list { display: flex; flex-direction: column; gap: 10px; }
.lrn-session { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 18px; }
.lrn-session-past { opacity: .85; }
.lrn-session-main { min-width: 220px; flex: 1; }
.lrn-session-title { font-weight: 700; color: var(--text-primary); text-decoration: none; }
.lrn-session-title:hover { color: var(--world-accent); }
.lrn-session-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .84rem; color: var(--text-muted); margin-top: 4px; }
.lrn-session-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lrn-session-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lrn-session-note { font-size: .78rem; color: var(--text-muted); }

.lrn-badge { border-radius: 999px; padding: 3px 12px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.lrn-badge-ok { background: color-mix(in srgb, #0f766e 14%, transparent); color: #0f766e; }
.lrn-badge-warn { background: color-mix(in srgb, #b45309 16%, transparent); color: #b45309; }
.lrn-badge-err { background: color-mix(in srgb, #dc2626 12%, transparent); color: #b91c1c; }
.lrn-badge-muted { background: var(--world-accent-subtle); color: var(--text-muted); }

.lrn-link-btn { background: none; border: 0; color: #b91c1c; font: inherit; font-size: .84rem; cursor: pointer; padding: 4px 6px; text-decoration: underline; }
.lrn-link-btn:hover { opacity: .8; }

.lrn-progress { height: 8px; border-radius: 999px; background: var(--world-accent-subtle); overflow: hidden; margin-top: 4px; }
.lrn-progress-bar { height: 100%; background: var(--world-accent); border-radius: 999px; }
.lrn-progress-label { font-size: .8rem; color: var(--text-muted); margin-top: 4px; display: inline-block; }

/* ===== بوّابة المعلّم (شريحة الواجهة 5) ===== */
.lrn-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.lrn-stat-tile { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px; text-align: center; }
.lrn-stat-tile .lrn-stat-n { display: block; font-size: 1.6rem; font-weight: 800; color: var(--world-accent); }
.lrn-stat-tile .lrn-stat-l { font-size: .82rem; color: var(--text-muted); }

.lrn-portal-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.lrn-two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }

.lrn-slot-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.lrn-slot-form > div { flex: 1; min-width: 120px; }
.lrn-slot-form .lrn-field-label { margin-top: 0; }

.lrn-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lrn-inline-form .lrn-select { flex: 1; min-width: 140px; }
.lrn-stack-form { display: flex; flex-direction: column; gap: 8px; }

.lrn-editable-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lrn-editable-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; font-size: .9rem; }

.lrn-ai-answer { border-inline-start: 3px solid var(--world-accent); background: var(--world-tint); }

/* ===== تصفّح المناهج (شريحة الواجهة 9) ===== */
.lrn-taxo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lrn-taxo-tile { display: flex; align-items: center; gap: 12px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--text-primary); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.lrn-taxo-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.07); border-color: var(--world-accent); }
.lrn-taxo-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--world-accent-subtle); color: var(--world-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.lrn-taxo-name { font-weight: 600; flex: 1; }
.lrn-taxo-arrow { color: var(--text-muted); font-size: .85rem; }

@media (max-width: 860px) { .lrn-taxo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lrn-taxo-grid { grid-template-columns: 1fr; } }

/* ===== مجموعات التعلّم (شريحة الواجهة 8) ===== */
.lrn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lrn-group-card .lrn-card-body { gap: 8px; }
.lrn-check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--text-secondary); white-space: nowrap; }

.lrn-group-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.lrn-post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lrn-comments { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.lrn-comment { font-size: .9rem; }
.lrn-comment > span:first-child { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .lrn-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .lrn-group-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lrn-grid-3 { grid-template-columns: 1fr; }
}

.lrn-inst-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.lrn-org-switch { min-width: 220px; }
.lrn-org-switch .lrn-field-label { margin-top: 0; }

.lrn-tag-removable { display: inline-flex; align-items: center; gap: 6px; }
.lrn-tag-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; opacity: .7; }
.lrn-tag-x:hover { opacity: 1; color: #b91c1c; }

@media (max-width: 860px) {
  .lrn-tracks, .lrn-join { grid-template-columns: 1fr; }
  .lrn-features { grid-template-columns: repeat(2, 1fr); }
  .lrn-grid { grid-template-columns: repeat(2, 1fr); }
  .lrn-teachers { grid-template-columns: repeat(2, 1fr); }
  .lrn-teacher-layout { grid-template-columns: 1fr; }
  .lrn-booking { position: static; }
  .lrn-stat-row { grid-template-columns: repeat(2, 1fr); }
  .lrn-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lrn-teachers { grid-template-columns: 1fr; }
  .lrn-grid-2 { grid-template-columns: 1fr; }
}