/*
 * Mobile-only layout overrides.  This file is loaded after main.css so the
 * desktop theme remains unchanged.  The breakpoint matches the existing
 * pc-hide/mobile-hide convention in main.css.
 */
.mobile-submenu-toggle {
  display: none;
}

@media (max-width: 1024px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  /* Never scale a handset layout, including before the navigation script runs. */
  .scale-box {
    width: 100% !important;
    transform: none !important;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

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

  .w,
  .w1480,
  .w1200,
  .container {
    width: auto !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .w1 {
    width: auto !important;
  }

  /* Header: desktop navigation becomes a full-height, touch-friendly drawer. */
  .header .fixed-header {
    top: 64px;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    overflow-y: auto;
    background: #fff;
    opacity: 1;
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
  }

  .header.mobile-nav-open .fixed-header {
    transform: translateY(0);
    visibility: visible;
  }

  .header .header-nav {
    min-height: 100%;
    border: 0;
    background: #fff;
  }

  .header .header-nav .nav-content {
    display: block;
    width: 100%;
    height: auto;
    padding: 18px 24px calc(28px + env(safe-area-inset-bottom));
  }

  .header .logobox,
  .header .lang {
    display: none !important;
  }

  .header .nav-box {
    display: block;
    width: 100%;
    margin: 0;
  }

  .header .nav-box > li {
    position: relative;
    padding: 0;
    border-bottom: 1px solid #ececec;
    font-size: 18px;
  }

  .header .nav-box > li > a {
    width: calc(100% - 52px);
    min-height: 54px;
    line-height: 54px;
    color: #3e3a39;
  }

  .header .nav-box > li > a::after {
    display: none;
  }

  .header .nav-box > li.active > a {
    color: #da0e14;
  }

  .mobile-submenu-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 54px;
    border: 0;
    background: transparent;
    color: #3e3a39;
    font-size: 20px;
  }

  .header .nav-box .three-nav {
    display: block;
    position: static;
    height: 0;
    overflow: hidden;
    border: 0;
    background: #f6f6f6;
    transition: height .2s ease;
  }

  .header .nav-box > li.mobile-submenu-open .three-nav {
    height: auto;
  }

  .header .nav-box .three-nav .w {
    display: block;
    width: 100% !important;
    margin: 0 !important;
  }

  .header .nav-box .three-nav .wid-40 {
    display: none;
  }

  .header .nav-box .three-nav > .w > div:last-child,
  .header .nav-box .three-nav ul {
    display: block;
    width: 100%;
  }

  .header .nav-box .three-nav li {
    margin: 0;
    border-top: 1px solid #e7e7e7;
  }

  .header .nav-box .three-nav a {
    width: 100%;
    padding: 13px 18px;
    color: #656565;
    line-height: 1.5;
    text-align: left;
  }

  .header .nav-box .three-nav li i {
    display: none;
  }

  .mobile-nav {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
  }

  .mobile-nav .logo,
  .mobile-nav .logo a,
  .mobile-nav .logo img {
    display: block;
    height: 34px;
    width: auto;
    margin: 0;
  }

  #mobile-nav-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 0;
    background: transparent;
  }

  #mobile-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: #3e3a39;
    transition: transform .2s ease, opacity .2s ease;
  }

  .mobile-nav-open + .scale-box #mobile-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-nav-open + .scale-box #mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-open + .scale-box #mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .scale-box > div[style*="height:100px"] {
    height: 64px !important;
  }

  /* Global type and spacing scale. */
  [class~="text-[60px]"],
  .page-banner h2,
  .contact-us h2,
  .industry-solution h3 {
    font-size: 34px !important;
    line-height: 1.25 !important;
  }

  [class~="text-[38px]"],
  [class~="text-[40px]"] {
    font-size: 26px !important;
  }

  [class~="text-[36px]"],
  [class~="text-36px"] {
    font-size: 24px !important;
  }

  [class~="text-[32px]"],
  [class~="text-[28px]"],
  [class~="text-28px"],
  [class~="text-34px"] {
    font-size: 22px !important;
  }

  [class~="text-[26px]"],
  [class~="text-26px"],
  [class~="text-[24px]"],
  [class~="text-24px"] {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  [class~="py-30"], [class~="py-20"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  [class~="pt-[160px]"], [class~="pb-[180px]"], [class~="pb-[160px]"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  [class~="mt-100"], [class~="mb-100"] {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }

  [class~="mt-80"], [class~="mb-80"], [class~="mb-60"], [class~="mb-50"] {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }

  [class~="mt-40"], [class~="mb-40"], [class~="mb-30"] {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  /* Generic grids, split columns and fixed desktop widths. */
  [class~="grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  [class~="grid-cols-4"],
  [class~="grid-cols-5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 12px !important;
  }

  [class~="w-[50%]"], .w-50%, .w-1\/2,
  [class~="w-[35%]"], [class~="w-[65%]"],
  [class~="max-w-40%"], [class~="max-w-80%"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  [class~="w-1180px"], [class~="w-360px"],
  [class~="w-[320px]"] {
    width: 100% !important;
  }

  .page-banner img {
    display: block;
    width: 100%;
    min-height: 220px;
    object-fit: cover;
  }

  .page-banner .img-box {
    padding: 0 16px;
  }

  .page-banner .img-box .w1480 {
    margin: 0 !important;
  }

  .home-intro > .w > .flex,
  #about-values .w,
  .sustainability-content .w1480 > .flex,
  .contact-us .w1480 > .flex,
  #philosophy > .flex,
  .home-group .w > .flex {
    flex-direction: column !important;
    gap: 24px;
  }

  main > .w1480.flex,
  main > section.w1480 > .flex.items-center,
  main > section .bg-\[\#F1F1F1\] .w1480 > .flex {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 24px;
  }

  section.w1480.flex,
  .w1480.py-30.flex.items-center.justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .w1480.py-30.flex.items-center.justify-between h1 {
    flex-wrap: wrap;
    gap: 12px;
  }

  .home-intro .intro {
    width: 100%;
    font-size: 16px;
  }

  #about-values [class~="w-[50%]"] {
    flex-shrink: 1;
  }

  .home-intro .item:not(:last-child),
  .industry-solution .item:not(:last-child) {
    margin-right: 0;
  }

  .home-milestone {
    padding: 56px 0;
  }

  .home-milestone .leftbox,
  .home-milestone .gallery-thumbs {
    float: none;
    width: 100%;
  }

  .home-milestone .gallery-top {
    padding: 28px 20px 92px;
    margin-top: 24px;
  }

  .home-milestone .gallery-top h3 {
    font-size: 34px;
  }

  .home-milestone .gallery-top .txt p {
    font-size: 16px;
  }

  .home-milestone .gallery-thumbs {
    max-width: 320px;
    margin: 24px auto 0;
  }

  .home-milestone .yuan {
    display: none;
  }

  .home-group {
    padding: 56px 0;
    font-size: 16px;
    background-position: center;
  }

  .home-group .box,
  .home-group [class~="max-w-[560px]"] {
    max-width: 100%;
  }

  /* Listing, downloads, contact and article content. */
  .industry-solution,
  .sustainability-content,
  .contact-us,
  .download-content {
    padding: 48px 0;
  }

  .industry-solution .item {
    flex-basis: calc(50% - 8px);
    margin: 0 0 24px;
    font-size: 16px;
  }

  .industry-solution .list {
    gap: 16px;
  }

  .contact-us h2 {
    margin-right: 0;
  }

  .contact-us .item {
    margin-bottom: 28px;
  }

  .contact-us .item p,
  .contact-us .item p[class~="!text-[64px]"] {
    font-size: 22px !important;
    overflow-wrap: anywhere;
  }

  .map-box {
    height: 320px;
    margin-bottom: 32px;
  }

  .download-content .body li {
    width: 100%;
    margin-right: 0;
    padding: 24px;
  }

  .download-content .body li .box {
    margin-left: 24px !important;
  }

  #recruitment .w-full.border {
    overflow-x: auto;
  }

  #recruitment .bg-gray-300,
  #recruitment #tableBody {
    min-width: 720px;
  }

  .article-main img,
  .article-main table,
  .article-main iframe {
    max-width: 100% !important;
    height: auto;
  }

  .article-main table {
    display: block;
    overflow-x: auto;
  }

  /* Green-energy cards keep their artwork but reflow their labels. */
  main [class~="h-[670px]"] {
    height: 420px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    width: auto !important;
  }

  main [class~="h-[670px]"] .absolute img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main [class~="h-[670px]"] [class~="grid"] {
    padding: 32px 20px !important;
  }

  main [class~="h-[670px]"] [class~="h-67px"] {
    width: 48px;
    height: 48px;
  }

  /* The service panorama is unreadable when scaled: stack its original blocks. */
  .min-h-720px {
    display: flex;
    min-height: 0 !important;
    margin-top: 24px;
    flex-direction: column;
    gap: 28px;
    background: none !important;
  }

  .min-h-720px > .absolute {
    position: relative !important;
    inset: auto !important;
    width: 100%;
  }

  .min-h-720px > .absolute > div:last-child,
  .min-h-720px > .absolute .relative.flex {
    flex-wrap: wrap;
    gap: 8px;
  }

  .min-h-720px .w-150px,
  .min-h-720px [class~="w-[150px]"] {
    flex: 1 1 calc(50% - 8px);
    width: auto;
    margin-right: 0 !important;
  }

  .min-h-720px .absolute {
    position: relative;
  }

  .min-h-720px .mb-4 {
    margin-bottom: 12px;
  }

  /* Service page feature panels and cooperation blocks. */
  .clip-left,
  .clip-right {
    width: 100% !important;
    margin: 0 !important;
  }

  .clip-left + .clip-right,
  .w-full.text-white.mt-12.justify-between.relative.h-320px {
    height: auto !important;
  }

  .w-full.text-white.mt-12.justify-between.relative.h-320px {
    flex-direction: column;
    gap: 16px;
  }

  .w-full.text-white.mt-12.justify-between.relative.h-320px > .absolute {
    display: none;
  }

  .w-full.text-white.mt-12.justify-between.relative.h-320px ul {
    font-size: 16px !important;
  }

  .w-full.text-white.mt-12.justify-between.relative.h-320px li {
    align-items: flex-start;
  }

  /* Service page: replace desktop overlays with readable mobile sections. */
  .service-features .clip-left,
  .service-features .clip-right {
    min-height: 0;
    background: #0082c3;
  }

  .service-features .clip-right {
    background: #00a86e;
  }

  .service-features .clip-left > div,
  .service-features .clip-right > div {
    color: #fff;
  }

  .service-features li {
    gap: 8px;
    line-height: 1.6;
  }

  .service-features li span {
    flex: 0 0 auto;
  }

  .service-panorama .min-h-720px > .absolute {
    padding: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
  }

  .service-panorama .min-h-720px > .absolute > .space-y-0,
  .service-panorama .min-h-720px > .absolute > .relative.flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .service-panorama .min-h-720px .w-150px,
  .service-panorama .min-h-720px [class~="w-[150px]"] {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
  }

  .service-panorama .min-h-720px .relative.flex > .absolute {
    display: none;
  }

  .service-panorama .min-h-720px h1,
  .service-panorama .min-h-720px h6 {
    margin: 0;
  }

  .service-panorama .min-h-720px p {
    line-height: 1.6;
  }

  .service-goals .relative.border.rounded-xl {
    padding: 0 16px;
  }

  .service-goals .relative.border.rounded-xl > [class~="grid"] {
    gap: 28px !important;
  }

  .service-goals .group > div {
    flex-wrap: wrap;
  }

  .service-cooperation .w-\[35\%\],
  .service-cooperation .w-\[65\%\] {
    width: 100% !important;
  }

  .service-cooperation .w-\[65\%\] > .flex.items-start > div:nth-child(2) > div:first-child {
    display: none;
  }

  .service-cooperation .w-\[65\%\] > .flex.items-start > div:nth-child(2) {
    padding-top: 0;
  }

  .service-cooperation .bg-\[\#F1F1F1\] > .w1480 > img {
    margin-top: 24px;
  }

  .relative.border.rounded-xl > .absolute {
    position: relative;
    display: inline-block;
    width: auto !important;
    margin: 0;
    padding: 10px 24px !important;
  }

  .relative.border.rounded-xl > [class~="grid"] {
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }

  .bg-\[\#F1F1F1\] .w-80 {
    width: 100%;
    max-width: 320px;
  }

  .bg-\[\#F1F1F1\] .w-\[65\%\] > .flex.items-start {
    flex-direction: column;
    gap: 12px;
  }

  .bg-\[\#F1F1F1\] .w-\[65\%\] > .flex.items-start > div:last-child {
    padding-left: 16px !important;
  }

  .bg-\[\#F1F1F1\] .w-90 {
    width: min(360px, 100%);
    height: auto;
    aspect-ratio: 1;
  }

  .sustainability-content .ml-40,
  .sustainability-content .ml-40px,
  .sustainability-content .mr-40px {
    margin: 0 !important;
  }

  .sustainability-content .sustainability-copy,
  .sustainability-content .sustainability-copy p,
  .sustainability-content .info-box,
  .sustainability-content .info-box p {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sustainability-content .sustainability-stats {
    margin-top: 32px;
    padding: 24px 0 !important;
  }

  .sustainability-content .sustainability-stats-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .sustainability-content .sustainability-stats-row > div {
    padding: 16px 0 !important;
    border-bottom: 1px solid #e5e7eb;
  }

  .sustainability-content .sustainability-stats-row > div:last-child {
    border-bottom: 0;
  }

  .sustainability-content .sustainability-stats-row .absolute {
    display: none;
  }

  .sustainability-content .sustainability-stats-row [class~="text-left"] {
    text-align: left;
  }

  .sustainability-content .w1480 > .flex:nth-of-type(3) {
    flex-direction: column-reverse !important;
  }

  footer.min-w-\[1000px\],
  footer[class~="min-w-[1000px]"] {
    min-width: 0 !important;
  }

  footer .w {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  footer .w.pt-16.pb-12,
  footer .w.py-5 {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  footer .flex.gap-x-30 {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  footer .flex-shrink-0 {
    align-self: flex-start;
  }

  .gttop {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 767px) {
  [class~="grid-cols-2"],
  [class~="grid-cols-3"],
  [class~="grid-cols-4"],
  [class~="grid-cols-5"] {
    grid-template-columns: 1fr !important;
  }

  [class~="gap-20"] {
    gap: 24px !important;
  }

  .heroSwiper {
    height: 58vh !important;
    min-height: 360px;
  }

  .heroSwiper .w {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  .heroSwiper .banner-text {
    font-size: 32px !important;
  }

  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 18px;
  }

  .industry-solution .item {
    flex-basis: 100%;
  }

  .download-content .body li {
    align-items: center;
    padding: 18px;
  }

  .download-content .body li .img-box {
    flex: 0 0 38%;
  }

  .download-content .body li .box {
    flex: 1;
    margin-left: 16px !important;
  }

  main [class~="h-[670px]"] {
    height: 360px !important;
  }

  main [class~="h-[670px]"] [class~="grid"] {
    padding: 24px 14px !important;
  }

  .min-h-720px .w-150px,
  .min-h-720px [class~="w-[150px]"] {
    flex-basis: 100%;
  }

  .home-milestone .gallery-top .swiper-button-prev {
    left: 20px;
  }

  .home-milestone .gallery-top .swiper-button-next {
    left: 94px;
  }
}