/* index.css - 已清理和优化 */

/* ===== Hero 区域样式 ===== */
.hero {
  position: relative;
  text-align: center;
  color: #fff;
  
  /* ✅ 用流式高度和内边距代替固定值，保证不同屏幕正常显示 */
  min-height: clamp(300px, 40vh, 560px);
  padding-top: clamp(24px, 6vh, 80px);
  padding-bottom: 0;

  background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.9)), url('../images/orange-t.PNG');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--text-light);
  overflow: hidden;
  display: flex;
  flex-direction: column; 
}

/* 中间内容区域：占据中间的可伸缩空间，并在自身内居中 */
.hero-main {
  flex: 1;                            /* 吃掉中间空间，把按钮推到底 */
  display: flex;
  align-items: center;                /* 垂直居中 hero-main 里的内容 */
  justify-content: center;            /* 水平居中 */
}

/* hero 内部容器居中 */
.hero .container {
  text-align: center;
}
        
.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 2rem;
}
 
/* Hero 内部文字自适应布局 */
.hero h1 {
  line-height: 1.15;
  margin: 0 0 clamp(12px, 2.5vh, 24px);
  font-size: clamp(28px, 5vw + 8px, 64px);
  max-width: 20ch; /* 中文标题用 */
  margin-left: auto;   
  margin-right: auto;  
  white-space: nowrap; /* 保留给中文 */
}

/* 英文标题需要换行，单独设置 */
.hero h1.lang-en {
  white-space: normal; /* 🔑 关键：允许换行 */
  max-width: 90%; /* 或者 800px，根据需要调整 */
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.3; /* 换行后增加行高 */
  /* ✅ 使用流式字体代替固定的3rem */
  font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
}

.hero h2 {
  margin: 0 auto clamp(16px, 3vh, 32px);
  font-size: clamp(14px, 1.2vw + 8px, 20px);
  line-height: 1.6;
  max-width: 48ch;
  opacity: .95;
}

/* Hero 按钮流式宽高 */
.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: clamp(10px, 1.2vw, 16px) clamp(20px, 2.4vw, 32px);
  font-size: clamp(16px, 1.2vw + 10px, 20px);
  border-radius: 12px;
}
   
.btn-h1 {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--text-light);
    padding: 0.8rem 1.5rem;
    margin: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
    font-size: 30px;
}

/* ===== 图片轮播样式 ===== */
.photo-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/6;    /* 比例自适应：无抖动布局 */
  margin-bottom: 2rem;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0.6s ease; /* 过渡由 JS 触发（translateX） */
}

.slides img {
  flex: 0 0 100%;          /* 每次只显示一整张 */
  width: 100%;
  height: 100%;            /* 高度随容器比例自适应 */
  object-fit: cover;
}

/* 左右箭头 */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.slider-arrow:hover { 
  background: rgba(0, 0, 0, 0.5); 
}

.slider-arrow:focus { 
  outline: 2px solid var(--secondary-color); 
  outline-offset: 2px; 
}

.slider-arrow.prev { left: 12px; }
.slider-arrow.next { right: 12px; }

/* 小圆点指示器 */
.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.slider-dot.active { 
  background: #fff; 
}

/* 动效偏好：为低动效用户关闭过渡 */
@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
}

/* ===== 倒计时样式 ===== */
.countdown {
    background-color: var(--primary-color);
    color: white;
    padding: 2rem;
    border-radius: 50px;
    text-align: center;
    margin: 2rem 0;
}

.countdown-1 {
    font-size: 2.5rem;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.countdown-unit {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 3rem;
    border-radius: 10px;
    min-width: 80px;
    font-size: 80%;
}
        
.countdown-number {
    font-size: 4rem;
    font-weight: bold;
}

.countdown-font {
    font-size: 2rem;
}

/* ===== 特色网格 ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3rem;

}
        
.feature-card {
    text-align: center;
    padding: 2rem 1rem;
}

/* Feature 图片图标：统一到 88–128px，自适应并居中 */
.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.feature-icon img {
  display: block;
  width: clamp(88px, 12vw, 250px);
  height: auto;
  object-fit: cover;               /* 居中裁剪，大小统一 */
  border-radius: 8px;              /* 可选：圆角 */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .08));
}

.feature-card img {
  width: 85%;
  height: auto;
}

/* ===== 统计数据样式 ===== */
.stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: 3rem 0;
}
        
.stat-item {
    padding: 1rem;
}
        
.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--secondary-color);
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {                     
    .hero h1 {
        font-size: 2.2rem;
    }
            
    .hero p {
        font-size: 1rem;
    }
    
    .countdown-1 {
        font-size: 1.8rem;
    }
    
    .countdown-timer {
        gap: 1rem;
    }
    
    .countdown-unit {
        padding: 2rem 1rem;
        min-width: 60px;
    }
    
    .countdown-number {
        font-size: 2.5rem;
    }
    
    .countdown-font {
        font-size: 1.2rem;
    }

    .feature-grid {
    grid-template-columns: repeat(2, 1fr); /* 手机一行2个 */
  }
}

/* ✅ 新增：更小屏幕的优化 */
@media (max-width: 480px) {
  .hero {
    min-height: clamp(320px, 55vh, 560px);
  }
  
  .hero h1 {
    font-size: clamp(1.3rem, 5vw, 2rem);
    max-width: 90%;
  }
  
  .hero h1.lang-en {
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
    line-height: 1.4;
  }
  
  .hero h2 {
    font-size: clamp(0.85rem, 3vw, 1rem);
    max-width: 95%;
  }
  
  .btn-h1 {
    font-size: 1.2rem;  /* 缩小按钮字体 */
    padding: 0.6rem 1.2rem;
    margin: 0.5rem 0.8rem;
  }
  
  .feature-card { 
    padding: 1.5rem 1rem; 
  }
  
  .countdown {
    padding: 1.5rem 1rem;
    border-radius: 30px;
  }
  
  .countdown-1 {
    font-size: 1.5rem;
  }
  
  .countdown-timer {
    gap: 0.5rem;
    flex-wrap: wrap; /* 允许换行 */
  }
  
  .countdown-unit {
    padding: 1.5rem 0.8rem;
    min-width: 70px;
    flex: 1 1 calc(50% - 0.5rem); /* 两列布局 */
  }
  
  .countdown-number {
    font-size: 2rem;
  }
  
  .countdown-font {
    font-size: 1rem;
  }
  
  .stats {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .stat-item {
    flex: 1 1 calc(50% - 1rem); /* 两列布局 */
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

/* ========================================
   以下样式对应HTML中被注释的内容，已注释
   ======================================== */

/* 
.hero-video {
  width: 100%;
  height: clamp(450px, 70vh, 930px);
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 12px;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

/* ========================================
   以下样式在HTML中未使用，已删除：
   - .page-hero
   - .external-links, .external-link
   - .tabs, .tab, .tab-content
   - .speaker-img, .sponsor-img
   - .page-content
   ======================================== */