/*
 * 手機上的點擊區大小
 * ────────────────────────────────────────────────────────────────
 * 2026-09-05 在 375x812 實測全站 12 個頁面：橫向溢出 0，但有 14 種控制項
 * 的高度低於 40px，最小的只有 16-21px：
 *
 *   .ql-v52-drag                     33 x 16   路線列的拖曳把手
 *   [data-action=replace-stop]       21 x 37   換一個站點
 *   [data-action=shuffle-stops]      25 x 123  重新排序
 *   [data-action=edit-route-conditions] 30 x 61
 *   .v4-inline-link                  23        「查看探索任務與徽章」
 *   .ql-guide-chip                   33        主題選項
 *   .ql-guide-skip / -skip-all       35
 *   .ql-allguide-destlinks a         38
 *
 * 16px 寬的拖曳把手在手機上幾乎抓不到。
 *
 * ■ 為什麼用 ::after 疊命中區，而不是直接加 min-height
 *
 * 直接把 min-height 設成 44px 會把緊湊的列表整個撐開——路線頁一列本來
 * 就排得很密，每個把手長高 11px，四列就多 44px，版面會鬆掉而且和桌機版
 * 對不上。::after 疊一層透明的區塊只擴大「摸得到的範圍」，外觀與版面
 * 完全不動。
 *
 * ■ 為什麼不是全域規則
 *
 * 內文裡的連結（例如資料來源那行的 www.songshanculturalpark.org）本來就
 * 該跟著文字排版走，硬撐成 44px 會把段落行距撐開。所以這裡逐一點名，
 * 不寫 `a, button { min-height: 44px }` 這種一次全掃的規則。
 *
 * 44px 的依據：Apple HIG 與 Material 都建議 44-48px。
 */

@media (max-width: 900px) {
  .ql-v52-drag,
  .ql-v52-route-actions button,
  .ql-guide-chip,
  .ql-guide-skip,
  .ql-guide-skip-all,
  .v4-inline-link,
  .ql-mobile-venue-guide__official,
  .ql-allguide-destlinks a,
  .ql-v52-route-mobile header button,
  .ql-v52-route-desktop header button,
  /* 這幾個沒有 class，用 data-action 鎖比用容器結構穩——版型改了
   * class 會變，但動作名稱不會（第一版漏掉這 6 個，實測才發現）。 */
  .ql-mobile-section header button,
  [data-action="toggle-place-favorite"],
  [data-action="go-guides"],
  [data-action="v4-open-search"] {
    position: relative;
  }

  .ql-v52-drag::after,
  .ql-v52-route-actions button::after,
  .ql-guide-chip::after,
  .ql-guide-skip::after,
  .ql-guide-skip-all::after,
  .v4-inline-link::after,
  .ql-mobile-venue-guide__official::after,
  .ql-allguide-destlinks a::after,
  .ql-v52-route-mobile header button::after,
  .ql-v52-route-desktop header button::after,
  .ql-mobile-section header button::after,
  [data-action="toggle-place-favorite"]::after,
  [data-action="go-guides"]::after,
  [data-action="v4-open-search"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 至少 44px，但本來就更大的不要縮小 */
    width: max(100%, 44px);
    height: max(100%, 44px);
    /* 純命中區，不能擋住底下的視覺，也不能影響排版 */
    background: transparent;
    pointer-events: auto;
  }

  /* 拖曳把手特別窄（16px），左右各要更多空間才抓得到 */
  .ql-v52-drag::after {
    width: max(100%, 48px);
    height: max(100%, 44px);
  }

  /*
   * 第二類：本來就接近 44px 的獨立行動按鈕（37-43px）
   * ──────────────────────────────────────────────────
   * 這些是「查看地點」「進入場域」「看完整攻略」這種寬 87-299px 的按鈕，
   * 只差幾個 px。它們不在密集列表裡，直接長高比疊命中區單純，也不會
   * 跟導覽的作用中底線搶 ::after——全站有 10 條 button/a 的 ::after 規則，
   * 都是 .ql-desktop-nav / .ql-tabs / .v3-primary-nav 那類的底線。
   *
   * 實測 display:block，所以 min-height 直接生效，不用動 display
   * （改成 flex 會讓既有的內距與對齊全部重算）。
   */
  #main-content .button,
  #main-content .ql-primary,
  /* 🔴 篩選列與「我的」分頁是 <a> 不是 <button>——第一版寫 `... button`
   * 一個都沒鎖到。CSS 選不到不會報錯，就是靜靜地什麼都沒發生，實測量
   * 高度才發現。分頁那組還帶 ::after 底線（.ql-my-tabs a.is-active::after），
   * 所以只能用 min-height，不能疊命中區。
   *
   * ⚖️ .ql-my-tabs a 只補高度，寬度維持 34px：375px 螢幕上有 7 格，
   * 每格 44px 就是 308px 再加間距，放不下。這是版面本身的限制，
   * 不是漏掉——要真的解決得改成可橫向捲動或減少分頁數。 */
  #main-content .ql-v52-filter-row a,
  #main-content .ql-my-tabs a,
  #main-content .qg-dc-submit,
  /* 定點語音的分頁鈕（關於這裡／旅人怎麼說／此刻的聲音）只有 32px 高。
   * 2026-09-06 把這個區塊從探索頁的彈窗搬到場域頁的地點詳情之後，
   * 它才變成主要路徑上會碰到的東西。 */
  #main-content [data-action="pv-tab"],
  #main-content [data-action="edit-route-conditions"],
  #main-content [data-action="shuffle-stops"],
  #main-content [data-action="open-place"],
  #main-content [data-action="open-destination-switcher"],
  #main-content [data-action="select-destination"],
  #main-content [data-action="goto-area"],
  #main-content [data-action="open-guide"],
  #main-content [data-action="add-guide-route"],
  #main-content [data-action="toggle-guide-favorite"],
  #main-content [data-action="share-guide"] {
    min-height: 44px;
  }
}