/* Kerong - Global responsive (mobile + iPad) */

html {
  -webkit-text-size-adjust: 100%;
  /* 预留滚动条空间，避免切换页面时因滚动条出现/消失导致导航栏左右抖动 */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
}

/* 固定导航栏：稳定下划线，避免 active/hover 引发布局偏移 */
.nav-link {
  display: inline-block;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link::after {
  display: none !important;
}

.nav-link:hover,
.nav-link.text-blue-600 {
  border-bottom-color: #2563eb;
}

/* 固定顶栏：禁用 backdrop-blur 引起的合成层重绘抖动 */
nav.fixed {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
}

/* 导航菜单区域宽度稳定 */
nav .hidden.xl\:flex.items-center {
  flex-shrink: 0;
}

nav .flex.justify-between.items-center {
  min-height: 5rem;
}

img,
video,
svg {
  max-width: 100%;
}

/* Navigation */
@media (max-width: 1279px) {
  nav .h-20 {
    height: 4rem;
  }

  nav img.h-12 {
    height: 2.5rem;
    max-width: 120px;
    object-fit: contain;
  }
}

@media (max-width: 639px) {
  nav .h-20 {
    height: 3.5rem;
  }

  nav img.h-12 {
    height: 2.25rem;
  }

  nav #lang-toggle {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
  }
}

/* Mobile menu - Quick Inquiry CTA */
#mobile-menu .mobile-inquiry-cta {
  display: block;
  text-align: center;
  background: #2563eb;
  color: #fff !important;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  margin-top: 0.5rem;
  border-top: none;
}

#mobile-menu .mobile-inquiry-cta:hover {
  background: #1d4ed8;
}

/* Page hero top padding (fixed nav) */
@media (max-width: 767px) {
  body > section.pt-32 {
    padding-top: 6rem !important;
  }

  body > section.pt-28 {
    padding-top: 5.5rem !important;
  }
}

/* Section vertical spacing */
@media (max-width: 767px) {
  section.py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  section.py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section.py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  footer .py-16 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section.py-24 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  section.py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Typography on small screens */
@media (max-width: 639px) {
  h1.text-4xl,
  .text-4xl.lg\:text-5xl,
  .text-4xl.lg\:text-6xl {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
  }

  .text-3xl,
  .text-3xl.lg\:text-4xl,
  .text-3xl.lg\:text-5xl {
    font-size: 1.5rem !important;
  }

  .text-2xl.lg\:text-3xl {
    font-size: 1.375rem !important;
  }
}

/* Home banner carousel */
.banner-slide.active {
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 768px) {
  .banner-slide.active {
    flex-direction: row;
    align-items: center;
  }
}

.banner-image-wrap {
  width: 100%;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .banner-slide.active {
    min-height: auto !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .banner-slide h1 {
    font-size: 1.625rem !important;
  }
}

/* Home section headers */
@media (max-width: 639px) {
  section .flex.justify-between.items-end {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }
}

/* Home process steps - iPad grid */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-process-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
    gap: 0.75rem;
  }

  .home-process-steps > div {
    width: auto !important;
    flex-shrink: 1 !important;
  }
}

/* Horizontal scroll areas */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Sidebar layout — mobile/iPad: 方案 A 横向 Chip；PC lg+ 保持原侧栏 */
@media (max-width: 1023px) {
  section.filter-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .filter-page-layout {
    gap: 0.75rem !important;
  }

  .filter-page-layout main > p.text-slate-500 {
    margin-bottom: 1rem !important;
    font-size: 0.875rem;
  }

  /* 取消 Tailwind space-y-6 在筛选区的额外间距 */
  .filter-sidebar .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
  }

  .filter-sidebar .sticky,
  aside.filter-sidebar .sticky {
    position: static !important;
    top: auto !important;
    display: flex;
    flex-direction: column;
    gap: 0.25rem !important;
  }

  /* 案例页：标签 + Chip 同一行 */
  .filter-sidebar .sticky > .filter-group,
  .filter-sidebar .sticky > div {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 0;
  }

  .filter-sidebar .sticky > .filter-group h3,
  .filter-sidebar .sticky > div h3,
  .filter-sidebar .sticky > h3 {
    flex: 0 0 3rem;
    width: 3rem;
    margin: 0 !important;
    padding: 0;
    font-size: 0.625rem !important;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    word-break: keep-all;
  }

  /* 产品页标题在移动端隐藏（Chip 已足够表达） */
  .filter-sidebar .sticky > h3.text-xl {
    display: none;
  }

  .filter-sidebar .sticky > div ul,
  .filter-sidebar .sticky > ul,
  .filter-sidebar .filter-sidebar-card ul {
    flex: 1;
    min-width: 0;
  }

  .filter-sidebar h3,
  aside.filter-sidebar h3 {
    margin-bottom: 0 !important;
  }

  .filter-sidebar ul.space-y-1,
  .filter-sidebar ul.space-y-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-height: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0;
  }

  .filter-sidebar ul.space-y-1::-webkit-scrollbar,
  .filter-sidebar ul.space-y-2::-webkit-scrollbar {
    display: none;
  }

  .filter-sidebar ul.space-y-1 > li,
  .filter-sidebar ul.space-y-2 > li {
    flex-shrink: 0;
    width: auto;
    padding: 0 !important;
    margin: 0;
  }

  .filter-sidebar ul.space-y-1 > li.filter-series-label {
    display: none;
  }

  .filter-sidebar .case-filter,
  .filter-sidebar .cat-btn,
  .filter-sidebar .blog-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    white-space: nowrap;
    padding: 0.25rem 0.625rem !important;
    min-height: 1.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 9999px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff;
    color: #475569;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .filter-sidebar .case-filter:hover,
  .filter-sidebar .cat-btn:hover,
  .filter-sidebar .blog-filter:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .filter-sidebar .case-filter.active-category,
  .filter-sidebar .cat-btn.active-category,
  .filter-sidebar .blog-filter.active-category {
    background: #2563eb !important;
    color: #fff !important;
    font-weight: 600;
    border-color: #2563eb !important;
    padding-left: 0.625rem !important;
    box-shadow: none;
  }

  .filter-sidebar .filter-sidebar-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .filter-sidebar .filter-sidebar-card h3 {
    flex: 0 0 3rem;
    width: 3rem;
    margin: 0 !important;
  }

  .filter-sidebar .sidebar-inquiry-cta {
    margin-top: 0.125rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.75rem !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
  }

  .filter-sidebar .sidebar-inquiry-cta p {
    margin: 0 !important;
  }

  .filter-sidebar .sidebar-inquiry-cta .sidebar-inquiry-desc {
    display: none;
  }

  .filter-sidebar .sidebar-inquiry-cta .sidebar-inquiry-text {
    margin-bottom: 0 !important;
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  .filter-sidebar .sidebar-inquiry-cta a {
    width: auto !important;
    padding: 0.3125rem 0.625rem !important;
    flex-shrink: 0;
    font-size: 0.75rem !important;
  }
}

/* 资讯博客页：移动端专用换行网格，避免横向滚动裁切文字 */
@media (max-width: 1023px) {
  .page-blog .blog-filter-panel {
    display: block !important;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .page-blog .blog-filter-panel h3 {
    display: none;
  }

  .page-blog .blog-filter-panel ul.space-y-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
    overflow: visible !important;
    width: 100%;
    padding: 0 !important;
    margin: 0;
  }

  .page-blog .blog-filter-panel ul.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
  }

  .page-blog .blog-filter-panel ul.space-y-2 > li {
    width: 100%;
    min-width: 0;
  }

  .page-blog .blog-filter-panel .blog-filter {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.35;
    text-align: center;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff;
    box-shadow: none;
  }

  .page-blog .blog-filter-panel ul.space-y-2 > li:first-child {
    grid-column: 1 / -1;
  }

  .page-blog .blog-filter-panel .blog-filter.active-category {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
    padding-left: 0.625rem !important;
  }

  .page-blog .filter-page-layout main > p.text-slate-500 {
    margin-top: 0.25rem;
  }
}

/* 保留旧侧栏内滚动规则仅作 lg 以下非 filter-sidebar 兜底（已无使用） */
@media (max-width: 1023px) {
  aside:not(.filter-sidebar) .sticky {
    position: static !important;
    top: auto !important;
  }
}

/* Product specs table */
@media (max-width: 767px) {
  .overflow-x-auto table.min-w-\[720px\] {
    font-size: 0.8125rem;
  }

  #product-detail .flex.flex-wrap.gap-4 > a {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }

  #product-detail .grid.grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Contact form card */
@media (max-width: 639px) {
  section .shadow-xl.border:has(#inquiry-form) {
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
  }

  section h2.text-3xl.font-extrabold.mb-10 {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* About timeline */
@media (max-width: 639px) {
  section .relative.max-w-3xl .relative.pl-20 {
    padding-left: 3.5rem !important;
  }

  section .relative.max-w-3xl .absolute.left-8 {
    left: 1.25rem !important;
  }

  section .relative.max-w-3xl .absolute.left-4 {
    left: 0.5rem !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    font-size: 0.625rem !important;
  }
}

/* Detail page content cards */
@media (max-width: 639px) {
  #case-section-bg,
  #case-section-req,
  #case-section-solution,
  #case-section-product,
  #case-section-result,
  .bg-slate-100.p-8.rounded-3xl {
    padding: 1.25rem !important;
  }

  .prose-blog img {
    border-radius: 0.75rem;
  }
}

/* Footer contact blocks */
@media (max-width: 639px) {
  footer .text-lg.font-bold {
    font-size: 1rem !important;
    word-break: break-word;
  }

  footer .flex.items-center.gap-4.p-4,
  footer .flex.items-start.gap-4.p-4 {
    padding: 0.875rem !important;
  }
}

/* Factory stat bar on very small screens */
@media (max-width: 374px) {
  .grid.grid-cols-2 > .bg-white.p-6 .text-3xl {
    font-size: 1.5rem !important;
  }
}

/* Service flow cards */
@media (max-width: 639px) {
  #service-flow .flex.flex-col.md\:flex-row {
    gap: 0.75rem;
  }
}

/* Disable hover lift on touch devices */
@media (hover: none) {
  .card-hover:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Touch-friendly tap targets in nav & menus */
@media (max-width: 1279px) {
  #mobile-menu a.block {
    padding: 0.375rem 0;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  aside .cat-btn {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  .filter-sidebar .case-filter,
  .filter-sidebar .cat-btn,
  .filter-sidebar .blog-filter {
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
  }
}

/* Breadcrumb wrap */
@media (max-width: 639px) {
  nav.text-sm.text-slate-500 {
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
  }
}

/* Scroll margin for fixed nav */
@media (max-width: 767px) {
  .scroll-mt-nav {
    scroll-margin-top: 4.5rem;
  }
}