/* ============================================================
   منصة هرماس — نسخة تصميم صفحة الدورات (hermas-academy-v3/courses.html)
   كل القواعد محصورة داخل .hrm-catalog حتى لا تتعارض مع تنسيقات الموقع
   الحالية (خصوصًا .btn/.chip التابعة لبوتستراب والقالب الأساسي).
   ============================================================ */
.hrm-catalog{
  --navy-950:#061726; --navy-900:#0A2138; --navy-800:#0D3252; --navy:#113D64; --navy-600:#134A76;
  --teal-700:#0C7178; --teal:#0F8E99; --teal-400:#35B7AE; --teal-100:#E3F3F4;
  --gold-700:#A8842F; --gold:#D0A24A; --gold-100:#F7EFDD;
  --ink:#16232E; --body:#5A6B78; --muted:#8797A5; --line:#E5EAEF; --line-2:#EEF2F6;
  --bg-soft:#F5F7FA;
  --ok:#1E7F63; --ok-bg:#E6F4EF;
  --radius:12px; --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(14,61,99,.06);
  --shadow:0 4px 18px rgba(14,61,99,.07);
  --shadow-lg:0 14px 44px rgba(14,61,99,.10);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  font-family:"Tajawal","Cairo","Segoe UI",Tahoma,sans-serif;
  color:var(--ink);
}
.hrm-catalog *{box-sizing:border-box}
.hrm-catalog .wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- البانر ---------- */
.hrm-catalog .banner{position:relative;background:var(--bg-soft);border-bottom:1px solid var(--line);overflow:hidden;padding-top:90px}
.hrm-catalog .banner-in{position:relative;max-width:1180px;margin:0 auto;padding:56px 24px 60px;text-align:center}
.hrm-catalog .banner h1{font-size:clamp(24px,4vw,34px);color:var(--navy);margin:0}
.hrm-catalog .banner p{margin-top:10px;color:var(--body);font-size:15px}
.hrm-catalog .search{margin:26px auto 0;max-width:600px;display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.hrm-catalog .search input{flex:1;border:0;padding:14px 18px;font-size:15px;background:transparent;outline:none;color:var(--ink)}
.hrm-catalog .search button{width:56px;border:0;display:grid;place-items:center;background:var(--navy);color:#fff;cursor:pointer;transition:.18s var(--ease-soft)}
.hrm-catalog .search button:hover{background:var(--navy-600)}
.hrm-catalog .search svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- شريط الأدوات ---------- */
.hrm-catalog .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 0 16px}
.hrm-catalog .toolbar .count{font-size:14.5px;color:var(--body)}
.hrm-catalog .toolbar .count b{color:var(--ink)}
.hrm-catalog .toolbar .spacer{flex:1}
.hrm-catalog .viewtog{display:flex;gap:4px;background:var(--bg-soft);border-radius:9px;padding:3px}
.hrm-catalog .viewtog button{width:34px;height:30px;border:0;border-radius:7px;display:grid;place-items:center;color:var(--muted);background:transparent;cursor:pointer}
.hrm-catalog .viewtog button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.hrm-catalog .viewtog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.hrm-catalog select.inp{width:auto;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;color:var(--ink)}

/* ---------- الفلاتر ---------- */
.hrm-catalog .filters{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:18px}
.hrm-catalog .filters a{display:inline-block;padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:500;color:var(--body);transition:.18s var(--ease-soft);text-decoration:none}
.hrm-catalog .filters a:hover{border-color:var(--teal);color:var(--teal-700)}
.hrm-catalog .filters a.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

/* ---------- شبكة البطاقات ---------- */
.hrm-catalog .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:10px}
.hrm-catalog .cgrid.list{grid-template-columns:1fr}
.hrm-catalog .ccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.22s var(--ease-soft);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit}
.hrm-catalog .ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#D6E1EA}
.hrm-catalog .ccard-cover{position:relative;display:block;width:100%;height:100%}
.hrm-catalog .ccard-cover-wrap{position:relative;aspect-ratio:16/9;background:var(--navy-900);overflow:hidden}
.hrm-catalog .ccard-cart-form{position:absolute;bottom:11px;left:11px;margin:0;z-index:2}
.hrm-catalog .ccard-cart-btn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(6,23,38,.72);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:.18s var(--ease-soft)}
.hrm-catalog .ccard-cart-btn svg{width:16px;height:16px}
.hrm-catalog .ccard-cart-btn:hover{background:var(--teal);transform:scale(1.08)}
.hrm-catalog .ccard-cover img{width:100%;height:100%;object-fit:cover;transition:.4s var(--ease-soft)}
.hrm-catalog .ccard:hover .ccard-cover img{transform:scale(1.045)}
.hrm-catalog .ccard-cover .badge{position:absolute;top:11px;right:11px;background:rgba(6,23,38,.72);color:#fff;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;backdrop-filter:blur(4px)}
.hrm-catalog .ccard-cover .badge.enrolled{background:rgba(30,127,99,.92)}
.hrm-catalog .ccard-cover .badge.own{right:auto;left:11px;background:rgba(208,162,74,.94);color:#1c1508}
.hrm-catalog .ccard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.hrm-catalog .ccard-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hrm-catalog .ccard-meta .spacer{flex:1}
.hrm-catalog .ccard h3{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0;font-weight:700}
.hrm-catalog .ccard h3 a{color:inherit;text-decoration:none}
.hrm-catalog .ccard .sub{display:none;margin:0;font-size:13.5px;color:var(--body)}
.hrm-catalog .cgrid.list .ccard .sub{display:block}
.hrm-catalog .ccard .trainer{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:8px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:7px}
.hrm-catalog .ccard .trainer .av{width:24px;height:24px;border-radius:50%;background:var(--teal-100);color:var(--teal-700);display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 24px}
.hrm-catalog .ccard .prog{margin-top:4px}
.hrm-catalog .ccard .prog span{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.hrm-catalog .cgrid.list .ccard{flex-direction:row}
.hrm-catalog .cgrid.list .ccard-cover-wrap{width:280px;flex:0 0 280px;aspect-ratio:auto}
.hrm-catalog .cgrid.list .ccard-body{padding:18px 20px}

/* ---------- مكوّنات مشتركة (chip/meta/price/bar/btn) ---------- */
.hrm-catalog .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--teal-100);color:var(--teal-700)}
.hrm-catalog .meta{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.hrm-catalog .meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.hrm-catalog .price{font-size:17px;font-weight:800;color:var(--navy)}
.hrm-catalog .price small{font-size:12px;font-weight:500;color:var(--muted)}
.hrm-catalog .price.free{color:var(--ok)}
.hrm-catalog .bar{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.hrm-catalog .bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--teal-400))}
.hrm-catalog .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:14.5px;font-weight:700;transition:.18s var(--ease-soft);border:1px solid transparent;white-space:nowrap;cursor:pointer;text-decoration:none}
.hrm-catalog .btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.hrm-catalog .btn-ghost:hover{border-color:var(--teal);color:var(--teal-700)}
.hrm-catalog .btn-sm{padding:7px 14px;font-size:13px;border-radius:8px}

/* ---------- الحالة الفارغة ---------- */
.hrm-catalog .empty{text-align:center;padding:64px 20px;color:var(--muted)}
.hrm-catalog .empty svg{color:var(--line);margin:0 auto 14px;width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.5}
.hrm-catalog .empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

/* ---------- الترقيم ---------- */
.hrm-catalog .pager{display:flex;justify-content:center;align-items:center;gap:7px;padding:30px 0 60px;list-style:none;margin:0}
.hrm-catalog .pager li{display:inline-flex}
.hrm-catalog .pager a,.hrm-catalog .pager span{min-width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--body);display:grid;place-items:center;text-decoration:none}
.hrm-catalog .pager .active span{background:var(--navy);border-color:var(--navy);color:#fff}
.hrm-catalog .pager .disabled span{opacity:.4}

@media (max-width:1080px){ .hrm-catalog .cgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .hrm-catalog .cgrid.list .ccard{flex-direction:column}
  .hrm-catalog .cgrid.list .ccard-cover-wrap{width:100%;flex:auto;aspect-ratio:16/9}
}
@media (max-width:620px){ .hrm-catalog .cgrid{grid-template-columns:1fr} }