/* ============================================================================
   省市版头实景图 · 右上区域显影增强（2026-10-19 · K31）
   ----------------------------------------------------------------------------
   背景（站长原话）：
     「省市栏目页面右上部的空白区域…目前上部都让背景图片满铺，也可以！
      只是把右上部的背景图片不遮挡，通过技术让这部分区域显示图片的更明显一些！」
   实测问题（ms-news.css 原值）：
     .msn-hero-landmark  opacity:.82
     mask 左侧 10% → 右侧 78% 才完全显影（右上 40% 被切掉近两成亮度）
     ::after 右端仍压 rgba(9,32,58,.08)
     .msn-hero-glow 右端叠了 rgba(200,30,45,.15) 红晕
     四层叠加后，右上空白区几乎看不出是实景照片。
   本文件只做覆盖，不改 ms-news.css 原文件 —— 回滚 = 删 v2.html / list_news.html
   里的这一行 link。加载顺序在所有站点样式之后，选择器同权重，后者生效。
   ========================================================================== */

/* 1. 整图满显影 + 轻微提饱和提亮（原图出片时统一压过暗，这里补回来） */
.msn-hero-landmark {
    opacity: 1;
    filter: saturate(1.06) brightness(1.06);
    -webkit-mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, .05) 0%,
        rgba(0, 0, 0, .16) 20%,
        rgba(0, 0, 0, .42) 38%,
        rgba(0, 0, 0, .80) 54%,
        rgba(0, 0, 0, 1) 64%,
        rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(90deg,
        rgba(0, 0, 0, .05) 0%,
        rgba(0, 0, 0, .16) 20%,
        rgba(0, 0, 0, .42) 38%,
        rgba(0, 0, 0, .80) 54%,
        rgba(0, 0, 0, 1) 64%,
        rgba(0, 0, 0, 1) 100%);
}

/* 2. 压深渐变：只在左侧文字区压，右侧 60% 之后完全不加暗 */
.msn-hero-landmark::after {
    background: linear-gradient(90deg,
        rgba(9, 32, 58, .60) 0%,
        rgba(9, 32, 58, .30) 30%,
        rgba(9, 32, 58, .06) 48%,
        rgba(9, 32, 58, 0) 60%,
        rgba(9, 32, 58, 0) 100%);
}

/* 3. 右上角补一点冷色"空气光"，让实景图不死蓝（screen 混合不压黑） */
.msn-hero-landmark::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(760px 300px at 88% 0%, rgba(120, 180, 235, .16), transparent 70%);
    mix-blend-mode: screen;
}

/* 4. 去掉右端红晕（它正好压在右上实景上，饱和度被拉脏） */
.msn-hero-glow {
    background: radial-gradient(780px 320px at 8% -16%, rgba(62, 123, 176, .28), transparent 66%);
}

/* 5. 右上角地名胶囊：底色略加深，压住变亮的实景图，保证白字对比度 */
.msn-hero-landmark-tag {
    background-color: rgba(9, 32, 58, .72);
}

/* 6. 四枚 KPI 白字现在直接压在变亮的照片上：
      只在这一条窄带上补一层「左透右实的深蓝渐变」，不是整块色板 ——
      数字重新拿到 4.5:1 以上，同时上方的实景图仍然是透的（站长要的是"不遮挡"）。 */
.msn-stats {
    background: linear-gradient(90deg,
        rgba(9, 32, 58, 0) 0%,
        rgba(9, 32, 58, .30) 26%,
        rgba(9, 32, 58, .44) 100%);
    border-radius: 12px;
    text-shadow: 0 1px 3px rgba(3, 16, 31, .82), 0 6px 22px rgba(3, 16, 31, .55);
}

/* 7. 窄屏：右侧实景占比变大，标题可能压到图上，左遮罩再加一档 */
@media (max-width: 1100px) {
    .msn-hero-landmark {
        -webkit-mask-image: linear-gradient(90deg,
            rgba(0, 0, 0, .06) 0%,
            rgba(0, 0, 0, .26) 34%,
            rgba(0, 0, 0, .62) 62%,
            rgba(0, 0, 0, 1) 88%,
            rgba(0, 0, 0, 1) 100%);
        mask-image: linear-gradient(90deg,
            rgba(0, 0, 0, .06) 0%,
            rgba(0, 0, 0, .26) 34%,
            rgba(0, 0, 0, .62) 62%,
            rgba(0, 0, 0, 1) 88%,
            rgba(0, 0, 0, 1) 100%);
    }
}

/* 8. 地域页文库块的「匹配依据」小字（只在 list_news 侧栏出现）
   左右 16px 内边距：.msn-card 本身没有 padding，子块各自带内边距
   （.msn-kb-list 是 8px、.msn-kb-more 是 16px）。原先只写 margin:0 0 10px，
   这行小字会顶到卡片左边框上、与上下两块对不齐 —— 2026-10-19 实拍发现后补 */
.msn-kb-note {
    margin: 0 16px 10px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--msn-body, #BEDBF2);
    opacity: .78;
}