/*
 * home.css — 首页专属样式（仅首页加载）
 * 静态稿 index-4.html 头部内联 <style> 抽出 + 首页各板块定制
 * 头部导航 / footer 等全站共用样式在 global.css（所有页面加载）
 */

/* =========================================
   Industry Solutions：5 等分 + hover 全宽展开
   （交互参考 Misiom Case Studies：鼠标滑过哪个卡片，
    该卡片平滑展开到整个板块宽度，带标题与详解）
   ========================================= */
.Client-gallery-area .options {
  position: relative;
  gap: 20px;
}

/* Industry Solutions 五图通栏：突破 container，铺满 100vw（1920px 全屏） */
.Client-gallery-area .Client-gallery-wraper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.Client-gallery-area .options .option {
  flex: 1 1 0;
  min-width: 0;
  height: 460px;
  margin: 0;
  background-size: cover;
  background-position: center center;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.45s ease, filter 0.45s ease, flex-grow 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

.Client-gallery-area .options .option:first-child {
  margin-left: 0;
}

.Client-gallery-area .options .option:last-child {
  margin-right: 0;
}

.Client-gallery-area .options .option .shadow {
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 100%);
  box-shadow: none;
}

.Client-gallery-area .options .option .label {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.Client-gallery-area .options .option .label .icon-custom {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: 0;
  max-width: 100%;
  padding: 0 18px 34px;
}

.Client-gallery-area .options .option .label .icon-custom h3 {
  writing-mode: horizontal-tb;
  transform: none;
  min-width: 0;
  position: static;
  font-size: 16px;
  line-height: 1.35;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
}

/* 纯 CSS 交互：鼠标滑过卡片 → 该卡片平滑展开占满板块，其余卡片收缩压暗 */
.Client-gallery-area .options .option:hover {
  flex-grow: 10;
}

.Client-gallery-area .options:has(.option:hover) .option:not(:hover) {
  flex-grow: 0.35;
  opacity: 0.45;
  filter: grayscale(0.45) brightness(0.75);
}

/* 卡片内详解层：标题/描述/按钮直接写在 HTML 结构里，后续可由 PHP 循环输出对接后台 */
.Client-gallery-area .options .option .industry-detail {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.Client-gallery-area .options .option .industry-detail__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 22, 40, 0.9) 0%, rgba(10, 22, 40, 0.62) 48%, rgba(10, 22, 40, 0.32) 100%);
}

.Client-gallery-area .options .option .industry-detail__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 60px 90px;
  max-width: 920px;
}

.Client-gallery-area .options .option .industry-detail__title {
  margin: 0;
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.55s ease 0.1s, transform 0.55s ease 0.1s;
}

.Client-gallery-area .options .option .industry-detail__desc {
  margin: 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s;
}

.Client-gallery-area .options .option .industry-detail__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 34px;
  border-radius: 30px;
  background: #d4a017;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 0.55s ease 0.3s, transform 0.55s ease 0.3s, background 0.3s ease;
}

.Client-gallery-area .options .option .industry-detail__btn:hover {
  background: #b8860b;
  color: #ffffff;
}

/* 悬停时隐藏卡片底部小标题，避免与详解层文字叠影 */
.Client-gallery-area .options .option .label {
  transition: opacity 0.4s ease;
}

.Client-gallery-area .options .option:hover .label {
  opacity: 0;
}

.Client-gallery-area .options .option:hover .industry-detail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.Client-gallery-area .options .option:hover .industry-detail__title,
.Client-gallery-area .options .option:hover .industry-detail__desc,
.Client-gallery-area .options .option:hover .industry-detail__btn {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 991px) {
  .Client-gallery-area .options .option {
    height: 360px;
  }

  .industry-detail__content {
    padding: 40px 44px;
    gap: 14px;
  }

  .industry-detail__title {
    font-size: 32px;
  }

  .industry-detail__desc {
    font-size: 15px;
  }

  .industry-detail__btn {
    padding: 11px 26px;
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .Client-gallery-area .options {
    flex-direction: column;
  }

  /* 纵向布局下禁用 flex-grow 展开（column 方向会拉爆卡片高度），固定高度改为点击直接显示详解 */
  .Client-gallery-area .options .option,
  .Client-gallery-area .options .option:hover,
  .Client-gallery-area .options:has(.option:hover) .option:not(:hover) {
    flex: 0 0 auto;
  }

  .Client-gallery-area .options .option {
    height: 210px;
    margin: 5px 0;
    border-radius: 5px;
  }

  .Client-gallery-area .options .option .label .icon-custom h3 {
    writing-mode: horizontal-tb;
  }

  /* 展开态详解层：收紧内边距与字号，保证内容完整显示 */
  .Client-gallery-area .options .option .industry-detail__content {
    padding: 18px 20px;
    gap: 8px;
  }

  .Client-gallery-area .options .option .industry-detail__title {
    font-size: 20px;
    line-height: 1.3;
  }

  .Client-gallery-area .options .option .industry-detail__desc {
    font-size: 13px;
    line-height: 1.6;
    max-width: 100%;
  }

  .Client-gallery-area .options .option .industry-detail__btn {
    margin-top: 2px;
    padding: 8px 18px;
    font-size: 12px;
    border-radius: 20px;
  }
}

/* ===== Hero 轮播：隐藏左右箭头，改用底部「贯穿白线 + 悬停加粗线」翻页标签（参考 ExxonMobil 首页） ===== */
.hikey-hero-area.imgage .hikey-hero-arrow-box {
  display: none !important;
}

.hero-slide-nav {
  position: absolute;
  left: 0;
  top: 760px;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.hero-slide-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 16px 150px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-slide-nav__line {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  transition: background 0.4s ease;
}

.hero-slide-nav__name {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
  transition: color 0.4s ease, font-weight 0.4s ease;
}

.hero-slide-nav__item:hover .hero-slide-nav__line,
.hero-slide-nav__item.is-active .hero-slide-nav__line {
  background: #d4a017;
}

.hero-slide-nav__item:hover .hero-slide-nav__name,
.hero-slide-nav__item.is-active .hero-slide-nav__name {
  color: #ffffff;
  font-weight: 600;
}

.hero-slide-nav__item.is-active .hero-slide-nav__name {
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 991px) {
  .hero-slide-nav {
    left: 0;
    top: 620px;
  }

  .hero-slide-nav__item {
    padding: 16px 34px 0 0;
  }

  .hero-slide-nav__line {
    width: 26px;
  }

  .hero-slide-nav__name {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 575px) {
  .hero-slide-nav {
    display: none;
  }
}

/* ===== Hero 窄屏收敛：responsive.css 沿用原模板的 1500-2200px 超高与 80px 大标题，全部压回正常比例 ===== */
@media (max-width: 991px) {

  /* 移动端顶部是不透明菜单条（非透明叠加），取消桌面的 -120px 上移，避免标题被菜单条盖住 */
  .hikey-hero-area.imgage {
    margin-top: 64px;
  }

  .hikey-slider-height3 {
    height: 720px;
  }

  .hikey-hero-area.imgage h1.hero-title {
    font-size: 48px;
    line-height: 1.15;
  }

  .hikey-hero-area.imgage h1.hero-title span {
    font-size: 48px;
    line-height: 1.15;
  }

  .hikey-hero-area.imgage p.hero-desc {
    width: 100%;
    font-size: 15px;
    line-height: 1.7;
  }

  .hikey-hero-area.imgage .hero-btn a,
  .hikey-hero-area.imgage .hero-btn2 a {
    padding: 12px 24px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .hikey-slider-height3 {
    height: 640px;
  }

  .hikey-hero-area.imgage h1.hero-title,
  .hikey-hero-area.imgage h1.hero-title span {
    font-size: 38px;
  }
}

@media (max-width: 575px) {
  .hikey-slider-height3 {
    height: 540px;
  }

  .hikey-hero-area.imgage h1.hero-title,
  .hikey-hero-area.imgage h1.hero-title span {
    font-size: 30px;
    line-height: 1.25;
  }

  .hikey-hero-area.imgage .hero-sub-title {
    font-size: 14px;
  }

  .hikey-hero-area.imgage p.hero-desc {
    font-size: 14px;
  }

  .hikey-hero-area.imgage .hero-btn,
  .hikey-hero-area.imgage .hero-btn2 {
    margin-bottom: 12px;
  }
}

/* Product Center 三大分类卡片：分类标题与产品图间距 30px */
.destination-area .destination-title {
  margin-bottom: 30px;
}




/* Hot Products 热销产品板块 */
.hot-products-area {
  padding: 50px 0 60px;
}

.hot-products-grid {
  margin-top: 50px;
}

.hot-products-grid>[class*="col-"] {
  margin-bottom: 50px;
}

.hot-product-card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  padding: 20px 20px 0;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.hot-product-card:hover {
  border-color: #d4a017;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
  transform: translateY(-5px);
}

.hot-product-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.hot-product-img img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.hot-product-name {
  height: 90px;
  border-top: 1px solid #d4a017;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hot-product-name h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #191919;
  margin: 0;
}

@media (max-width: 575px) {
  .hot-products-area {
    padding: 20px 0 30px;
  }

  .hot-product-name {
    height: 90px;
    border-top: 1px solid #d4a017;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hot-product-name h4 {
    font-size: 14px;
  }
}

/* ===== Footer Contact 联系列 → 已迁至 global.css（全站共用） ===== */