/* ==========================================================================
   Miss Pepper AI — Generic silo hero
   One parameterized hero for silos without a bespoke prototype. Rides the
   shared .mp-hero* system in hero.css; per-silo copy/panel come from
   inc/silo-heroes.json. Background is the page's own photo when present, else
   the on-brand CSS field below. Namespaced `.mp-hero--silo`.
   ========================================================================== */

/* On-brand cinematic field — the interim background until a bespoke photo is
   dropped at assets/images/hero-{slug}-bg.png (an inline background-image on
   .mp-hero__bg then overrides this). Per-silo hue via --mp-silo-glow. */
.mp-hero--silo .mp-hero__bg {
  background-color: var(--mp-surface);
  background-image:
    radial-gradient(115% 85% at 79% 16%, var(--mp-silo-glow, rgba(22, 143, 214, 0.28)), transparent 58%),
    radial-gradient(85% 80% at 10% 92%, rgba(0, 111, 190, 0.14), transparent 55%),
    radial-gradient(55% 55% at 60% 66%, rgba(255, 107, 0, 0.10), transparent 60%),
    linear-gradient(118deg, #061a2a 0%, #05111b 62%);
  background-size: cover;
  background-position: var(--mp-hero-focal, 58% 50%);
}

/* Eyebrow — silos carry no logo, so this small label sets context above the
   headline (the top bar owns the brand mark). */
.mp-hero--silo .mp-hero__eyebrow {
  margin: 0 0 clamp(0.9rem, 1.6vh, 1.4rem);
  color: var(--mp-orange);
  font-family: var(--mp-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 0.9vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Ghost secondary sizes to its content, not the wide primary min-width. */
.mp-hero.mp-hero--silo .mp-hero__secondary { min-width: auto; }

@media (max-width: 760px) {
  .mp-hero--silo .mp-hero__eyebrow { letter-spacing: 0.16em; }
}