/* =========================================================
PROJECT: Walanda platform
FILE: knowledge.css
PATH: /src/modules/knowledge/css/knowledge.css
MODULE: knowledge
SCOPE: styling (global / component / page)
PURPOSE: reference-aligned module styling
AUTHOR: Simasiku Nasilele
STANDARD: Walanda pro ui system
VERSION: 1.0.0
LAST UPDATED: 2026
========================================================= */
:root{
  --primary:#1FA78A;
  --primary-hover:#168f77;
  --background:#F4F7F8;
  --card:#FFFFFF;
  --text-dark:#2D3A3A;
  --muted:#6B7C7C;
  --border:#E6ECEC;
  --shadow-sm:0 2px 6px rgba(0,0,0,.05);
  --shadow-md:0 10px 24px rgba(0,0,0,.08);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --container:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter","Segoe UI",sans-serif;
  background:var(--background);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.topnav{
  position:sticky;top:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 32px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05)
}
.logo{
  font-size:24px;font-weight:800;color:var(--primary);letter-spacing:.02em
}
#nav-menu{display:flex;align-items:center;gap:18px}
#nav-menu a{font-size:14px;color:var(--text-dark)}
#nav-menu a:hover{color:var(--primary)}
#nav-menu .login{
  background:var(--primary);color:#fff;padding:9px 18px;border-radius:999px
}
#nav-menu .register{
  border:1px solid var(--border);padding:9px 18px;border-radius:999px
}
.menu-toggle{display:none;font-size:24px;cursor:pointer}
/* Hero pattern (2026-06-05): full-bleed background image with a
   translucent green overlay, matching /become-instructor.html. */
.hero{
  position:relative;
  color:#fff;padding:64px 0 54px;
  overflow:hidden;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero .hero-bg{position:absolute;inset:0;z-index:0}
.hero .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(47,143,131,0.88) 0%,rgba(31,167,138,0.88) 100%);
  z-index:1;
}
.hero > *:not(.hero-bg){position:relative;z-index:2}
.hero.compact{padding:44px 0}
.hero h1{font-size:clamp(30px,4vw,42px);margin-bottom:10px}
.hero p{max-width:760px;opacity:.95;line-height:1.6}
.hero-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:13px;opacity:.92}
.search-box{max-width:620px;margin:26px auto 0}
.search-box input{box-shadow:var(--shadow-sm)}
.layout{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);
  gap:28px;margin:32px auto 50px
}
.grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px
}
.knowledge-feed-ad{
  grid-column:1 / -1;
  /* The middle banner also carries .walanda-ad-card (see the controller's
     wrapClass), so its HEIGHT comes from --ad-card-h — matching the sidebar
     cards. Only the full-width span + clip live here. */
  overflow:hidden;
}
.knowledge-feed-ad .walanda-ad-slot{
  height:100%;
}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.22s ease
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-image-wrap{position:relative}
.card img{width:100%;height:210px;object-fit:cover}
.play-badge{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);color:#fff;font-size:22px
}
.card-body{padding:18px}
.card-body h3{font-size:18px;line-height:1.35;margin-bottom:10px}
.card-body p{font-size:14px;line-height:1.65;color:#5b6666;margin-bottom:12px}
.meta{font-size:12px;color:#889393;display:flex;gap:10px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#ecfaf7;color:var(--primary);padding:7px 11px;border-radius:999px;
  font-size:12px;font-weight:700
}
.section-title{
  display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:18px
}
.section-title h2{font-size:24px}
.section-title p{font-size:14px;color:var(--muted)}
.sidebar-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;
  box-shadow:var(--shadow-sm);margin-bottom:20px
}
.sidebar-card h4{margin-bottom:12px;color:#2f8f83;font-size:16px}
.sidebar-card ul{list-style:none}
.sidebar-card li{margin-bottom:10px;font-size:14px;color:#4e5a5a;line-height:1.5}
.sidebar-card li a:hover{color:var(--primary)}
.detail-shell{
  background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm);
  overflow:hidden
}
.detail-cover{width:100%;height:380px;object-fit:cover}
.detail-body{padding:26px}
.detail-body h1{font-size:34px;line-height:1.2;margin-bottom:14px}
.detail-body .summary{font-size:16px;color:#5a6666;line-height:1.75;margin-bottom:18px}
.content-prose{line-height:1.9;color:#374343;font-size:15px}
.content-prose p{margin-bottom:16px}
.author-box{
  display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--border);
  border-radius:16px;background:#fbfdfd;margin:18px 0 24px
}
.author-avatar{
  width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#69d2c2,#1FA78A);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:14px;font-weight:700;border:none;cursor:pointer
}
.btn.secondary{background:#fff;color:var(--text-dark);border:1px solid var(--border)}
.knowledge-interaction-stack{display:grid;gap:18px;margin-top:26px}
.knowledge-reaction-card,.knowledge-comment-card{
  background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm);padding:20px
}
.knowledge-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px}
.knowledge-section-head h3{font-size:20px;line-height:1.3}
.knowledge-section-head p{font-size:13px;color:var(--muted);line-height:1.6}
.knowledge-reaction-row{display:flex;flex-wrap:wrap;gap:12px}
.knowledge-reaction-btn{
  display:inline-flex;align-items:center;gap:10px;border:1px solid #dfe8e7;border-radius:999px;background:#f8fbfb;
  color:#274948;padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:.22s ease
}
.knowledge-reaction-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.06)}
.knowledge-reaction-btn i{color:var(--primary)}
.knowledge-reaction-btn.active{
  background:rgba(31,167,138,.1);border-color:rgba(31,167,138,.22);color:#0f6f5f
}
.knowledge-comment-feed{display:grid;gap:14px;margin-bottom:16px}
.knowledge-comment-item{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:16px;border:1px solid #edf2f1;border-radius:16px;background:#fbfdfd
}
.knowledge-comment-avatar{
  width:48px;height:48px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#69d2c2,#1FA78A);display:block
}
.knowledge-comment-avatar.initials{
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800
}
.knowledge-comment-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.knowledge-comment-meta strong{font-size:14px}
.knowledge-comment-date,.knowledge-comment-likes{font-size:12px;color:#7b8b8b}
.knowledge-comment-text{font-size:14px;color:#445252;line-height:1.75}
.knowledge-comment-form{display:grid;gap:12px}
.knowledge-comment-form textarea{
  min-height:120px;border-radius:18px;padding:16px;border:1px solid var(--border);resize:vertical;background:#fff
}
.knowledge-comment-form input{
  border-radius:14px;padding:12px 14px;border:1px solid var(--border);background:#fff
}
.knowledge-comment-form textarea:focus,.knowledge-comment-form input:focus{outline:none;border-color:var(--primary)}
.knowledge-comment-form-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.knowledge-comment-helper{font-size:12px;color:var(--muted);line-height:1.6}
.knowledge-comment-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;
  background:var(--primary);color:#fff;padding:11px 18px;font-size:13px;font-weight:800;cursor:pointer
}
.knowledge-comment-submit:hover{background:var(--primary-hover)}
.knowledge-comment-feedback{min-height:18px;font-size:12px;font-weight:700;color:#168f77}
.ad-slot{
  position:relative;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden
}
.ad-slot .slot-shell{padding:18px}
/* Right ad zone: a transparent flex column so multiple .walanda-ad-slot ads
   stack with spacing (no nested card — the slots carry their own styling). */
.knowledge-ad-zone{display:flex;flex-direction:column;gap:var(--space-md)}
/* Knowledge sidebar ads run taller than the platform default so the creative
   (image + copy) reads clearly as an advert. fillSidebar() reads --ad-card-h
   off the page, so this single token drives BOTH the rendered card height and
   the "how many fit" math (no drift). Bookstore keeps the 300px default. */
html[data-page="knowledge"]{--ad-card-h:400px}
html[data-page="knowledge"] .walanda-ad-card .walanda-sponsored-card img,
html[data-page="knowledge"] .walanda-ad-card .walanda-sponsored-media{height:200px}
.sponsored-label{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:12px
}
.sponsored-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden
}
.sponsored-card img{width:100%;height:220px;object-fit:cover}
.sponsored-card-body{padding:16px}
.sponsored-card-body h3{font-size:18px;line-height:1.35;margin-bottom:10px}
.sponsored-card-body p{font-size:14px;color:#5a6666;line-height:1.6;margin-bottom:12px}
.sponsored-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.sponsored-cta{
  display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;
  padding:10px 14px;border-radius:999px;font-size:13px;font-weight:800
}
.slot-fallback{
  border:1px dashed #d6e4e2;border-radius:12px;padding:22px;background:#fff;text-align:center
}
.slot-fallback h4{margin-bottom:8px}
.slot-fallback p{color:var(--muted);line-height:1.6;font-size:14px;margin-bottom:12px}
.split-list{display:grid;gap:16px}
.list-row{
  display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;background:#fff;border:1px solid var(--border);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)
}
.list-row img{width:100%;height:100%;min-height:110px;object-fit:cover}
.list-row .copy{padding:16px}
.list-row .copy h3{font-size:18px;margin-bottom:8px}
.filters{
  display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 24px
}
.filters .pill{
  display:inline-flex;padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:13px
}
.pagination-note{font-size:13px;color:var(--muted);margin-top:18px}
.walanda-footer{
  background:linear-gradient(180deg,#3AA49B,#2F8F83);color:#fff;padding:30px 0 20px;margin-top:46px
}
.footer-divider{height:2px;background:rgba(255,255,255,.35);margin-bottom:24px}
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.footer-col h4{font-size:15px;margin-bottom:12px}
.footer-col a,.footer-col p{display:block;font-size:13px;color:#d7eeee;margin-bottom:6px}
.footer-bottom{text-align:right;margin-top:24px;font-size:13px;color:#cdeeee}
.empty-state{
  grid-column:1/-1;background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;
  box-shadow:var(--shadow-sm)
}
.kp-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:#d8f5ef;margin-bottom:12px}
.kp-breadcrumb a{color:#fff;opacity:.95}
@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .topnav{padding:15px 18px}
  #nav-menu{
    position:absolute;top:76px;right:18px;background:#fff;display:none;flex-direction:column;align-items:flex-start;
    width:260px;padding:18px;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.1)
  }
  #nav-menu.active{display:flex}
  .menu-toggle{display:block}
}
@media (max-width:640px){
  .list-row{grid-template-columns:1fr}
  .detail-cover{height:240px}
  .detail-body h1{font-size:28px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{text-align:left}
  .knowledge-comment-item{grid-template-columns:1fr}
  .knowledge-section-head,.knowledge-comment-form-actions{flex-direction:column;align-items:flex-start}
  .knowledge-reaction-row{display:grid;grid-template-columns:1fr}
  .knowledge-reaction-btn,.knowledge-comment-submit{width:100%;justify-content:center}
}

/* =========================================================
SECTION: kill-switch offline state
DESCRIPTION: rendered into <main> when platform_modules.knowledge
.is_online = FALSE so the page doesn't try to fetch /api/knowledge
and produce a red console 503. Tokens only, no new colour literals.
========================================================= */
.kb-offline-state {
    grid-column: 1 / -1;
    margin: var(--space-lg) auto;
    max-width: 560px;
    padding: var(--space-xl) var(--space-lg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.kb-offline-state i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: var(--space-md);
    display: block;
}
.kb-offline-state h3 {
    margin: 0 0 var(--space-sm);
    font-size: 20px;
    color: var(--text-dark);
}
.kb-offline-state p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

/* =========================================================
END OF FILE
FILE: knowledge.css
PATH: /src/modules/knowledge/css/knowledge.css
MODULE: knowledge
STATUS: stable
MAINTAINED BY: Walanda core system
COPYRIGHT: © 2026 Walanda Inc. Ltd. All rights reserved.
========================================================= */