/* ================================================================
   Courses Available (com_lti_launcher view=courses)
   Everything is scoped to .cl-root. Colours come from the template
   tokens: --am-* (css/am-header.css) and the .amx tokens (css/am-home.css),
   which also supplies .amx-btn, .amx-eyebrow and .amx-chip.
   ================================================================ */
.cl-root{
  --cl-green-dark:#4f8f28;   /* same dark green am-home.css uses on light backgrounds */
  --cl-body:#475569;
  --cl-soft:#6b7280;
  --cl-border:#e5e7eb;
  --cl-input:#d1d5db;
  --cl-shadow:0 1px 2px rgba(14,30,43,.04),0 8px 24px rgba(14,30,43,.06);
  --cl-grid:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  /* the component sits in the template's .container.my-4: cancel the gap above the hero and below the CTA */
  margin:-1.5rem 0;
  color:var(--dark);font-size:15px;line-height:1.55;
}

/* Full-bleed bands inside the template container. #main clips the scrollbar-width overhang of 100vw. */
#main:has(.cl-root){overflow-x:clip}
.cl-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.cl-wrap{position:relative;max-width:1140px;margin:0 auto;padding:0 16px}

.cl-root .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cl-root a:focus-visible,.cl-root button:focus-visible,.cl-root input:focus-visible,.cl-root select:focus-visible{outline:2px solid var(--am-green);outline-offset:2px}
.cl-results a:focus-visible,.cl-results button:focus-visible,.cl-tools button:focus-visible,.cl-tools input[type=checkbox]:focus-visible{outline-color:var(--cl-green-dark)}

/* ---------- buttons (on top of .amx-btn) ---------- */
.cl-root .amx-btn{white-space:nowrap}
.cl-root .cl-btn-sm{padding:.45rem .9rem;font-size:.85rem;border-radius:10px}
.cl-root .cl-btn-line{background:#fff;color:var(--dark);border-color:var(--cl-border)}
.cl-root .cl-btn-line:hover{border-color:var(--am-green);color:var(--cl-green-dark)}

/* ---------- hero ---------- */
.cl-hero{position:relative;overflow:hidden;background:var(--am-ink);color:var(--am-text);padding:72px 0 64px;
  background-image:radial-gradient(120% 90% at 85% 10%,rgba(131,196,84,.22),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(241,91,39,.14),transparent 60%)}
.cl-hero .cl-glow{position:absolute;inset:0;pointer-events:none;background-image:var(--cl-grid);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.cl-root .cl-h1{font-size:clamp(34px,5.2vw,56px);line-height:1.05;font-weight:600;letter-spacing:-.03em;color:#fff;margin:0 0 18px;max-width:820px}
.cl-h1 em{font-style:normal;color:var(--am-green)}
.cl-lede{max-width:620px;font-size:17.5px;color:var(--am-muted);margin:0 0 28px}
.cl-lede b{color:#fff;font-weight:600}
.cl-ctas{display:flex;flex-wrap:wrap;gap:12px}
.cl-hero .cl-ctas{margin-bottom:44px}

.cl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0}
.cl-stat{display:block;height:100%;text-decoration:none;color:var(--am-text);border:1px solid var(--am-line);border-radius:16px;padding:22px 22px 20px;
  background:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.02));transition:border-color .15s,transform .15s}
.cl-stat:hover{color:var(--am-text);border-color:rgba(131,196,84,.55);transform:translateY(-2px)}
.cl-stat b{display:block;font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:8px;color:#fff;font-variant-numeric:tabular-nums}
.cl-stat span{font-size:13.5px;color:var(--am-muted)}
.cl-stat i{display:block;width:28px;height:3px;border-radius:3px;background:var(--am-green);margin-bottom:16px}
.cl-stats li:nth-child(2) i{background:var(--teal)}
.cl-stats li:nth-child(3) i{background:var(--amber)}
.cl-stats li:nth-child(4) i{background:#7aa7ff}

.cl-proof{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:28px 0 0;padding:0;font-size:13.5px;color:var(--am-muted)}
.cl-proof li{display:inline-flex;align-items:center;gap:8px}
.cl-proof li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--am-green)}

/* ---------- toolbar ---------- */
.cl-library{scroll-margin-top:var(--am-h,68px)}
.cl-tools{position:sticky;top:var(--am-h,68px);z-index:5;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--cl-border);padding:16px 0 12px}
.cl-tools[hidden]{display:none}
.cl-row{display:flex;flex-wrap:wrap;gap:10px}
.cl-search{flex:1 1 300px;position:relative}
.cl-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--cl-soft);pointer-events:none}
.cl-root .cl-search input,.cl-root .cl-tools select{height:52px;border:1px solid var(--cl-input);border-radius:12px;font:inherit;font-size:16px;color:var(--dark);background-color:#fff;margin:0}
.cl-root .cl-search input{width:100%;padding:0 20px 0 46px}
.cl-root .cl-tools select{max-width:100%;padding:0 40px 0 16px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.cl-root .cl-search input:focus,.cl-root .cl-tools select:focus{outline:none;border-color:var(--am-green);box-shadow:0 0 0 4px rgba(131,196,84,.25)}

.cl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cl-root .cl-chip{background:#fff;cursor:pointer;color:#374151;font-family:inherit;transition:border-color .15s,background .15s}
.cl-root .cl-chip:hover{border-color:var(--am-green)}
.cl-root .cl-chip[aria-pressed=true]{background:var(--am-green);border-color:var(--am-green);color:var(--am-on-green);font-weight:600}

.cl-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13.5px;color:var(--cl-soft)}
.cl-toggle{display:flex;gap:8px;align-items:center;cursor:pointer;margin:0}
.cl-toggle input{accent-color:var(--cl-green-dark);margin:0}

/* ---------- results ---------- */
.cl-results{background:var(--light);padding:40px 0 64px}
.cl-group{margin-bottom:40px}
.cl-group[hidden]{display:none}
.cl-root .cl-group h2{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--dark);margin:0 0 4px}
.cl-group h2 small{font-size:15px;font-weight:500;color:var(--cl-soft);letter-spacing:0;margin-left:4px}
.cl-sub{margin:0 0 16px;color:var(--cl-body);font-size:14.5px}
.cl-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--cl-border);border-radius:16px;overflow:hidden;box-shadow:var(--cl-shadow)}
.cl-item{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid #f0f2f4;transition:background .12s}
.cl-item.is-first{border-top:0}
.cl-item:first-child{border-top:0}
.cl-item:hover{background:#fafcf7}
.cl-item[hidden],.cl-item.is-more{display:none}
.cl-root:not(.show-sup) .cl-item.is-sup{display:none}
.cl-code{font:600 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cl-green-dark);letter-spacing:.02em;overflow-wrap:anywhere}
.cl-title{font-weight:500;color:var(--dark);overflow-wrap:anywhere}
.cl-ind{display:block;font-size:13px;color:var(--cl-soft);font-weight:400;margin-top:2px}
.cl-badge{display:inline-block;margin-left:4px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:rgba(241,91,39,.1);color:#c2410c;vertical-align:1px}
.cl-act{display:flex;gap:8px}
/* "Show all" sits directly under the list and continues its card */
.cl-list.has-more{border-bottom:0;border-radius:16px 16px 0 0}
.cl-more{display:block;width:100%;padding:14px;border:1px solid var(--cl-border);border-top-color:#f0f2f4;border-radius:0 0 16px 16px;box-shadow:var(--cl-shadow);
  background:#fbfcfd;font:600 14px var(--am-font);color:var(--cl-green-dark);cursor:pointer}
.cl-more[hidden]{display:none}
.cl-more:hover{background:#f4f9ef}
.cl-empty{background:#fff;border:1px solid var(--cl-border);border-radius:16px;padding:48px 16px;margin-bottom:40px;text-align:center;color:var(--cl-body)}
.cl-empty[hidden]{display:none}
.cl-empty a{color:var(--cl-green-dark);font-weight:600}

/* ---------- closing CTA ---------- */
.cl-cta{position:relative;overflow:hidden;background:var(--am-ink);color:var(--am-text);padding:80px 0;text-align:center;
  background-image:radial-gradient(70% 90% at 50% 0%,rgba(131,196,84,.18),transparent 60%)}
.cl-cta::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--cl-grid);background-size:56px 56px}
.cl-root .cl-cta h2{font-size:clamp(26px,3.4vw,34px);font-weight:600;letter-spacing:-.02em;color:#fff;margin:0 0 12px}
.cl-cta p{max-width:560px;margin:0 auto 28px;color:var(--am-muted);font-size:16px}
.cl-cta .cl-ctas{justify-content:center}
.cl-root .cl-contact{margin:24px auto 0;font-size:13.5px}
.cl-contact a{color:var(--am-green);text-decoration:none}
.cl-contact a:hover{color:var(--am-green-hi);text-decoration:underline}

@media (max-width:760px){
  .cl-hero{padding:48px 0 44px}
  .cl-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .cl-stat{padding:18px 16px}
  .cl-stat b{font-size:28px}
  .cl-item{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 16px}
  .cl-tools{position:static}
  .cl-root .cl-tools select{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cl-stat,.cl-root .amx-btn{transition:none}
  .cl-stat:hover,.cl-root .amx-btn:hover{transform:none}
}