/* Mobile Responsive Styles - pewdo.com v2.0 */
/* Prevent horizontal scroll */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

@media screen and (max-width: 1024px) {
  .container, .wrapper { width: 100% !important; max-width: 100% !important; }
  .sidebar { display: none !important; }
  .main-content { width: 100% !important; float: none !important; }
}

@media screen and (max-width: 768px) {
  * { box-sizing: border-box; }
  body { font-size: 14px; line-height: 1.6; margin: 0; padding: 0; overflow-x: hidden; }
  .container, .wrapper, .main { width: 100% !important; max-width: 100% !important; padding: 0 12px !important; margin: 0 auto !important; }
  .header, .nav, .navbar { display: flex; flex-direction: column; padding: 10px !important; }
  .header .logo, .nav .logo { text-align: center; margin-bottom: 10px; }
  .nav ul, .menu ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; list-style: none; }
  .nav ul li, .menu ul li { margin: 4px 6px; }
  .nav a, .menu a { font-size: 14px; padding: 8px 12px; display: block; }
  .banner, .swiper, .carousel { height: auto !important; min-height: 180px; overflow: hidden; }
  .banner img, .swiper img, .carousel img { width: 100% !important; height: auto !important; max-height: 280px; object-fit: cover; }
  .content, .article-content { padding: 15px 10px !important; word-wrap: break-word; overflow-wrap: break-word; }
  .content h1, .article-content h1 { font-size: 20px; margin: 15px 0 10px; line-height: 1.3; }
  .content h2, .article-content h2 { font-size: 18px; margin: 12px 0 8px; line-height: 1.3; }
  .content h3, .article-content h3 { font-size: 16px; margin: 10px 0 6px; }
  .content p, .article-content p { font-size: 14px; line-height: 1.8; margin: 8px 0; }
  .content img, .article-content img { max-width: 100% !important; height: auto !important; display: block; margin: 10px auto; }
  .sidebar, .aside { display: none !important; }
  .footer { padding: 20px 10px !important; text-align: center; }
  .footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .footer a { font-size: 12px; margin: 3px; }
  .contact-bar, .tel-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; z-index: 999; background: #e63946; }
  .contact-bar a, .tel-bar a { flex: 1; text-align: center; padding: 14px 8px; color: #fff; text-decoration: none; font-size: 14px; font-weight: bold; }
  table { width: 100% !important; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid, .row { display: flex; flex-direction: column; }
  .grid > div, .row > div { width: 100% !important; margin-bottom: 15px; }
  .am-u-sm-1, .am-u-sm-2, .am-u-sm-3, .am-u-sm-4, .am-u-sm-5, .am-u-sm-6, .am-u-sm-7, .am-u-sm-8, .am-u-sm-9, .am-u-sm-10, .am-u-sm-11, .am-u-sm-12 { width: 100% !important; }
  .am-g { margin: 0 !important; }
  .breadcrumb { font-size: 12px; padding: 8px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .article-meta { font-size: 12px; color: #999; margin: 5px 0; }
  .related-list, .article-list { display: flex; flex-direction: column; }
  .related-list li, .article-list li { margin-bottom: 10px; }
  /* Touch-friendly tap targets */
  a, button { min-height: 44px; min-width: 44px; }
  .nav a { min-height: 40px; }
  /* Hide slow-loading elements on mobile */
  .desktop-only { display: none !important; }
}

@media screen and (max-width: 480px) {
  body { font-size: 13px; }
  .header { padding: 8px !important; }
  .nav a, .menu a { font-size: 13px; padding: 6px 8px; }
  .content h1 { font-size: 18px; }
  .content h2 { font-size: 16px; }
  .banner img, .swiper img { max-height: 200px; }
  .footer a { font-size: 11px; }
  .contact-bar a, .tel-bar a { font-size: 13px; padding: 12px 6px; }
}

@media screen and (max-width: 360px) {
  body { font-size: 12px; }
  .nav ul li, .menu ul li { margin: 3px 4px; }
  .nav a, .menu a { font-size: 12px; padding: 5px 6px; }
  .content h1 { font-size: 16px; }
  .content p { font-size: 12px; line-height: 1.7; }
}

@media screen and (max-width: 320px) {
  .nav a, .menu a { font-size: 11px; padding: 4px 5px; }
  .contact-bar a { font-size: 12px; padding: 10px 4px; }
}