/* 提高 Banner 中文字的對比度，通過無障礙稽核 */
#banner .content p {
  color: #444444 !important;
  /* 將原本較淡的灰色改成更深的灰色（或用 #222222 純黑） */
}

#banner .content header p {
  color: #555555 !important;
  /* 副標題也一併加深 */
}

/* 「線上預約」大按鈕的強調色：改成依站台 (yuji 藍 / ace 綠) 動態產生，見 index.php 內的 <style> */

/* 2. 提高球館規範清單中所有 <li> 項目的對比度 */
section ul li {
  color: #333333 !important;
  /* 將原本偏淡的清單文字強制改成深灰色 */
}

/* 3. 如果列表中有 <strong>（粗體字），也確保它夠黑 */
section ul li strong {
  color: #000000 !important;
}



/* 去除滑動按鈕的陰影  */
.slider .btn {
  box-shadow: none !important;
  text-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* 如果按鈕在點擊或懸停時會出現陰影，也一併處理  */
.slider .btn:hover,
.slider .btn:active,
.slider .btn:focus {
  box-shadow: none !important;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider .btn {
  box-shadow: none !important;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.slider .btn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
       🔥 核心修正：利用 CSS content 自動在手機版換圖，不干擾 JS 點點計算
       ========================================================================== */

/* 🛠️ 當螢幕小於 768px（手機版）時 */@media screen and (max-width: 767px) {

  /* 💡 乾淨的偷天換日法：隱藏原本的 HTML 圖片，改用背景圖撐開 */
  .slider .slides img, .price-img {
    box-sizing: border-box;
    padding-left: 100%; /* 這會把原本的 HTML src 圖片擠出可視範圍之外 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 透過背景圖安全地在手機版換圖，iOS 絕對吃得到 */
  /* 💡 各站台圖片各自放在 images/yuji/ 、images/ace/ 底下，所以要依 <body class="yuji"/"ace">（見 index.php）分開對應路徑，不能寫死同一個路徑 */
  body.yuji .slider .slides .slide-img-1 { background-image: url("../../images/yuji/Hall/hall_1_mobile.webp") !important; }
  body.yuji .slider .slides .slide-img-2 { background-image: url("../../images/yuji/Hall/hall_2_mobile.webp") !important; }
  body.yuji .slider .slides .slide-img-3 { background-image: url("../../images/yuji/Hall/hall_3_mobile.webp") !important; }
  body.yuji .slider .slides .slide-img-4 { background-image: url("../../images/yuji/Hall/hall_4_mobile.webp") !important; }
  body.yuji .slider .slides .slide-img-5 { background-image: url("../../images/yuji/Hall/hall_5_mobile.webp") !important; }
  body.yuji .slider .slides .slide-img-6 { background-image: url("../../images/yuji/Hall/hall_6_mobile.webp") !important; }

  /* ⚠️ ace 站的 _mobile.webp 目前只是複製桌機版原圖改檔名頂著，之後有專門裁切的手機板圖再換掉檔案內容即可，CSS 不用再改 */
  body.ace .slider .slides .slide-img-1 { background-image: url("../../images/ace/Hall/hall_1_mobile.webp") !important; }
  body.ace .slider .slides .slide-img-2 { background-image: url("../../images/ace/Hall/hall_2_mobile.webp") !important; }
  body.ace .slider .slides .slide-img-3 { background-image: url("../../images/ace/Hall/hall_3_mobile.webp") !important; }
  body.ace .slider .slides .slide-img-4 { background-image: url("../../images/ace/Hall/hall_4_mobile.webp") !important; }
  body.ace .slider .slides .slide-img-5 { background-image: url("../../images/ace/Hall/hall_5_mobile.webp") !important; }
  body.ace .slider .slides .slide-img-6 { background-image: url("../../images/ace/Hall/hall_6_mobile.webp") !important; }

  /* 價目表也比照辦理 */

  .price-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* 💡 核心：因為圖片被 padding 擠開了，必須用 aspect-ratio 依照你價目表的比例撐出高度 */
    aspect-ratio: 4 / 5 !important;
  }

  body.yuji .price-img { background-image: url("../../images/yuji/Price_list.webp") !important; }
  body.ace .price-img { background-image: url("../../images/ace/Price_list.webp") !important; }
/* 💡 aspect-ratio 改成各站台實際圖片比例 (yuji 1024x1536=2/3、ace 1018x1607)，
     原本兩站共用 4/5 跟實際圖片比例對不上，background-size:cover 為了填滿框會裁掉圖片上下/左右內容 (價目表文字被切掉)。
     比例對齊實際圖片後，cover 就不用裁切，會完整顯示。若之後換圖，比例改變的話這裡也要跟著調整。 */
  body.yuji .price-img {
    background-image: url("../../images/yuji/Price_list_2026_08_02.webp") !important;
    aspect-ratio: 2 / 3 !important;
  }
  body.ace .price-img {
    background-image: url("../../images/ace/Price_list_2026_08_02.webp") !important;
    /* 2026/08/25 換圖後實際尺寸改為 1018x1607（直式長圖），原本寫死的 1/1 正方形已跟新圖不符，改用實際比例 */
    aspect-ratio: 1018 / 1607 !important;
  }
  /* 2. 強制撐開手機版輪播圖的容器寬高 */
  .slider {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 1.5em 0 !important;
  }

  .slider .slides {
    width: 100% !important;
    height: 100% !important;
  }
}

  /* 3. 讓換圖後的手機版圖片完美滿版、不拉伸變形  */
  .slider .slides img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
