/*
檔案位置：jonaminz/assets/css/page-home.css
用途：CSS 疊加第 7 層 - Page Layer，只給首頁（home，即「大廳」）用。
刻意疊加在 reservoir 六層之上，蓋掉 base 層的預設色，但不去改
base/components 本體。其他頁面不會載到這份檔案（見 config.json ->
pages.home.entry.styles）。

2026-07-12 改版：原本是全螢幕相片當背景疊文字，橫向構圖的照片在窄螢幕
下無論怎麼調 background-position 都會裁掉其中一人（可視寬度只剩原圖的
一小段）。改成固定 aspect-ratio 的小相片框（.hero-photo 用 <img> +
object-fit:cover），裁切比例是相對值、不隨容器寬度改變，從根本解決
RWD 問題。同時整頁從絕對定位疊層改成正常 flex 直向排列，比之前的
100dvh + overflow:hidden 疊層寫法簡單、也更不容易在極端視窗尺寸下裁到
內容。

2026-07-13（大廳／房間／後台三層架構定案後）：原本深色簽名式導覽改成
淺色「米紙 Rice Paper」——大廳跟 Jonathan／Minz 的個別房間不再共用同一
套視覺，深色系留給 Jonathan 未來的房間，大廳本身改走跟圓相字標
（assets/img/jonaminz-zen-logo.svg）同色溫的淺米紙。<h1>jonaminz</h1>
文字字標拿掉，改用真的 logo 圖檔——logo 本身已經有文字，兩個疊在一起
會太多。見 AI_CONTEXT/DECISIONS.md §四。
*/

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg-lobby);
  color: var(--color-text-lobby);
}

.page {
  min-height: 100dvh;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  font-weight: 950;
  letter-spacing: -0.06em;
  font-size: 23px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 身分登入狀態（implementation plan 第 9 項），assets/js/app.js 動態插入
   [data-nav-identity] 容器：未登入顯示「登入」連結，已登入顯示「OO你好
   ＋登出」。首頁 nav 現在只有這一組互動元素。 */
.nav-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-identity-greeting {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text-lobby) 78%, transparent);
  font-weight: 820;
}

.nav-identity a,
.nav-identity button {
  padding: 9px 13px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-text-lobby) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-lobby-accent) 35%, transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text-lobby) 78%, transparent);
  font-weight: 820;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-decoration: none;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 16px 0;
}

.hero-photo {
  width: min(1100px, 78vw);
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

/* 2026-07-13：套上 layout-metrics.js 廣播的 RWD 判斷（data-jonaminz-rwd-group，
   entry-core.js shell chain 保證 shell ready 前就已經量測完，不會有 FOUC）。
   小螢幕維持現有的相框感，只是加大到貼齊 .page 內距邊緣；大螢幕改滿版
   全寬橫幅，跳出 .page 左右 padding（用固定 px 值抵銷，不用 100vw，避免
   捲軸寬度造成的水平溢出）。 */
html[data-jonaminz-rwd-group="small"] .hero-photo {
  width: 100%;
}

html[data-jonaminz-rwd-group="large"] .hero-photo {
  width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
  /* 2026-07-13：原本用 height:min(58vh,680px) 隨視窗高度變化，矮胖視窗
     （筆電瀏覽器扣掉工具列後很常見）會把橫幅壓得比原圖（3:2）誇張很多，
     object-fit:cover 裁掉太多垂直範圍，實測會把頭切掉；就算加 min-height
     安全下限硬撐，極端案例還是會在「保頭」跟「保手部泡泡」之間二選一。
     改用固定 aspect-ratio，裁切比例完全不受視窗高度影響——跟這個檔案
     稍早（見檔頭 2026-07-12 說明）小螢幕相框改固定 aspect-ratio 是同一個
     根本解法，不用再為不同視窗形狀猜安全邊界。3:1 讓可視垂直範圍固定是
     原圖的一半，頭部（約在原圖 25% 處）跟舉手的泡泡瞬間（約在 35-45%
     處）同時留在框內。 */
  aspect-ratio: 3 / 1;
  max-height: 720px;
  border-radius: 0;
  box-shadow: none;
}

html[data-jonaminz-rwd-group="large"] .hero-photo img {
  /* 滿版橫幅的寬高比跟原圖（3:2）差很多，蓋掉小螢幕相框版用的
     46%（那個值是配 16:9 卡片調的，垂直裁切很輕微，46% 夠安全）。固定
     3:1 之後可視範圍穩定在原圖中段偏上，30% 讓頭跟舉手泡泡都在框內。 */
  object-position: center 30%;
}

.hero-logo {
  display: block;
  /* 2026-07-14 深夜更正：使用者給的方形圖徽是要當 favicon 用的，不是
     換掉這裡的橫幅字標——曾短暫換錯（v0.28.1-2），已還原。 */
  width: min(520px, 78vw);
  height: auto;
}

.hero p {
  margin: 0;
  max-width: 420px;
  color: color-mix(in srgb, var(--color-text-lobby) 64%, transparent);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.5;
}

.line {
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-lobby-accent) 8%, transparent),
    color-mix(in srgb, var(--color-lobby-accent) 55%, transparent),
    color-mix(in srgb, var(--color-lobby-accent) 8%, transparent)
  );
}

.signature {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 4px;
}

.name-link {
  display: grid;
  gap: 8px;
  color: color-mix(in srgb, var(--color-text-lobby) 86%, transparent);
  transition: transform 0.2s ease, color 0.2s ease;
}

.name-link:hover {
  color: var(--color-lobby-accent);
  transform: translateY(-5px);
}

.name-link.right {
  text-align: right;
  justify-items: end;
}

.name-link strong {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

@media (max-width: 540px) {
  .page {
    padding: 18px 20px;
    gap: 18px;
  }

  .hero {
    gap: 16px;
  }

  .hero p {
    display: none;
  }
}