/**
 * Hauzii Poster Width Utilities
 *
 * poster 家族的「圖片寬度檔位」。值由 block 級 attribute
 * （poster_width_desktop / _tablet / _mobile）決定，class 由
 * `Hauzii\Canvas\Support\PosterWidthClass::build()` 組出（白名單守門）。
 *
 * ⚠️ 為什麼是百分比而不是 max-width
 * ------------------------------------------------------------------
 * 站主 2026-08-18 裁決：要的就是「佔欄位這麼寬」的視覺效果，**放大沒關係**。
 * 原圖比檔位窄時會被放大（可能糊）是已知且接受的取捨。不要「好心」加
 * max-width 上限 —— 那會讓大螢幕上的圖達不到指定比例，正好毀掉這個 block
 * 存在的理由。素材寬度不一致要從素材端統一。
 *
 * ⚠️ 為什麼是 `:root body .hz-poster-w-*` 而不是裸 class
 * ------------------------------------------------------------------
 * hz- utility class 對抗主題樣式的**家規格式**，與 GapDomain（.hz-pad-NN /
 * .hz-gap-NN）、.hz-textlink、.hz-hover-* 全家族一致：用 `:root body` 的高
 * 特異性 (0,1,2) 直接贏，不靠 revert-layer、不用 !important。裸 class 的
 * (0,1,0) 會輸給主題的兩段選擇器（Blocksy 實證，見 hz-textlink-utilities.css）。
 *
 * ⚠️ 斷點順序不可調換
 * ------------------------------------------------------------------
 * 三個裝置的 class 永遠同時存在於元素上（PosterWidthClass 一次吐三個）。手機
 * 同時符合 tablet 的 max-width:1023px，所以 mobile 區塊**必須排在 tablet 之
 * 後**才會勝出（同特異性、後者贏）。對齊全站 3-tier 斷點：
 * Tablet <= 1023px、Mobile <= 767px。
 */

/* ── Desktop（不帶裝置段，對齊 3-tier class prefix 慣例）────────────── */
:root body .hz-poster-w-50 { width: 50%; }
:root body .hz-poster-w-66 { width: 66.6667%; }
:root body .hz-poster-w-75 { width: 75%; }
:root body .hz-poster-w-100 { width: 100%; }

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	:root body .hz-poster-w-tablet-50 { width: 50%; }
	:root body .hz-poster-w-tablet-66 { width: 66.6667%; }
	:root body .hz-poster-w-tablet-75 { width: 75%; }
	:root body .hz-poster-w-tablet-100 { width: 100%; }
}

/* ── Mobile（必須排在 Tablet 之後，見檔頭「斷點順序」）───────────────── */
@media (max-width: 767px) {
	:root body .hz-poster-w-mobile-50 { width: 50%; }
	:root body .hz-poster-w-mobile-66 { width: 66.6667%; }
	:root body .hz-poster-w-mobile-75 { width: 75%; }
	:root body .hz-poster-w-mobile-100 { width: 100%; }
}