/**
 * log-monitoring.css — 日志监控产品页专属样式
 * 迁移自内联 <style>，日期：2026-06-16
 * 作用域：body.log-monitoring-page（所有选择器加前缀，防止污染其他页面）
 *
 * 关键修复（吸取 dcim 教训）：
 *  1. 图片 width:100% + max-width:600px 代替固定 600px，防 1280px 横向溢出
 *  2. .product-hero-description max-width:100%，不超出 1fr 列宽（1280px 下约 576px）
 *  3. product-cta-content width:100% 代替 width:1280px，父容器 padding:24px×2 下不溢出
 *  4. product-cta-title padding:0 80px + white-space:normal 代替 256px+nowrap
 *  5. body.log-monitoring-page { overflow-x:hidden } 兜底
 */

/* 全局兜底：防止任何溢出元素产生横向滚动条 */
body.log-monitoring-page {
    overflow-x: hidden;
}


/* ─── Header 透明/活跃状态 ─── */
body.log-monitoring-page .header:not(.header-active) {
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.log-monitoring-page .header.header-active {
    background-color: #FFFFFF !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ─── Hero 首屏 ─── */
.log-monitoring-page .product-hero {
    background-image: url('/frontStatic/cn/image/newIndex/Header.png'),
                      linear-gradient(135deg, #F5F4FF 0%, #E1DBFF 100%);
    background-color: #F5F4FF;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    height: 640px;
    padding-top: 160px;
    padding-bottom: 164px;
    align-items: flex-start;
}

.log-monitoring-page .product-hero .product-badge {
    color: #6B7280;
    font-size: var(--font-small);
    line-height: 22px;
    margin-bottom: var(--space-element);
}
.log-monitoring-page .product-hero .product-badge .badge-accent {
    color: #6246E8;
    font-weight: 700;
}

.log-monitoring-page .product-hero .product-hero-title {
    color: #6246E8;
    font-size: var(--title-hero);
    line-height: 68px;
}

.log-monitoring-page .product-hero .product-hero-description {
    color: #1E293B;
    font-size: 20px;
    line-height: 28px;
    max-width: 100%;    /* 原 680px 超出 1280px 下 1fr 列宽（约 576px）*/
}

/* 按钮 */
.log-monitoring-page .product-hero .product-btn-primary {
    border-radius: 12px;
    height: 62px;
    min-width: 233px;
    font-size: 18px;
    line-height: 21px;
    gap: 43px;
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-left: none;
    border-right: none;
    background: linear-gradient(180deg, #6246E8 0%, #6246E8 100%);
    transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.log-monitoring-page .product-hero .product-btn-primary svg {
    transition: transform 0.25s ease;
}
.log-monitoring-page .product-hero .product-btn-primary:hover,
.log-monitoring-page .product-hero .product-btn-primary:focus {
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(98, 70, 232, 0.45);
}
.log-monitoring-page .product-hero .product-btn-primary:hover svg,
.log-monitoring-page .product-hero .product-btn-primary:focus svg {
    transform: translateX(4px);
}

/* 右侧图片 — width:100% + max-width 防溢出 */
.log-monitoring-page .product-hero .product-hero-image-wrapper img {
    width: 100%;          /* 响应 1fr 列宽，防 1280px 横向溢出 */
    max-width: 600px;     /* 大屏（≥1440px）保留 Figma 规格 */
    height: auto;         /* 保持比例 */
    border-radius: 8px;
    object-fit: cover;
}

/* ─── 第2屏 Benefits ─── */
.log-monitoring-page .product-benefits .product-benefit-description {
    margin-bottom: 0;
}
.log-monitoring-page .product-benefits .benefit-point {
    margin-bottom: 12px;
}
.log-monitoring-page .product-benefits .benefit-point:last-child {
    margin-bottom: 0;
}
.log-monitoring-page .product-benefits .benefit-point-title {
    position: relative;
    margin: 0 0 4px;
    padding-left: 14px;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 24px;
    color: #1E293B;
}
.log-monitoring-page .product-benefits .benefit-point-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1F2A28;
}
.log-monitoring-page .product-benefits .benefit-point-text {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 24px;
    color: #6B7280;
}

.log-monitoring-page .product-benefits {
    padding: 0 var(--page-gutter);
}
.log-monitoring-page .product-benefits .product-benefit-item {
    padding: 40px 0;
}
.log-monitoring-page .product-benefits .product-benefit-item:last-child {
    padding-bottom: 120px;
}

.log-monitoring-page .product-benefits-section-title {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--title-section);
    font-weight: 600;
    line-height: 56px;
    color: #1F2A28;
    margin: 0 0 60px;
    text-align: center;
    padding-top: 120px;
}

/* ─── 第3屏 核心能力 ─── */
.log-monitoring-page .product-features {
    padding: 80px var(--page-gutter);
}
.log-monitoring-page .product-features .product-features-header {
    margin-bottom: 40px;
}

/* ─── 第4屏 CTA ─── */
.log-monitoring-page .product-cta {
    background: #FFFFFF;
    padding: 120px var(--page-gutter);
}

.log-monitoring-page .product-cta .product-cta-content {
    width: 100%;                     /* 原 1280px 超出父容器可用宽（1280-48=1232px）*/
    max-width: var(--content-max-w);
    min-height: 310px;
    margin: 0 auto;
    background: linear-gradient(89.89deg, #6246E8 0%, #411CF5 100%);
    border-radius: 16px;
    box-sizing: border-box;
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.log-monitoring-page .product-cta .product-cta-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            rgba(255,255,255,0.08) 0 1px,
            transparent 1px 36px,
            rgba(255,255,255,0.08) 36px 37px,
            transparent 37px 72px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 0 1px,
            transparent 1px 36px,
            rgba(255,255,255,0.08) 36px 37px,
            transparent 37px 72px
        );
    pointer-events: none;
    border-radius: 16px;
}

@keyframes lm-cta-gradient-shift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.log-monitoring-page .product-cta .product-cta-title {
    margin: 0;
    padding: 0 80px;      /* 原 256px，窄屏下撑宽容器；改为合理留白 */
    background: linear-gradient(to right, #fff, #ede9fe, #c4b5fd, #a78bfa, #c4b5fd, #ede9fe, #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: lm-cta-gradient-shift 5s linear infinite alternate;
    text-align: center;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: var(--title-section);
    font-weight: 600;
    line-height: 56px;
    letter-spacing: 0;
    white-space: normal;  /* 原 nowrap，在窄屏下强制拉宽容器 */
}

.log-monitoring-page .product-cta .product-cta-description {
    display: none;
}

.log-monitoring-page .product-cta .product-cta-buttons {
    width: 420px;
    height: 62px;
    margin: 36px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary {
    width: 200px;
    height: 62px;
    min-height: 62px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    box-shadow: none;
    border: none;
}

.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary {
    background: #FFFFFF;
    color: #6246E8;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary:hover,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary:focus {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35);
}

.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary {
    background: #1E293B;
    color: #FFFFFF;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary:hover,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary:focus {
    opacity: 0.9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary svg,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary:hover svg,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary:focus svg,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary:hover svg,
.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary:focus svg {
    transform: translateX(4px);
}

/* ─── 平板断点（768–1279px）─── */
@media (max-width: 767px) {
    /* Hero */
    .log-monitoring-page .product-hero {
        height: auto;
        padding-top: 120px;
        padding-bottom: 48px;
        align-items: stretch;
    }
    .log-monitoring-page .product-hero .product-hero-image-wrapper img {
        width: 100%;
        height: auto;
        max-height: 280px;
        object-fit: cover;
    }

    /* Benefits — 用 !important 覆盖 mobile.css @media(max-width: 767px) 的
       .product-benefits-section-title { font-size:28px; padding-top:32px }
       本规则选择器特异度(0,2,0) > mobile.css(0,1,0)，两者均有 时高特异度胜出 */
    .log-monitoring-page .product-benefits-section-title {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 40px;
        padding-top: 80px;
    }
    .log-monitoring-page .product-benefits .product-benefit-item {
        padding: 24px 0;
    }
    .log-monitoring-page .product-benefits .product-benefit-title {
        font-size: 30px;
        line-height: 38px;
    }

    /* Features */
    .log-monitoring-page .product-features {
        padding: 64px 20px 56px;
    }

    /* CTA */
    .log-monitoring-page .product-cta {
        padding: 88px 20px;
    }
    .log-monitoring-page .product-cta .product-cta-content {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 310px;
        padding: 64px 32px;
    }
    .log-monitoring-page .product-cta .product-cta-title {
        padding: 0;
        font-size: 40px;
        line-height: 44px;
    }
}

/* ─── 手机断点（≤767px）─── */
@media (max-width: 767px) {
    /* Hero */
    .log-monitoring-page .product-hero {
        margin-bottom: 0;
        height: auto;
        padding-top: 80px;
        padding-bottom: 32px;
        align-items: stretch;
    }
    .log-monitoring-page .product-hero .product-hero-image-wrapper img {
        width: 100%;
        height: auto;
        max-height: 220px;
        object-fit: cover;
    }

    /* Benefits */
    .log-monitoring-page .product-benefits {
        padding: 48px var(--page-gutter) 32px;
    }
    .log-monitoring-page .product-benefits-section-title {
        /* !important 覆盖 @media(max-width:1279px) iPad块泄漏到375px的规则：
           iPad块 font-size:36px/padding-top:80px/line-height:44px/margin-bottom:40px 均有，
           H5块相同选择器(0,2,0)、相同、但排在更后，所以后者胜出 */
        font-size: 24px;     /* Figma H5规范：24px；覆盖iPad块36px */
        line-height: 34px;   /* 覆盖iPad块44px */
        margin-bottom: 20px; /* 覆盖iPad块40px */
        padding-top: 0;      /* 覆盖iPad块80px：首屏间距已由.product-benefits 48px顶部内边距提供 */
    }
    .log-monitoring-page .product-benefits .product-benefit-item + .product-benefit-item {
        margin-top: 40px;
    }
    .log-monitoring-page .product-benefits .product-benefit-item,
    .log-monitoring-page .product-benefits .product-benefit-item.reverse {
        padding: 0;
        gap: 16px;
    }
    .log-monitoring-page .product-benefits .product-benefit-item:last-child {
        padding-bottom: 0;
    }
    .log-monitoring-page .product-benefits .product-benefit-title {
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    /* Features */
    .log-monitoring-page .product-features {
        padding: 40px var(--page-gutter) 32px;
    }
    .log-monitoring-page .product-features .product-features-title {
        font-size: 22px;
        line-height: 30px;
    }

    /* CTA */
    .log-monitoring-page .product-cta {
        padding: 64px var(--page-gutter);
    }
    .log-monitoring-page .product-cta .product-cta-content {
        min-height: 0;
        padding: 44px 20px;
    }
    .log-monitoring-page .product-cta .product-cta-title {
        font-size: 28px;
        line-height: 34px;
        padding: 0;
    }
    .log-monitoring-page .product-cta .product-cta-buttons {
        width: 100%;
        height: auto;
        margin-top: 28px;
        flex-direction: column;
        gap: 12px;
    }
    .log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary,
    .log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary {
        width: 100%;
        max-width: 280px;
        height: 54px;
        min-height: 54px;
        font-size: var(--font-body);
    }
}

/* Wave A H5 final override: align with ai-inspection-robot reference. */
@media (max-width: 767px) {
    body.log-monitoring-page .product-hero .product-hero-title,
    body.log-monitoring-page .product-benefits-section-title,
    body.log-monitoring-page .product-features .product-features-title,
    body.log-monitoring-page .product-cta .product-cta-title {
        font-size: 24px;
        line-height: 32px;
    }

    body.log-monitoring-page .product-benefits .product-benefit-title {
        font-size: 18px;
        line-height: 26px;
    }

    body.log-monitoring-page .product-features .product-feature-title {
        font-size: 16px;
        line-height: 24px;
    }

    body.log-monitoring-page .product-hero .product-hero-description,
    body.log-monitoring-page .product-benefits .benefit-point-title,
    body.log-monitoring-page .product-benefits .benefit-point-text,
    body.log-monitoring-page .product-features .product-features-description,
    body.log-monitoring-page .product-features .product-feature-description {
        font-size: 14px;
        line-height: 22px;
    }

    body.log-monitoring-page .product-benefits {
        padding: 64px var(--page-gutter) 0;
    }

    body.log-monitoring-page .product-benefits-section-title {
        margin: 0 0 var(--space-block);
        padding-top: 0;
    }

    body.log-monitoring-page .product-benefits .product-benefit-item,
    body.log-monitoring-page .product-benefits .product-benefit-item.reverse {
        padding: 0;
        gap: var(--space-element);
    }

    body.log-monitoring-page .product-benefits .product-benefit-item + .product-benefit-item {
        margin-top: var(--space-block);
    }

    body.log-monitoring-page .product-benefits .product-benefit-item:last-child {
        padding-bottom: 0;
    }

    body.log-monitoring-page .product-benefits .product-benefit-title {
        margin-bottom: var(--space-tight);
    }

    body.log-monitoring-page .product-benefits .benefit-point {
        margin-bottom: var(--space-tight);
    }

    body.log-monitoring-page .product-features {
        margin-top: 64px;
        padding: var(--space-block) var(--page-gutter) var(--space-block);
    }

    body.log-monitoring-page .product-features .product-features-header {
        margin-bottom: var(--space-block);
    }

    body.log-monitoring-page .product-features .product-features-title {
        margin: 0 0 var(--space-tight);
    }

    body.log-monitoring-page .product-features .product-features-grid,
    body.log-monitoring-page .product-features .product-features-grid.cols-4-max {
        gap: var(--space-element);
    }

    body.log-monitoring-page .product-cta {
        margin-top: 64px;
        padding: 0 var(--page-gutter) 64px;
    }

    body.log-monitoring-page .product-cta .product-cta-content {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        height: auto;
        padding: var(--space-block) var(--page-gutter);
        transform: none;
    }

    body.log-monitoring-page .product-cta .product-cta-title {
        padding: 0;
    }

    body.log-monitoring-page .product-cta .product-cta-buttons {
        width: 100%;
        height: auto;
        margin-top: var(--space-block);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-tight);
        align-items: center;
        justify-content: center;
    }

    body.log-monitoring-page .product-cta .product-cta-buttons .product-btn-primary,
    body.log-monitoring-page .product-cta .product-cta-buttons .product-btn-secondary {
        flex: 1 1 0;
        width: calc((100% - var(--space-tight)) / 2);
        max-width: none;
        min-width: 0;
        height: 54px;
        min-height: 54px;
        padding: 0 var(--space-tight);
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    body.log-monitoring-page .product-benefits .product-benefit-description,
    body.log-monitoring-page .product-benefits .benefit-point {
        font-size: 14px;
        line-height: 22px;
    }
}