/**
 * Hauzii Stretched Link — 「整張卡可點」的分層規則
 *
 * 7 顆卡片類 block(card-badge-v1/v2、card-banner-v1/v2、card-grid-static-v1/v2、
 * seeme-about-cta-v2)在卡片上鋪一層絕對定位的透明 `<a>`(inset:0 / z-index:5),
 * 讓整張卡都能點。膜的 href 讀的是**按鈕的網址**(`{slot}_cta_url`)。
 *
 * ⚠️ 為什麼需要本檔:膜蓋在最上層,會擋住卡片內**其他**互動元素。
 * ------------------------------------------------------------------
 * 2026-07-30 之前不成問題 —— 卡內除了按鈕沒有別的連結,而按鈕與膜同一個目的地,
 * 誰接到點擊都一樣。該日 `url` 成為 text component 的全域 atom 後,卡內第一次
 * 可能出現「與膜不同目的地」的連結(標題自己就是連結),膜就把它擋死了。
 * 另一種情況:卡片**沒設**按鈕網址時,膜仍照鋪但沒有 href → 變成一層點了沒反應
 * 又擋住底下所有東西的死膜。
 *
 * 解法是 stretched-link 的標準分層(同 Bootstrap `.stretched-link` 慣例):
 * 膜在下、卡內互動元素在上。我們當初只做了前半段。
 *
 * ⚠️ 範圍刻意鎖在 `.hz-card-item` 內
 * ------------------------------------------------------------------
 * 那 7 顆的卡片容器**全部**掛 `hz-card-item`(2026-08-21 實查)。鎖在它底下 =
 * 其餘 305 顆 block 與頁面其他地方一律不受影響,把 `position:relative` /
 * 堆疊脈絡的副作用限制在真正需要的 7 顆內。
 * ⛔ 不要「順手」把選擇器放寬成全站 —— 那會讓每個按鈕都憑空多一個定位基準點。
 *
 * ⚠️ `:root body` 高特異性是家規(對抗主題樣式),見 hz-textlink-utilities.css 檔頭。
 */

/* ① 卡內真正的互動元素浮到膜(z-index:5)上面。
   膜本身沒有 data-hz-button,不會被這條命中。 */
:root body .hz-card-item a.hz-textlink,
:root body .hz-card-item a[data-hz-button] {
    position: relative;
    z-index: 6;
}

/* ①b ⚠️ 單抬連結本身不夠 —— 真正的攔路虎是 SurfaceDomain。
   ------------------------------------------------------------------
   卡片容器掛 `hz-surface-XX--overlay`,而 SurfaceDomain 產出
   `.hz-surface-XX--overlay > * { position: relative; z-index: 2; }`
   (為了把內容墊在色調 overlay `::before`(z-index:1)上面)。
   於是**卡片的每個直接子元素都自成一個堆疊脈絡、且停在 z-index:2**,
   而膜是同層的直接子元素、inline `z-index:5` → 膜贏。
   內容區裡面的 `<a>` 再怎麼抬,也只是在那個 z-index:2 的盒子**內部**比大小,
   整盒還是壓在膜下面。⇒ 抬,必須抬在「卡片的直接子元素」這一層。

   但直接把整個內容區抬到膜上面,會讓「點卡片文字區 → 走整卡連結」失效。
   解法是抬上來之後讓它**不吃滑鼠事件**,只把事件還給裡面真正的連結:
     - 點文字/空白 → 穿透內容區 → 打到膜 → 走整卡連結(行為不變)
     - 點連結本身 → 打到連結(以前打不到)
   text selection 與 :hover 在這區本來就被膜攔著、本來就不能用,故無回歸。

   ⛔ 不可無條件套用在所有卡片 —— 用 `:has(a.hz-textlink)` 只挑「裡面真的有
   文字連結」的那個直接子元素,其餘卡片一個 byte 都不動。 */
:root body .hz-card-item > *:has(a.hz-textlink),
:root body .hz-card-item > *:has(a.hz-imagelink[href]) {
    position: relative;
    z-index: 6;
    pointer-events: none;
}

:root body .hz-card-item > *:has(a.hz-textlink) a,
:root body .hz-card-item > *:has(a.hz-imagelink[href]) a {
    pointer-events: auto;
}

/* ①c 圖片連結(#26,a.hz-imagelink 是 display:block):
   - 圖包在內容區裡(card-badge)→ 走上面 ①b 的 :has(a.hz-imagelink),抬整個內容區、事件還給連結。
   - 圖就是卡片的直接子元素(card-banner / card-grid-static)→ <a> 自己就是直接子元素,直接抬它
     (同 ① 抬 a.hz-textlink 的作法)。
   ⚠️ #63(第五批線 E):包裝層改由 compiler 編譯時產、**沒設連結也在**(不帶 href)。①b / ①c / ①d 一律只認
     `a.hz-imagelink[href]` —— 沒連結的包裝層不是連結,必須跟改前一樣不抬層、不搶事件(否則有膜的卡片點圖走不到
     整卡連結;team / testimonial 這類掛 hz-card-item 的卡片內文會被 pointer-events:none、文字選不了)。 */
:root body .hz-card-item > a.hz-imagelink[href] {
    position: relative;
    z-index: 6;
}

/* ①d 圖是直接子元素、而版型又在圖上疊一層全幅文字層(card-banner:`absolute inset-0 z-10`)
   → 文字層整片蓋住圖,圖片連結點不到(G0 實測 elementFromPoint 打到文字層)。
   只在「卡片的直接子層真的有圖片連結」時,讓其他直接子層不吃滑鼠事件、事件穿到圖;
   那些層裡真正的互動元素(連結 / 按鈕)照常可點。代價與 ①b 相同(那區文字無法選取)。 */
:root body .hz-card-item:has(> a.hz-imagelink[href]) > :not(a.hz-imagelink[href]) {
    pointer-events: none;
}

:root body .hz-card-item:has(> a.hz-imagelink[href]) > :not(a.hz-imagelink[href]) :is(a, button) {
    pointer-events: auto;
}

/* ② 沒有目的地的膜不要擋路。
   膜是卡片內唯一「絕對定位且無 href」的 <a>;沒 href 就不是連結,
   讓它不吃滑鼠事件,底下的內容(含文字連結、文字選取)才通得過。 */
:root body .hz-card-item > a:not([href]) {
    pointer-events: none;
}