/* ==================================================================
   css/mobile.css — 123pk.cc 手机端适配层
   ------------------------------------------------------------------
   加载顺序：css/home.css → css/style.css → css/mobile.css（本文件最后）
   职责：
     ① Masthead 移动端重构（logo + 汉堡按钮一行固定）
     ② 抽屉式侧滑导航（原站 ≤1200px 时 .navbar 被 display:none，无导航）
     ③ 首屏/色块/卡片/文章/子页两栏 等尺寸收窄
     ④ iOS 输入框 16px 防自动缩放 + 触控区 ≥46px
     ⑤ 安全区适配 env(safe-area-inset-*)
   ================================================================== */

/* ---------------------------------------------------------------
   0) 基础：防 iOS 缩放 / 触控高度 / 安全区
   --------------------------------------------------------------- */
@media (max-width:1200px){
    input, select, textarea, button { font-size:16px; }
    .masthead { box-sizing:content-box; height:56px; padding-top:env(safe-area-inset-top); }
    .masthead-inner { height:56px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; }
    .masthead-logo { position:static; left:auto; top:auto; height:26px; }
    .masthead-service { display:none !important; }
    /* 顶部固定条高 56px（+刘海安全区），主内容顶开同等距离 */
    .mastbody { padding-top:calc(56px + env(safe-area-inset-top)) !important; }
    .navbar { display:none !important; }
    .mnav-btn { display:inline-flex; }
}

/* ---------------------------------------------------------------
   1) 汉堡按钮
   --------------------------------------------------------------- */
.mnav-btn{
    display:none;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin:0 -10px 0 auto;
    padding:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#212121;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mnav-btn:active{ background:#f1f3f6; }
.mnav-btn > span{ position:relative; display:block; width:22px; height:2px; border-radius:2px; background:currentColor; }
.mnav-btn > span::before,
.mnav-btn > span::after{ content:""; position:absolute; left:0; width:22px; height:2px; border-radius:2px; background:currentColor; }
.mnav-btn > span::before{ top:-7px; }
.mnav-btn > span::after{ top:7px; }

/* ---------------------------------------------------------------
   2) 抽屉导航 + 遮罩
   --------------------------------------------------------------- */
.mnav-mask{
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
    -webkit-tap-highlight-color:transparent;
}
.mnav-mask.is-open{ opacity:1; visibility:visible; }

.mnav{
    position:fixed;
    top:0; right:0; bottom:0;
    z-index:91;
    width:82%;
    max-width:360px;
    display:flex;
    flex-direction:column;
    background:#fff;
    box-shadow:-8px 0 28px rgba(0,0,0,.14);
    transform:translate3d(100%,0,0);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    overscroll-behavior:contain;
}
.mnav.is-open{ transform:translate3d(0,0,0); }
body.mnav-lock{ overflow:hidden; }

@media (min-width:1201px){
    .mnav, .mnav-mask{ display:none !important; }
}

.mnav-hd{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:content-box;
    height:56px;
    padding:env(safe-area-inset-top) 8px 0 18px;
    border-bottom:1px solid #eee;
}
.mnav-title{ font-size:17px; font-weight:800; letter-spacing:-.2px; color:#0078d0; }
.mnav-title small{ margin-left:5px; font-size:12px; font-weight:600; color:#212121; opacity:.72; }
.mnav-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#212121;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.mnav-close:active{ background:#f1f3f6; }

.mnav-body{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.mnav-list{ list-style:none; margin:0; padding:0; }
.mnav-item{ border-bottom:1px solid #f1f1f1; }
.mnav-item > .mnav-a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:52px;
    padding:0 18px;
    font-size:16px;
    color:#212121;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.mnav-item > .mnav-a::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
    background:transparent;
}
.mnav-item > .mnav-a:active{ background:#f7f7f7; }
.mnav-item.active > .mnav-a{ color:#0078d0; font-weight:700; background:#f4faff; }
.mnav-item.active > .mnav-a::before{ background:#0078d0; }

.mnav-sub{ list-style:none; margin:0; padding:0 0 8px; background:#fafafa; }
.mnav-sub .mnav-a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 18px 0 30px;
    font-size:15px;
    color:#555;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.mnav-sub .mnav-a::before{ content:"—"; margin-right:8px; color:#bbb; }
.mnav-sub .mnav-a:active{ background:#f0f0f0; }

/* ---------------------------------------------------------------
   3) 通栏 / 页脚 移动端收窄
   --------------------------------------------------------------- */
@media (max-width:1200px){
    .fluid{ padding-left:18px; padding-right:18px; }
    .mastfoot{ padding-top:1rem; padding-bottom:env(safe-area-inset-bottom); }
    .mastfoot-inner{
        flex-wrap:wrap;
        gap:.75rem;
        height:auto;
        min-height:56px;
        padding:12px 18px;
    }
    .mastfoot-declare{ margin-top:0; }
    .mastfoot-social{ margin-left:0; }
}

/* ---------------------------------------------------------------
   4) 首页：ribbon2 色块 / 新闻卡片 / WIN 横幅
   --------------------------------------------------------------- */
@media (max-width:768px){
    .ribbon2{ width:58%; height:34vw; max-height:200px; top:6px; }
    /* .newslist 带 .mx-lg-n4(-2rem) 而 .fluid 只有 18px 内边距 → 手机上会溢出被裁 */
    .newslist{ margin-left:-15px !important; margin-right:-15px !important; }
    .newsitem-pic{ border-radius:1.25rem; }
    .newsitem-pic .newsitem-cover{ font-size:3.25rem; }
    .newslist-col{ margin-bottom:2rem; }
    .win-inner-simple{ padding:1.25rem .75rem; gap:.75rem; }
    .win-text{ font-size:clamp(1.5rem,9vw,2.5rem); letter-spacing:.5px; }
}
@media (max-width:575px){
    .ribbon2{ width:62%; height:38vw; }
    .btn-backtop{ right:14px; bottom:calc(18px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------
   5) 子页 Hero（.sub-hero / 新闻页裸 section）+ 两栏 + 模板卡片
      注：这些元素的 padding/网格全部写在 HTML 内联样式里，
          必须用 !important 才能覆盖。
   --------------------------------------------------------------- */
@media (max-width:900px){
    .mastbody > section{ padding:26px 0 32px !important; }
    .mastbody > section > div{ padding:0 16px !important; }
    .sub-hero{ margin-top:0 !important; }
    .sub-hero .sub-title{ font-size:1.55rem !important; }
    .sub-hero .sub-sub{ font-size:.95rem !important; }
    .sub-hero .inline-lang{ display:inline-flex !important; margin-top:12px; }
    .crumb{ flex-wrap:wrap; font-size:.85rem !important; }
}

@media (max-width:820px){
    /* 内容容器左右留白收窄 */
    .wrap-sub{ margin-top:18px !important; padding:0 16px !important; }

    /* 侧栏 250px + 主区 → 单列 */
    .wrap-sub > div[style*="grid-template-columns"]{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }
    .wrap-sub aside{ padding:14px !important; }

    /* 国家筛选 → 横向换行胶囊 */
    #countryList{ display:flex; flex-wrap:wrap; gap:8px; }
    #countryList > li{ margin:0 !important; }
    #countryList > li > a{
        padding:8px 12px !important;
        border:1px solid #e5e7eb;
        border-radius:999px !important;
        font-size:13px !important;
        white-space:nowrap;
    }

    /* 模板卡片 左图右文 → 上图下文 单列 */
    #tplList > li{
        grid-template-columns:1fr !important;
        gap:12px !important;
        padding:14px !important;
    }
    #tplList > li > figure{ aspect-ratio:16/9 !important; }
    #tplList > li strong{ min-width:0 !important; }
    #tplList > li .btn{ min-height:44px; }

    /* 搜索表单：input / button 上下排布，触控区 ≥46px */
    .wrap-sub form{ grid-template-columns:1fr !important; }
    .wrap-sub form input,
    .wrap-sub form button{ height:46px !important; }
}

/* ---------------------------------------------------------------
   6) 新闻文章页
   --------------------------------------------------------------- */
@media (max-width:820px){
    .mastbody > div[style*="max-width:860px"]{ margin:20px auto !important; padding:0 14px !important; }
    .mastbody article{ padding:20px 16px !important; border-radius:10px !important; font-size:15px; }
    .mastbody article h1, .mastbody article h2{ font-size:1.35rem !important; line-height:1.45; }
}

/* ---------------------------------------------------------------
   7) 模板详情页 passport-photolook/template-page.html
      （该页只引 style.css，.container 原本无任何内边距）
   --------------------------------------------------------------- */
@media (max-width:1200px){
    .container{ max-width:900px; margin:0 auto; padding:16px 16px 40px; }
    .template-title{ font-size:20px; }
    .download-btn{ display:block; width:100%; min-height:46px; text-align:center; }
}
@media (max-width:768px){
    .template-image-container{ margin:18px 0; padding:12px; }
    .spec-list strong{ display:block; min-width:0; margin-bottom:2px; }
    .info-section, .instructions{ padding:16px; }
    .lang-switcher{ float:none; }
}