/* ============================================================
   news25 锦江乐园光电直读水表合作稿 —— 页面专属样式
   仅作用于 <section class="menuDetail newsStory">，不影响其他资讯页
   色彩沿用站点主色：#2e87d5 / #165185
   ============================================================ */

/* —— 导语：细蓝条引出，不缩进 —— */
.menuDetail.newsStory .newsLead{
    font-size: 17px;
    color: #3d3d3d;
    line-height: 2;
    text-indent: 0;
    padding-left: 20px;
    border-left: 4px solid #2e87d5;
}

/* —— 项目事实条：开篇数据行（导语之后，非卡片） —— */
.menuDetail.newsStory .factStrip{
    display: flex;
    border-top: 1px solid #dfe7ee;
    border-bottom: 1px solid #dfe7ee;
    margin: 10px 0 38px;
}
.menuDetail.newsStory .factStrip .fact{
    flex: 1;
    padding: 20px 8px 18px;
    text-align: center;
}
.menuDetail.newsStory .factStrip .fact + .fact{
    border-left: 1px solid #dfe7ee;
}
.menuDetail.newsStory .factStrip .fact b{
    display: block;
    font-family: 'numberEn';
    font-size: 27px;
    font-weight: 600;
    color: #165185;
    line-height: 1.2;
}
.menuDetail.newsStory .factStrip .fact b i{
    font-style: normal;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    margin-left: 2px;
}
.menuDetail.newsStory .factStrip .fact span{
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #8b98a5;
}

/* —— 产品特点：细线网格（无圆角无阴影） —— */
.menuDetail.newsStory .featureGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #dfe7ee;
    margin: 26px 0 30px;
}
.menuDetail.newsStory .featureGrid .fea{
    padding: 20px 22px 18px;
}
.menuDetail.newsStory .featureGrid .fea:nth-child(even){
    border-left: 1px solid #dfe7ee;
}
.menuDetail.newsStory .featureGrid .fea:nth-child(n+3){
    border-top: 1px solid #dfe7ee;
}
.menuDetail.newsStory .featureGrid .fea h3{
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    color: #165185;
    margin: 0 0 8px;
}
.menuDetail.newsStory .featureGrid .fea h3 svg{
    width: 19px;
    height: 19px;
    flex: none;
    color: #2e87d5;
}
.menuDetail.newsStory .featureGrid .fea p{
    font-size: 14px;
    line-height: 1.9;
    color: #777;
    text-indent: 0;
    margin: 0;
}

/* —— 痛点对照：双栏，中线分隔 —— */
.menuDetail.newsStory .compare{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #dfe7ee;
    margin: 26px 0 30px;
}
.menuDetail.newsStory .compare .col{
    padding: 24px 26px 20px;
}
.menuDetail.newsStory .compare .colOld{
    background: #fafbfc;
    border-right: 1px solid #dfe7ee;
}
.menuDetail.newsStory .compare .colNew{
    background: #f2f7fc;
}
.menuDetail.newsStory .compare .col h3{
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6edf3;
}
.menuDetail.newsStory .compare .colNew h3{
    color: #165185;
}
.menuDetail.newsStory .compare .col ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.menuDetail.newsStory .compare .col li{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.85;
    color: #666;
    text-indent: 0;
    padding: 6px 0;
}
.menuDetail.newsStory .compare .col li svg{
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 6px;
}
.menuDetail.newsStory .compare .colOld li svg{
    color: #a6b3bf;
}
.menuDetail.newsStory .compare .colNew li{
    color: #4a5c6d;
}
.menuDetail.newsStory .compare .colNew li svg{
    color: #2e87d5;
}

/* —— 金句：上下细线 + 金色引号（呼应“魔法”主题的唯一装饰） —— */
.menuDetail.newsStory .pullQuote{
    position: relative;
    margin: 42px auto 36px;
    padding: 28px 72px;
    border-top: 1px solid #dfe7ee;
    border-bottom: 1px solid #dfe7ee;
}
.menuDetail.newsStory .pullQuote p{
    font-size: 20px;
    font-weight: 600;
    color: #165185;
    text-align: center;
    text-indent: 0;
    line-height: 1.9;
    margin: 0;
    letter-spacing: 0.04em;
}
.menuDetail.newsStory .pullQuote .qMark{
    position: absolute;
    font-family: 'Songti SC', 'SimSun', serif;
    font-size: 46px;
    line-height: 1;
    color: #c9a45c;
    user-select: none;
}
.menuDetail.newsStory .pullQuote .qMarkL{
    top: 16px;
    left: 22px;
}
.menuDetail.newsStory .pullQuote .qMarkR{
    bottom: 16px;
    right: 22px;
}

/* —— 一行双图：左为两表前后叠放（参考首页 banner 叠图），右为系统界面 —— */
.menuDetail.newsStory .newsGallery figure img{
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
}
.menuDetail.newsStory .meterStack{
    position: relative;
    aspect-ratio: 4 / 3;
}
.menuDetail.newsStory .meterStack img{
    position: absolute;
    aspect-ratio: auto;
    object-fit: contain;
    background: none;
    filter: drop-shadow(0 10px 20px rgba(22,81,133,.16));
}
.menuDetail.newsStory .meterStack .msBack{
    width: 58%;
    top: 22%;
    right: -6%;
    transform: rotate(6deg);
}
.menuDetail.newsStory .meterStack .msFront{
    width: 72%;
    top: 2%;
    left: -20%;
    z-index: 2;
    transform: rotate(-3deg);
}

/* —— 移动端（与站点 640px 断点一致） —— */
@media (max-width: 640px){
    .menuDetail.newsStory .newsLead{
        font-size: 15.5px;
        padding-left: 14px;
    }
    /* 事实条 2×2 */
    .menuDetail.newsStory .factStrip{
        flex-wrap: wrap;
        margin: 10px 0 26px;
    }
    .menuDetail.newsStory .factStrip .fact{
        flex: 1 1 50%;
        padding: 14px 6px 12px;
        border-left: 0;
        border-top: 1px solid #dfe7ee;
    }
    .menuDetail.newsStory .factStrip .fact:nth-child(even){
        border-left: 1px solid #dfe7ee;
    }
    .menuDetail.newsStory .factStrip .fact:nth-child(-n+2){
        border-top: 0;
    }
    .menuDetail.newsStory .factStrip .fact b{
        font-size: 21px;
    }
    .menuDetail.newsStory .factStrip .fact span{
        font-size: 12px;
        margin-top: 6px;
    }
    /* 特点网格转单列 */
    .menuDetail.newsStory .featureGrid{
        grid-template-columns: 1fr;
    }
    .menuDetail.newsStory .featureGrid .fea{
        padding: 16px 16px 14px;
        border-left: 0;
        border-top: 1px solid #dfe7ee;
    }
    .menuDetail.newsStory .featureGrid .fea:nth-child(even){
        border-left: 0;
    }
    .menuDetail.newsStory .featureGrid .fea:nth-child(n+3){
        border-top: 1px solid #dfe7ee;
    }
    .menuDetail.newsStory .featureGrid .fea:nth-child(2){
        border-top: 1px solid #dfe7ee;
    }
    /* 对照转上下堆叠 */
    .menuDetail.newsStory .compare{
        grid-template-columns: 1fr;
    }
    .menuDetail.newsStory .compare .col{
        padding: 18px 16px 16px;
    }
    .menuDetail.newsStory .compare .colOld{
        border-right: 0;
        border-bottom: 1px solid #dfe7ee;
    }
    /* 金句收窄 */
    .menuDetail.newsStory .pullQuote{
        padding: 20px 40px;
        margin: 32px auto 28px;
    }
    .menuDetail.newsStory .pullQuote p{
        font-size: 17px;
    }
    .menuDetail.newsStory .pullQuote .qMark{
        font-size: 34px;
    }
    .menuDetail.newsStory .pullQuote .qMarkL{
        top: 10px;
        left: 12px;
    }
    .menuDetail.newsStory .pullQuote .qMarkR{
        bottom: 10px;
        right: 12px;
    }
}