/* ==========================================================================
   House16 — 元件
   ========================================================================== */

/* --------------------------------------------------------------------------
   非對稱網格
   蒙德里安的精髓在「不等分」。這裡刻意不提供等分欄位，
   避免版面退化成九宮格（＝魔術方塊）。
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.grid--5-7 { grid-template-columns: 5fr 7fr; }
.grid--7-5 { grid-template-columns: 7fr 5fr; }
.grid--4-8 { grid-template-columns: 4fr 8fr; }
.grid--8-4 { grid-template-columns: 8fr 4fr; }
.grid--3-9 { grid-template-columns: 3fr 9fr; }

@media (max-width: 860px) {
  .grid--5-7, .grid--7-5, .grid--4-8, .grid--8-4, .grid--3-9 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   蒙德里安線條
   全站的分節裝置。線條「畫」進畫面，而非靜態出現。
   -------------------------------------------------------------------------- */

/* 預設為「已畫好」。JS 會加上 .is-armed 才收起來準備播放，
   因此關閉 JS 時線條照常存在，只是沒有繪入動畫。 */
.rule {
  position: relative;
  height: var(--line-w);
  background: var(--ink);
  transform-origin: left;
  transition: transform var(--dur-draw) var(--ease-line);
}
.rule.is-armed { transform: scaleX(0); }
.rule.is-armed.is-in { transform: scaleX(1); }

/* 線上的小色塊 —— 全站彩色主要出現在這種 12px 見方的尺度 */
.rule::after {
  content: "";
  position: absolute;
  top: calc(var(--line-w) * -1 - 10px);
  left: var(--tick-x, 22%);
  width: 12px;
  height: 12px;
  background: var(--tick, var(--red));
  transition: opacity var(--dur) var(--ease-out) 500ms;
}
.rule.is-armed::after { opacity: 0; }
.rule.is-armed.is-in::after { opacity: 1; }

.rule--blue   { --tick: var(--blue); }
.rule--yellow { --tick: var(--yellow); }

/* --------------------------------------------------------------------------
   區塊標頭
   -------------------------------------------------------------------------- */

.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.sec-head .lead { margin-top: var(--sp-3); }

/* 區塊編號：西文小字 + 色點，取代大色塊 */
.sec-num {
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-latin);
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   按鈕
   直角、2px 黑框。hover 時整顆位移並露出實心投影 —— 平面設計語彙，
   比漸層陰影更貼近蒙德里安。
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-shadow: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--line);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 0 0 var(--btn-shadow);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--btn-shadow);
}
.btn:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--btn-shadow);
}

/* 主 CTA：訂房。全站唯一大面積用紅的地方。 */
.btn--book {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-shadow: var(--ink);
  border-color: var(--ink);
}
.btn--book:hover { --btn-bg: var(--red-deep); }

.btn--ink {
  --btn-bg: var(--ink);
  --btn-fg: var(--canvas);
  --btn-shadow: var(--yellow);
}

.btn--ghost { --btn-bg: transparent; --btn-shadow: var(--blue); }
.btn--ghost:hover { --btn-bg: var(--blue); --btn-fg: #fff; }

.btn--sm { padding: 0.7rem 1.3rem; font-size: var(--fs-micro); }
.btn--full { width: 100%; }

/* 文字連結：底線由左往右畫出 */
.link {
  position: relative;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% var(--line-w);
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast);
}
.link:hover, .link:focus-visible {
  background-size: 100% var(--line-w);
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   導覽列
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  border-bottom: var(--line-w) solid transparent;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

/* 透明狀態下白字會壓在首屏照片的亮天空上，讀不出來。
   加一層由上而下的暗色漸層當底，捲到吸頂狀態後淡出。 */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0));
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.nav.is-stuck::before { opacity: 0; }

/* 選單展開時，導覽列浮在米白色的選單之上。
   此時首屏那套「白字 + 深色漸層」會變成白字配白底，所以一律切成墨色。 */
.nav.is-menu-open::before { opacity: 0; }
.nav.is-menu-open .nav__logo { color: var(--ink); }

/* 首屏是照片，導覽先透明白字；捲離首屏後轉為畫布白 */
.nav__inner {
  position: relative;   /* 疊在漸層之上 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 5rem;
}

.nav.is-stuck {
  background: var(--canvas);
  border-bottom-color: var(--ink);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--ls-latin);
  color: #fff;
  transition: color var(--dur) var(--ease-out);
}
.nav.is-stuck .nav__logo { color: var(--ink); }

/* 品牌標記：三格不等分的蒙德里安縮影 */
.nav__mark { width: 26px; height: 26px; flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}
.nav__links a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: #fff;
  transition: color var(--dur) var(--ease-out);
}
.nav.is-stuck .nav__links a { color: var(--ink); }
.nav__links a:hover { color: var(--yellow); }
.nav.is-stuck .nav__links a:hover { color: var(--red); }

.nav__toggle { display: none; }

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: flex-end;
  }
  .nav__toggle span {
    display: block;
    width: 26px;
    height: var(--line-w);
    background: #fff;
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur-fast),
                background-color var(--dur) var(--ease-out);
  }
  .nav.is-stuck .nav__toggle span { background: var(--ink); }
  .nav__toggle[aria-expanded="true"] span { background: var(--ink); }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* 手機全屏選單 */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--canvas);
  padding: 7rem var(--gutter) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
  overflow-y: auto;
}
.menu.is-open { transform: translateY(0); visibility: visible; }

.menu a {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  padding-block: 0.4rem;
  border-bottom: var(--line-hair);
}
.menu a:hover { color: var(--red); }
.menu .btn { margin-top: var(--sp-3); }


/* 常駐訂房列已整個移除（桌機浮動卡片、手機吸底列皆是）。
   訂房入口改為完全走版面內的 CTA：首屏、各房型卡、結尾區塊、頁尾，
   以及手機選單裡的「查看空房・官網專屬優惠」。
   不再有任何浮動元素遮住內容。 */

/* --------------------------------------------------------------------------
   圖片
   -------------------------------------------------------------------------- */

.figure {
  position: relative;
  margin: 0;
  background: var(--hairline);   /* 載入前的底色，避免空白閃爍 */
  overflow: hidden;
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.figure figcaption {
  margin-top: 0.85rem;
  font-size: var(--fs-micro);
  color: var(--grey);
}

/* 角落色塊：圖片唯一的彩色元素，約佔圖面 2%。
   同樣是預設可見，只有被 JS 標記為 .reveal 時才滑入。 */
.figure--tick::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 3.25rem; height: 3.25rem;
  background: var(--tick, var(--yellow));
  transition: transform var(--dur) var(--ease-out) 200ms;
}
.figure--tick.reveal::after       { transform: translate(100%, 100%); }
.figure--tick.reveal.is-in::after { transform: translate(0, 0); }
.figure--tick.tick-blue { --tick: var(--blue); }
.figure--tick.tick-red  { --tick: var(--red); }

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   房型卡
   -------------------------------------------------------------------------- */

.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.room {
  display: flex;
  flex-direction: column;
  background: var(--canvas-lift);
  border: var(--line);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.room:hover {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 var(--accent, var(--red));
}
.room:hover .figure img { transform: scale(1.045); }

/* 每張卡輪流用紅／藍／黃，避免同色重複也避免全部上色 */
.room:nth-child(3n+1) { --accent: var(--red); }
.room:nth-child(3n+2) { --accent: var(--blue); }
.room:nth-child(3n+3) { --accent: var(--yellow); }

.room__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.room__media img { width: 100%; height: 100%; object-fit: cover; }

.room__tag {
  position: absolute;
  top: 0; left: 0;
  background: var(--accent, var(--red));
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
}
.room:nth-child(3n+3) .room__tag { color: var(--ink); }

.room__body {
  padding: 1.5rem 1.5rem 1.65rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.9rem;
}
.room__name { font-size: var(--fs-h3); }
.room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  font-size: var(--fs-micro);
  color: var(--grey);
}
.room__meta li { display: flex; align-items: center; gap: 0.35rem; }
.room__meta li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--ink);
  flex: none;
}

.room__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: var(--line-hair);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
}
.room__price { line-height: 1.3; }
.room__price small { display: block; font-size: var(--fs-micro); color: var(--grey); }
.room__price b { font-size: 1.4rem; font-family: var(--font-latin); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   服務清單
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: var(--line);
  border-left: var(--line);
}
.service {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-right: var(--line);
  border-bottom: var(--line);
  transition: background-color var(--dur) var(--ease-out);
}
.service:hover { background: var(--canvas-lift); }
.service h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.service p { font-size: var(--fs-small); color: var(--ink-70); line-height: 1.8; }

.service__num {
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-latin);
  color: var(--grey);
  display: block;
  margin-bottom: 0.9rem;
}
.service:nth-child(4n+1) .service__num { color: var(--red); }
.service:nth-child(4n+2) .service__num { color: var(--blue); }
.service:nth-child(4n+3) .service__num { color: #C9A100; }

/* --------------------------------------------------------------------------
   資訊條（數字）
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-3);
}
.fact b {
  display: block;
  font-family: var(--font-latin);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fact span {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--fs-micro);
  color: var(--grey);
  letter-spacing: 0.05em;
}
.fact i { font-style: normal; font-size: 0.5em; margin-left: 0.15em; }

/* --------------------------------------------------------------------------
   常見問題
   -------------------------------------------------------------------------- */

.faq { border-top: var(--line); }
.faq__item { border-bottom: var(--line-hair); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 1.35rem 0;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 700;
  transition: color var(--dur-fast);
}
.faq__q:hover { color: var(--red); }

.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.faq__icon::before { inset: 7px 0; height: 2px; }
.faq__icon::after  { inset: 0 7px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  padding-bottom: 1.4rem;
  font-size: var(--fs-small);
  color: var(--ink-70);
  max-width: var(--maxw-text);
}

/* --------------------------------------------------------------------------
   頁尾
   -------------------------------------------------------------------------- */

.foot {
  background: var(--ink);
  color: var(--canvas);
  padding-block: var(--sp-6) var(--sp-4);
}
.foot a { color: var(--canvas); }
.foot a:hover { color: var(--yellow); }
.foot h3 {
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-latin);
  color: var(--grey);
  margin-bottom: var(--sp-2);
}
.foot__grid {
  display: grid;
  grid-template-columns: 5fr 3fr 4fr;
  gap: var(--sp-4);
}
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr; } }

.foot__brand {
  font-family: var(--font-latin);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--ls-latin);
  margin-bottom: var(--sp-2);
}
.foot ul li { margin-bottom: 0.55rem; font-size: var(--fs-small); }

.foot__legal {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid #2A2A2A;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   捲動揭露
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 同一區塊內依序浮現 */
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rule, .rule.is-armed { transform: scaleX(1); }
  .rule::after, .rule.is-armed::after { opacity: 1; }
  .figure--tick::after, .figure--tick.reveal::after { transform: none; }
  .btn:hover, .room:hover { transform: none; }
}