/* ================================================================
   HD Valve — Application Slider  |  assets/css/app-slider.css
   ================================================================ */

/* ----------------------------------------
   1. 外层容器
---------------------------------------- */
.hvas-wrapper {
  position: relative;
  width: 100%;
  height: 600px; /* 默认高度，Elementor 样式控件覆盖 */
  overflow: hidden;
  background: #222222;
}

/* ----------------------------------------
   2. Slider 区域（铺满整个 wrapper）
---------------------------------------- */
.hvas-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ----------------------------------------
   3. 滑动轨道 — 绝对定位铺满 slider
      宽度 = 幻灯片数 × 100%
---------------------------------------- */
.hvas-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--hvas-total, 1) * 100%);
  display: flex;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

/* ----------------------------------------
   4. 单张幻灯片
---------------------------------------- */
.hvas-slide {
  position: relative;
  /* 每张宽度 = track ÷ 总数 = slider 可视宽度 */
  flex: 0 0 calc(100% / var(--hvas-total, 1));
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ----------------------------------------
   5. 渐变遮罩
---------------------------------------- */
.hvas-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(34,34,34,0) 45%, #222222 100%),
    linear-gradient(178deg, rgba(0,0,0,0) 68%, rgba(0,0,0,0.8) 93%);
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------
   6. 内容包裹 — 绝对定位铺满 slide
      用 padding 模拟 1280px 盒式布局
      内容左对齐，与导航栏左边缘一致
---------------------------------------- */
.hvas-content-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  /* 两侧 padding = (视口宽 - 1280px) / 2，最小 24px，与导航栏完全对齐 */
  padding-left: max(24px, calc((100% - 1280px) / 2));
  padding-right: max(24px, calc((100% - 1280px) / 2));
}

/* ----------------------------------------
   7. 文字内容块（入场动画）
---------------------------------------- */
.hvas-content {
  max-width: 480px; /* Elementor 控件可覆盖 */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.hvas-slide.is-active .hvas-content {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------
   8. 标签（红色小字）
---------------------------------------- */
.hvas-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #D32027;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* ----------------------------------------
   9. 主标题
---------------------------------------- */
.hvas-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 18px;
}

/* ----------------------------------------
   10. 描述文字（超 4 行省略）
---------------------------------------- */
.hvas-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #cccccc;
  margin: 0 0 28px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------
   11. 按钮组
---------------------------------------- */
.hvas-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 强制覆盖 Blocksy 主题的 a / button 默认样式 */
.hvas-btn,
.hvas-btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s !important;
}

.hvas-btn-primary,
.hvas-btn-primary:visited {
  background-color: #D32027 !important;
  color: #ffffff !important;
  border: 2px solid #D32027 !important;
}
.hvas-btn-primary:hover,
.hvas-btn-primary:focus {
  background-color: #b01a1f !important;
  border-color: #b01a1f !important;
  color: #ffffff !important;
}

.hvas-btn-secondary,
.hvas-btn-secondary:visited {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}
.hvas-btn-secondary:hover,
.hvas-btn-secondary:focus {
  background-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* ----------------------------------------
   12. 底部导航 — 绝对定位，距 wrapper 底部 72px
---------------------------------------- */
.hvas-wrapper .hvas-nav {
  position: absolute;
  bottom: 72px;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent !important;
  background-color: transparent !important;
}

.hvas-nav-inner {
  display: flex;
  max-width: 1280px;       /* 导航不超过 1280px */
  margin: 0 auto;          /* 水平居中 */
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  /* 底部灰线用 inset box-shadow，与激活线定位方式一致，避免错位 */
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.25);
}

/* 导航项：用 div 避免 button 的主题污染 */
.hvas-nav-item {
  position: relative;
  flex: 1;
  padding: 12px 0;
  cursor: pointer;
  text-align: left;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 红色激活线：宽度 = 1280px ÷ 幻灯片总数，覆盖灰线同一位置 */
.hvas-nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;      /* 与 inset box-shadow 基准线对齐 */
  left: 0;
  width: 0;
  height: 2px;
  background-color: #D32027;
}

/* 激活：红线立即显示，填满当前导航项 */
.hvas-nav-item.is-active::after {
  width: 100%;
}

/* 进度动画：从 0 填充到 100% */
@keyframes hvas-progress {
  from { width: 0; }
  to   { width: 100%; }
}

.hvas-nav-item.is-active.is-progressing::after {
  width: 0;
  animation: hvas-progress var(--hvas-duration, 700ms) ease forwards;
}

.hvas-nav-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: color 0.25s, font-weight 0.25s;
}

/* 激活：白色加粗 */
.hvas-nav-item.is-active .hvas-nav-label {
  color: #ffffff;
  font-weight: 700;
}

/* 悬停：略微变亮 */
.hvas-nav-item:hover .hvas-nav-label {
  color: rgba(255,255,255,0.75);
}

/* ----------------------------------------
   13. 响应式
---------------------------------------- */
@media (max-width: 1024px) {
  /* 1024px 以下 padding 公式仍自动生效，无需手动覆盖 */
}

@media (max-width: 768px) {
  /* 移动端最低高度兜底，实际高度由 Elementor 控件控制 */
  .hvas-wrapper {
    min-height: 400px;
  }

  /* 内容区顶部对齐，与设计稿保持一致 */
  .hvas-content-wrap {
    align-items: flex-start !important;
    padding-top: 48px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 保留右侧图片露出，宽度约占 85% */
  .hvas-content {
    max-width: 85%;
  }

  .hvas-title {
    font-size: clamp(26px, 7vw, 38px);
  }

  /* 移动端描述文字显示更多行 */
  .hvas-desc {
    font-size: 14px;
    -webkit-line-clamp: 5;
  }

  /* 移动端导航贴底显示 */
  .hvas-wrapper .hvas-nav {
    bottom: 0 !important;
  }

  /* 导航横向滚动 */
  .hvas-nav-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px;
    flex-wrap: nowrap;
    /* border-bottom 改为 inset box-shadow，避免 overflow-y:auto 裁剪 ::after */
    border-bottom: none;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.25);
  }
  .hvas-nav-inner::-webkit-scrollbar {
    display: none;
  }

  /* ::after 不再超出父容器，避免被 overflow 裁剪 */
  .hvas-nav-item::after {
    bottom: 0;
  }

  .hvas-nav-item {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 0 0 6px 0;
  }
}