/**
 * Hero Component Styles
 * 英雄区域组件样式 - 可复用的顶部展示区域
 * @author: Assistant
 * @description: 模块化CSS样式，支持多设备响应式布局，采用BEM规范
 */

/* ==========================================================================
   Design Tokens - 设计令牌
   ========================================================================== */
:root {
}

/* ==========================================================================
   Hero Component - 英雄区域组件
   ========================================================================== */

/**
 * 英雄区域主容器
 * 用于页面顶部的大型展示区域，支持背景图片和居中内容
 */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 300px;
}

/**
 * 英雄区域背景图片修饰符
 * 为不同页面提供不同的背景图片
 */
.hero--company {
  background-image: url(../../image/hero-bg.png);
}

.hero--solution {
  background-image: url(../../image/hero-bg.png);
}

.hero--about {
  background-image: url(../../image/hero-bg.png);
}
.hero-allbg {
  background-image: url(../../image/hero-bg.png);
}
.hero-solution {
  background-image: url(../../image/solution-bg.png);
}
.hero-education {
  background-image: url(../../image/education-bg.png);
}
.hero-medical {
  background-image: url(../../image/medical-bg.png);
}
.hero-park {
  background-image: url(../../image/park-bg.png);
}
.hero-build {
  background-image: url(../../image/build-bg.png);
}
.hero-hotel {
  background-image: url(../../image/hotel-bg.png);
}
.hero-cultural {
  background-image: url(../../image/cultural-bg.png);
}
.hero-contactUs {
  background-image: url(../../image/contact-bg.png);
}

/**
 * 英雄区域内容容器
 * 包含所有文本内容，支持响应式宽度
 */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 62.5%;
  position: relative;
  z-index: 2;
  color:#ffffff;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
}

/**
 * 英雄区域内容居中修饰符
 * 用于需要居中对齐内容的场景
 */
.hero__content--center {
  align-items: center;
  text-align: center;
}

/**
 * 英雄区域副标题
 * 通常用于显示分类或简短描述
 */
.hero__subtitle {
  line-height: 32px;
  letter-spacing: 0;
  font-size: 30px;
  margin: 0;
  font-weight: 400;
  display:none;
}

/**
 * 英雄区域主标题
 * 页面的主要标题，通常是最大的文字
 */
.hero__title {
  line-height: 69px;
  letter-spacing: 0;
  font-size: 54px;
  font-weight: 700;
  margin:0;
}

/**
 * 英雄区域描述文本
 * 用于详细说明或补充信息
 */
.hero__description {
  margin: 20px 0 0;
  line-height: 32px;
  letter-spacing: 0;
  font-size: 20px;
  font-weight: 400;
}

/**
 * 英雄区域动画效果
 * 添加淡入动画
 */
.hero--animated .hero__content {
  animation: heroFadeIn 1s ease-out;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * 英雄区域渐变遮罩
 * 创建从上到下的渐变遮罩效果
 */
.hero--gradient-overlay::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* Mobile Styles - 移动端样式 (320px - 767px) */
@media (max-width: 767px) {

  .hero {
    height: 4.267rem  /* 320/75 */;
    text-align: center;
    align-items: center;
  }

  .hero__content {
    width: 73.6%;
    text-align: center;
    align-items: center;
  }

  .hero__title {
    font-size: 0.64rem  /* 48/75 */;
    line-height: 0.8rem  /* 60/75 */;
  }

  .hero__subtitle {
    font-size: 0.32rem  /* 24/75 */;
    line-height: 0.48rem  /* 36/75 */;
  }

  .hero__description {
    font-size: 0.32rem  /* 24/75 */;
    line-height: 0.48rem  /* 36/75 */;
    margin: 0.32rem  /* 24/75 */ 0 0 0;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
  }

}