/* coursemgr PUBLIC CATALOG theme - dark IONOS navy, consistent with the course chrome.
   This is the single source of the catalog look: catalog.html renders it for BOTH the
   in-app /preview AND the deployed nodes (render_catalog_html + stage_audience copy the
   same template + this stylesheet), and the ?v= cache-buster guarantees a change here
   shows up identically in preview and on the pushed site. The MANAGEMENT TOOL theme is a
   separate file, admin.css (light); do not link this file from the admin shell. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.lp{
  font-family:var(--font-body);color:#fff;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;padding-top:var(--header-height);
  background:linear-gradient(160deg,#001b41 0%,#002a54 40%,#003d7a 100%);background-attachment:fixed;
}
:root{--ink:#fff;--ink-soft:#9fb0c8;--ink-mute:#6f86a6;--line:rgba(255,255,255,.07);
  --surface:#0a2552;--card-border:#143268;--blue:#3196d6;--cyan:#11c7e6}

/* no link underlines anywhere in the catalog (override base a:hover) */
body.lp a, body.lp a:hover, body.lp .card:hover h3{text-decoration:none}

/* full-page drifting particle field (see /static/js/particles.js), borrowed from the
   course selector hero. The canvas is a fixed, full-viewport background behind every-
   thing; the page gradient (on body.lp) shows through its transparent areas, and all
   content sits above it via z-index. .particle-canvas base styles live in
   ionos-cloud-learn.css; we override it to fixed/viewport here. */
#particle-canvas.particle-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.lp-mast,.lp-catalog,.lp-foot{position:relative;z-index:1}

/* masthead */
.lp-mast{max-width:1160px;margin:0 auto;width:100%;padding:clamp(36px,5vw,56px) clamp(22px,5vw,60px) 4px}
.lp-mast .accentrule{width:44px;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--cyan));margin-bottom:18px}
.lp-mast h1{font-family:var(--font-heading);font-weight:700;color:#fff;font-size:clamp(1.8rem,3.3vw,2.4rem);line-height:1.12;margin:0 0 10px;letter-spacing:-.4px}
.lp-mast p{margin:0;color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.55;max-width:560px}

/* catalog */
.lp-catalog{max-width:1160px;margin:0 auto;width:100%;padding:clamp(26px,3vw,36px) clamp(22px,5vw,60px) 84px;flex:1}
.cat-section{margin-top:48px}
.cat-section:first-child{margin-top:30px}
.cat-head{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.cat-head h2{font-family:var(--font-heading);font-weight:700;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;margin:0;color:var(--ink-mute)}
.cat-head .count{font-size:10.5px;color:#46597a;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.cat-head::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}

/* card - accent rail by level */
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--card-border);
  border-left:3px solid var(--blue);border-radius:10px;padding:15px 16px 14px;text-decoration:none;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35);border-color:var(--blue)}
.card h3{font-family:var(--font-heading);font-weight:600;font-size:1.02rem;line-height:1.3;margin:0;color:#fff}
.card-foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.units{font-size:12px;font-weight:700;color:#cde0f5}
.langs{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--ink-mute)}

/* level -> rail color (set on .card via template class) */
.card.lvl-beginner{border-left-color:#1fb376}
.card.lvl-intermediate{border-left-color:#3196d6}
.card.lvl-advanced{border-left-color:#7c4dc8}

/* empty state */
.lp-empty{background:var(--surface);border:1px solid var(--card-border);border-radius:12px;
  padding:clamp(30px,5vw,46px) 26px;text-align:center;max-width:560px;margin:8px auto 0}
.lp-empty-icon{width:46px;height:46px;border-radius:11px;margin:0 auto 15px;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#7fe6ff;
  background:linear-gradient(135deg,rgba(49,150,214,.22),rgba(17,199,230,.22));border:1px solid #2a4a86}
.lp-empty h2{font-family:var(--font-heading);font-weight:700;color:#fff;font-size:1.15rem;margin:0 0 8px}
.lp-empty p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin:0 auto;max-width:380px}

/* footer - single centered line, matches course footer content */
.lp-foot{border-top:1px solid var(--line);padding:18px clamp(22px,5vw,60px);color:var(--ink-mute);font-size:12px;text-align:center}