/* =============================================================
   和肽生醫 HelixTide — LOGO 變體尺寸工具類（階段 1：視覺系統）
   四組變體：彩色橫式 / 彩色直式 / 反白 / 單色（見 assets/logo/）
   §1.4 LOGO 變體與 Icon 系統
   ============================================================= */

/* 基礎：LOGO 圖片預設高度控制，寬度自適應 */
.brand-logo { height: auto; width: auto; display: inline-block; }

/* 彩色橫式：主 nav、頁首、文件 */
.logo-h { height: 40px; }            /* 桌面 nav */
.logo-h--lg { height: 56px; }        /* 頁首/footer 大 */

/* 彩色直式：Hero、宣傳物、社交大頭貼 */
.logo-v { height: 96px; }
.logo-v--hero { height: 140px; }

/* 反白（深底用） */
.logo-white { height: 40px; }
.on-dark .logo-color, .on-dark .logo-mono { display: none; }      /* 深底隱藏彩色/單色 */
.on-dark .logo-white { display: inline-block; }

/* 單色簡化：列印、小尺寸（< 80px） */
.logo-mono { height: 36px; }
.logo-mono-soft { height: 36px; opacity: 0.7; }

/* ---------- 子品牌：Le' Esponeux 御絲芃（暖砂米 × PARIS 副標） ---------- */
/* 橫式長條比例（約 3.3:1），以高度控制最穩定 */
.le-logo { height: 40px; }              /* 子品牌區塊標題 */
.le-logo--lg { height: 64px; }          /* 子品牌 Hero */
.le-logo--sm { height: 28px; }          /* 卡片、頁尾小尺寸 */
/* 深底用白版（暖砂米底上亦維持辨識） */
.le-logo--on-dark { filter: none; }

/* 行動 nav 收縮時略縮 */
@media (max-width: 768px) {
  .logo-h { height: 34px; }
  .logo-v--hero { height: 104px; }
}

/* 無障礙：聚焦可見 */
.brand-logo:focus-visible { outline: 2px solid var(--ht-highlight); outline-offset: 3px; border-radius: 4px; }