/* ==========================================================
   JR杰瑞 · 矿物暖墨实拍底图（v2 · 可见性修复）
   ------------------------------------------------------------
   问题：底图全部 200 加载成功，但被 ::after 遮罩的「不透明墨底」
        完全盖死，用户看不到任何底图。
        罪魁 brand-bg.134000.css：
          .hero__media::after 第一层
            linear-gradient(180deg, var(--mn-50) 0%, var(--mn-100) 60%, var(--mn-50) 100%)
            → 100% 不透明
          .banner--xxx::after 同样是不透明墨底
          .gate 被 background 简写重置掉 background-image
   修法：遮罩改为「上下不透明融进页面底色 + 中部半透明」，
        左侧（文字区）压暗保可读，右侧留底图清晰可见。
        全部 !important + 无守卫，确保赢过所有旧规则。
   ========================================================== */

/* ============================ hero ============================ */
.hero__media {
  background-image: url("/assets/brand/hero-jr-h5.webp") !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}

/* 暗色：左侧（文字区）压暗，右侧 5% 让底图清晰透出 */
[data-jr-base][data-theme="dark"] .hero__media::after {
  background:
    linear-gradient(95deg,
      rgba(14,12,10,.90) 0%,
      rgba(14,12,10,.66) 32%,
      rgba(14,12,10,.20) 60%,
      rgba(14,12,10,.04) 100%),
    linear-gradient(180deg,
      rgba(14,12,10,.50) 0%,
      rgba(14,12,10,0) 30%,
      rgba(14,12,10,0) 64%,
      var(--mn-50) 100%) !important;
  background-blend-mode: normal, normal !important;
  opacity: 1 !important;
}

/* 亮色：左侧奶白压底保可读，右侧留底图 */
[data-jr-base][data-theme="light"] .hero__media::after {
  background:
    linear-gradient(95deg,
      rgba(247,243,234,.94) 0%,
      rgba(247,243,234,.74) 32%,
      rgba(247,243,234,.26) 60%,
      rgba(247,243,234,.05) 100%),
    linear-gradient(180deg,
      rgba(247,243,234,.58) 0%,
      rgba(247,243,234,0) 30%,
      rgba(247,243,234,0) 64%,
      var(--mn-50) 100%) !important;
  background-blend-mode: normal, normal !important;
  opacity: 1 !important;
}

/* 干掉 brand.212832 L151 的亮色高光斑（暗色下变白雾盖字） */
.hero__inner::before { display: none !important; }

/* ============================ gate ============================ */
[data-jr-base] .gate {
  background-color: var(--mn-50) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
[data-jr-base][data-theme="dark"] .gate {
  background-image:
    linear-gradient(180deg, rgba(14,12,10,.62) 0%, rgba(14,12,10,.44) 100%),
    url("/assets/brand/gate-rooms-h5.webp") !important;
}
[data-jr-base][data-theme="light"] .gate {
  background-image:
    linear-gradient(180deg, rgba(247,243,234,.66) 0%, rgba(247,243,234,.48) 100%),
    url("/assets/brand/gate-rooms-h5.webp") !important;
}

/* ========================== banner 通用 ========================== */
.banner--products,
.banner--capability,
.banner--workflow,
.banner--showcase,
.banner--pricing,
.banner--cta,
.banner--painting,
.banner--drama,
.banner--wardrobe {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* 底图本体现身：不再靠 .30 那套极淡透明度 */
[data-jr-base][data-theme="dark"]  .banner { opacity: .85 !important; }
[data-jr-base][data-theme="light"] .banner { opacity: .82 !important; }

.banner--products   { background-image: url("/assets/brand/banner-products-v5.webp") !important; }
.banner--capability { background-image: url("/assets/brand/banner-capability-v5.webp") !important; }
.banner--workflow   { background-image: url("/assets/brand/banner-workflow-v5.webp") !important; }
.banner--showcase   { background-image: url("/assets/brand/banner-showcase-v5.webp") !important; }
.banner--pricing    { background-image: url("/assets/brand/banner-pricing-v5.webp") !important; }
.banner--cta        { background-image: url("/assets/brand/banner-cta-v5.webp") !important; }
.banner--painting   { background-image: url("/assets/brand/banner-painting-v5.webp") !important; }
.banner--drama      { background-image: url("/assets/brand/banner-drama-v5.webp") !important; }
.banner--wardrobe   { background-image: url("/assets/brand/banner-wardrobe-v5.webp") !important; }

/* ==================== banner ::after 遮罩（暗色） ====================
   结构：主题色 radial 晕染 + 上下融底 / 中部半透明 scrim
   中部 .50~.58 → 底图清晰可见，文字仍有对比度                    */
[data-jr-base][data-theme="dark"] .banner--products::after {
  background:
    radial-gradient(60% 60% at 20% 40%, rgba(180,83,42,.26) 0%, transparent 70%),
    radial-gradient(50% 50% at 82% 70%, rgba(217,154,43,.16) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--capability::after {
  background:
    radial-gradient(60% 60% at 78% 30%, rgba(180,83,42,.28) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--workflow::after {
  background:
    linear-gradient(100deg, rgba(180,83,42,.24) 0%, transparent 45%, rgba(217,154,43,.18) 100%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--showcase::after {
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(217,154,43,.24) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.50) 22%, rgba(16,14,12,.56) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--pricing::after {
  background:
    radial-gradient(60% 60% at 30% 65%, rgba(47,93,80,.30) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--cta::after {
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(180,83,42,.32) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.58) 22%, rgba(16,14,12,.64) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--painting::after {
  background:
    radial-gradient(55% 60% at 25% 40%, rgba(180,83,42,.32) 0%, transparent 70%),
    radial-gradient(50% 50% at 78% 68%, rgba(217,154,43,.16) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--drama::after {
  background:
    radial-gradient(55% 55% at 72% 32%, rgba(217,154,43,.30) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="dark"] .banner--wardrobe::after {
  background:
    radial-gradient(55% 55% at 28% 60%, rgba(47,93,80,.34) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(16,14,12,.52) 22%, rgba(16,14,12,.58) 78%, var(--mn-50) 100%) !important;
}

/* ==================== banner ::after 遮罩（亮色） ==================== */
[data-jr-base][data-theme="light"] .banner--products::after {
  background:
    radial-gradient(60% 60% at 20% 40%, rgba(180,83,42,.16) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--capability::after {
  background:
    radial-gradient(60% 60% at 78% 30%, rgba(180,83,42,.18) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--workflow::after {
  background:
    linear-gradient(100deg, rgba(180,83,42,.14) 0%, transparent 45%, rgba(217,154,43,.12) 100%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--showcase::after {
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(217,154,43,.16) 0%, transparent 72%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.54) 22%, rgba(247,243,234,.60) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--pricing::after {
  background:
    radial-gradient(60% 60% at 30% 65%, rgba(47,93,80,.20) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--cta::after {
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(180,83,42,.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.62) 22%, rgba(247,243,234,.68) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--painting::after {
  background:
    radial-gradient(55% 60% at 25% 40%, rgba(180,83,42,.20) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--drama::after {
  background:
    radial-gradient(55% 55% at 72% 32%, rgba(217,154,43,.20) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}
[data-jr-base][data-theme="light"] .banner--wardrobe::after {
  background:
    radial-gradient(55% 55% at 28% 60%, rgba(47,93,80,.22) 0%, transparent 70%),
    linear-gradient(180deg, var(--mn-50) 0%, rgba(247,243,234,.56) 22%, rgba(247,243,234,.62) 78%, var(--mn-50) 100%) !important;
}

/* 遮罩透明度归位，别被 brand-img.151000 的 1.05 / .92 再次压死 */
[data-jr-base] .banner::after { opacity: 1 !important; }
/* 噪点层减弱，避免实拍底图上出现脏点 */
[data-jr-base] .banner::before { opacity: .08 !important; }