/**
 * Hauzii Image Utilities
 *
 * Aspect Ratio 和 Object Fit 的 utility classes
 */

/* Aspect Ratio Classes */
.hz-aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.hz-aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.hz-aspect-3-2 {
    aspect-ratio: 3 / 2;
}

.hz-aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.hz-aspect-9-16 {
    aspect-ratio: 9 / 16;
}

/* SEO Heading Visual Fix — CSS Custom Property Bridge
 *
 * 問題：Tailwind 在 @layer utilities（layered），theme/admin heading CSS
 * 是 unlayered。CSS cascade 規則：unlayered 永遠勝過 layered。
 * 因此切換 SEO heading tag 時，theme 的 heading CSS 覆蓋 Tailwind。
 *
 * 解法：
 * 1. Heading bridge 讀取 --_hz-fs / --_hz-fw / --_hz-lh(#48 (C) 起不帶 !important,主題交給 Shield ②)
 * 2. 每個 Tailwind class 設定對應的 custom property（unlayered，不受 @layer 影響）
 * 3. Custom property 在 computed-value time 解析，正確取得 Tailwind 值
 */

/* Heading bridge —— 無 !important、無守門(#48 (C),2026-10-04 站主裁 #73)
 *
 * 主題的標題字級改由 Shield ②(tailwind-frontend.css 的 `font: revert-layer`)擋 —— 正規解是 layer,不是 !important(#36)。
 * 這條 unlayered (0,1,1) 仍讓 cv:text- / font- / leading- 橋與 hz-typo-* 設的變數贏過主題的純元素規則;
 * 草稿層 / 自訂段 / 原稿 <style> 的真屬性照特異性正常贏它(以前 !important 讓它們一律輸,#59(d))。
 * 09-30 的「值來源 class 在場」守門(A14 / A15)是為了 !important + inherit 壓掉原稿字級而加的,!important 拿掉後一起拿掉。
 * ⚠️ 從此只寫 --_hz-fs / fw / lh、不寫真屬性 = 無效(token 自己的字級同特異性生效)→ 寫入端 `heading_var_unpaired` 擋
 *    (cloud/shared/style-layer/heading-mirror.mjs)。PHP Local HeadingBridgeTokenGateCssTest / ShieldCustomizationWinsTest 守。
 */
:is(h1, h2, h3, h4, h5, h6)[data-hz-text] {
    font-size: var(--_hz-fs, inherit);
    font-weight: var(--_hz-fw, inherit);
    line-height: var(--_hz-lh, inherit);
}

/* Text size classes → --_hz-fs, --_hz-lh */
[data-hz-text].cv\:text-xs { --_hz-fs: var(--cv-text-xs); --_hz-lh: var(--tw-leading, var(--cv-text-xs--line-height)); }
[data-hz-text].cv\:text-sm { --_hz-fs: var(--cv-text-sm); --_hz-lh: var(--tw-leading, var(--cv-text-sm--line-height)); }
[data-hz-text].cv\:text-base { --_hz-fs: var(--cv-text-base); --_hz-lh: var(--tw-leading, var(--cv-text-base--line-height)); }
[data-hz-text].cv\:text-lg { --_hz-fs: var(--cv-text-lg); --_hz-lh: var(--tw-leading, var(--cv-text-lg--line-height)); }
[data-hz-text].cv\:text-xl { --_hz-fs: var(--cv-text-xl); --_hz-lh: var(--tw-leading, var(--cv-text-xl--line-height)); }
[data-hz-text].cv\:text-2xl { --_hz-fs: var(--cv-text-2xl); --_hz-lh: var(--tw-leading, var(--cv-text-2xl--line-height)); }
[data-hz-text].cv\:text-3xl { --_hz-fs: var(--cv-text-3xl); --_hz-lh: var(--tw-leading, var(--cv-text-3xl--line-height)); }
[data-hz-text].cv\:text-4xl { --_hz-fs: var(--cv-text-4xl); --_hz-lh: var(--tw-leading, var(--cv-text-4xl--line-height)); }
[data-hz-text].cv\:text-5xl { --_hz-fs: var(--cv-text-5xl); --_hz-lh: var(--tw-leading, var(--cv-text-5xl--line-height)); }
[data-hz-text].cv\:text-6xl { --_hz-fs: var(--cv-text-6xl); --_hz-lh: var(--tw-leading, var(--cv-text-6xl--line-height)); }
[data-hz-text].cv\:text-7xl { --_hz-fs: var(--cv-text-7xl); --_hz-lh: var(--tw-leading, var(--cv-text-7xl--line-height)); }
[data-hz-text].cv\:text-8xl { --_hz-fs: var(--cv-text-8xl); --_hz-lh: var(--tw-leading, var(--cv-text-8xl--line-height)); }
[data-hz-text].cv\:text-9xl { --_hz-fs: var(--cv-text-9xl); --_hz-lh: var(--tw-leading, var(--cv-text-9xl--line-height)); }

/* Font weight classes → --_hz-fw */
[data-hz-text].cv\:font-thin { --_hz-fw: var(--cv-font-weight-thin); }
[data-hz-text].cv\:font-extralight { --_hz-fw: var(--cv-font-weight-extralight); }
[data-hz-text].cv\:font-light { --_hz-fw: var(--cv-font-weight-light); }
[data-hz-text].cv\:font-normal { --_hz-fw: var(--cv-font-weight-normal); }
[data-hz-text].cv\:font-medium { --_hz-fw: var(--cv-font-weight-medium); }
[data-hz-text].cv\:font-semibold { --_hz-fw: var(--cv-font-weight-semibold); }
[data-hz-text].cv\:font-bold { --_hz-fw: var(--cv-font-weight-bold); }
[data-hz-text].cv\:font-extrabold { --_hz-fw: var(--cv-font-weight-extrabold); }
[data-hz-text].cv\:font-black { --_hz-fw: var(--cv-font-weight-black); }

/* Leading classes → --_hz-lh（放在 text-* 之後確保優先） */
[data-hz-text].cv\:leading-none { --_hz-lh: 1; }
[data-hz-text].cv\:leading-tight { --_hz-lh: var(--cv-leading-tight); }
[data-hz-text].cv\:leading-snug { --_hz-lh: var(--cv-leading-snug); }
[data-hz-text].cv\:leading-normal { --_hz-lh: var(--cv-leading-normal); }
[data-hz-text].cv\:leading-relaxed { --_hz-lh: var(--cv-leading-relaxed); }
[data-hz-text].cv\:leading-loose { --_hz-lh: var(--cv-leading-loose); }


/* Intrinsic size（ImageIntrinsicSizeInjector）
 *
 * injector 會替「高度跟著圖走」的綁定圖補 width / height（防版面跳動），並加上 data-hz-intrinsic。
 * height 屬性在 CSS 沒給 height 時會被當成 height:Npx → w-full 縮了寬、高度卻釘住 → 圖變形。
 * 這條保證被注入的圖一定吃到 height:auto（⛔ 不依賴主題的 img{height:auto}）。
 * 高特異性寫法同 hz-textlink / GapDomain 家規（:root body 前綴）。 */
:root body img[data-hz-intrinsic] {
    height: auto;
}