/* /courses/ (templates/courses.php): Course Listing design. Light page, Cream 200 cards. */
.cl{--panel:var(--cream-200);--line:rgba(11,26,51,.14);--line2:rgba(11,26,51,.24);--muted:var(--ink-600);
  max-width:1440px;margin:0 auto;padding:20px 16px 64px;display:flex;flex-direction:column;gap:24px;color:var(--ink-900)}
:where(.cl) button{all:unset;cursor:pointer;box-sizing:border-box}
.cl button:focus-visible,.cl a:focus-visible,.cl select:focus-visible,.cl-opt input:focus-visible + .cl-opt__box{outline:2px solid var(--orange-500);outline-offset:2px}

.cl__head{display:flex;flex-direction:column;gap:12px}
.cl__crumbs{display:flex;gap:8px;font:500 14px/1 var(--font-sans);color:var(--muted)}
.cl__crumbs a{color:var(--muted);text-decoration:none}
.cl__head h1{margin:0;font:400 40px/1.15 var(--font-sans);letter-spacing:-.01em}
.cl__head h1 strong{font-weight:600}
.cl__head p{margin:0;max-width:640px;font:400 17px/1.5 var(--font-sans);color:var(--muted);text-wrap:pretty}

.cl__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}

/* Filters: toggle panel below 1200px, sticky sidebar above */
.cl-filters{display:none;flex-direction:column;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.cl-filters.is-open{display:flex}
.cl-filters__top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font:600 16px/1 var(--font-sans)}
.cl-clear{font:600 14px/1 var(--font-sans);color:var(--orange-700);opacity:.4}
.cl-clear.is-on{opacity:1}
.cl-facet{border-bottom:1px solid var(--line)}
.cl-facet summary{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font:600 14px/1.2 var(--font-sans)}
.cl-facet summary .icon{opacity:.8;transition:transform 200ms var(--ease-out)}
.cl-facet[open] summary .icon{transform:rotate(180deg)}
.cl-facet__opts{display:flex;flex-direction:column;padding:0 20px 12px}
.cl-opt{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer}
.cl-opt.is-off{opacity:.45}
.cl-opt input{position:absolute;opacity:0;width:1px;height:1px}
.cl-opt__box{flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:5px;border:1.5px solid var(--line2);display:grid;place-items:center;color:var(--cream-100)}
.cl-opt__box .icon{stroke-width:3;opacity:0}
.cl-opt input:checked + .cl-opt__box{background:var(--navy-900);border-color:var(--navy-900)}
.cl-opt input:checked + .cl-opt__box .icon{opacity:1}
.cl-opt__label{flex:1;font:400 14px/1.3 var(--font-sans)}
.cl-opt__count{font:400 14px/1 var(--font-sans);color:var(--muted)}
.cl-filters__show{padding:16px 20px}
.cl-filters__show button{width:100%;height:48px;border-radius:12px;background:var(--navy-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:.3em}

/* Results */
.cl-results{display:flex;flex-direction:column;gap:16px;min-width:0}
.cl-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.cl-bar__count{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font:500 14px/1.2 var(--font-sans);color:var(--muted)}
.cl-seeall{font:600 14px/1.2 var(--font-sans);color:var(--orange-700);text-decoration:underline}
.cl-seeall[hidden]{display:none}
.cl-bar__tools{display:flex;gap:8px}
.cl-btn{height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--font-sans)}
.cl-sort{position:relative;display:flex;align-items:center}
.cl-sort select{appearance:none;-webkit-appearance:none;height:42px;box-sizing:border-box;padding:0 32px 0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--cream-50);color:var(--ink-900);font:600 14px/1 var(--font-sans);outline:none;cursor:pointer}
.cl-sort .icon{position:absolute;right:12px;pointer-events:none}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cl-chips[hidden]{display:none}
.cl-chip{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 12px;border-radius:999px;background:var(--navy-900);color:var(--cream-100);font:500 14px/1 var(--font-sans)}
.cl-chips .cl-clear{opacity:1;padding:0 4px}

.cl-list{display:flex;flex-direction:column;gap:16px}
.cl-card{display:grid;grid-template-columns:minmax(0,1fr);border-radius:20px;overflow:hidden;background:var(--cream-200);color:var(--ink-900)}
.cl-card[hidden]{display:none}
.cl-card__img{position:relative;aspect-ratio:16/9;background:var(--ink-900)}
.cl-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.cl-card__img span{position:absolute;left:12px;top:12px;padding:8px 12px;border-radius:999px;background:var(--ink-900);color:var(--cream-100);font:600 14px/1 var(--font-sans)}
.cl-card__body{padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cl-card__cat{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-700)}
.cl-card h2{margin:0;font:600 18px/1.3 var(--font-sans);text-wrap:pretty}
.cl-card h2 a{color:var(--ink-900);text-decoration:none}
.cl-card__body p{margin:0;font:400 15px/1.5 var(--font-sans);color:var(--ink-600);text-wrap:pretty}
.cl-card__tags{display:flex;flex-wrap:wrap;gap:8px}
.cl-card__tags span{padding:8px 12px;border-radius:999px;background:rgba(11,26,51,.06);font:500 14px/1 var(--font-sans);color:var(--ink-800)}
.cl-card__cta{margin-top:auto;padding-top:8px;display:flex;flex-direction:column}
.cl-card__view{height:48px;padding:0 20px;box-sizing:border-box;border-radius:12px;background:var(--ink-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;text-decoration:none}
.cl-card__view:hover{background:var(--ink-800);color:var(--cream-100)}

.cl-empty{padding:48px 24px;border-radius:20px;border:1px dashed var(--line2);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;font:600 18px/1.3 var(--font-sans)}
.cl-empty[hidden]{display:none}
.cl-empty button{height:48px;padding:0 20px;border-radius:12px;background:var(--navy-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center}

.cl-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:20px;padding:24px;border-radius:20px;background:var(--orange-500);color:var(--ink-900)}
.cl-cta > div{position:relative;display:flex;flex-direction:column;gap:8px;max-width:620px}
.cl-cta h2{margin:0;font:600 28px/1.2 var(--font-sans);text-wrap:balance}
.cl-cta p{margin:0;font:400 15px/1.5 var(--font-sans)}
.cl-cta a{position:relative;flex:none;height:48px;padding:0 20px;border-radius:12px;background:var(--ink-900);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.cl-cta a:hover{background:var(--ink-800);color:var(--cream-100)}

@media (min-width:768px){
  .cl-card__img img{object-position:50% 50%}
  .cl{padding:32px 32px 80px;gap:32px}
  .cl__head h1{font-size:56px}
  .cl__head p{font-size:18px}
  .cl__grid{gap:20px}
  .cl-card{grid-template-columns:240px minmax(0,1fr)}
  .cl-card__img{aspect-ratio:auto;min-height:100%}
  .cl-card__body{padding:24px}
  .cl-card h2{font-size:19px}
  .cl-card__cta{align-items:flex-start}
  .cl-card__view{min-width:168px}
  .cl-cta{flex-direction:row;align-items:center;padding:32px}
  .cl-cta h2{font-size:36px}
}
@media (min-width:1280px){
  .cl{padding:48px 80px 96px;gap:48px}
  .cl__head h1{font-size:72px}
  .cl__head p{font-size:20px}
  .cl__grid{grid-template-columns:280px minmax(0,1fr);gap:32px}
  .cl-filters{display:flex;position:sticky;top:110px;max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin}
  .cl-filters__show,.cl-bar__filter{display:none}
  .cl-card{grid-template-columns:300px minmax(0,1fr)}
  .cl-card__body{padding:32px}
  .cl-card h2{font-size:20px}
  .cl-cta{padding:48px}
  .cl-cta h2{font-size:44px}
}