/* =============================================================
   qiboo.ai — Topic Banner styles (concentric)
   Pair with qiboo-topic-banner.js. Drop into your stylesheet.
   ============================================================= */

.qb-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  /* gradient is driven by CSS vars set by QibooBanner.paint() */
  background: linear-gradient(150deg,
              var(--qb-hi)  0%,
              var(--qb-mid) 48%,
              var(--qb-lo)  100%);
}

/* concentric motif layer */
.qb-banner > .qb-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.qb-banner > .qb-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* soft top-left light + bottom vignette so white text stays legible */
.qb-banner > .qb-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(180deg, transparent 38%, rgba(0,0,0,.36) 100%);
}

/* keep YOUR content above the decoration */
.qb-banner > *:not(.qb-art):not(.qb-sheen) {
  position: relative;
  z-index: 2;
}

/* optional: a tidy gold rule you can drop under a topic title */
.qb-rule {
  height: 3px;
  width: 56px;
  border-radius: 3px;
  background:#d4af37; /* qiboo earth gold */
}

/* =============================================================
   Category emblems — replace emoji icons (QibooBanner.emblem)
   ============================================================= */
.qb-emblem {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--qb-hi), var(--qb-mid) 55%, var(--qb-lo));
  box-shadow: 0 4px 14px rgba(20,30,15,.16), inset 0 1px 0 rgba(255,255,255,.18);
}
.qb-emblem::after { /* top-left light for depth */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(90% 70% at 18% 8%, rgba(255,255,255,.22), transparent 60%);
}
.qb-emblem-rings { position: absolute; inset: 0; z-index: 0; }
.qb-emblem-glyph { position: relative; z-index: 2; width: 30px; height: 30px; color: #fff; }
/* scale up by overriding width/height + glyph size as needed */