/**
 * 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 reset 用 !important 讀取 --_hz-fs / --_hz-fw / --_hz-lh
 * 2. 每個 Tailwind class 設定對應的 custom property（unlayered，不受 @layer 影響）
 * 3. Custom property 在 computed-value time 解析，正確取得 Tailwind 值
 */

/* Heading reset — !important 覆蓋 theme/admin heading CSS */
:is(h1, h2, h3, h4, h5, h6)[data-hz-text] {
    font-size: var(--_hz-fs, inherit) !important;
    font-weight: var(--_hz-fw, inherit) !important;
    line-height: var(--_hz-lh, inherit) !important;
}

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

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

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