@import url("fonts.css");
@import url("tokens.css");

/* ==========================================================================
   基礎
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, p { margin: 0; }

/* 鍵盤操作時才顯示焦點框，滑鼠點擊不顯示 */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  z-index: 100;
}
.skip-link:focus { left: var(--s-2); }

/* ==========================================================================
   版面骨架
   桌機為左右兩欄：左側固定導覽，右側內容捲動。
   平板與手機改為上下堆疊。
   ========================================================================== */

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* content-col 包住語言切換器與主要內容。語言切換器是正常文件流裡的
   區塊（實測 position: relative，非 absolute），在每一頁都佔用真正的
   版面空間、把下方內容往下推——不是浮在內容上方的疊圖。
   實測數值（桌機 ≥810px）：外距上方 40px → 切換器本身 41px 高
   → 間距 24px → 內容開始，加總正好等於 105px。 */
.page {
  padding: var(--s-5) var(--page-pad-m);
}

@media (min-width: 810px) {
  body {
    grid-template-columns: var(--nav-w) 1fr;
    grid-template-rows: 1fr auto;
  }
  .site-head {
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .content-col {
    grid-column: 2;
    padding-top: 40px;
  }
  .page   { padding: 0 var(--page-pad) var(--s-7); }
  .site-foot { grid-column: 2; }
}

/* ==========================================================================
   導覽列
   ========================================================================== */

.site-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--page-pad-m);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.brand img { width: 44px; height: auto; }

/* 側欄裡的兩條分隔線：logo 下方一條、導覽清單與社群圖示之間一條。
   手機／平板收合狀態下 site-head 是 flex row，這條線預設不顯示，
   只在桌機側欄（column 排列）時才出現。 */
.site-head__rule {
  display: none;
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--c-border);
}

/* 第二條線（導覽清單與社群圖示之間）上下都要留白，不要貼著文字；
   第一條（logo 下方）維持貼齊，已對齊舊站實測數值，不要動。 */
.nav-list + .site-head__rule {
  margin: var(--s-6) 0;
}

/* --- 選單開關 --------------------------------------------------------------
   單純三條線，不要外框、不要文字標籤（文字留給螢幕閱讀器用，
   畫面上不顯示）——按鈕本身只留最小 44px 點擊面積。 */
.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7.5px;  /* 3px 再加大 150% */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--c-heading);
  cursor: pointer;
}

/* 粗細用 scaleY 而非 height 呈現——0.75px 這種次像素高度，
   三條線各自落在不同的次像素位置，瀏覽器點陣化時各自四捨五入，
   粗細會看起來不一致；改用固定 1px 的盒子＋transform 縮放，
   縮放是同一套算法處理，三條線視覺粗細才會真正一致。 */
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 1px;
  transform: scaleY(.75);
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

/* 文字標籤只給螢幕閱讀器，畫面上不佔位置 */
.nav-toggle__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 展開時三條線轉為叉號 */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg) scaleY(.75); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg) scaleY(.75); }

/* --- 選單內容：手機/平板是「上層全螢幕選頁」，不是下拉選單 ---
   用 position:fixed + 高 z-index，不管頁面內容裡有什麼定位元素
   （例如首頁輪播圖，同樣是 positioned 元素），選單一定蓋在最上層——
   之前用 position:absolute 掛在 .site-head 下面，跟後面 .hero 同樣
   是 positioned 元素時，依 DOM 順序 .hero 反而畫在選單上面，
   導致輪播圖把整個選單擋住、選項按不到。fixed 是相對 viewport，
   不會有這個問題。 */
.site-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: var(--s-6) var(--page-pad-m);
  overflow-y: auto;
  background: var(--c-bg);
}
.site-nav.is-open { display: block; }

.nav-list a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 15px 0;  /* 實測舊站每個項目高 52px（含 22px 圖示），反推此數值 */
  color: var(--c-text);
  transition: color .15s ease;
}
/* 滑過與當前頁面都轉為品牌橘；差別在圖示是線稿或實心 */
.nav-list a:hover,
.nav-list a:focus-visible { color: var(--c-accent); }
.nav-list a.is-active { color: var(--c-accent); }

/* 語言切換器：正常文件流裡的區塊，靠右對齊，把下方內容往下推。
   手機／平板寬度下沒有側欄圖示可對照，維持簡單靠右即可；
   桌機寬度的精確間距見 .content-col 的說明。 */
.lang-switch {
  padding: var(--s-5) var(--page-pad-m) 0;
  text-align: right;
}
@media (min-width: 810px) {
  .lang-switch { padding: 0 var(--page-pad); margin-bottom: 24px; }
}
.lang-switch a {
  display: inline-block;
  padding: 11px var(--s-3);  /* 實測舊站按鈕高度 41px，反推得此數值 */
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  font-size: var(--t-info);
  color: var(--c-heading);
}

/* 社群／聯絡圖示：4 個實心 icon，釘在側欄最底部（Facebook、Instagram、
   Email、Phone），與導覽清單之間用彈性空間推開，而非邊框分隔。 */
.social {
  display: flex;
  gap: var(--s-5);
  margin-top: auto;
  padding-top: var(--s-5);
}
.social a {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--c-text);
  transition: color .15s ease;
}
.social a:hover { color: var(--c-accent); }
.social svg { width: 100%; height: 100%; fill: currentColor; }

/* --- 桌機：改為左側常駐直式導覽 --- */
@media (min-width: 810px) {
  .site-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-6);
    padding: var(--s-7) var(--s-7);  /* 實測舊站 Logo 距上緣、左緣皆為 48px */
    border-bottom: none;
    border-right: 1px solid var(--c-border);
  }
  .brand img { width: 64px; }
  .nav-toggle { display: none; }
  .site-head__rule { display: block; }
  .site-nav {
    display: flex;
    flex-direction: column;
    position: static;
    flex: 1;
    padding: 0;
    border: none;
  }
}

/* ==========================================================================
   頁尾
   ========================================================================== */

.site-foot {
  padding: var(--s-5) var(--page-pad-m) var(--s-6);
  border-top: 1px solid var(--c-border);
  font-family: var(--f-info);
  font-size: var(--t-info);
  line-height: var(--t-info-lh);
  color: var(--c-footer);
}

.foot-info li { margin-bottom: var(--s-2); }
.foot-info span { margin-right: var(--s-1); font-weight: var(--w-medium); }
.foot-info a:hover { color: var(--c-heading); }

.copyright {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  line-height: var(--t-small-lh);
}

@media (min-width: 810px) {
  .site-foot { padding: var(--s-5) var(--page-pad); }
  .foot-info { display: flex; gap: var(--s-6); }
  .foot-info li { margin-bottom: 0; }
}

/* ==========================================================================
   內容排版
   ========================================================================== */

.page-title {
  font-family: var(--f-sans);
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  font-weight: var(--w-medium);
  color: var(--c-heading);
  margin-bottom: var(--s-6);
}

.prose p {
  max-width: 46em;
  margin-bottom: var(--s-4);
  color: var(--c-dish-body);
  line-height: 1.9;
}

.feature-image {
  margin: 0 0 var(--s-6);
}
.feature-image img {
  width: 80%;
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   進場動畫
   元素捲入視窗時淡入並上滑，重現舊站的進場效果。

   無障礙：使用者若在系統設定開啟「減少動態效果」，直接顯示不做動畫。
   穩健性：預設狀態為可見，動畫由 JS 加上 .reveal 後才生效，
           因此 JS 失效時內容仍然正常顯示，不會整頁空白。
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 同一組內的元素依序進場，產生層次感 */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   卡片格線（特色菜餚、空間環境等）
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--s-6);
  }
}

.card a {
  display: block;
  width: 60%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.card__label {
  display: block;
  padding: var(--s-4);
  font-size: var(--t-dish);
  line-height: var(--t-dish-lh);
  font-weight: var(--w-bold);
  font-family: var(--f-serif);
  color: var(--c-dish-title);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .card a:hover { transform: none; }
}

/* ==========================================================================
   最新消息
   舊站用 CMS 動態抓取，離線匯出後永遠是空白＋crash（跨網域擋下 CORS）。
   這裡改成資料驅動的靜態卡片格線，資料在 src/data/press.json，
   之後有新報導只要加一筆 JSON，不用碰版面或程式碼。
   ========================================================================== */

.press-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 640px) {
  .press-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .press-list { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}

.press-card a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg);
  transition: transform .25s ease, box-shadow .25s ease;
}

.press-card a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.press-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.press-card__body { padding: var(--s-4); }

.press-card time {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-text);
  font-size: var(--t-info);
}

.press-card__title {
  margin: 0 0 var(--s-3);
  font-family: var(--f-serif);
  font-size: var(--t-dish);
  line-height: var(--t-dish-lh);
  font-weight: var(--w-bold);
  color: var(--c-dish-title);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.press-card__link {
  font-size: var(--t-info);
  color: var(--c-accent);
}

@media (prefers-reduced-motion: reduce) {
  .press-card a:hover { transform: none; }
}

/* ==========================================================================
   聯絡我們
   ========================================================================== */

.contact-stack {
  display: grid;
  gap: var(--s-8);
}

.section-title {
  font-family: var(--f-serif);
  font-size: calc(var(--t-dish-cat) - 4px);
  line-height: var(--t-dish-cat-lh);
  font-weight: var(--w-bold);
  color: var(--c-dish-title);
  margin-bottom: var(--s-5);
}

/* 舊站這幾個按鈕背景色跟頁面背景一模一樣、也沒有邊框——
   實測就是這樣（並非漏套色），只靠 padding 撐出可點擊範圍。 */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.contact-action {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 200px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--t-body);
  transition: color .2s ease;
}

.contact-action:hover { color: var(--c-accent); }

/* 電子信箱文字較長，舊站讓它撐滿整列寬度，其餘固定 200px */
.contact-actions a[href^="mailto:"] { width: 100%; }

/* ==========================================================================
   首頁輪播
   無 JS 時只顯示第一張，頁面仍然完整可用。
   ========================================================================== */

/* hero 卡片不貼齊邊界，而是自然沿用 .page 的內距（跟其他頁面的內容
   一樣寬），並帶圓角——實測舊站是這樣，不是滿版全出血的設計。 */
.hero {
  position: relative;
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 所有照片橫向並排在一條 track 上，用 transform 位移切換——
   這是舊站的實際做法（整條 track 滑動），不是切換 display。
   無 JS 時：.hero 有 overflow:hidden，track 沒有 transform，
   自然只看得到最左邊（第一張），其餘被裁掉在可視範圍外，
   所以不需要額外的無 JS 備援規則。 */
.hero__track {
  display: flex;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.hero__slide {
  flex: 0 0 100%;
  width: 100%;
}

.hero__slide img {
  width: 100%;
  height: 60vh;
  min-height: 320px;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero__track { transition: none; }
}

.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: rgb(0 0 0 / 35%);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.hero__nav:hover { background: rgb(0 0 0 / 55%); }
.hero__nav--prev { left: var(--s-3); }
.hero__nav--next { right: var(--s-3); }

.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-4);
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.hero__dots button[aria-current="true"] {
  background: #fff;
  transform: scale(1.4);
}

/* 810px 起（側欄常駐區間），輪播圖填滿整個視窗高度——
   實測舊站首頁 hero 圖片高度精確等於 viewport 高度，非 78vh 估計值。
   卡片本身不貼齊邊界，寬度自然沿用 .page 的左右內距即可。 */
@media (min-width: 810px) {
  .hero__slide img { height: 100vh; }
}

/* ==========================================================================
   空間環境
   ========================================================================== */

.room-list { display: grid; gap: var(--s-8); }

.room figure { margin: 0; }

.room img {
  width: 85%;
  border-radius: var(--radius);
  aspect-ratio: 1.7 / 1;
  object-fit: cover;
}

/* 大廳有兩張照片可左右切換，其餘房型都只有一張，不受影響——
   結構與寫法比照首頁 hero 輪播（track 位移，非切換 display）。
   裁切框（.room__gallery-frame）必須是「靜止」的元素，不能和會 transform
   的 track 是同一個——两者疊在一起在部分瀏覽器會讓滑動中的照片露出圓角外，
   這正是 hero 原本的寫法（裁切在 .hero，位移在 .hero__track），這裡照搬。 */
.room__gallery { position: relative; }

.room__gallery-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.room__gallery-track {
  display: flex;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.room__gallery-slide {
  flex: 0 0 100%;
  width: 100%;
}

.room__gallery-slide img {
  aspect-ratio: 1.7 / 1;
}

@media (prefers-reduced-motion: reduce) {
  .room__gallery-track { transition: none; }
}

.room__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgb(0 0 0 / 35%);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.room__gallery-nav:hover { background: rgb(0 0 0 / 55%); }
.room__gallery-nav--prev { left: var(--s-3); }
.room__gallery-nav--next { right: var(--s-3); }

.room__gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-3);
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.room__gallery-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.room__gallery-dots button[aria-current="true"] {
  background: #fff;
  transform: scale(1.4);
}

.room figcaption { padding-top: var(--s-4); }

.room__name {
  font-family: var(--f-serif);
  font-size: var(--t-dish-cat);
  line-height: var(--t-dish-cat-lh);
  font-weight: var(--w-bold);
  color: var(--c-dish-title);
}

.room__cap,
.room__note {
  margin-top: var(--s-1);
  color: var(--c-text);
  font-size: var(--t-info);
}

.room__cap span,
.room__note span {
  display: block;
  margin-top: 2px;
  font-family: var(--f-info);
  color: var(--c-border);
}

.room__note { margin-top: var(--s-2); }

.credit {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-small);
  color: var(--c-text);
}

@media (min-width: 1200px) {
  .room-list { max-width: 62rem; }
}

/* ==========================================================================
   導覽列圖示（「換色捲動」效果）
   線稿與實心兩份路徑疊放，用 transform 上下滑動切換位置。
   兩者同時存在於 DOM，切換時不需重新繪製，因此過渡平滑無閃爍。
   ========================================================================== */

.nav-icon {
  /* 必須是 block/inline-block 才會生效 width/height——
     inline 元素的寬高設定會被忽略，只有在 flex/grid 容器裡才會被
     自動當成 block 處理。.nav-icon 同時用在 flex 的 .nav-list a
     與非 flex 的 .social a 裡，兩種情境都要正確顯示，
     所以明確指定 display，不能只靠父層是不是 flex 容器來決定。 */
  display: inline-block;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.nav-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  transition: transform .35s ease-in-out;
}

/* 線稿（未選中色）在原位；實心（選中色）預先放在正下方、被裁掉看不到，
   一滑動就從那裡冒出來，跟線稿交換位置——不是淡入淡出，是位置互換。 */
.nav-icon__line { transform: translateY(0); }
.nav-icon__fill { transform: translateY(100%); }

/* 只有「當前頁面」永遠顯示實心（滑到頂上消失、實心留在原位）。
   這是舊站的行為：實心代表所在位置，滑過代表可點擊。 */
.nav-list a.is-active .nav-icon__line { transform: translateY(-100%); }
.nav-list a.is-active .nav-icon__fill { transform: translateY(0); }

/* 滑入：線稿向上滑出消失，實心從下方滑入原位；滑出則反向互換回來。
   由 nav-icon-hover.js 在 mouseenter/mouseleave 時加減 .is-hovering，
   單純用 transition 就能雙向作用，不需要 keyframe 動畫。 */
.nav-icon.is-hovering .nav-icon__line { transform: translateY(-100%); }
.nav-icon.is-hovering .nav-icon__fill { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .nav-icon svg { transition: none; }
}

/* ==========================================================================
   側邊導覽欄的兩段式行為
   810–1199px：寬 180px，只顯示圖示（沿用舊站的平板版型）
   ≥1200px   ：寬 320px，圖示旁加上文字標籤
   ========================================================================== */

@media (min-width: 810px) and (max-width: 1199px) {
  .site-head { padding: var(--s-5) var(--s-4); gap: var(--s-5); }
  .brand img { width: 48px; margin: 0 auto; }

  /* 僅圖示時置中，並移除文字標籤 */
  .nav-label { display: none; }
  .nav-list a { justify-content: center; gap: 0; padding: 15px 0; }
}

@media (min-width: 1200px) {
  body { grid-template-columns: var(--nav-w-lg) 1fr; }
}