/* Responsive layout audit, September 2026.
   Desktop (1280px and above) deliberately retains the existing presentation. */
@media (max-width:1279px) {
  /* Long service/factory descriptions need a full reading column. */
  body[data-page=index] .content-services-grid,
  body[data-page=about] #our-factories .content-feature-grid {
    display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;
    grid-auto-columns:auto;gap:24px;overflow:visible;padding-bottom:0;
    scroll-snap-type:none;
  }
  body[data-page=index] .services-section .content-service-card-body {
    display:grid;grid-template-columns:34% minmax(0,1fr);height:auto;
  }
  body[data-page=index] .services-section .content-service-card-body picture {
    height:100%;min-height:240px;flex-basis:auto;
  }
  body[data-page=index] .services-section .content-service-card-copy {padding:28px;min-width:0}
  body[data-page=index] .services-section .content-service-card-heading {gap:12px}
  body[data-page=index] .services-section .content-service-card-title {font-size:24px;line-height:1.3}
  body[data-page=index] .services-section .content-service-card-description {font-size:15px;line-height:1.75;margin-top:16px;flex:auto}
  body[data-page=index] .services-section .content-service-card-link {margin-top:16px;min-height:44px}
  body[data-page=about] #our-factories .company-factory-card {display:grid;grid-template-columns:34% minmax(0,1fr)}
  body[data-page=about] #our-factories .company-factory-card picture {display:block;height:100%}
  body[data-page=about] #our-factories .company-factory-card img {height:100%;min-height:240px;object-fit:cover}
  body[data-page=about] #our-factories .content-factory-summary {padding:28px;min-width:0}
  /* Move the blog sidebar before the article column becomes cramped. */
  body .blog-layout {grid-template-columns:minmax(0,1fr);gap:32px}
  body .blog-sidebar {position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  body .blog-search {grid-column:1/-1}
  body .blog-sidebar-block {min-width:0}
  body[data-page=blog] .blog-sidebar {display:contents}
  body[data-page=blog] .blog-search {grid-row:1}
  body[data-page=blog] .blog-sidebar-block:last-child {grid-row:2;padding-top:0;border:0}
  body[data-page=blog] .blog-results {grid-row:3}
  body[data-page=blog] .blog-sidebar-block:last-child .category-filters {display:flex;flex-wrap:wrap;gap:8px}
  body[data-page=blog] .blog-sidebar .category-filters :is(button,a) {width:auto;padding:12px;font-size:14px;border:1px solid #e2e7ef}
  body :is(.product-intro,.design-intro,.design-scope)>* {min-width:0}
  body :is(.product-description,.news-body) {min-width:0;overflow-wrap:break-word}
  body :is(.product-description,.news-body) table {display:block;max-width:100%;overflow-x:auto}
  body :is(.product-description,.news-body) img {max-width:100%;height:auto}
  /* A bottom dock keeps tablet copy and form fields unobstructed. */
  body {padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body .jj-service-float {
    top:auto!important;bottom:0!important;left:0;right:0!important;transform:none!important;
    display:flex!important;flex-direction:row;justify-content:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1px solid #e2e7ef;max-height:none;
  }
  body .jj-service-float .jj-service-float__item {display:flex;width:44px!important;height:44px!important;flex:none}
  body .jj-service-float__detail,
  body .jj-service-float__detail--qr {
    position:fixed;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));
    left:50%;right:auto;min-width:0;width:max-content;max-width:calc(100vw - 32px);
    white-space:normal;overflow-wrap:anywhere;transform:translateX(-50%);
  }
  body .jj-service-float__item:is(:hover,:focus-visible) .jj-service-float__detail,
  body .jj-service-float.is-wechat-open [data-service-key=wechat] .jj-service-float__detail {transform:translateX(-50%)}
}
@media (min-width:1024px) and (max-width:1279px) {
  body .jj-acc {flex-direction:column;height:auto}
  body .jj-acc-panel {flex:none;min-height:84px}
  body .jj-acc-panel.jj-acc-active {min-height:420px}
  body .jj-acc-vtitle {writing-mode:horizontal-tb;left:auto;right:24px;bottom:auto;top:50%;transform:translateY(-50%)}
}
@media (max-width:767px) {
  body .section {padding-block:48px}
  body .jj-acc-body {padding:24px}
  body .jj-acc-panel.jj-acc-active {min-height:440px}
  body .content-company-profile-panel {padding:24px}
  body .content-company-profile-copy {font-size:15px;line-height:1.75}
  body .blog-sidebar {grid-template-columns:minmax(0,1fr)}
  body .design-layout-card {grid-template-columns:minmax(0,1fr)}
  body .design-layout-card img {height:220px;min-height:0;width:100%;object-fit:cover}
  body .design-layout-copy {padding:24px}
}
@media (max-width:599px) {
  body[data-page=index] .services-section .content-service-card-body,
  body[data-page=about] #our-factories .company-factory-card {grid-template-columns:minmax(0,1fr)}
  body[data-page=index] .services-section .content-service-card-body picture,
  body[data-page=about] #our-factories .company-factory-card img {height:auto;min-height:0;aspect-ratio:16/10}
  body[data-page=index] .services-section .content-service-card-copy,
  body[data-page=about] #our-factories .content-factory-summary {padding:24px}
  body :is(.assembly-flow,.procurement-grid,.design-development-grid,.design-case-grid,.solution-sector-grid),
  body #why-us .content-feature-grid,
  body[data-page=about] .content-feature-grid:has(.content-reason-card) {grid-template-columns:minmax(0,1fr);gap:20px}
  body :is(.assembly-service-copy,.procurement-copy,.design-development-copy,.design-case-copy),
  body[data-page=about] .content-reason-card,body #why-us .content-feature-grid>* {padding:24px}
  body :is(.assembly-service-copy,.procurement-copy,.design-development-copy,.design-case-copy,.content-reason-card,.solution-sector) h3,
  body #why-us .content-feature-grid h3 {font-size:20px;line-height:1.35}
  body :is(.assembly-service-copy,.procurement-copy,.design-development-copy,.design-case-copy,.content-reason-card,.solution-sector) p,
  body #why-us .content-feature-grid p {font-size:15px;line-height:1.7}
  body .solution-sector img {height:200px}
  body .solution-sector>div {padding:24px}
}
@media (max-width:379px) {
  body #types .content-feature-grid,
  body .solution-product-grid,body .product-related .solution-product-grid,
  body[data-page=about] .content-article-grid {grid-template-columns:minmax(0,1fr)}
  body .contact-phone-company-row {grid-template-columns:minmax(0,1fr)}
  body .contact-phone-company-row .content-field-label {min-height:0}
  body .jj-acc-body {padding:20px}
  body .jj-acc-title {font-size:22px}
  body .jj-acc-panel.jj-acc-active {min-height:500px}
}
@media (max-width:1099px) {
  body .site-topbar__tagline {display:none}
  body .site-topbar__actions {width:100%;justify-content:flex-end;gap:12px}
  body .site-topbar__link {white-space:nowrap;min-height:44px}
  body .site-topbar__link:first-child {margin-right:auto}
  body .site-topbar__link:first-child .site-topbar__label {display:inline}
  body .site-language__button {min-height:44px}
  body .reliability-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  body .aging-grid {grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;gap:24px;padding-bottom:0}
  body .aging-card .content-service-card-body {display:grid;grid-template-columns:34% minmax(0,1fr)}
  body .aging-card .content-service-card-body picture {height:100%;min-height:220px}
  body .aging-card .content-service-card-copy {padding:24px;min-width:0}
}
@media (max-width:599px) {
  body .aging-card .content-service-card-body {grid-template-columns:minmax(0,1fr)}
  body .aging-card .content-service-card-body picture {height:auto;min-height:0;aspect-ratio:16/10}
  body .reliability-grid {grid-template-columns:minmax(0,1fr)}
  body .reliability-card-copy {padding:24px}
  body .reliability-card-copy h3 {font-size:20px}
  body .reliability-card-copy p {font-size:15px;line-height:1.7}
}
/* Expanded panel copy remains in normal flow even with larger system text. */
@media (max-width:1279px) {
  body .jj-acc-panel.jj-acc-active .jj-acc-body {position:relative;inset:auto;min-height:inherit;box-sizing:border-box}
}
@media (min-width:768px) and (max-width:1279px) {
  body :is(.assembly-flow,.assembly-benefits,.design-development-grid,.reliability-grid) {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

/* Keep the parent destination and submenu control on one navigation row. */
@media (max-width:1279px) {
  .mobile-menu-group-heading {display:flex;align-items:stretch;border-bottom:1px solid #e9edf3}
  body .jj-mobile-menu .mobile-menu-group-heading>a {display:flex;align-items:center;flex:1;min-width:0;min-height:54px;padding:14px 0;color:#2a335e;font-size:17px;line-height:1.4;font-weight:600;text-decoration:none}
  .mobile-menu-group-heading>.mobile-group-toggle {width:44px;min-width:44px;flex:none;justify-content:center;padding:0;border:0}
  .mobile-menu-group:has(>.mobile-menu-group-heading>[aria-expanded=true])>.mobile-subnav {grid-template-rows:1fr}
}

/* Mobile benefit cards: one inset, icon beside title, full-width description. */
@media (max-width:767px) {
  body[data-page=index] .content-capability-list .content-capability-stat {display:none}
  body[data-page=index] .content-capability-copy {flex:1;min-width:0}
  body #why-us .content-feature-grid,
  body #why-jiejia .content-feature-grid {grid-template-columns:minmax(0,1fr);margin-top:24px;gap:16px}
  body #why-us .content-feature-grid>*,
  body #why-jiejia .content-feature-grid>* {padding:0;min-width:0}
  body #why-us :is(.content-section-heading,.assembly-heading),
  body #why-jiejia .content-section-heading {margin-bottom:0}
  body #why-us :is(.content-section-heading,.assembly-heading) h2,
  body #why-jiejia .content-section-heading h2 {margin-top:12px;margin-bottom:0}
  body #why-us .assembly-heading h2+p {margin-top:12px}
  body .content-benefit-card,
  body[data-page=about] .content-reason-card {padding:20px;border-radius:16px}
  body .content-benefit-grid {display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px 12px}
  body .content-benefit-grid>.content-product-image-frame {width:28px;height:28px;min-width:0;padding:0;border-radius:0}
  body .content-benefit-grid>div:last-child {display:contents}
  body #why-us .content-benefit-grid h3 {margin:0;font-size:20px;line-height:1.35}
  body #why-us .content-benefit-grid p {grid-column:1/-1;margin:0;font-size:15px;line-height:1.65}
  body[data-page=about] .content-reason-title {margin-top:12px}
  body[data-page=about] .content-reason-description {margin-top:10px}
}

/* FAQ library uses a single mobile inset for both questions and answers. */
@media (max-width:767px) {
  body[data-page=faq] .faq-library .content-faq-item {padding-inline:0}
  body[data-page=faq] .faq-library .content-faq-trigger {width:100%;padding:16px;gap:12px}
  body[data-page=faq] .faq-library .accordion-panel__inner {padding:0 16px 16px}
  body[data-page=faq] .faq-library .content-faq-chevron {flex-shrink:0}
  body[data-page=faq] .faq-library .content-faq-answer {color:#64748b}
}