/* ============================================================
   云卡商城 · 样式模块 11/11 —— 11-responsive.css
   ------------------------------------------------------------
   职责：响应式与打印（必须最后加载，否则会覆盖前面的断点）
   涵盖：§32

   ⚠️ 加载顺序即层叠顺序，请勿调整 <link> 的先后。
      本文件由 style.css 按分节边界切出，规则未做任何重排。
   ============================================================ */

/* ============================================================
   32 · 响应式
   ============================================================ */
@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .site-footer .cols > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .grid-4,
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-main,
  .layout-main.reverse { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .grid-3,
  .grid-4,
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 轮播：单列，品牌图形移到文案上方 */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-8) var(--sp-6);
  }
  /* ⚠️ 这里**不能**写 position: static。
     .hero-art 里的 <img> 是绝对定位铺满的（见 14A 媒体容器那一组规则），
     .hero-art 一旦不再定位，图片就会越级去找 .hero-inner（position: relative）
     当定位父级 —— 结果整张主视觉铺满整个横幅、把文案全盖住。
     实测：移动端 VALORANT / 王者荣耀两张只剩一张全屏海报，文字看不见。
     order + justify-self 已经够把图形挪到文案上方，不需要改 position。 */
  .hero-art {
    order: -1;
    justify-self: start;
    width: 72px;
    height: 72px;
    border-radius: var(--r-md);
  }
  /* 官方主视觉是「有构图的整张画」，缩到 72px 方框里只剩一块认不出的细节；
     移动端改成整幅横向条带当真正的头图。方块图标（is-img / is-full）不受影响。

     高度用 clamp 显式给出（不用 aspect-ratio）：条带高度随视口连续变化，
     比固定像素在 640~960 这段过渡区更自然，也方便写断言。

     ⚠️ 量这一块时注意：非激活幻灯片的 .hero-art 带着
     `transform: scale(.94) rotate(-4deg)`（见 14B 的入场动效），
     getBoundingClientRect() 返回的是**旋转后的包围盒**，会比布局尺寸大一圈
     （实测 316×158 的盒子量出来是 307×169），别把它当成布局尺寸。 */
  .hero-art.is-art {
    justify-self: stretch;
    width: auto;
    height: clamp(150px, 44vw, 220px);
    border-radius: var(--r-lg);
  }
  /* 条带只露出海报的一横条，锚点往上抬一点才框得住人物/徽记 */
  .hero-art.is-art img { object-position: center 30%; }
  .hero-points { flex-direction: column; gap: var(--sp-1h); }
  .layout-split,
  .layout-split.wide,
  .layout-split.narrow { grid-template-columns: minmax(0, 1fr); }
  .layout-half { grid-template-columns: minmax(0, 1fr); }
  .layout-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-spec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-aside { position: static; }

  .goods-detail { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

  .side-layout { grid-template-columns: minmax(0, 1fr); }
  .side-menu {
    position: static;
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-1);
  }
  .side-menu .grp { display: flex; gap: var(--sp-2); margin: 0; }
  .side-menu .grp .t { display: none; }
  .side-menu a { margin-bottom: 0; white-space: nowrap; }

  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-side {
    position: static;
    display: flex;
    gap: var(--sp-2);
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--sp-3);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .admin-brand { display: none; }
  .admin-side .side-menu { display: flex; gap: var(--sp-2); }
  .admin-side .side-menu .grp { display: flex; gap: var(--sp-2); margin: 0; }
  .admin-side .side-menu .grp .t { display: none; }
  .admin-side .side-menu a { margin-bottom: 0; white-space: nowrap; }

  .nav { display: none; }
  .burger { display: inline-flex; }
  .search-box { width: 170px; }
}

@media (max-width: 640px) {
  :root { --header-h: 58px; }

  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .trust-bar { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .trust-bar .tp { padding: var(--sp-3); }
  .layout-4 { grid-template-columns: minmax(0, 1fr); }

  .wrap { padding: 0 var(--sp-4); }
  .card-body,
  .admin-content { padding: var(--sp-4); }
  .card-head { padding: var(--sp-3) var(--sp-4); }
  .modal-body,
  .modal-foot { padding: var(--sp-4); }
  .modal { max-height: 92vh; border-radius: var(--r-md); }

  .banner { min-height: 200px; border-radius: var(--r-lg); }
  .banner h1 { font-size: var(--fs-2xl); }
  .banner p { font-size: var(--fs-sm); }
  .banner .inner { padding: var(--sp-6) var(--sp-4); }

  /* 轮播：手机端进一步压缩字号与留白 */
  .hero { border-radius: var(--r-lg); }
  .hero-inner { gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .hero-title { font-size: var(--fs-2xl); letter-spacing: -.3px; }
  .hero-sub { font-size: var(--fs-sm); }
  .hero-kicker { margin-bottom: 0; font-size: var(--fs-xs); }
  .hero-art {
    width: 60px;
    height: 60px;
    box-shadow: none;
  }
  .hero-points { margin-top: var(--sp-3); }
  .hero-cta { margin-top: var(--sp-4); gap: var(--sp-2); }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-arrow { display: none; }
  .hero-dots { bottom: var(--sp-3); }

  .search-box { display: none; }
  .site-header .wrap { gap: var(--sp-3); }

  /* ---- 页头窄屏压缩 ----
     实测 360px 视口下原来的页头会溢出 43px，右上角头像被顶出屏幕。
     这里做三件事：收紧间距、砍掉两处冗余文案、并让 logo 可压缩兜底
     （不靠硬算宽度，否则换站长一点的名字又会溢出）。 */
  .site-header .wrap { gap: var(--sp-2); }
  /* ⚠️ 只写 min-width:0 是不够的：.logo 原本是 flex:none（flex-shrink:0），
     它根本不会缩，站名长了照样把头像顶出去。必须同时放开收缩。 */
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo .txt { min-width: 0; overflow: hidden; }
  .logo .txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo .txt small { display: none; }     /* 英文副标在手机上没信息量 */
  .hd-cart-txt { display: none; }          /* 购物车只留图标，角标仍在 */

  .site-footer .cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-8) 0 var(--sp-6); }
  .site-footer .cols > div:last-child { grid-column: auto; }

  .goods-card .thumb .ph { font-size: var(--ico-md); }
  .goods-card .info { padding: var(--sp-3); }
  .goods-card .price { font-size: var(--fs-lg); }
  .goods-detail { gap: var(--sp-5); }
  .goods-hero .ph { font-size: var(--ico-xl); }
  .goods-price-box .p { font-size: var(--fs-2xl); }
  .stat .v { font-size: var(--fs-xl); }

  .selling-points { gap: var(--sp-3); }
  .toolbar { gap: var(--sp-2); }
  .toolbar .input,
  .toolbar .select,
  .toolbar .search-inline { width: 100%; }
  .kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .toast { font-size: var(--fs-xs); }

  .empty { padding: var(--sp-8) var(--sp-4); }
  .card-key { font-size: var(--fs-xs); }
  .proof-img { max-width: 100%; }
  .spec { min-width: 80px; }
}

@media (max-width: 400px) {
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
}

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  /* Continuous banner items are explicitly enabled by the storefront design. */
  *:not(.pogo-float),
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 打印 */
@media print {
  .site-header,
  .site-footer,
  .notice-bar,
  .pager,
  .toolbar { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; }
}

/* 窄屏精修：触控面积与卡片留白不随文字字号一起缩小。 */
@media (max-width: 640px) {
  .card-pad, .card-body { padding: var(--sp-4); }
  .card-head { padding: var(--sp-4); }
  .card-body.tight { padding: var(--sp-3) var(--sp-4); }
  .card-body.flush { padding: 0; }
  .section-title { margin-top: var(--sp-8); margin-bottom: var(--sp-4); gap: var(--sp-3); }
  .btn:not(.btn-xs), .pref-btn, .cat-chip { min-height: 44px; }
  .input, .select, .textarea, .search-box input, .search-bar input { font-size: 16px; }
  .input, .select { min-height: 44px; }
  .goods-card .info { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .goods-card .foot { padding-top: var(--sp-3); }
  .hero-kicker { width: fit-content; white-space: normal; }
  .hero-title { line-height: var(--lh-tight); overflow-wrap: anywhere; }
}
@media (hover: none) {
  .goods-card:hover { transform: none; background: var(--surface); }
  .goods-card:hover .thumb .ph { transform: none; }
}

/* 商品列表在常见手机宽度保留双列，其他表单栅格沿用单列。 */
@media (min-width: 360px) and (max-width: 640px) {
  .grid:has(> .goods-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .goods-card .price { font-size: var(--fs-md); }
  .goods-card .sold { white-space: normal; }
}

/* 购买与弹窗的手机布局。 */
@media (max-width: 640px) {
  .cart-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); }
  .cart-actions { grid-column: 1 / -1; justify-content: space-between; padding-top: var(--sp-2); }
  .cart-actions .btn { min-height: 44px; padding-inline: var(--sp-4); }
  .qty button { width: 44px; height: 44px; }
  .qty input { height: 44px; font-size: 16px; }
  .overlay { padding: var(--sp-3); }
  .modal { max-height: calc(100dvh - var(--sp-6)); }
  .modal-body { padding: var(--sp-4); }
  .modal-head, .modal-foot { padding: var(--sp-3) var(--sp-4); }
  .modal-foot .btn { flex: 1 1 auto; white-space: normal; height: auto; padding-block: var(--sp-3); line-height: var(--lh-tight); }
  .goods-price-box { padding: var(--sp-4); }
  .spec { max-width: 100%; }
  .side-menu a { white-space: nowrap; min-height: 44px; }
  .pager button { min-width: 44px; height: 44px; }
}

/* 极窄页头使用品牌标记，避免站名被挤成两行。 */
@media (max-width: 420px) {
  .site-header .logo .txt { display: none; }
  .site-header .logo { flex: none; }
}

/* Card layout stays legible with two products per row on common phone widths. */
@media (max-width: 640px) {
  .goods-card { border-radius: var(--r-lg); }
  .goods-card .thumb { border-radius: var(--r-md); }
  .goods-card .info { padding: var(--sp-3); }
  .goods-card .name { font-size: var(--fs-base); }
  .goods-card .price { font-size: var(--fs-lg); }
  .goods-card .foot { padding-block: var(--sp-3); }
  .goods-meta { gap: var(--sp-1); padding-top: var(--sp-2); }
  .goods-meta .badge { padding-inline: var(--sp-1h); }
  .trust-bar .tp { padding: var(--sp-4) var(--sp-3); gap: var(--sp-2); }
  .trust-bar .tp .ico { width: 32px; height: 32px; }
  .wallet-balance-card .card-body { padding: var(--sp-5); }
  .wallet-balance-card .wallet-amt { font-size: var(--fs-3xl); }
  .wallet-balance-card .wallet-sums { width: 100%; justify-content: space-between; }
  .wallet-balance-card .wallet-sums > div { text-align: left; }
  .order-card .card-head, .order-card .list-body, .order-summary { padding: var(--sp-4); }
  .order-actions { width: 100%; gap: var(--sp-2); }
  .order-total { flex: 1 1 100%; margin: 0 0 var(--sp-1); }
  .order-actions .btn { flex: 1; }
}
@media (hover: none) {
  .goods-card:hover { box-shadow: var(--sh-1); }
}

@media (max-width: 960px) {
  .side-layout > .side-menu { display: block; overflow: visible; padding: 0; min-width: 0; }
  .side-layout > .side-menu > .card { display: none; }
  .side-layout > .side-menu > .grp { display: flex; align-items: center; overflow-x: auto; gap: var(--sp-2); margin: 0; padding-bottom: var(--sp-2); }
  .side-layout > .side-menu > .grp > a { flex: none; min-height: 44px; }
}