/* public/assets/test/css/partials/home-banner-v2.css */
/* Home Banner V2/V3 (hmb3) — Full-bleed image + bottom overlay slot (PC) + centered slot (Mobile) */

#home_banner_v2.hmb3,
#home_banner_v3.hmb3{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    /* ===== Desktop defaults ===== */
    --hmb3-h: clamp(420px, 36vw, 640px);
    --hmb3-nav: 46px;

    /* slot layout */
    --hmb3-slot-scale: 1;
    --hmb3-slot-max: 980px;

    /* vertical rectangle logo */
    --hmb3-logo-w: 122px;
    --hmb3-logo-h: 183px;
    --hmb3-logo-radius: 24px;

    /* typography */
    --hmb3-title-size: 48px;
    --hmb3-title-lh: 1.05;
    --hmb3-sub-size: 14px;

    /* buttons */
    --hmb3-btn-h: 46px;
    --hmb3-btn-px: 22px;
    --hmb3-btn-fs: 14px;

    background: #0b1220; /* fallback */
}

/* PC：把 banner 往上拉到 header 下方（抵消 #page_main padding-top） */
@media (min-width: 769px){
    #home_banner_v2.hmb3,
    #home_banner_v3.hmb3{
        margin-top: calc(-1 * var(--hv2-h, 100px));
    }
}

/* swiper container */
#home_banner_v2.hmb3 .hmb3-swiper,
#home_banner_v3.hmb3 .hmb3-swiper{
    width: 100%;
    height: var(--hmb3-h);
}

#home_banner_v2.hmb3 .hmb3-slide,
#home_banner_v3.hmb3 .hmb3-slide{
    width: 100%;
    height: 100%;
    position: relative;
}

#home_banner_v2.hmb3 .hmb3-link,
#home_banner_v3.hmb3 .hmb3-link{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* hero image */
#home_banner_v2.hmb3 .hmb3-img,
#home_banner_v3.hmb3 .hmb3-img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    /* PC 人物偏右上 */
    object-position: 60% 30%;
}

/* bottom fade to page bg (PC) */
#home_banner_v2.hmb3::after,
#home_banner_v3.hmb3::after{
    content:"";
    position: absolute;
    left:0; right:0; bottom:0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(243,244,246,0) 0%,
        rgba(243,244,246,.62) 55%,
        rgba(243,244,246,1) 100%
    );
    z-index: 2;
}

/* overlay layer */
#home_banner_v2.hmb3 .hmb3-overlay,
#home_banner_v3.hmb3 .hmb3-overlay{
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* ===== PC: inner aligns content to bottom-left ===== */
#home_banner_v2.hmb3 .hmb3-inner,
#home_banner_v3.hmb3 .hmb3-inner{
    height: 100%;
    width: min(1440px, calc(100% - 80px));
    margin-inline: auto;

    display: flex;
    align-items: flex-end;

    padding-bottom: 52px;
}

/* slot container */
#home_banner_v2.hmb3 .hmb3-slot,
#home_banner_v3.hmb3 .hmb3-slot{
    pointer-events: auto;
    max-width: var(--hmb3-slot-max);

    transform: scale(var(--hmb3-slot-scale));
    transform-origin: left bottom;
}

/* ===== SLOT CONTENT (no card) ===== */
#home_banner_v2.hmb3 .hmb3-ph,
#home_banner_v3.hmb3 .hmb3-ph{
    display: flex;
    align-items: flex-end;
    gap: 26px;

    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
}

/* left logo (vertical rectangle) */
#home_banner_v2.hmb3 .hmb3-ph-logo,
#home_banner_v3.hmb3 .hmb3-ph-logo{
    width: var(--hmb3-logo-w);
    height: var(--hmb3-logo-h);
    aspect-ratio: 109.47 / 163.95;

    border-radius: var(--hmb3-logo-radius);
    overflow: hidden;
    flex: 0 0 auto;

    background-color: #d1d5db;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;

    box-shadow: 0 18px 40px rgba(15,23,42,.14);

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: .08em;
    color: #0b1220;
}

/* if logo contains img */
#home_banner_v2.hmb3 .hmb3-ph-logo img,
#home_banner_v3.hmb3 .hmb3-ph-logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* right body */
#home_banner_v2.hmb3 .hmb3-ph-body,
#home_banner_v3.hmb3 .hmb3-ph-body{
    min-width: 0;
    padding-bottom: 4px;
}

/* title */
#home_banner_v2.hmb3 .hmb3-ph-title,
#home_banner_v3.hmb3 .hmb3-ph-title{
    font-size: var(--hmb3-title-size);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: var(--hmb3-title-lh);
    color: #111827;
    margin: 0 0 10px 0;
}

/* ticker row */
#home_banner_v2.hmb3 .hmb3-ticker,
#home_banner_v3.hmb3 .hmb3-ticker{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px 0;
    font-size: var(--hmb3-sub-size);
    color: rgba(17,24,39,.62);
}

/* avatars */
#home_banner_v2.hmb3 .hmb3-tav,
#home_banner_v3.hmb3 .hmb3-tav{
    display: inline-flex;
    align-items: center;
}

#home_banner_v2.hmb3 .hmb3-av,
#home_banner_v3.hmb3 .hmb3-av{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-block;
    border: 2px solid rgba(255,255,255,.95);
    box-shadow: 0 8px 16px rgba(15,23,42,.12);
}
#home_banner_v2.hmb3 .hmb3-av + .hmb3-av,
#home_banner_v3.hmb3 .hmb3-av + .hmb3-av{
    margin-left: -7px;
}

/* ticker text */
#home_banner_v2.hmb3 .hmb3-tt,
#home_banner_v3.hmb3 .hmb3-tt{
    min-width: 0;
    transition: opacity 160ms ease;
}

#home_banner_v2.hmb3 .hmb3-user,
#home_banner_v3.hmb3 .hmb3-user{
    font-size: var(--hmb3-sub-size);
    font-weight: 800;
    color: rgba(17,24,39,.62);
    line-height: 1.15;
}

#home_banner_v2.hmb3 .hmb3-msg,
#home_banner_v3.hmb3 .hmb3-msg{
    font-size: var(--hmb3-sub-size);
    color: rgba(17,24,39,.58);
    line-height: 1.15;
}

/* actions */
#home_banner_v2.hmb3 .hmb3-ph-actions,
#home_banner_v3.hmb3 .hmb3-ph-actions{
    display: flex;
    align-items: center;
    gap: 12px;
}

#home_banner_v2.hmb3 .hmb3-btn,
#home_banner_v3.hmb3 .hmb3-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: var(--hmb3-btn-h);
    padding: 0 var(--hmb3-btn-px);
    border-radius: 999px;
    text-decoration: none;

    background: #fbbf24;
    color: #111827;
    font-weight: 900;
    font-size: var(--hmb3-btn-fs);

    box-shadow: 0 14px 26px rgba(15,23,42,.12);
}
#home_banner_v2.hmb3 .hmb3-btn:active,
#home_banner_v3.hmb3 .hmb3-btn:active{
    transform: scale(.98);
}

#home_banner_v2.hmb3 .hmb3-badge,
#home_banner_v3.hmb3 .hmb3-badge{
    display: inline-flex;
    align-items: center;

    height: var(--hmb3-btn-h);
    padding: 0 var(--hmb3-btn-px);
    border-radius: 999px;

    background: rgba(255,255,255,.92);
    border: 0;
    color: #ef4444;
    font-weight: 900;
    font-size: var(--hmb3-btn-fs);

    box-shadow: 0 14px 26px rgba(15,23,42,.10);
}

/* controls */
#home_banner_v2.hmb3 .hmb3-controls,
#home_banner_v3.hmb3 .hmb3-controls{
    position: absolute;
    right: 56px;
    bottom: 56px;
    display: flex;
    gap: 12px;
    z-index: 4;
    pointer-events: auto;
}

#home_banner_v2.hmb3 .hmb3-nav,
#home_banner_v3.hmb3 .hmb3-nav{
    width: var(--hmb3-nav);
    height: var(--hmb3-nav);
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
    box-shadow: 0 16px 34px rgba(15,23,42,.18);
}

#home_banner_v2.hmb3 .hmb3-prev,
#home_banner_v3.hmb3 .hmb3-prev{
    background: rgba(255,255,255,.92);
    color: #111827;
}

#home_banner_v2.hmb3 .hmb3-next,
#home_banner_v3.hmb3 .hmb3-next{
    background: rgba(17,24,39,.92);
    color: #fff;
}

#home_banner_v2.hmb3 .hmb3-nav:hover,
#home_banner_v3.hmb3 .hmb3-nav:hover{
    transform: translateY(-1px);
}
#home_banner_v2.hmb3 .hmb3-nav:active,
#home_banner_v3.hmb3 .hmb3-nav:active{
    transform: translateY(0) scale(.98);
}

#home_banner_v2.hmb3 .hmb3-ico,
#home_banner_v3.hmb3 .hmb3-ico{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2px;
}

/* =========================================================
   MOBILE FIX (你图里那种“边框/上下边距”问题)
   1) 强制 full-bleed：突破外层容器左右留白
   2) 减轻底部白渐变，避免“下半截像空白”
   3) 轻微 scale 盖住 subpixel 细线（看起来像有边框）
   4) slot 居中/上下间距更像你截图
========================================================= */
@media (max-width: 768px){

    /* full-bleed breakout（外层如果有 container/padding，这一招必杀） */
    #home_banner_v2.hmb3,
    #home_banner_v3.hmb3{
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        /* 手机别圆角（否则你会看到“边框感”） */
        border-radius: 0;
    }

    /* 手机高度：别太高（你截图下半段空太多） */
    #home_banner_v2.hmb3,
    #home_banner_v3.hmb3{
        --hmb3-h: clamp(460px, 118vw, 620px);

        --hmb3-slot-scale: 1;
        --hmb3-slot-max: 92vw;

        --hmb3-logo-w: 90px;
        --hmb3-logo-h: 135px;
        --hmb3-logo-radius: 18px;

        --hmb3-title-size: 34px;
        --hmb3-sub-size: 14px;

        --hmb3-btn-h: 56px;
        --hmb3-btn-px: 22px;
        --hmb3-btn-fs: 15px;
    }

    /* 图片：移动端更居中 + scale 避免左右出现“发丝边” */
    #home_banner_v2.hmb3 .hmb3-img,
    #home_banner_v3.hmb3 .hmb3-img{
        object-position: 52% 18%;
        transform: scale(1.03);
        transform-origin: center;
    }

    /* 底部白渐变：缩短 + 末端不要完全白死（保留一点画面） */
    #home_banner_v2.hmb3::after,
    #home_banner_v3.hmb3::after{
        height: 34%;
        background: linear-gradient(
            to bottom,
            rgba(243,244,246,0) 0%,
            rgba(243,244,246,.55) 58%,
            rgba(243,244,246,.92) 100%
        );
    }

    /* 文字区域：居中 + 上下边距更舒服（对齐你截图） */
    #home_banner_v2.hmb3 .hmb3-inner,
    #home_banner_v3.hmb3 .hmb3-inner{
        width: calc(100% - 22px);
        padding-bottom: 26px;

        /* 让内容不要“卡太底”，更像你截图那种下方留白 */
        align-items: flex-end;
    }

    #home_banner_v2.hmb3 .hmb3-slot,
    #home_banner_v3.hmb3 .hmb3-slot{
        margin: 0 auto;
        transform-origin: center bottom;
    }

    /* 手机：slot 内容更像海报——居中排版 */
    #home_banner_v2.hmb3 .hmb3-ph,
    #home_banner_v3.hmb3 .hmb3-ph{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    #home_banner_v2.hmb3 .hmb3-ph-body,
    #home_banner_v3.hmb3 .hmb3-ph-body{
        padding-bottom: 0;
    }

    #home_banner_v2.hmb3 .hmb3-ticker,
    #home_banner_v3.hmb3 .hmb3-ticker{
        justify-content: center;
        margin-bottom: 14px;
    }

    #home_banner_v2.hmb3 .hmb3-ph-actions,
    #home_banner_v3.hmb3 .hmb3-ph-actions{
        justify-content: center;
        width: 100%;
        gap: 14px;
    }

    /* 控制按钮：贴边一点 */
    #home_banner_v2.hmb3 .hmb3-controls,
    #home_banner_v3.hmb3 .hmb3-controls{
        right: 12px;
        bottom: 12px;
    }
}
/* =========================================================
   FINAL TUNE (MOBILE): banner less "giant", inner tighter
   - also hides arrows & big icon to avoid crowding
========================================================= */
@media (max-width: 768px){

    /* 1) 全宽去“边框感” + 高度收回到正常 */
    #home_banner_v2.hmb3,
    #home_banner_v3.hmb3,
    .hmb3{
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        --hmb3-h: clamp(360px, 118vw, 520px); /* ✅ 比你现在小一圈 */
        --hmb3-title-size: clamp(22px, 7.2vw, 32px);

        --hmb3-btn-h: 44px;
        --hmb3-btn-px: 16px;
        --hmb3-btn-fs: 14px;
    }

    /* 白雾别那么长（你现在看起来“下面空太多”就来自这里） */
    .hmb3::after{ height: 46% !important; }

    /* 2) inner：左右留白更合理 + 底部留白减少 */
    .hmb3 .hmb3-inner{
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;

        /* ✅ 原来你给太大了，这里收紧 */
        padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--fm-mb-tabbar-h, 0px)) !important;

        justify-content: center !important;
    }

    /* 3) slot：别缩放（缩放会让布局显得“挤+怪”） */
    .hmb3 .hmb3-slot{
        transform: none !important;
        width: 100% !important;
        max-width: 520px !important;
    }

    /* 4) 内容居中纵排 */
    .hmb3 .hmb3-ph{
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    /* ✅ 你现在“挤”的很大原因：大 icon + 左右箭头压住按钮 */
    .hmb3 .hmb3-ph-logo{ display: none !important; }
    .hmb3 .hmb3-controls{ display: none !important; }

    .hmb3 .hmb3-ticker{
        justify-content: center !important;
        margin-bottom: 16px !important;
    }

    /* 5) 按钮等宽并排 */
    .hmb3 .hmb3-ph-actions{
        width: min(420px, 100%) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .hmb3 .hmb3-btn,
    .hmb3 .hmb3-badge{ width: 100% !important; }
}

/* 超小屏：按钮一列 */
@media (max-width: 360px){
    .hmb3 .hmb3-ph-actions{ grid-template-columns: 1fr !important; }
}
/* ===============================
   FIX: hmb3 banner slider bleeding / left shift
   =============================== */
@media (max-width: 768px){

    /* 1) 确保外层不超宽（避免 100vw + safe-area 导致偏移） */
    .hmb3,
    .hmb3-inner{
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2) 轮播“视窗”必须裁切（关键：不然切换时会露出下一张） */
    /* 如果你没有 hmb3-viewport，就把这一条改成作用在 .hmb3-inner 上 */
    .hmb3-viewport,
    .hmb3-inner{
        overflow: hidden !important;
        position: relative;
        /* iOS 某些情况下 overflow:hidden + 圆角会漏边，用 clip 兜底 */
        clip-path: inset(0);
    }

    /* 3) track 不允许有 gap / padding / margin（否则 slide 不是严格 100%） */
    .hmb3-track{
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;

        will-change: transform;
        transform: translate3d(0,0,0);
    }

    /* 4) 每一张必须严格占满视窗宽 */
    .hmb3-slide,
    .hmb3-item{
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    /* 5) 图片/背景居中 cover，避免“左偏” */
    .hmb3-slide img,
    .hmb3-item img{
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* 如果你是用 background-image 方式： */
    .hmb3-slide,
    .hmb3-item{
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
@media (max-width: 768px){
    /* 只在 hmb3 内生效，避免影响其他模块 */
    .hmb3 .hmb3-ph-body{
        transform: translateY(70px) !important; /* ✅ 下移 12px：你想多就改 16/20 */
    }
}




/* =========================================
   HMB3 polish:
   - actions 居中
   - 按钮/徽章文字居中
   - ticker 文案过渡更柔和
   ========================================= */
#home_banner_v2.hmb3 .hmb3-ph-actions,
#home_banner_v3.hmb3 .hmb3-ph-actions{
    justify-content: center;
    flex-wrap: wrap;
}

#home_banner_v2.hmb3 .hmb3-btn,
#home_banner_v2.hmb3 .hmb3-badge,
#home_banner_v3.hmb3 .hmb3-btn,
#home_banner_v3.hmb3 .hmb3-badge{
    justify-content: center;
    text-align: center;
}

#home_banner_v2.hmb3 .hmb3-ticker,
#home_banner_v3.hmb3 .hmb3-ticker{
    justify-content: center;
}

#home_banner_v2.hmb3 .hmb3-txt,
#home_banner_v3.hmb3 .hmb3-txt{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;
    line-height: 1.35;
    text-align: center;
    color: rgba(17,24,39,.66);
    letter-spacing: .01em;
    padding: 0 2px;

    transition:
        opacity .26s ease,
        transform .26s cubic-bezier(.22,.61,.36,1),
        filter .26s ease;
    will-change: opacity, transform, filter;
}

#home_banner_v2.hmb3 .hmb3-txt.is-switching,
#home_banner_v3.hmb3 .hmb3-txt.is-switching{
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
}




/* =========================
   HMB3 ticker icon - flame (no circle bg)
   ========================= */
#home_banner_v2.hmb3 .hmb3-tav,
#home_banner_v3.hmb3 .hmb3-tav{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: auto;
    height: auto;
    margin-right: 2px;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#home_banner_v2.hmb3 .hmb3-tav-ico,
#home_banner_v3.hmb3 .hmb3-tav-ico{
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;

    filter:
        drop-shadow(0 0 6px rgba(245,158,11,.22))
        drop-shadow(0 2px 6px rgba(239,68,68,.12));
}

#home_banner_v2.hmb3 .hmb3-tav-ico.is-flame,
#home_banner_v3.hmb3 .hmb3-tav-ico.is-flame{
    transform-origin: 50% 78%;
    animation: hmb3FlamePulse 1.9s ease-in-out infinite;
}

@keyframes hmb3FlamePulse{
    0%,100%{
        transform: translateY(0) scale(1);
        opacity: .96;
    }
    50%{
        transform: translateY(-0.6px) scale(1.05);
        opacity: 1;
    }
}

/* =========================
   HMB3 flame icon tune
   - bigger icon
   - closer to ticker text
   ========================= */
#home_banner_v2.hmb3 .hmb3-ticker,
#home_banner_v3.hmb3 .hmb3-ticker{
    gap: 6px; /* 原来 10px，收紧图标和文字距离 */
}

#home_banner_v2.hmb3 .hmb3-tav,
#home_banner_v3.hmb3 .hmb3-tav{
    margin-right: -7px;
    transform: translateX(2px);
    margin-bottom: 3px;
}

#home_banner_v2.hmb3 .hmb3-tav-ico,
#home_banner_v3.hmb3 .hmb3-tav-ico{
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}




/* =========================================================
   HMB3 Mobile - Swiper real node fix
   追加到 home-banner-v2.css 最底部
   目标：
   - 修复手机端首屏右侧露白
   - 命中真实 swiper 结构
   - 避免 100vw 子像素导致的发丝空白
   ========================================================= */
@media (max-width: 768px){

    /* 1) 外层仍然裁切 */
    #home_banner_v2.hmb3,
    #home_banner_v3.hmb3{
        overflow: hidden !important;
    }

    /* 2) 命中真实 swiper 容器 */
    #home_banner_v2.hmb3 .hmb3-swiper,
    #home_banner_v3.hmb3 .hmb3-swiper{
        width: 100% !important;
        height: var(--hmb3-h) !important;
        overflow: hidden !important;
        position: relative;
    }

    /* 3) 命中真实 swiper track（你之前写错成 hmb3-track 了） */
    #home_banner_v2.hmb3 .swiper-wrapper,
    #home_banner_v3.hmb3 .swiper-wrapper{
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        will-change: transform;
        transform: translate3d(0,0,0);
    }

    /* 4) 每张 slide 严格占满 */
    #home_banner_v2.hmb3 .swiper-slide,
    #home_banner_v3.hmb3 .swiper-slide{
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
        overflow: hidden !important;
    }

    #home_banner_v2.hmb3 .hmb3-link,
    #home_banner_v3.hmb3 .hmb3-link{
        display: block;
        width: 100% !important;
        height: 100% !important;
    }

    /* 5) 图片轻微放大 1px 级兜底，盖掉右侧发丝缝 */
    #home_banner_v2.hmb3 .hmb3-img,
    #home_banner_v3.hmb3 .hmb3-img{
        display: block !important;
        width: calc(100% + 2px) !important;
        min-width: calc(100% + 2px) !important;
        height: 100% !important;
        margin-left: -1px !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}



@media (max-width: 768px){
    #home_banner_v2.hmb3,
    #home_banner_v3.hmb3{
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}