/* ==========================================================================
   iMind — Designed category hero covers
   License-clean "hero images" for campaign / group cards: a layered gradient,
   a soft dot-grid texture, and an oversized category motif. No external files.
   Apply a `.cat-hero` base + a `.cat-hero--<category>` modifier to any hero box;
   the motif glyph goes in a `.cat-hero__motif` child (set via PHP).
   ========================================================================== */

.cat-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #7C5CF5, #4EA8F5); /* fallback */
  isolation: isolate;
}

/* Soft dot-grid texture overlay — gives every cover subtle depth */
.cat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Diagonal sheen — a single light streak for a premium, non-flat feel */
.cat-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 180%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 0;
}

/* Oversized category motif, anchored bottom-right, bleeding off the edge */
.cat-hero__motif {
  position: absolute;
  right: -6px;
  bottom: -14px;
  font-size: 84px;
  line-height: 1;
  opacity: 0.32;
  filter: saturate(1.1) drop-shadow(0 2px 6px rgba(20, 16, 50, 0.25));
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Keep real content (level chip, category pill) above the decoration */
.cat-hero > * { position: relative; z-index: 1; }

/* ── Per-category palettes (each a 2–3 stop gradient tuned to the topic) ──── */
.cat-hero--solar     { background: linear-gradient(135deg, #FFB347 0%, #FF8C42 55%, #F5683D 100%); }
.cat-hero--auto      { background: linear-gradient(135deg, #4EA8F5 0%, #2C6BD4 100%); }
.cat-hero--travel    { background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 55%, #0E9488 100%); }
.cat-hero--reno      { background: linear-gradient(135deg, #FF9F40 0%, #F5683D 100%); }
.cat-hero--fitness   { background: linear-gradient(135deg, #FF6B9D 0%, #C4488E 100%); }
.cat-hero--insurance { background: linear-gradient(135deg, #5B8DEF 0%, #3B5BDB 100%); }
.cat-hero--education { background: linear-gradient(135deg, #B85EC4 0%, #7C5CF5 100%); }
.cat-hero--tech      { background: linear-gradient(135deg, #7C5CF5 0%, #5B6BF5 50%, #4EA8F5 100%); }
.cat-hero--services  { background: linear-gradient(135deg, #34C759 0%, #0E9488 100%); }
.cat-hero--housing   { background: linear-gradient(135deg, #F0B429 0%, #FF9F40 100%); }

/* Generic fallbacks for unknown categories */
.cat-hero--g1 { background: linear-gradient(135deg, #7C5CF5, #4EA8F5); }
.cat-hero--g2 { background: linear-gradient(135deg, #FF6B9D, #7C5CF5); }
.cat-hero--g3 { background: linear-gradient(135deg, #34C759, #14B8A6); }
.cat-hero--g4 { background: linear-gradient(135deg, #FFC857, #FF9F40); }

/* Smaller motif on compact cards (rail + group-card heroes are short) */
.kcard__hero .cat-hero__motif,
.v2-group-card__hero .cat-hero__motif { font-size: 64px; right: -4px; bottom: -10px; }

@media (prefers-reduced-motion: reduce) {
  .cat-hero::after { display: none; }
}