/* =============================================================
   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 */
}