/* ============================================================
   Hero 手機版重新設計（2026-07-31 站長指定）
   與桌機版 hero-desktop-left.css 同一套視覺語言：靠左、高對比、
   不模糊、不遮背景。

   🔑 配色依「背景圖實際亮度取樣」決定（hero-temple-mobile-1200）：
      y  5~52%  亮度 .74~.87 → 深墨藍字 11~13:1（白字僅 1.2:1）
      y 55~60%  亮度 .38     → 過渡帶，靠描邊撐可讀性
      y 60~80%  亮度 .06~.18 → 白字 8~9:1（深藍僅 1.6:1）
      故上段用深墨藍 + 白描邊、下段維持白字 + 深描邊，
      兩段都用 0-blur 多重 text-shadow（銳利，不是模糊陰影）。

   🔑 移除 home-hero-mobile-contrast 的深色漸層遮罩：
      該遮罩原是為了保護白字（頂部 rgba(12,26,48,.58)），改深字後
      不再需要，拿掉讓合興宮與天空完整明亮呈現。

   🔑 誦經共存：incense-blessing.js 手機經文欄在 x 84%~92%，
      其 `.ib-lit .hero-content{padding-right:19%}` 特異性高於本檔
      （ID+2class），誦經時仍會正常讓位到 81%，實測不重疊。
      但其 `.ib-lit .hero-search-form{max-width:68%}` 會把查詢框壓到
      placeholder 被按鈕截斷 → 本檔覆寫回 100%（內容已整體讓位，
      不需要再壓縮表單）。
   ============================================================ */

@media (max-width: 767px) {

  /* ── 1) 拿掉壓暗背景的深色漸層 ─────────────────────── */
  #landing-hero .landing-hero__bg::after {
    background: none !important;
  }

  /* ── 2) 內容靠左 ───────────────────────────────────── */
  #landing-hero .hero-content {
    text-align: left !important;
    padding-left: 5.5% !important;
    padding-right: 8% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    position: relative;
  }

  /* 左側品牌色直條（與桌機版呼應，手機收細成 3px） */
  #landing-hero .hero-content::before {
    content: '';
    position: absolute;
    left: 2.2%;
    top: 10px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #f59e0b 0%, #ea580c 45%, #0d9488 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
  }

  /* ── 3) 上段（亮天空）：深墨藍 + 0-blur 白描邊 ─────── */
  #landing-hero .hero-title,
  #landing-hero .hero-title .gradient-text {
    color: #082744 !important;
    -webkit-text-fill-color: #082744 !important;
    background: none !important;
    font-size: clamp(23px, 6.2vw, 27px) !important;
    line-height: 1.28 !important;
    text-shadow:
      1.4px 0 0 rgba(255, 255, 255, .94), -1.4px 0 0 rgba(255, 255, 255, .94),
      0 1.4px 0 rgba(255, 255, 255, .94), 0 -1.4px 0 rgba(255, 255, 255, .94),
      1px 1px 0 rgba(255, 255, 255, .94), -1px -1px 0 rgba(255, 255, 255, .94),
      1px -1px 0 rgba(255, 255, 255, .94), -1px 1px 0 rgba(255, 255, 255, .94) !important;
  }

  #landing-hero .hero-description,
  #landing-hero .hero-value-item,
  #landing-hero .hero-login-link {
    color: #0f3352 !important;
    font-weight: 600 !important;
    text-shadow:
      1px 0 0 rgba(255, 255, 255, .9), -1px 0 0 rgba(255, 255, 255, .9),
      0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(255, 255, 255, .9) !important;
  }

  /* Badge：實心品牌深藍，去毛玻璃 */
  #landing-hero .hero-badge {
    background: #0e2b48 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(8, 39, 68, .30) !important;
    margin-bottom: 1rem !important;
  }

  /* ── 4) 下段（暗廟身）：白字 + 0-blur 深描邊 ───────── */
  #landing-hero .hero-guest-search__link,
  #landing-hero .hero-stats .stat-number,
  #landing-hero .hero-stats .stat-label {
    color: #fff !important;
    text-shadow:
      1.2px 0 0 rgba(6, 20, 36, .9), -1.2px 0 0 rgba(6, 20, 36, .9),
      0 1.2px 0 rgba(6, 20, 36, .9), 0 -1.2px 0 rgba(6, 20, 36, .9) !important;
  }

  #landing-hero .hero-stats .stat-divider {
    background: rgba(255, 255, 255, .45) !important;
  }

  /* ── 5) 查詢框：實心白 + 深藍細邊 ─────────────────────
     寬度對齊標題第二行「大陸到台灣跨境物流平台」（站長 2026-08-01 指定）。
     實測標題寬恆等於 11 字 × 字級，字級為 clamp(23px, 6.2vw, 27px)：
       360px → 253px(70.3vw) ／ 390px → 266px(68.2vw) ／ 430px → 293px(68.2vw)
     故寬度 = clamp(253px, 68.2vw, 297px)。
     🔑 右緣落在 5.5%+68.2% ≈ 73.7%，經文欄在 84%~92%
        → 誦經期間本來就不會撞到，因此 .ib-lit 套「同一個值」而不是縮短，
          框在誦經前後完全不變動（原本 incense 會壓成 68% 導致 placeholder
          被按鈕截斷；若這裡寫 100%，誦經讓位後反而會比平常更寬）。 */
  #landing-hero .hero-search-form {
    max-width: clamp(253px, 68.2vw, 297px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 特異性要壓過 incense 的 #landing-hero.ib-lit .hero-search-form{max-width:68%} */
  #landing-hero.landing-hero.ib-lit .hero-search-form,
  #landing-hero.landing-hero.ib-ending .hero-search-form {
    max-width: clamp(253px, 68.2vw, 297px) !important;
  }

  #landing-hero .search-input-wrapper {
    background: #fff !important;
    border: 1.5px solid rgba(14, 43, 72, .35) !important;
    box-shadow: 0 8px 20px rgba(8, 39, 68, .20) !important;
  }

  #landing-hero .search-input {
    color: #0e2b48 !important;
    font-size: 15px !important;
  }

  /* 查詢按鈕：手機版原本是 10px 方角 + 隱藏「查詢」文字（cards.css 在 <768px
     隱藏 span），方形按鈕塞在 9999px 膠囊框裡形狀打架。cards.css 自己寫的
     9999px !important 被 Vue bundle 那側更後面的規則蓋成 10px，故這裡用
     ID 級特異性（#landing-hero .hero-search-form .search-btn）壓回，
     並收成 44×44 正圓圖示鈕，與膠囊外框呼應、也符合觸控最小尺寸。 */
  #landing-hero .hero-search-form .search-btn {
    border-radius: 9999px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(13, 148, 136, .35) !important;
  }

  #landing-hero .hero-search-form .search-btn i {
    font-size: 17px !important;
    margin: 0 !important;
  }

  /* 左側條碼圖示與輸入文字的間距收一點，讓 placeholder 有更多空間 */
  #landing-hero .search-input-wrapper > i {
    padding: 0 .5rem 0 .85rem !important;
  }

  /* ── 6) 按鈕與訪客版元素靠左 ───────────────────────── */
  #landing-hero .warehouse-copy-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #landing-hero .warehouse-toast {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  #landing-hero .hero-value-props,
  #landing-hero .hero-cta-group,
  #landing-hero .hero-guest-search,
  #landing-hero .hero-stats {
    justify-content: flex-start !important;
  }
}