/* 
 * Mobile Responsive Common CSS
 * 所有页面共享的移动端适配样式
 * 适用于手机和平板设备
 */

/* ============================================
   通用移动端基础设置
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 确保所有section内容不会横向溢出 */
  .section,
  section.section {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  /* 只影响wrapper内的container，不影响导航栏 */
  .wrapper .container,
  .section .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* 只影响wrapper内的row，不影响导航栏 */
  .wrapper .row,
  .section .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 只影响wrapper内的列，不影响导航栏 */
  .wrapper [class*="col-"],
  .section [class*="col-"] {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
}

/* ============================================
   Section 内边距调整
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* Section 内边距调整 */
  section[style*="padding: 100px 0"],
  .section[style*="padding: 100px 0"] {
    padding: 60px 0 !important;
  }
  
  section[style*="padding: 80px 0"],
  .section[style*="padding: 80px 0"] {
    padding: 50px 0 !important;
  }
  
  section[style*="padding: 120px 0"],
  .section[style*="padding: 120px 0"] {
    padding: 70px 0 !important;
  }
}

/* ============================================
   标题样式通用适配
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 标题区域 */
  .lrn-titles {
    margin-bottom: 40px !important;
  }
  
  .lrn-subtitle {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    color: #667eea !important;
  }
  
  .lrn-title,
  h3.lrn-title {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    color: #1a202c !important;
  }
  
  .lrn-titles p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 0 10px !important;
    color: #4a5568 !important;
  }
  
  /* 大标题 */
  h1 {
    font-size: 32px !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
  
  h5 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================
   卡片布局通用样式
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 3列卡片 -> 单列 */
  .wrapper .col-xs-12.col-sm-12.col-md-6.col-lg-3,
  .section .col-xs-12.col-sm-12.col-md-6.col-lg-3,
  .wrapper .col-xs-12.col-sm-12.col-md-4.col-lg-4,
  .section .col-xs-12.col-sm-12.col-md-4.col-lg-4 {
    margin-bottom: 20px !important;
  }
  
  /* 2列卡片 -> 单列 */
  .wrapper .col-xs-12.col-sm-12.col-md-6.col-lg-6,
  .section .col-xs-12.col-sm-12.col-md-6.col-lg-6 {
    margin-bottom: 25px !important;
  }
  
  /* 卡片内边距调整 */
  .wrapper div[style*="padding: 40px"],
  .section div[style*="padding: 40px"] {
    padding: 30px 25px !important;
  }
  
  .wrapper div[style*="padding: 45px"],
  .section div[style*="padding: 45px"] {
    padding: 30px 25px !important;
  }
  
  .wrapper div[style*="padding: 50px"],
  .section div[style*="padding: 50px"] {
    padding: 35px 25px !important;
  }
}

/* ============================================
   按钮和链接通用样式
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* CTA按钮调整 */
  .wrapper a[style*="padding: 18px"],
  .section a[style*="padding: 18px"] {
    padding: 16px 30px !important;
    font-size: 15px !important;
  }
  
  .wrapper a[style*="padding: 20px"],
  .section a[style*="padding: 20px"] {
    padding: 16px 32px !important;
    font-size: 15px !important;
  }
  
  /* 按钮容器 - 垂直堆叠 */
  .wrapper div[style*="display: flex"][style*="gap: 20px"],
  .section div[style*="display: flex"][style*="gap: 20px"] {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  /* 按钮全宽 */
  .wrapper a[href*=".html"],
  .section a[href*=".html"] {
    display: inline-block !important;
  }
}

/* ============================================
   图标样式优化
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 图标容器大小调整 */
  .wrapper div[style*="width: 70px"][style*="height: 70px"],
  .section div[style*="width: 70px"][style*="height: 70px"] {
    width: 60px !important;
    height: 60px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  }
  
  .wrapper div[style*="width: 80px"][style*="height: 80px"],
  .section div[style*="width: 80px"][style*="height: 80px"] {
    width: 65px !important;
    height: 65px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  }
  
  .wrapper div[style*="width: 90px"][style*="height: 90px"],
  .section div[style*="width: 90px"][style*="height: 90px"] {
    width: 70px !important;
    height: 70px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  }
  
  /* 图标大小调整 */
  .wrapper i[style*="font-size: 38px"],
  .section i[style*="font-size: 38px"] {
    font-size: 32px !important;
  }
  
  .wrapper i[style*="font-size: 45px"],
  .section i[style*="font-size: 45px"] {
    font-size: 36px !important;
  }
  
  .wrapper i[style*="font-size: 50px"],
  .section i[style*="font-size: 50px"] {
    font-size: 40px !important;
  }
  
  /* 所有图标增加阴影提升可见性 */
  .wrapper i.las,
  .wrapper i.la,
  .section i.las,
  .section i.la {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) !important;
  }
}

/* ============================================
   渐变卡片颜色优化
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 渐变卡片文字阴影 */
  .wrapper div[style*="linear-gradient"] h4,
  .wrapper div[style*="linear-gradient"] h5,
  .section div[style*="linear-gradient"] h4,
  .section div[style*="linear-gradient"] h5 {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  }
  
  .wrapper div[style*="linear-gradient"] p,
  .section div[style*="linear-gradient"] p {
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  }
  
  /* 渐变卡片图标容器 */
  .wrapper div[style*="linear-gradient"] div[style*="background: rgba(255,255,255"],
  .section div[style*="linear-gradient"] div[style*="background: rgba(255,255,255"] {
    background: rgba(255,255,255,0.3) !important;
  }
}

/* ============================================
   白色卡片颜色优化
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 白色卡片标题 */
  .wrapper div[style*="background: white"] h4,
  .wrapper div[style*="background: white"] h5,
  .section div[style*="background: white"] h4,
  .section div[style*="background: white"] h5 {
    color: #1a202c !important;
  }
  
  /* 白色卡片描述 */
  .wrapper div[style*="background: white"] p,
  .section div[style*="background: white"] p {
    color: #4a5568 !important;
  }
  
  /* 白色卡片阴影增强 */
  .wrapper div[style*="background: white"][style*="box-shadow"],
  .section div[style*="background: white"][style*="box-shadow"] {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  }
}

/* ============================================
   标签（Tags）样式
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 标签容器 */
  .wrapper div[style*="display: flex"][style*="gap: 15px"],
  .section div[style*="display: flex"][style*="gap: 15px"] {
    gap: 10px !important;
  }
  
  /* 标签样式 */
  .wrapper div[style*="padding: 8px 16px"],
  .section div[style*="padding: 8px 16px"] {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  
  /* 增强标签背景对比度 */
  .wrapper div[style*="background: #f7fafc"],
  .section div[style*="background: #f7fafc"] {
    background: #e2e8f0 !important;
  }
  
  .wrapper div[style*="background: #f0f9ff"],
  .section div[style*="background: #f0f9ff"] {
    background: #dbeafe !important;
  }
  
  .wrapper div[style*="background: #f0fdf4"],
  .section div[style*="background: #f0fdf4"] {
    background: #dcfce7 !important;
  }
  
  .wrapper div[style*="background: #fef2f2"],
  .section div[style*="background: #fef2f2"] {
    background: #fee2e2 !important;
  }
}

/* ============================================
   Footer（页脚）通用样式
   ============================================ */

@media screen and (max-width: 1024px) {
  
  .lrn-footer {
    padding-bottom: 40px !important;
  }
  
  .lrn-footer .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Footer Logo */
  .lrn-footer .col-xs-10.col-sm-10.col-md-4.col-lg-2 {
    margin-bottom: 30px !important;
    text-align: center !important;
  }
  
  .lrn-footer .lrn-logo {
    text-align: center !important;
    justify-content: center !important;
  }
  
  .lrn-footer .lrn-logo img {
    max-width: 150px !important;
  }
  
  /* Footer Contact Info */
  .lrn-footer .lrn-f-contact,
  .lrn-footer .lrn-f-hours {
    margin-bottom: 25px !important;
  }
  
  .lrn-footer .lrn-f-contact ul,
  .lrn-footer .lrn-f-hours ul {
    padding-left: 0 !important;
  }
  
  .lrn-footer .lrn-f-contact ul li,
  .lrn-footer .lrn-f-hours ul li {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    color: #4a5568 !important;
  }
  
  .lrn-footer .lrn-f-contact ul li i {
    font-size: 18px !important;
    margin-right: 10px !important;
    color: #667eea !important;
  }
  
  .lrn-footer .lrn-f-contact ul li em {
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 5px !important;
    color: #2d3748 !important;
  }
  
  .lrn-footer .lrn-f-hours ul li a {
    color: #4a5568 !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
  }
  
  .lrn-footer .lrn-f-hours ul li a:hover {
    color: #667eea !important;
  }
}

/* ============================================
   图片和媒体响应式
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 确保wrapper内的图片响应式 */
  .wrapper img,
  .section img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* 背景图片调整 */
  section[style*="background: url"],
  .section[style*="background: url"] {
    background-size: cover !important;
    background-position: center !important;
  }
  
  /* 修复可能的水平滚动 */
  .wrapper * {
    max-width: 100%;
  }
}

/* ============================================
   Flex容器响应式
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 确保wrapper内的flex容器响应式 */
  .wrapper div[style*="display: flex"],
  .section div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  /* Flex对齐调整 */
  .wrapper div[style*="align-items: center"],
  .section div[style*="align-items: center"] {
    align-items: flex-start !important;
  }
}

/* ============================================
   性能优化
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 减少动画以提升性能 */
  .element-anim-1,
  .scroll-animate {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* 优化背景效果 */
  div[style*="backdrop-filter"] {
    backdrop-filter: none !important;
  }
  
  /* 确保hover效果在移动端不会卡住 */
  @media (hover: none) {
    a[onmouseover],
    div[onmouseover] {
      transition: none !important;
    }
  }
}

/* ============================================
   手机端专属（小于768px）
   ============================================ */

@media screen and (max-width: 767px) {
  
  /* Container 更小的内边距 */
  .wrapper .container,
  .section .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Section 更小的内边距 */
  section[style*="padding: 100px 0"],
  section[style*="padding: 60px 0"],
  .section[style*="padding: 100px 0"],
  .section[style*="padding: 60px 0"] {
    padding: 40px 0 !important;
  }
  
  /* Titles */
  .lrn-title,
  h3.lrn-title {
    font-size: 24px !important;
  }
  
  h1 {
    font-size: 28px !important;
  }
  
  h2 {
    font-size: 24px !important;
  }
  
  /* 按钮更紧凑 */
  .wrapper a[style*="padding"],
  .section a[style*="padding"] {
    padding: 14px 24px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   平板端专属（768px - 1024px）
   ============================================ */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  
  /* Container 适中的宽度 */
  .wrapper .container,
  .section .container {
    max-width: 720px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  
  /* 3列卡片 -> 2列 */
  .wrapper .col-xs-12.col-sm-12.col-md-6.col-lg-3,
  .section .col-xs-12.col-sm-12.col-md-6.col-lg-3 {
    width: 50% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* 4列卡片 -> 2列 */
  .wrapper .col-xs-12.col-sm-12.col-md-4.col-lg-4,
  .section .col-xs-12.col-sm-12.col-md-4.col-lg-4 {
    width: 50% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* 2列卡片保持单列 */
  .wrapper .col-xs-12.col-sm-12.col-md-6.col-lg-6,
  .section .col-xs-12.col-sm-12.col-md-6.col-lg-6 {
    width: 100% !important;
  }
}

/* ============================================
   文本对齐和间距
   ============================================ */

@media screen and (max-width: 1024px) {
  
  /* 居中对齐的元素 */
  .wrapper .align-center,
  .section .align-center {
    text-align: center !important;
  }
  
  /* 段落间距 */
  .wrapper p,
  .section p {
    margin-bottom: 15px !important;
  }
  
  /* 列表间距 */
  .wrapper ul li,
  .wrapper ol li,
  .section ul li,
  .section ol li {
    margin-bottom: 10px !important;
  }
}