/* ==========================================================================
   乐邦官网 — 导航 mega menu（设计稿 C）
   原则：只覆盖导航相关样式，cuivis.css / cuiviscui.css 不动；主色沿用 #fd7e14。
   ========================================================================== */

/* ---- 顶级项 ---- */
.navbar-nav .nav-item.active > .nav-link {
    color: #fd7e14;
    font-weight: 500;
}

.navbar-brand {
    flex-shrink: 0;
}

.navbar-nav > .nav-item > .nav-link {
    white-space: nowrap;
}

html:not([lang^="zh"]) .navbar-nav > .nav-item > .nav-link {
    font-size: .95rem;
    letter-spacing: -.01em;
}

/* ==========================================================================
   桌面：浮层面板
   ========================================================================== */
@media (min-width: 992px) {
    /* 导航项撑满 header 高度（h5rem=80px）：鼠标从文字往下移时不会在 40px 处就丢掉 hover */
    .navbar-nav > .nav-item {
        height: 5rem;
    }

    .navbar-nav > .nav-item > .nav-link {
        height: 5rem;
        display: flex;
        align-items: center;
    }

    .navbar-nav > .nav-item.dropdown.lobon-nav-compact {
        position: relative;
    }

    .lobon-dd {
        display: block;
        position: fixed;
        top: 90px;                      /* header 80px + 10px 间距 */
        left: 50%;
        z-index: 1030;
        margin: 0;
        padding: 0;
        min-width: 0;
        max-width: none;
        background: #fff;
        border: 0;
        border-radius: 26px;
        box-shadow: 0 32px 80px rgba(17, 24, 39, .16), 0 4px 14px rgba(17, 24, 39, .05);
        transform: translate(-50%, 8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }

    /* Bootstrap 的 .navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}
       优先级是 3 个类；这里用 4 个类盖回 fixed（大面板以视口居中） */
    .navbar .navbar-nav .nav-item > .lobon-dd {
        position: fixed;
    }

    /* 紧凑面板贴着导航项：用 absolute 抵消上面的 fixed */
    .navbar .navbar-nav .nav-item > .lobon-dd--compact {
        position: absolute;
        top: calc(100% + 10px);
    }

    /* 面板与导航之间的 10px 悬停桥，避免鼠标下移时闪断 */
    .lobon-dd::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }

    .navbar-nav > .nav-item:hover > .lobon-dd,
    .navbar-nav > .nav-item.nav-open > .lobon-dd {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .lobon-dd--mega {
        width: min(1180px, calc(100vw - 40px));
    }

    /* 技术能力：两栏，窄一点 */
    .lobon-dd--tech {
        width: min(980px, calc(100vw - 40px));
    }

    /* 技术能力 / 加入乐邦：贴着导航项的小面板 */
    .lobon-dd--compact {
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        width: 340px;
        transform: translate(-50%, 8px);
    }

    .navbar-nav > .nav-item:hover > .lobon-dd--compact,
    .navbar-nav > .nav-item.nav-open > .lobon-dd--compact {
        transform: translate(-50%, 0);
    }

    /* 打开时给导航项一个下划线，和面板呼应 */
    .navbar-nav > .nav-item.dropdown > .nav-link {
        position: relative;
    }

    .navbar-nav:not(.lobon-lang) > .nav-item.dropdown:hover > .nav-link::after,
    .navbar-nav:not(.lobon-lang) > .nav-item.dropdown.nav-open > .nav-link::after {
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: #fd7e14;
    }
}

/* ==========================================================================
   三栏色块
   ========================================================================== */
.lobon-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 30px 30px 0;
}

.lobon-cols--two {
    grid-template-columns: repeat(2, 1fr);
}

.lobon-cat {
    border-radius: 18px;
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.lobon-cat--warm { background: #fff4e8; }
.lobon-cat--blue { background: #eef4ff; }
.lobon-cat--gray { background: #f4f5f7; }

.lobon-cat h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .2px;
    color: #1d2129;
}

.lobon-cat-sub {
    margin: 5px 0 0;
    font-size: 13px;
    color: #6b7280;
    letter-spacing: .2px;
}

.lobon-cat-rule {
    height: 1px;
    background: rgba(17, 24, 39, .08);
    margin: 16px 0 6px;
}

.lobon-cat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2b3038;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.lobon-cat-link::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #fd7e14;
    flex: 0 0 auto;
    opacity: .9;
}

.lobon-cat-link::after {
    content: "→";
    margin-left: auto;
    font-size: 14px;
    color: #fd7e14;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}

.lobon-cat-link:hover {
    color: #fd7e14;
    text-decoration: none;
    transform: translateX(2px);
}

.lobon-cat-link:hover::after {
    opacity: 1;
    transform: none;
}

.lobon-cat-foot {
    margin-top: auto;
    padding-top: 18px;
}

.lobon-cat-desc {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.75;
    color: #6b7480;
}

.lobon-cat-media {
    flex: 0 0 92px;
    height: 92px;
    margin: 0 0 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.lobon-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lobon-cat-media.is-contain {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lobon-cat-media.is-contain img {
    width: auto;
    height: 86px;
    object-fit: contain;
}

/* 两张证书并排：各占一半，等比缩放 */
.lobon-cat-media--pair {
    flex: 0 0 110px;
    height: 110px;
    gap: 6px;
    padding: 6px;
    justify-content: space-between;
}

.lobon-cat-media--pair img {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.lobon-cat-media--tall {
    flex: 0 0 150px;
    height: 150px;
}

.lobon-cat-media--mid {
    flex: 0 0 110px;
    height: 110px;
}

.lobon-cat-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fd7e14;
    text-decoration: none;
}

.lobon-cat-more span {
    transition: transform .15s ease;
}

.lobon-cat-more:hover {
    color: #e06d0f;
    text-decoration: none;
}

.lobon-cat-more:hover span {
    transform: translateX(3px);
}

/* ---- 面板底部行动条 ---- */
.lobon-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 34px 18px;
    margin-top: 18px;
    border-top: 1px solid #eceff3;
    font-size: 13px;
    color: #6b7280;
}

.lobon-mega-foot .lobon-all {
    font-weight: 600;
    color: #fd7e14;
    text-decoration: none;
}

.lobon-mega-foot .lobon-tip a {
    color: #1d2129;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(29, 33, 41, .25);
}

/* ==========================================================================
   紧凑面板（技术能力 / 加入乐邦）
   ========================================================================== */
.lobon-compact {
    padding: 12px;
}

.lobon-mi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #2b3038;
    transition: background .15s ease, color .15s ease;
}

.lobon-mi:hover {
    background: #f7f8fa;
    color: #fd7e14;
    text-decoration: none;
}

.lobon-mi-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #eceff3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #fff;
}

.lobon-mi-ico img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.lobon-mi-body {
    flex: 1;
    min-width: 0;
}

.lobon-mi-t {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
}

.lobon-mi-d {
    display: block;
    font-size: 12px;
    color: #98a2b3;
    margin-top: 3px;
}

.lobon-mi-go {
    margin-left: auto;
    color: #fd7e14;
    font-size: 13px;
    opacity: 0;
    transition: opacity .15s ease;
}

.lobon-mi:hover .lobon-mi-go {
    opacity: 1;
}

/* ==========================================================================
   移动端：全部展开成列表（沿用原站折叠导航）
   ========================================================================== */
@media (max-width: 991.98px) {
    .lobon-dd,
    .lobon-dd--mega,
    .lobon-dd--compact {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: .25rem 0 .25rem 1rem;
        background: transparent;
        border: 0;
        border-left: 2px solid rgba(253, 126, 20, .4);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .lobon-dd::before {
        display: none;
    }

    .lobon-cols {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 0;
    }

    .lobon-cat {
        min-height: 0;
        padding: 8px 0;
        border-radius: 0;
        background: transparent !important;
    }

    .lobon-cat h3 {
        font-size: 16px;
    }

    .lobon-cat-sub {
        font-size: 12px;
    }

    .lobon-cat-rule {
        margin: 8px 0 2px;
    }

    .lobon-cat-media,
    .lobon-cat-media.is-contain {
        display: none;
    }

    .lobon-cat-foot {
        padding-top: 6px;
    }

    .lobon-mega-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 4px;
        margin-top: 6px;
        border-top: 0;
    }

    .lobon-compact {
        padding: 0;
    }

    .lobon-mi {
        padding: 10px 0;
    }

    .lobon-mi-ico {
        display: none;
    }
}

/* ---- 语言切换器（保持原样） ---- */
.lobon-lang {
    flex-direction: row;
    align-items: center;
}

.lobon-lang .nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.lobon-lang-dd {
    min-width: 11rem;
    margin-top: 0;          /* Bootstrap 默认 .125rem 会留 2px 缝，鼠标一过就丢 hover */
    z-index: 1030;          /* 要盖住首屏 banner 的层叠上下文 */
    border: 0;
    border-top: 2px solid #fd7e14;
    border-radius: 0 0 .35rem .35rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .12);
}

/* 桌面：悬停/聚焦即展开语言列表；触屏仍靠点击（.nav-open） */
@media (min-width: 992px) {
    .lobon-lang .nav-item:hover > .lobon-lang-dd,
    .lobon-lang .nav-item:focus-within > .lobon-lang-dd {
        display: block;
    }
}

.lobon-lang .nav-item.nav-open > .lobon-lang-dd {
    display: block;
}

.lobon-lang-dd .dropdown-item.active {
    background-color: rgba(253, 126, 20, .1);
    color: #fd7e14;
    font-weight: 500;
}

/* ---- ImageTagHelper 生成的 <picture> 不参与布局，保持与原 <img> 完全一致 ---- */
picture { display: contents; }

/* ImageTagHelper 写入的 width/height 只用于提前占位和算宽高比。
   ⚠️ 不能用它们把高度钉死 —— 否则 width:100% 的图会被拉长。
   :where() 优先级为 0，.bg-image / .img-cover 等显式 height:100% 的规则仍然优先。 */
:where(img[width][height]) { height: auto; }