/* «مكتبة التدريبات» — P4 redesign. Colours sampled from the client's image54. */
:root{
  --cat-ink:#1c2834; --cat-green:#147448; --cat-green-2:#107848; --cat-soft:#e0f0e8;
  --cat-soft-2:#e4f0e8; --cat-line:#e4e8ec; --cat-page:#fcfcfc; --cat-adv:#ebaa1a;
}

.page-catalog{background:var(--cat-page)}
.catalog{padding:1.4rem 0 3.5rem}
.catalog .wy-breadcrumb{margin-bottom:1rem}

.cat-head{margin-bottom:1.2rem}
.cat-head h1{font-size:1.9rem;font-weight:800;color:var(--cat-ink);margin-bottom:.35rem}
.cat-head p{color:var(--muted);max-width:60ch}

/* ---------- filter card ---------- */
.cat-filters{background:#fff;border:1px solid var(--cat-line);border-radius:14px;padding:1rem;margin-bottom:1.2rem;box-shadow:0 2px 10px rgba(16,40,28,.04)}
.cat-search{position:relative;margin-bottom:.85rem}
.cat-search i{position:absolute;inset-inline-end:1rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cat-search input{width:100%;height:48px;border:1px solid var(--cat-line);border-radius:10px;padding-inline:1rem 2.6rem;font-family:inherit;font-size:.92rem;background:#fff;color:var(--cat-ink)}
.cat-search input:focus-visible{border-color:var(--cat-green)}

.cat-pills{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.cat-pill{position:relative}
.pill-btn,.pill-more{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 .9rem;border:1px solid var(--cat-line);border-radius:10px;background:#fff;color:var(--cat-ink);font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.18s}
.pill-btn:hover,.pill-more:hover{border-color:var(--cat-green);color:var(--cat-green)}
.pill-btn i:first-child{color:var(--cat-green)}
.pill-btn.is-on{background:var(--cat-soft);border-color:var(--cat-soft);color:#0b5c38}
.cat-pill[data-group="domain"] .pill-btn{background:var(--cat-soft);border-color:var(--cat-soft);color:#0b5c38}
.pill-btn[aria-expanded="true"]{border-color:var(--cat-green)}
.pill-more{background:var(--cat-soft-2);border-color:var(--cat-soft-2);color:#0b5c38;margin-inline-start:auto}

.pill-menu{position:absolute;top:calc(100% + .4rem);inset-inline-start:0;z-index:20;min-width:230px;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--cat-line);border-radius:12px;box-shadow:0 12px 30px rgba(16,40,28,.12);padding:.7rem}
.pill-menu-title{font-size:.8rem;font-weight:700;color:var(--cat-green);margin-bottom:.35rem}
.f-opt{display:flex;align-items:center;gap:.5rem;padding:.4rem .2rem;font-size:.85rem;color:var(--cat-ink);cursor:pointer;border-radius:6px}
.f-opt:hover{background:#f4f8f6}
.f-opt input{width:16px;height:16px;accent-color:var(--cat-green);flex-shrink:0}
.f-opt .f-count{color:var(--muted);font-size:.78rem;margin-inline-start:auto}

.cat-apply{display:none;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--cat-line)}
.cat-clear{color:var(--muted);font-size:.85rem;font-weight:600}
.cat-clear:hover{color:var(--cat-green)}
.cat-apply-btn{height:44px;padding:0 1.6rem;border:0;border-radius:10px;background:var(--cat-green);color:#fff;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.cat-apply-btn:hover{background:#0e5c39}

/* panel mode: the pills stay in place and every group opens underneath them */
.cat-filters.is-panel .cat-pills{display:grid;grid-template-columns:repeat(5,1fr) auto;grid-template-rows:auto auto;align-items:start;gap:.7rem .8rem}
.cat-filters.is-panel .cat-pill{display:contents}
.cat-filters.is-panel .pill-btn{grid-row:1;justify-content:center}
.cat-filters.is-panel .pill-menu{display:block!important;grid-row:2;position:static;box-shadow:none;border:1px solid var(--cat-line);min-width:0;max-height:none}
.cat-filters.is-panel .cat-pill:nth-child(1) > *{grid-column:1}
.cat-filters.is-panel .cat-pill:nth-child(2) > *{grid-column:2}
.cat-filters.is-panel .cat-pill:nth-child(3) > *{grid-column:3}
.cat-filters.is-panel .cat-pill:nth-child(4) > *{grid-column:4}
.cat-filters.is-panel .cat-pill:nth-child(5) > *{grid-column:5}
.cat-filters.is-panel .pill-more{grid-row:1;grid-column:6;margin:0}
.cat-filters.is-panel .pill-menu-title{display:none}
.cat-filters.is-panel .cat-apply{display:flex}

/* ---------- toolbar ---------- */
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.cat-found{font-weight:700;color:var(--cat-ink)}
.cat-tools{display:flex;align-items:center;gap:.6rem}
.cat-sort{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)}
.cat-sort select{height:38px;border:1px solid var(--cat-line);border-radius:9px;padding:0 .7rem;background:#fff;font-family:inherit;font-size:.85rem;color:var(--cat-ink)}
.cat-view{display:inline-flex;border:1px solid var(--cat-line);border-radius:9px;overflow:hidden;background:#fff}
.cat-view button{width:38px;height:38px;border:0;background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.cat-view button.is-on{background:var(--cat-green-2);color:#fff}

/* ---------- cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cat-card{position:relative;background:#fff;border:1px solid var(--cat-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.cat-card:hover{box-shadow:0 10px 26px rgba(16,40,28,.09);transform:translateY(-3px)}
.cat-thumb{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,var(--green-l),var(--green-ll));overflow:hidden}
.cat-thumb img{width:100%;height:100%;object-fit:cover}
.cat-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.2rem;color:var(--cat-green)}
.cat-level{position:absolute;top:.6rem;inset-inline-start:.6rem;padding:.22rem .6rem;border-radius:6px;font-size:.7rem;font-weight:700;color:#fff;background:var(--cat-green)}
.cat-level.lvl-intermediate{background:#b06015}
.cat-level.lvl-advanced{background:var(--cat-adv);color:var(--cat-ink)}
.cat-fav{position:absolute;top:.6rem;inset-inline-end:.6rem;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#5b6270;cursor:pointer;display:grid;place-items:center;font-size:1rem;transition:.18s}
.cat-fav:hover{color:#c02f2f}
.cat-fav.is-fav{color:#c02f2f}
.cat-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.cat-domain{font-size:.75rem;font-weight:600;color:var(--cat-green)}
.cat-title{font-size:.98rem;font-weight:700;line-height:1.5;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-title a{color:var(--cat-ink)}
.cat-title a:hover{color:var(--cat-green)}
.cat-meta{display:flex;flex-wrap:wrap;gap:.8rem;font-size:.8rem;color:var(--muted)}
.cat-meta i{color:var(--cat-green)}
.cat-cta{margin-top:auto;display:block;text-align:center;padding:.62rem 1rem;border-radius:9px;background:var(--cat-soft-2);color:var(--cat-green);font-size:.86rem;font-weight:700;transition:.18s}
.cat-cta:hover{background:var(--cat-green);color:#fff}

/* list view */
.cat-grid.is-list{grid-template-columns:1fr;gap:.85rem}
.cat-card.is-row{flex-direction:row}
.cat-card.is-row .cat-thumb{width:230px;flex-shrink:0;aspect-ratio:auto}
.cat-card.is-row .cat-body{padding:1rem 1.2rem}
.cat-card.is-row .cat-title{min-height:0;-webkit-line-clamp:1}
.cat-card.is-row .cat-cta{align-self:flex-start;padding-inline:1.8rem}

.cat-empty{background:#fff;border:1px dashed var(--cat-line);border-radius:14px;padding:3rem 1rem;text-align:center;color:var(--muted);display:grid;gap:.7rem;justify-items:center}
.cat-empty i{font-size:1.8rem;color:var(--cat-green)}
.cat-empty .cat-cta{margin:0;padding-inline:1.6rem}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .cat-filters.is-panel .cat-pills{grid-template-columns:repeat(3,1fr) auto}
}
@media (max-width:820px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-filters.is-panel .cat-pills{display:flex;flex-wrap:wrap}
  .cat-filters.is-panel .cat-pill{display:block;width:100%}
  .cat-filters.is-panel .pill-menu{margin-top:.4rem}
  .cat-filters.is-panel .pill-menu-title{display:block}
  .cat-card.is-row{flex-direction:column}
  .cat-card.is-row .cat-thumb{width:100%;aspect-ratio:16/10}
}
@media (max-width:560px){
  .cat-head h1{font-size:1.5rem}
  .cat-grid{grid-template-columns:1fr}
  .cat-pills{gap:.45rem}
  .pill-btn,.pill-more{height:38px;font-size:.8rem}
  .pill-more{margin-inline-start:0;width:100%;justify-content:center}
  .cat-toolbar{gap:.6rem}
  .cat-tools{width:100%;justify-content:space-between}
  .cat-apply{display:flex}
  /* the filter panel becomes a bottom sheet on phones */
  .pill-menu{position:fixed;inset:auto 0 0 0;z-index:60;min-width:0;max-height:70vh;border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(16,40,28,.18);padding:1rem}
  .cat-filters.is-panel .pill-menu{position:static;border-radius:12px;box-shadow:none;padding:.7rem}
}