/* ============================================================
   responsive.css — 手机 / 平板 / 桌面 三端布局与间距
   ------------------------------------------------------------
   断点互不重叠，避免同一属性在多个断点里打架：
     桌面      > 1200px        内容最大 1240，三～四列
     小桌面    ≤ 1200px        询价类双栏页面开始堆叠
     平板      769 – 1024px    导航收汉堡菜单，两列栅格
     手机      ≤ 768px         单列，留白收紧，触控 ≥ 44px
     小屏      ≤ 600px         按钮整行、字号降档
     极窄      ≤ 380px         再压一档，杜绝竖排文字

   约定：
   · 本文件必须放在 pages.css 之后加载
   · 每个属性只在一个断点里改一次；平板两列写在 769–1024，
     手机单列写在 ≤768，两边不重叠，所以不依赖权重取巧
   ============================================================ */

/* ============================================================
   0. 桌面基准（覆盖 pages.css 里的双栏比例）
      两条都改成 1:1，左右两栏严格等宽，避免「左窄右宽」的视觉错位
   ============================================================ */
.contact-grid.quote-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ============================================================
   1. 小桌面 ≤1200：双栏内容区开始堆叠
   ============================================================ */
@media (max-width: 1200px) {
  .contact-grid.quote-grid,
  .contact-grid,
  .stack-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   2. 平板 769 – 1024：导航收汉堡、栅格两列、留白略收
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --gap: 20px;
    --pad: 22px;
    --sec-y: clamp(52px, 7vw, 88px);
    --card-pad: 22px;
  }

  .wrap,
  .wrap-narrow {
    width: min(100% - var(--pad) * 2, var(--maxw));
  }
  .section {
    padding: var(--sec-y) 0;
  }

  /* 栅格：平板两列（>1024 由 pages.css 给 3/4 列） */
  .grid.g-3,
  .grid.g-4,
  .cat-grid,
  .proc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-row {
    gap: 16px;
  }
  .detail-grid,
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid,
  .footer-grid[data-cols] {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 26px 20px;
  }
  .detail-price {
    gap: 14px;
    padding: 18px;
  }
  .form-card {
    padding: 26px;
  }
}

/* ============================================================
   3. 手机 ≤768：单列 + 紧凑间距 + 触控友好
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
    --gap: 16px;
    --pad: 10px;
    --sec-y: 46px;
    --card-pad: 18px;
    --r-xl: 24px;
    --r-lg: 18px;
  }
  body {
    font-size: 14.5px;
  }
  .wrap,
  .wrap-narrow {
    width: min(100% - var(--pad) * 2, var(--maxw));
  }
  .section {
    padding: var(--sec-y) 0;
  }
  .section--tight {
    padding: 30px 0;
  }
  .section-head {
    margin-bottom: 22px;
  }
  .section-head h2 {
    margin: 10px 0 10px;
  }
  .lead {
    font-size: 14.5px;
  }
  .card,
  .form-card {
    padding: var(--card-pad);
  }

  /* 单列 */
  .grid.g-2,
  .grid.g-3,
  .grid.g-4,
  .cat-grid,
  .proc-grid,
  .footer-grid,
  .footer-grid[data-cols],
  .detail-grid,
  .contact-grid,
  .quote-grid,
  .stack-grid,
  .hero-inner,
  .detail-trust,
  .art-card.is-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 统计数字两列，避免四列挤成一条 */
  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    text-align: left;
  }
  .stat-num {
    font-size: 30px;
  }
  .stat-label {
    margin-top: 6px;
    font-size: 12px;
  }

  /* 分类磁贴 / 服务流程 */
  .cat-tile {
    padding: 20px 18px;
  }
  .cat-count {
    margin-top: 10px;
  }
  .proc-item {
    padding: 20px 18px 22px;
  }
  .proc-line {
    display: none;
  }
  .proc-step {
    font-size: 20px;
  }

  /* 页脚 */
  .footer {
    padding: 40px 0 24px;
  }
  .footer-grid {
    gap: 24px 18px;
  }
  .footer-bottom {
    margin-top: 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* 导航 */
  .nav-inner {
    width: min(100% - 20px, var(--maxw));
    gap: 10px;
  }
  .nav-actions {
    gap: 8px;
  }
  .nav-actions .btn-sm {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* 卡片：单列时图片别太矮 */
  .pcard-media,
  .case-media,
  .art-card.is-row .art-media {
    aspect-ratio: 16 / 10;
  }
  .pcard-body {
    padding: 16px 18px 18px;
  }
  .case-body {
    padding: 18px 18px 20px;
  }
  .case-metrics {
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
  }

  /* 资讯列表：图片在上、文字在下 */
  .art-card.is-row .art-text {
    padding: 16px 18px 20px;
  }
  .art-card h3,
  .art-card h4,
  .art-card p,
  .art-card .mute-2,
  .art-card > span {
    padding: 0 18px;
  }
  .art-card.is-row h3,
  .art-card.is-row p,
  .art-card.is-row .mute-2 {
    padding: 0;
  }

  /* 评价 / FAQ */
  .quote-card {
    padding: 22px 20px;
  }
  .quote-card blockquote {
    font-size: 14px;
  }
  .quote-mark {
    width: 42px;
    height: 42px;
    right: 16px;
    top: 12px;
  }
  .faq summary {
    padding: 15px 18px;
    font-size: 14.5px;
  }
  .faq-body {
    padding: 0 18px 18px;
  }

  /* 行动条 */
  .cta-band {
    padding: 26px 22px;
  }
  .cta-band .btn {
    width: 100%;
  }

  /* 详情页 */
  .detail-grid {
    gap: 22px;
  }
  .detail-thumbs {
    gap: 8px;
    flex-wrap: wrap;
  }
  .thumb {
    width: calc(25% - 6px);
    height: 60px;
  }
  .detail-price {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px;
  }
  .detail-price .price {
    font-size: 18px !important;
  }
  .detail-specs {
    padding: 20px 18px;
  }
  .spec-table th {
    width: 104px;
    padding: 12px 0;
    font-size: 13px;
  }
  .spec-table td {
    padding: 12px 0;
    font-size: 13.5px;
  }

  /* 文章正文 */
  .article-hero {
    margin: 20px 0 26px;
  }
  .article-body {
    font-size: 15px;
    line-height: 1.95;
  }
  .article-cta {
    padding: 20px;
    gap: 16px;
  }
  .article-cta .btn {
    width: 100%;
  }

  /* 表单：触控目标 ≥ 44px，字段间距收紧 */
  .input,
  .textarea,
  .select-trigger {
    min-height: 46px;
  }
  /* 手机端高度锁死，保证左右两列的输入框与下拉严格等高 */
  .input,
  .select-trigger {
    height: 46px;
  }
  .textarea {
    height: auto;
    min-height: 108px;
  }
  .btn {
    min-height: 46px;
  }
  .field + .field {
    margin-top: 14px;
  }
  .field-label {
    margin-bottom: 6px;
  }
  .dropzone {
    padding: 22px 16px;
  }
  .dropzone .mute-2 {
    font-size: 12.2px;
    line-height: 1.6;
  }
  .craft-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .craft-check {
    padding: 10px 11px;
    font-size: 13px;
  }

  /* 进度查询 */
  .track-card {
    padding: 20px 18px;
  }
  .track-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 16px 0 20px;
    padding: 16px 0;
  }
  .track-step {
    padding: 12px 0;
    gap: 13px;
  }
  .track-tip {
    padding: 12px 15px;
    font-size: 13px;
  }

  /* 关于页时间线 / 设备清单 */
  .equip-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 15px 18px;
  }
  .timeline {
    padding-left: 26px;
  }
  .tl-dot {
    left: -26px;
  }

  /* 跑马灯：字号与间距收一档 */
  .marquee {
    padding: 14px 0;
  }
  .marquee-track,
  .marquee span {
    gap: 28px;
  }
  .marquee span {
    font-size: 15px;
  }
  .marquee span::after {
    font-size: 8px;
  }

  /* 后台 */
  .admin-top {
    padding: 12px 16px;
  }
  .admin-top h1 {
    font-size: 16.5px;
  }
  .admin-content {
    padding: 14px;
    gap: 16px;
  }
  .panel-head {
    padding: 14px 16px;
  }
  .panel-body {
    padding: 16px;
  }
}

/* ============================================================
   4. 手机 ≤600：按钮整行、字号降档
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --pad: 10px;
    --sec-y: 40px;
    --gap: 14px;
  }
  .section-head h2 {
    font-size: clamp(21px, 6.2vw, 27px);
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  /* 按钮整行排列，点起来更稳 */
  .hero-actions,
  .article-cta,
  .row-between > .row {
    width: 100%;
  }
  .hero-actions .btn,
  .cta-band .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  /* 首屏数据 */
  .hero-meta {
    gap: 18px;
    margin-top: 32px;
    padding-top: 20px;
  }
  .hero-meta b {
    font-size: 24px;
  }
  .hero-meta span {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  /* 筛选与工具条 */
  .filter-chips {
    gap: 7px;
  }
  .filter-chip {
    height: 36px;
    padding: 0 13px;
    font-size: 12.8px;
  }
  .filter-chip em {
    font-size: 11px;
  }
  .toolbar {
    gap: 12px;
  }
  .search-box {
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .toolbar > .row {
    width: 100%;
    min-width: 0 !important;
    justify-content: stretch !important;
  }
  .toolbar > .row > * {
    flex: 1;
    min-width: 0;
  }

  /* 分页 */
  .pager {
    gap: 6px;
    margin-top: 30px;
  }
  .page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    font-size: 12.8px;
  }

  /* 详情价格两列；工艺选项单列 */
  .detail-price {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .craft-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 上传文件条：文件名单独一行 */
  .file-chip {
    flex-wrap: wrap;
    gap: 8px;
  }
  .file-name {
    flex: 1 1 100%;
    order: 3;
  }
  .toast {
    padding: 13px 14px;
  }
}

/* ============================================================
   5. 极窄机型 ≤380：杜绝竖排文字
   ============================================================ */
@media (max-width: 380px) {
  :root {
    --pad: 8px;
    --sec-y: 34px;
  }
  body {
    font-size: 14px;
  }
  .brand {
    font-size: 14.5px;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .nav-actions .btn-sm {
    padding: 0 11px;
    font-size: 12.5px;
  }
  .hero-title {
    font-size: clamp(25px, 8.6vw, 32px);
  }
  .hero-meta {
    gap: 14px;
  }
  .hero-meta b {
    font-size: 21px;
  }
  .stats-row {
    gap: 12px 14px;
  }
  .stat-num {
    font-size: 26px;
  }
  .card {
    padding: 15px;
  }
  .pcard-body,
  .case-body {
    padding: 14px 15px 16px;
  }
  .detail-price {
    grid-template-columns: minmax(0, 1fr);
  }
  .spec-table th {
    width: 86px;
  }
  .marquee span {
    font-size: 15px;
  }
  .craft-check {
    padding: 9px 10px;
    font-size: 12.5px;
  }
}

/* ============================================================
   6. 触控设备微调（只影响没有悬停能力的设备）
   ============================================================ */
@media (hover: none) {
  /* 悬停才出现的内容改为常驻，否则手机上看不到 */
  .nav-admin {
    opacity: 1;
  }
  /* 去掉依赖悬停的位移，改为点击反馈 */
  .cat-tile:hover,
  .pcard:hover,
  .case-card:hover,
  .art-card:hover,
  .card-hover:hover,
  .btn:hover {
    transform: none;
  }
  .btn:active,
  .mini-btn:active,
  .filter-chip:active,
  .page-btn:active,
  .cat-tile:active {
    transform: scale(0.98);
  }
}

/* ============================================================
   7. 大屏：内容不无限拉伸
   ============================================================ */
@media (min-width: 1600px) {
  :root {
    --maxw: 1320px;
  }
}
@media (min-width: 2000px) {
  :root {
    --maxw: 1440px;
  }
}

/* ============================================================
   8. 打印：不浪费纸张
   ============================================================ */
@media print {
  .nav,
  .footer,
  .mobile-menu,
  .scroll-progress,
  .cursor-dot,
  .cursor-ring,
  .cta-band,
  .marquee,
  .hero-canvas,
  .hero-glow,
  .dsh-toasts {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .section {
    padding: 16px 0;
  }
  .card,
  .panel {
    box-shadow: none;
    border-color: #ccc;
  }
}