/* theme-shapes.css
   Complete theme for Mumbwabile landing page:
   - header / hero / blobs
   - featured carousel
   - mosaic grid / cards
   - admin topbar styles
   - responsive behavior and utilities
   Place at /assets/css/theme-shapes.css
*/

:root{
  --brand: #22B573;
  --brand-2: #1b9159;
  --muted: #6b7280;
  --bg-1: #fbfffb;
  --bg-2: #f2f7f6;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(10,20,30,0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --max-width: 1200px;
  --gap: 1rem;
  --transition: 220ms cubic-bezier(.2,.9,.3,1);
}

/* basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#0f1724;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

/* decorative blobs */
.page-blob{position:absolute;pointer-events:none;z-index:0;filter:blur(18px);opacity:.56}
.blob-1{width:420px;height:420px;left:-120px;top:-90px;background:radial-gradient(circle at 25% 30%, rgba(34,181,115,0.18), rgba(27,145,89,0.06));border-radius:48% 52% 60% 40%/44% 41% 59% 57}
.blob-2{width:320px;height:320px;right:-80px;top:40px;background:radial-gradient(circle at 70% 20%, rgba(27,145,89,0.14), rgba(34,181,115,0.02));border-radius:45% 55% 30% 70%/60% 40% 60% 40}

/* top nav (public) */
.top-nav{backdrop-filter:blur(6px);background:rgba(255,255,255,0.96);border-bottom:1px solid rgba(2,6,23,0.03);z-index:30}
.navbar-brand{display:flex;align-items:center;gap:.5rem}
.navbar .nav-link{color:#21323a;padding:.5rem .6rem}
.navbar .nav-link:hover{color:var(--brand-2)}
.navbar-brand img.site-logo{height:48px;width:auto;display:block;border-radius:8px;transition:height var(--transition)}
@media (min-width:1200px){ .navbar-brand img.site-logo{ height:64px } }
.search-inline{ max-width:360px }

/* hero */
.hero-wrap{position:relative;padding:56px 0 36px;z-index:5}
.hero-angled{
  background: linear-gradient(135deg, rgba(34,181,115,0.06), rgba(27,145,89,0.03));
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  overflow:visible;
}
.ribbon{
  position:absolute; right:-64px; top:8px; transform:rotate(16deg);
  background: linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; padding:8px 60px;
  border-radius:6px; font-weight:700; box-shadow:0 6px 18px rgba(2,6,23,0.08);
}
.hero-card{background:linear-gradient(180deg,#fff,#fbfffb);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.hero-actions .btn{border-radius:10px}
.stats{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.stat{background:#fff;padding:12px;border-radius:10px;box-shadow:var(--shadow);text-align:center;min-width:110px}

/* featured (carousel) */
.news-section{margin-top:22px}
.news-carousel .carousel-item{border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(2,6,23,0.06);background:#fff}
.news-carousel .carousel-item img{width:100%;height:360px;object-fit:cover;display:block}
@media (max-width:992px){ .news-carousel .carousel-item img{height:220px} }
.news-carousel .carousel-caption{
  position:absolute;left:18px;right:18px;bottom:18px;text-align:left;
  background:linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.42));
  padding:16px;border-radius:8px;
}
.news-carousel .carousel-caption h5{color:#fff;margin:0 0 6px;font-weight:700}
.news-carousel .carousel-caption p{color:rgba(255,255,255,0.9);margin:0;font-size:.95rem}

/* controls (filters + search) */
.news-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:18px 0;flex-wrap:wrap}
.news-controls .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.news-controls .right{display:flex;gap:8px;align-items:center}
.control-pill{padding:.36rem .7rem;border-radius:999px;background: linear-gradient(90deg, rgba(34,181,115,0.08), rgba(27,145,89,0.02));color:var(--brand-2);font-weight:600;border:0;cursor:pointer}
.news-search{max-width:320px;width:100%}

/* mosaic grid */
.news-mosaic{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:start}
.mosaic-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(2,6,23,0.04);display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;min-height:360px}
.mosaic-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(2,6,23,0.10)}
.mosaic-media{width:100%;height:170px;flex:0 0 auto;background:#eef9f0;overflow:hidden}
.mosaic-media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:768px){ .mosaic-media{height:140px} .mosaic-card{min-height:auto} }
.mosaic-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.mosaic-body h4{margin:0;font-size:1.05rem;line-height:1.2}
.mosaic-body p{margin:0;color:var(--muted);font-size:.95rem}
.mosaic-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.date-badge{background: linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;padding:.36rem .55rem;border-radius:8px;font-weight:700;font-size:.85rem}
.mosaic-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag-chip{padding:.28rem .5rem;border-radius:999px;background: rgba(34,181,115,0.08);color:var(--brand-2);font-weight:600;font-size:.82rem}

/* fallback / empty */
.no-news{padding:28px;text-align:center;color:var(--muted);background:#fff;border-radius:10px;box-shadow:var(--shadow)}
.center{text-align:center}

/* small utilities */
.ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.text-muted-small{color:var(--muted);font-size:.92rem}

/* footer and admin (brief) */
.footer-soft{background:linear-gradient(180deg,#f6fbf9,#f2f7f6);padding:28px 0;border-top:1px solid rgba(2,6,23,0.03);text-align:center}
.admin-top-nav{background:linear-gradient(90deg,#0f4b2b,#1b9159);color:#fff;border-bottom:0}
.admin-top-nav .nav-link{color:rgba(255,255,255,0.92)}
.admin-brand img{height:36px;border-radius:6px}

/* responsive tweaks */
@media (max-width:992px){
  .ribbon{display:none}
  .blob-1,.blob-2{display:none}
  .hero-angled{padding:16px}
  .navbar-brand img.site-logo{height:44px}
}
@media (max-width:576px){
  .container{padding:0 .6rem}
  .news-search{max-width:160px}
  .card-geom{padding:10px}
}