/* ============================================================
   Mobile-first responsive fixes for the Xuntong CMS.

   Goals:
   1. Fix all mobile display issues without changing the PC layout.
   2. Replace the original JS-based grid reshuffling (handleResponsiveGrids)
      with pure CSS media queries (faster, no flash of the 3-col layout).
   3. Turn the wide procurement table into stacked "cards" on phones so
      no horizontal scrolling is needed on the homepage.
   4. Fix sticky navbar overlap on sub-pages (detail / list hero padding).
   5. Soften heavy hero effects on small screens (perf + battery).

   Loaded LAST (after the injected original <style>, theme.css and
   page css) so these rules reliably win. All selectors below use
   identical-or-higher specificity than the inline styles they override.
   ============================================================ */

/* ============ 1. Homepage grid → pure CSS responsive ============ */
@media (max-width: 1023px) {
  #business [style*="grid-template-columns"],
  #cases [style*="grid-template-columns"],
  #news [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #about [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #about .about-image-wrap {
    max-width: 520px;
  }
  #about .about-image-wrap img {
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  #business [style*="grid-template-columns"],
  #cases [style*="grid-template-columns"],
  #news [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 639px) {
  #stats [style*="grid-template-columns"],
  #clients [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  #stats .stat-number { font-size: 1.75rem; }
  #stats [style*="font-size:1.75rem"] { font-size: 1.25rem !important; }
}

/* ============ 2. Footer columns → single column ============ */
@media (max-width: 767px) {
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer [style*="display:flex"][style*="justify-content"] {
    justify-content: flex-start !important;
  }
}

/* ============ 3. Homepage procurement table → stacked cards ============ */
@media (max-width: 767px) {
  /* hide the native table header (role="presentation" prevents
     accessibility tools from announcing the hidden row) */
  .proc-table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .proc-table-wrap .xt-table {
    min-width: 0 !important; /* kill the injected 680px floor */
  }
  .proc-table-wrap tbody,
  .proc-table-wrap tr,
  .proc-table-wrap td {
    display: block;
    width: 100% !important;
  }
  .proc-table-wrap tr {
    border-bottom: 1px solid var(--color-border, #E5EAF2);
    padding: 14px 16px;
    background: #fff;
  }
  .proc-table-wrap tbody tr:last-child { border-bottom: none; }
  /* strip cell borders/padding — the row provides the card padding */
  .proc-table-wrap td {
    padding: 5px 0 !important;
    border-bottom: none !important;
  }
  .proc-table-wrap td.xt-countdown { text-align: left; }
  /* Each cell gets a tiny grey label (data-label injected from the template) */
  .proc-table-wrap td[data-label]::before {
    content: attr(data-label) "：";
    font-size: 0.72rem;
    color: #8A99AC;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
  }
  .proc-table-wrap td.xt-title-cell[data-label]::before { content: none; }
  [data-theme="dark"] .proc-table-wrap tr { background: var(--bg-card, #111C2E); }
  [data-theme="dark"] .proc-table-wrap td[data-label]::before { color: #64748B; }
}

/* ============ 3b. Procurement LIST table → stacked cards ============ */
@media (max-width: 639px) {
  .proc-list-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .proc-list { min-width: 0 !important; } /* kill the list.css 720px floor */
  .proc-list tbody,
  .proc-list tr,
  .proc-list td {
    display: block;
    width: 100% !important;
  }
  .proc-list tbody tr {
    border-bottom: 1px solid var(--color-border, #E5EAF2);
    padding: 14px 16px;
  }
  .proc-list tbody tr:last-child { border-bottom: none; }
  .proc-list tbody td {
    padding: 5px 0 !important;
    border-bottom: none !important;
  }
  .proc-list td[data-label]::before {
    content: attr(data-label) "：";
    font-size: 0.72rem;
    color: #8A99AC;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
  }
  .proc-list td.proc-title[data-label]::before { content: none; }
  [data-theme="dark"] .proc-list tbody tr { background: var(--bg-card, #111C2E); }
  [data-theme="dark"] .proc-list td[data-label]::before { color: #64748B; }
}

/* ============ 4. Sub-page hero padding (fixed navbar overlap) ============ */
@media (max-width: 767px) {
  .list-hero { padding: 108px 0 48px; }
  .detail-hero { padding: 108px 0 40px; }
  .list-title { font-size: 1.9rem; }
  .detail-title { font-size: 1.55rem; }
  .detail-hero .detail-breadcrumb { margin-bottom: 12px; }
  .list-breadcrumb { margin-bottom: 14px; flex-wrap: wrap; }
}

/* ============ 5. Detail meta pills wrap nicer ============ */
@media (max-width: 479px) {
  .meta-pill { width: 100%; justify-content: space-between; }
}

/* ============ 6. Touch / interaction polish ============ */
/* 导航 CTA 按钮高亮态：与普通 nav-link 一致地表达当前栏目 */
.navbar .nav-cta.active,
.navbar .nav-cta.active:hover {
  box-shadow: 0 0 0 2px currentColor;
}

/* 移动端全屏菜单：当前栏目文字高亮 + 下划线 */
.mobile-overlay .mobile-link.active {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (pointer: coarse) {
  /* restore native tap highlight for better mobile affordance */
  a, button {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12);
  }
  /* reduce hover-driven lift on touch (they stick after tap otherwise) */
  .biz-card:hover, .case-card:hover, .news-card:hover,
  .list-card:hover, .related-card:hover {
    transform: none;
  }
}

/* ============ 7. Perf / battery: soften hero fx on small screens ============ */
@media (max-width: 767px) {
  .aurora-orb { filter: blur(48px); opacity: 0.45; }
  .aurora-orb.o1 { width: 320px; height: 320px; }
  .aurora-orb.o2 { width: 260px; height: 260px; }
  .aurora-orb.o3 { width: 200px; height: 200px; }
  .hero-grid-overlay { background-size: 44px 44px; }
  .scan-beam, .hero-data-stream .data-line { animation-duration: 8s; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .hero-subtitle { font-size: 1.05rem; }
  .hero-desc { font-size: 0.95rem; margin-bottom: 28px; }
  .hero-content { padding: 0 16px; }
  .hero-cta-primary, .hero-cta-secondary {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
  }
  .hero-cta-group { gap: 12px; }
  .container-main { padding: 0 16px; }
  .section-title { font-size: 1.5rem; }
  .section-subtitle { font-size: 0.925rem; }
}

/* ============ 8. iOS safe-area & misc ============ */
@supports (padding: max(0px)) {
  .navbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .mobile-overlay { padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px); }
  footer { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ============ 9. Make sure the table never overflows on tiny screens ============ */
.proc-table-wrap { max-width: 100%; }
.xt-table, .proc-list { border-collapse: collapse; }