/* ============================================================
 * 璀错商贸 - 全站响应式层（R 波 / 2026-11-11）
 * ------------------------------------------------------------
 * 断点约定：手机 <768px / 平板 768-1024px / 桌面 >1024px。
 *
 * ⚠ 修改约定（F-5）：凡改动本文件，必须同步递增两处 header 的
 *    responsive.css?v=x.y 缓存参数（includes/header.php 与
 *    manage/templates/header.php），否则 CDN/浏览器缓存不刷新。
 *
 * 技术要点：
 * 1. 纯 CSS 媒体查询，不引入任何框架。
 * 2. 各页大量「内联 style 的 grid 布局」无法被普通媒体查询覆盖
 *    （内联样式优先级高于样式表），统一用属性选择器
 *    [style*="grid-template-columns"] + !important 覆盖——
 *    各页 PHP 一行不改（零 DOM 变更），既有 JS 的 id/class 绑定
 *    （checkout 券下拉 updateCoupon、product.php SKU 选择器
 *    skuRefresh 等）天然保持有效。
 * 3. 本文件同时被前台 includes/header.php 与后台
 *    manage/templates/header.php 引入：后台仅获得「表格横向滚动 +
 *    内联 grid 窄屏单列 + 图片不溢出」的基础防溢出适配（桌面外观不变）。
 * 4. 登录/注册（auth-page）与支付方式卡（payment-methods）在
 *    style.css 中已有完整手机响应式（:5270 / :1227），此处不重复。
 * ============================================================ */

/* ---------- 全局基础（所有宽度生效） ---------- */
/* 图片/富媒体不撑破容器（不设 height:auto，避免破坏 product 详情图
   等容器内 height:100% + object-fit 的既有布局） */
img, video, iframe, svg { max-width: 100%; }

/* 数据表格防横向溢出：内容超宽时表内横向滚动（前台订单/流水与
   后台 manage/*.php 的 .table 基础适配；桌面宽度足够时无滚动条，外观不变） */
.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 平板 768-1024px：侧栏型双栏收窄（桌面外观不变） ---------- */
@media (max-width: 1024px) and (min-width: 769px) {
    /* 内容+侧栏布局：侧栏 340/320/300/280px 统一收窄为 260px（280=articles.php，QA P2-1 补） */
    [style*="grid-template-columns: 1fr 340px"],
    [style*="grid-template-columns: 1fr 320px"],
    [style*="grid-template-columns: 1fr 300px"],
    [style*="grid-template-columns: 1fr 280px"] {
        grid-template-columns: 1fr 260px !important;
    }
    /* 详情页 420px 图 + 内容：图列收窄 */
    [style*="grid-template-columns: 420px 1fr"] {
        grid-template-columns: 300px 1fr !important;
    }
    /* 四/五/六列统计与卡组收为两列（repeat(6)=dashboard.php，QA P2-2 补） */
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"],
    [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"],
    [style*="repeat(6, 1fr)"], [style*="repeat(6,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 页内 <style> 定义的金额选项五列 → 三列 */
    .amount-options { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- 手机 <768px ---------- */
@media (max-width: 768px) {
    /* 1) 全站内联多栏 grid 统一收单列（零 DOM 改动的关键规则）。
       auto-fill/auto-fit 网格本身随宽度自适应（如友情链接、平台卡），保持原样不动：
       !important 覆盖后无法回退到内联值，故通用规则直接排除这类元素 */
    [style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) {
        grid-template-columns: 1fr !important;
    }
    /* 例外：真正的两列小卡组保留双列。
       2026-11-11（QA P2-1 收窄）：由子串 [style*=...] 改为开头匹配 [style^=...]——
       仅命中 shop.php 的 large 布局（style 以 grid-template-columns:repeat(2,1fr) 开头），
       排除 manage/roles.php 等以 display:grid; 开头的双列权限表（手机双列过挤） */
    [style^="grid-template-columns:repeat(2,1fr)"],
    [style^="grid-template-columns:repeat(2, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 2) 页内 <style> 定义的类（源序在本文之后，需 !important 覆盖） */
    /* 用户钱包双卡与交易行四列 → 单卡/双列 */
    .wallet-cards { grid-template-columns: 1fr !important; }
    .transaction-item {
        grid-template-columns: 1fr 1fr !important;
        row-gap: 8px;
    }
    /* 充值金额五选 → 两列大按钮（触摸友好） */
    .amount-options { grid-template-columns: repeat(2, 1fr) !important; }

    /* 3) 商品详情 SKU 选择器按钮组：换行不挤爆、按钮 ≥44px
       （仅加尺寸样式，不改 id/class——skuRefresh 绑定的
        #skuDurGroup/#skuBundleGroup 与 radio name 全部保持原样） */
    #skuDurGroup, #skuBundleGroup {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
    }
    #skuDurGroup label, #skuBundleGroup label {
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: 0.95rem;
        box-sizing: border-box;
    }
    /* 详情页合计行与主图容器自适应 */
    .flex-between { flex-wrap: wrap; row-gap: 6px; }

    /* 4) 结算页（checkout）：表单与支付操作全宽易点
       （双栏由上方通用规则收单列，摘要列自然落到主列之后） */
    .qty-control button { min-width: 44px; min-height: 44px; }
    .qty-control input { min-height: 44px; text-align: center; }
    select.form-control, textarea.form-control { width: 100%; }
    .btn-lg, .btn-block { min-height: 48px; }
    /* 支付方式卡两列排布（style.css:1227 的纵向堆叠改为两列更紧凑，
       后加载覆盖） */
    .payment-methods {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .payment-method { padding: 12px 8px !important; text-align: center; }

    /* 5) 表单控件与行内表单组：全宽、≥44px 触摸目标 */
    .form-group input, .form-group select, .form-group textarea {
        min-height: 44px;
        width: 100%;
        box-sizing: border-box;
    }
    .form-row { flex-wrap: wrap; row-gap: 10px; }
    .form-row .form-group { min-width: 100%; }

    /* 6) 卡片与栅格间距收紧（沿用 style.css 类名，仅间距层） */
    .container { padding-left: 12px !important; padding-right: 12px !important; }
    .card-body { padding: 14px !important; }

    /* 7) 页头横幅/面包屑字号降档 */
    .page-hero h1 { font-size: 1.3rem !important; }

    /* 8) 顶部信息栏单行（2026-11-11 负责人反馈：360-480px 视口换两行占位）。
       既有类体系语义：hide-mobile 只覆盖电话/邮箱，位置项（无 hide 类）与
       hide-tablet 的工作时间（仅 769-1024 生效）在手机仍显示 → 整块隐藏
       .top-bar-v2-left，顶部栏只保留右侧 登录/免费注册 单行；
       平板 769-1024 维持现状（hide-tablet 生效，其余三项宽度充足单行不挤） */
    .top-bar-v2-left { display: none !important; }
}

/* ---------- 触摸设备：触摸目标 ≥44px（含横屏 iPad；桌面鼠标不受影响） ---------- */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
    a.payment-method { min-height: 44px; }
}