/* ============================================================
   闪得 Hero 视频区 - Elementor 适配 / 移动端样式
   句柄: shande-hero-elementor（依赖 shande-hero=hero.css）
   1:1 复刻首页 responsive.css 中的 .hero 手机端规则，
   作用域限定在 .shande-hero-widget 内，不污染整页。
   ============================================================ */

/* 编辑器内确保下拉不被裁剪 */
.elementor-widget-shande_hero .elementor-widget-container {
  overflow: visible;
}

/* 分类下拉：JS 会把菜单移到 <body> 下并 fixed 定位（脱离层叠上下文，
   不被下方功能卡片盖住）。此时菜单不在小部件内，故用全局类补齐外观。
   显示/隐藏与定位由 JS 控制（悬停 + 点击）。 */
.search-cate__menu {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  min-width: 170px;
  max-height: 360px;
  overflow: hidden auto;
  list-style: none;
  margin: 0;
}

/* ---------- 手机端（与首页一致：max-width 768px） ---------- */
@media (max-width: 768px) {
  .shande-hero-widget .hero {
    padding: calc(var(--header-height) + 40px) 16px 90px;
    min-height: 380px;
  }

  .shande-hero-widget .hero-content {
    gap: 12px;
  }

  /* 搜索框：缩小高度，内部元素紧凑 */
  .shande-hero-widget .search-box {
    height: 48px;
    padding: 0 5px 0 0;
  }

  .shande-hero-widget .search-cate {
    padding: 0 8px 0 12px;
    font-size: 13px;
    gap: 4px;
  }

  /* 移动端隐藏「以图搜图」按钮，节省空间 */
  .shande-hero-widget .search-box > .search-btn-cam {
    display: none;
  }

  .shande-hero-widget .search-box > .search-input {
    font-size: 13px;
    padding: 0 8px;
  }

  .shande-hero-widget .search-box > .search-btn {
    width: 48px;
    height: 38px;
  }

  /* 热搜词换行、缩小间距 */
  .shande-hero-widget .hero-hotwords {
    gap: 10px 12px;
  }

  .shande-hero-widget .hotwords-label,
  .shande-hero-widget .hotword-tag {
    font-size: 13px;
  }

  /* 底部弧形遮罩缩小，避免覆盖搜索内容 */
  .shande-hero-widget .hero-curves {
    height: 90px;
  }
}

/* 超小屏进一步压缩搜索框分类区，避免拥挤 */
@media (max-width: 420px) {
  .shande-hero-widget .search-cate {
    padding: 0 6px 0 10px;
    font-size: 12px;
  }

  .shande-hero-widget .hero-hotwords {
    gap: 8px 10px;
  }
}

/* ============================================================
   搜索输入框聚焦态：锁定背景不变
   ------------------------------------------------------------
   hero.css 里 .search-input 是 background:transparent 且无 :focus 规则，
   但 Astra 父主题会给聚焦的 input 加背景/边框/阴影（默认表单聚焦样式），
   导致点击搜索框后背景变色。这里在 Hero 作用域内锁死聚焦/激活态背景，
   保持与未聚焦时完全一致（透明），并去掉多余的边框/阴影/描边。
   ============================================================ */
.shande-hero-widget .search-box > .search-input,
.shande-hero-widget .search-box > .search-input:focus,
.shande-hero-widget .search-box > .search-input:focus-visible,
.shande-hero-widget .search-box > .search-input:active,
.shande-hero-widget .search-box > .search-input:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 搜索框容器自身背景也保持恒定，避免其内元素聚焦触发容器背景/边框变化 */
.shande-hero-widget .search-box,
.shande-hero-widget .search-box:focus-within {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}