/* ============================================================
   _hero-system.css — Easy RFP blog hero illustration system
   v57.270 · 2026-05-27
   ------------------------------------------------------------
   Pure CSS + inline SVG hero blocks for blog post headers.
   No external image requests. Brand-consistent.
   Usage:
     <section class="post-hero hero-[variant]" aria-hidden="true">
       <svg viewBox="0 0 600 280">…inline SVG…</svg>
     </section>
   Place between .crumb and .cat-pill / .post-title.
   ============================================================ */

.post-hero{
  position:relative;
  margin:18px 0 28px;
  width:100%;
  aspect-ratio: 600 / 260;
  max-height:280px;
  min-height:240px;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  background:
    radial-gradient(ellipse 55% 75% at 18% 22%, rgba(244,114,182,.32), transparent 60%),
    radial-gradient(ellipse 60% 80% at 82% 78%, rgba(167,139,250,.42), transparent 60%),
    linear-gradient(135deg, #1a0f3d 0%, #2d1366 45%, #4c1d95 100%);
  box-shadow:
    0 20px 60px -28px rgba(76,29,149,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Subtle grid texture overlay (CSS only, no SVG) */
.post-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
  pointer-events:none;
  z-index:0;
}

/* Soft bottom glow */
.post-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(180deg, transparent, rgba(13,5,46,.45));
  pointer-events:none;
  z-index:0;
}

.post-hero svg{
  position:relative;
  z-index:1;
  width:min(86%, 540px);
  height:auto;
  max-height:80%;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.32));
}

/* Variant accent stripes (top-left ribbon) */
.post-hero[class*="hero-"] svg [data-accent]{
  fill: #f472b6;
}
.post-hero[class*="hero-"] svg [data-accent-2]{
  fill: #a78bfa;
}
.post-hero[class*="hero-"] svg [data-line]{
  stroke: rgba(255,255,255,.92);
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.post-hero[class*="hero-"] svg [data-soft]{
  fill: rgba(255,255,255,.14);
}
.post-hero[class*="hero-"] svg [data-fg]{
  fill: rgba(255,255,255,.96);
}
.post-hero[class*="hero-"] svg [data-muted]{
  fill: rgba(255,255,255,.55);
}

/* ---------- Per-variant background tweaks (subtle) ---------- */
.hero-benchmark{ background:
  radial-gradient(ellipse 55% 75% at 18% 22%, rgba(244,114,182,.28), transparent 60%),
  radial-gradient(ellipse 60% 80% at 82% 78%, rgba(167,139,250,.42), transparent 60%),
  linear-gradient(135deg, #1a0f3d 0%, #2d1366 45%, #4c1d95 100%);
}
.hero-data{ background:
  radial-gradient(ellipse 55% 75% at 82% 22%, rgba(244,114,182,.30), transparent 60%),
  radial-gradient(ellipse 60% 80% at 18% 78%, rgba(167,139,250,.40), transparent 60%),
  linear-gradient(135deg, #150b35 0%, #2d1366 50%, #5b21b6 100%);
}
.hero-calculator{ background:
  radial-gradient(ellipse 50% 70% at 50% 18%, rgba(244,114,182,.30), transparent 60%),
  radial-gradient(ellipse 70% 80% at 50% 100%, rgba(167,139,250,.40), transparent 60%),
  linear-gradient(160deg, #1a0f3d 0%, #3b1885 100%);
}
.hero-warning{ background:
  radial-gradient(ellipse 55% 70% at 50% 30%, rgba(251,146,60,.28), transparent 60%),
  radial-gradient(ellipse 60% 80% at 82% 78%, rgba(167,139,250,.42), transparent 60%),
  linear-gradient(135deg, #1a0f3d 0%, #2d1366 45%, #4c1d95 100%);
}

/* ---------- Mobile breakpoint ---------- */
@media (max-width: 600px){
  .post-hero{
    min-height:160px;
    max-height:200px;
    aspect-ratio: 360 / 180;
    border-radius:14px;
    margin:12px 0 20px;
  }
  .post-hero svg{
    width:88%;
    max-height:76%;
  }
}

/* Reduced motion / print safety */
@media (prefers-reduced-motion: reduce){
  .post-hero{ box-shadow:none; }
}
@media print{
  .post-hero{ display:none !important; }
}