/*
 * Yanglin Metal responsive overrides.
 * Load this file after the existing site and navigation styles.
 */

html{overflow-x:clip}body{min-width:320px;overflow-wrap:break-word}iframe,video,svg{max-width:100%}.container{max-width:var(--container)}

@media(max-width:1280px){
  .container{width:calc(100% - 64px)}
  .nav__links{gap:10px}.nav-link{padding-inline:8px}.quote-btn{padding-inline:14px;white-space:nowrap}
  .hero h1,.page-hero h1{font-size:52px}
  .home-hero,.home-hero .hero__inner{min-height:620px}
  .series-card{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .series-card>div{padding:24px}
  .footer__grid{grid-template-columns:1.25fr repeat(3,minmax(0,1fr))}
}

@media(max-width:1024px){
  .container{width:calc(100% - 48px)}
  .topbar__contact{width:100%;justify-content:flex-end;gap:18px}
  .hero h1,.page-hero h1{font-size:46px}
  .stats{padding:28px 20px}.stat strong{font-size:36px}
  .series-grid{grid-template-columns:1fr}.series-card img{height:390px}
  .split{gap:32px}
  .catalog{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;}
  .news-item{grid-template-columns:minmax(280px,36%) minmax(0,1fr) 64px;gap:22px}
}

@media(max-width:760px){
  html{scroll-padding-top:70px}
  .container{width:calc(100% - 32px)}
  .nav{position:sticky;top:0}.nav .container{gap:16px}
  .logo{width:104px;height:42px}
  .menu-btn{flex:0 0 44px;width:44px;height:44px}
  .nav__links{max-height:calc(100dvh - 70px);padding:10px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overscroll-behavior:contain}
  .nav-top,.nav-link{min-width:0}
  .dropdown-list a,.mega-columns a,.dropdown-all{min-height:44px}
  .hero,.hero__inner,.home-hero,.home-hero .hero__inner{min-height:clamp(430px,72svh,560px)}
  .page-hero,.page-hero .hero__inner{min-height:clamp(300px,62svh,400px)}
  .hero__inner{padding-block:48px}
  .hero h1,.home-hero h1,.page-hero h1{max-width:90%;font-size:clamp(34px,9vw,42px);line-height:1.12}
  .hero h1 br,.home-hero h1 br{display:none}
  .hero p{font-size:17px}
  .home-hero>img{object-position:62% center}
  .home-hero:after{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.76) 70%,rgba(255,255,255,.32) 100%)}
  .home-hero .btn{margin-top:22px;font-size:14px}
  .stats{margin-top:-28px;padding:20px 14px;gap:18px 8px;border-radius:8px}
  .stat{min-width:0}.stat strong{font-size:28px}.stat span{display:block;font-size:13px;line-height:1.35}
  .section,.section--tight{padding:20px 0}.section-title{margin-bottom:26px}
  .section-title h2,.split h2,.about-copy h2,.catalog-main h2,.contact-info h2{font-size:30px;line-height:1.2}
  .cards-3,.cards-4,.products-grid,.series-grid{gap:20px}
  .card img{height:auto;aspect-ratio:16/10}.card__body{padding:20px}
  .series-card{grid-template-columns:1fr}.series-card img{height:auto;aspect-ratio:16/10}.series-card>div{padding:22px}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-tile{min-width:0}.product-tile h3{margin-top:10px;line-height:1.35}
  .split,.about-intro,.catalog,.contact-grid,.product-detail{gap:28px}
  #certifications .split{grid-template-columns: 1fr;}
  .split__image{order:-1}.cards-4>div{min-width:0}
  .feature-band .cards-4 img{
    width: 40px;
    margin:0;
  }
  .placeholder{min-height: unset;}
  #certifications .bullets{padding-left:0;}
  #certifications .split .bullets li{margin: 10px 0;}
  .honor-item{
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
  }
  .metrics{padding:22px 14px}
  .metric strong{font-size:20px;}
  .service-tabs a,.filter-tabs button{min-height:48px;padding:14px 12px}
  .step{min-height:0}.step__copy{padding:24px 20px}.step__copy strong{font-size:34px}
  .sidebar-box{margin-bottom:18px}.sidebar-box h3{padding:18px;font-size:22px}.sidebar-box__body{padding:20px}
  .news-item{grid-template-columns:1fr;gap:14px;padding:22px 0}.news-item h3{margin-block:4px}
  .news-date{display:flex;align-items:baseline;gap:8px}.news-date strong{font-size:26px}
  .form-card,.detail-panel{padding:22px 18px;margin-bottom:20px}
  .field input,.field select,.field textarea{min-height:46px;font-size:16px}
  .gallery-main{min-height:0;}.thumbs{gap:8px}.thumbs span{height:auto;aspect-ratio:1}
  .detail-copy h1{font-size:32px}.cta{padding:24px 18px}
  .footer{padding-top:52px}.footer__grid{gap:32px 24px}
  .card h3{margin: 0px 0 15px;}
  aside{display: none;}
  .proTop-detail{grid-template-columns: 1fr;}
  .proSwiper2 img{height:330px;}
  .proSwiper .swiper-slide{height:100px}
  .proBottom{grid-template-columns:1fr}
  .detail-panels{display: block;margin-top: 0px;}
  table{width:100% !important}
  .project-category-nav{display: none;}
  .news-grid{grid-template-columns:1fr}
  .fanye{display: none;}
  .news-c-content{margin-bottom:0;}
  #contact aside{
    display: block;
  }
}

@media(max-width:480px){
  .container{width:calc(100% - 24px)}
  .hero,.hero__inner,.home-hero,.home-hero .hero__inner{min-height:clamp(300px,68svh,400px)}
  .hero h1,.home-hero h1,.page-hero h1{font-size:clamp(24px,4.5vw,38px);font-weight:500}
  .hero img{height:400px}
  .btn{min-height:46px;padding-inline:18px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:last-child{grid-column:1/-1}
  .cards-4,.products-grid,.footer__grid{grid-template-columns:1fr}
  .product-tile img{aspect-ratio:16/10}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .about-gallery{grid-template-columns:repeat(3,1fr)}
  .about-gallery .main{height:auto;aspect-ratio:16/10}
  .about-gallery img{height:auto;aspect-ratio:1}
  .project-tabs{grid-template-columns:1fr}
  .search input{min-width:0;height:50px}.search button{flex:0 0 56px;width:56px}
  .footer__bottom{margin-top:32px;overflow-wrap:anywhere}
}

@media(max-width:360px){
  .container{width:calc(100% - 20px)}
  .stats,.metrics{grid-template-columns:1fr}.stat:last-child{grid-column:auto}
  .hero h1,.home-hero h1,.page-hero h1{font-size:30px}
}

@media(max-width:760px) and (orientation:landscape){
  .hero,.hero__inner,.home-hero,.home-hero .hero__inner,.page-hero,.page-hero .hero__inner{min-height:430px}
}


@media (min-width: 761px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .nav {
    position: sticky;
    top: 44px; /* 等于 topbar 的高度 */
    z-index: 30;
  }

  html {
    scroll-padding-top: 127px; /* 44px topbar + 83px header */
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none}
}