/* 等等空間 Stay Square — split-stage（照片固定＋閱讀欄）
 * 版面系統（Impeccable layout pass，KK 2026-11-04）：
 *  - 單一容器：內容線 = max(gutter, (100% - max)/2)，所有區塊標題、內文、照片都對齊同一條左右線。
 *  - 間距尺度（4 為基數）：區塊上下 --sq-sec；標題→內文 --sq-s5；群組內 --sq-s3。標題上方空間永遠大於下方。
 *  - 不用 .bs section 的共用節奏；.sq 內每個 section 自己帶 padding。
 */
.bs--stay-square {
  --sq-navy: #2b4064; --sq-ink: #172333; --sq-paper: #edf0eb; --sq-pale: #f7f7f2; --sq-warm: #d9c9b2;
  --sq-on-dark: #d8e0e8;
  --sq-max: 1200px;
  --sq-gutter: clamp(20px, 5vw, 64px);
  --sq-line: max(var(--sq-gutter), calc((100vw - var(--sq-max)) / 2)); /* 用 vw：grid 子項的 % padding 會以欄寬計算 */
  --sq-sec: clamp(88px, 11vw, 160px);
  --sq-s2: 8px; --sq-s3: 12px; --sq-s4: 16px; --sq-s5: 24px; --sq-s6: 32px; --sq-s8: 48px; --sq-s10: 64px;
  --sq-col: clamp(32px, 6vw, 96px);
  background: var(--sq-pale); color: var(--sq-ink);
}
.bs--stay-square ::selection { background: var(--sq-navy); color: #fff; }
.bs--stay-square :focus-visible { outline: 2px solid var(--sq-navy); outline-offset: 3px; }
.bs--stay-square .bs-head { display: none; }

/* 重設：共用 .bs section 節奏不適用 */
.bs--stay-square .sq-plans, .bs--stay-square .sq-venue { padding: 0; } /* 其餘區塊各自帶 padding（權重 0,2,0 高於 .bs section） */
.sq { overflow: clip; }
.sq h1, .sq h2, .sq h3, .sq p { margin: 0; }
.sq h1, .sq h2, .sq h3 { font-family: "Noto Serif TC", var(--serif); font-weight: 500; letter-spacing: -.02em; white-space: pre-line; text-wrap: balance; }
.sq p { line-height: 1.8; text-wrap: pretty; }
.sq-h2 , .sq-intro h2, .sq-collection__head h2, .sq-use h2, .sq-venue h2, .sq-faq h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.18; }
.sq-lede { font-size: 1.08rem; }

/* 主要動作 */
.sq-action { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; background: var(--sq-navy); color: #fff; font-weight: 600; letter-spacing: .04em; transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s ease; }
.sq-action:hover { transform: translateY(-2px); background: var(--sq-ink); }

/* ——— Hero：左閱讀欄、右固定照片（split-stage） ——— */
.bs--stay-square .sq-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sq-s3); min-height: 100svh; padding: var(--sq-s3); background: var(--sq-pale); }
.sq-copy { min-height: calc(100svh - 2 * var(--sq-s3)); padding: var(--sq-s6) clamp(28px, 5vw, 80px) var(--sq-s6); background: var(--sq-paper); display: flex; flex-direction: column; }
.sq-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--sq-s3); }
.sq-topline img { width: min(45%, 200px); height: auto; }
.sq-toplink { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; color: var(--sq-ink); text-decoration: underline; text-underline-offset: 5px; }
.sq-hero__body { margin: auto 0; padding: var(--sq-s10) 0; max-width: 30rem; }
.sq-hero__body h1 { font-size: clamp(2.6rem, 4.2vw, 4.25rem); line-height: 1.12; }
.sq-hero__body p { margin-top: var(--sq-s5); max-width: 26em; font-size: 1.08rem; word-break: keep-all; }
.sq-hero__body .sq-action { margin-top: var(--sq-s6); }
.sq-note { padding-top: var(--sq-s4); border-top: 1px solid rgba(23,35,51,.16); font-size: 1rem; color: #435161; }
.sq-stage { position: sticky; top: var(--sq-s3); height: calc(100svh - 2 * var(--sq-s3)); overflow: hidden; background: #253447; }
.sq-stage img, .sq-stage img[width][height] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; opacity: 0; transition: opacity 1.6s ease; }
.sq-stage img.is-active, .sq-stage img.is-active[width][height] { opacity: 1; }
.sq-stage__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sq-s3) var(--sq-s5); display: flex; justify-content: space-between; background: var(--sq-paper); font-size: 1rem; color: var(--sq-ink); }

/* ——— 介紹：文字｜照片 ——— */
.bs--stay-square .sq-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sq-col); align-items: center; padding: var(--sq-sec) var(--sq-line); }
.sq-reading { max-width: 34rem; }
.sq-reading h2 + p { margin-top: var(--sq-s6); }
.sq-reading p + p { margin-top: var(--sq-s4); }
.sq-reading p { font-size: 1.08rem; }
.sq-reading p:first-of-type { font-weight: 700; }
.sq-inline-photo { margin: 0; }
.sq-inline-photo img, .sq-inline-photo img[width][height] { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% center; }
.sq-inline-photo figcaption, .sq-venue figcaption { margin-top: var(--sq-s2); font-size: 1rem; color: #526273; }

/* ——— 空間：深色、2×2 ——— */
.bs--stay-square .sq-collection { padding: var(--sq-sec) var(--sq-line); background: var(--sq-ink); color: #fff; }
.sq-collection__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 與下方照片同欄，說明對齊右欄左緣 */ gap: var(--sq-s5) var(--sq-col); align-items: end; margin-bottom: var(--sq-s10); }
.sq-collection__head p { max-width: 26rem; color: var(--sq-on-dark); }
.sq-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sq-s10) var(--sq-col); }
.sq-places article:nth-child(even) { transform: translateY(var(--sq-s10)); } /* 輕微錯位，保留節奏但不留死角 */
.sq-places article { display: flex; flex-direction: column; }
.sq-places img, .sq-places img[width][height] { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sq-places article > div:not(.md-content) { padding-top: var(--sq-s4); max-width: 30rem; }
.sq-places h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.3; }
.sq-places p { margin-top: var(--sq-s2); color: var(--sq-on-dark); }
.sq-places .md-content { display: none; }
.sq-collection .sq-places { padding-bottom: var(--sq-s10); } /* 錯位那欄的位移補回 */

/* ——— 使用方式：暖色 ——— */
.bs--stay-square .sq-use { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sq-col); align-items: start; padding: var(--sq-sec) var(--sq-line); background: var(--sq-warm); }
.sq-use > div p { max-width: 30rem; margin-top: var(--sq-s5); font-size: 1.08rem; }
.sq-use ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid rgba(23,35,51,.24); }
.sq-use li { padding: var(--sq-s5) 0; border-bottom: 2px solid rgba(23,35,51,.24); }
.sq-use b, .sq-use span { display: block; }
.sq-use b { font-family: "Noto Serif TC", var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.4; }
.sq-use span { margin-top: var(--sq-s2); }

/* ——— 方案：兩塊滿版 ——— */
.bs--stay-square .sq-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sq-plan { display: flex; flex-direction: column; align-items: flex-start; min-height: min(78svh, 720px); padding: var(--sq-sec) clamp(28px, 5vw, 80px); }
.sq-plan:first-child { padding-left: var(--sq-line); }
.sq-plan:last-child { padding-right: var(--sq-line); }
.sq-plan h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.1; }
.sq-plan p { margin-top: var(--sq-s4); max-width: 24rem; font-size: 1.08rem; }
.sq-plan strong { margin-top: auto; padding-top: var(--sq-s10); font-family: var(--latin); font-size: clamp(3.75rem, 7vw, 6rem); letter-spacing: -.04em; line-height: .95; font-variant-numeric: tabular-nums; }
.sq-plan span { margin-top: var(--sq-s3); font-size: 1rem; }
.sq-plan a { margin-top: var(--sq-s5); min-height: 44px; display: inline-flex; align-items: center; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 6px; }
.sq-plan--day { background: var(--sq-paper); color: var(--sq-ink); }
.sq-plan--day span { color: #435161; }
.sq-plan--member { background: var(--sq-navy); color: #fff; }
.sq-plan--member span { color: var(--sq-on-dark); }

/* ——— 包場：文字｜滿高照片 ——— */
.bs--stay-square .sq-venue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--sq-pale); }
.sq-venue > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--sq-sec) var(--sq-col) var(--sq-sec) var(--sq-line); }
.sq-venue p { max-width: 30rem; margin-top: var(--sq-s5); font-size: 1.08rem; }
.sq-venue .sq-action { margin-top: var(--sq-s6); }
.sq-venue figure { position: relative; margin: 0; min-height: 560px; background: #253447; }
.sq-venue img, .sq-venue img[width][height] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sq-venue figcaption { position: absolute; left: 0; bottom: 0; margin: 0; padding: var(--sq-s3) var(--sq-s5); background: var(--sq-pale); color: var(--sq-ink); }

/* ——— 常見問題 ——— */
.bs--stay-square .sq-faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--sq-s6) var(--sq-col); padding: var(--sq-sec) var(--sq-line); background: var(--sq-paper); }
.sq-faq > div { max-width: 44rem; border-top: 1px solid rgba(23,35,51,.18); }
.sq-faq p { padding: var(--sq-s5) 0; border-bottom: 1px solid rgba(23,35,51,.18); font-size: 1.05rem; }
.sq-faq b { display: block; margin-bottom: var(--sq-s2); font-family: "Noto Serif TC", var(--serif); font-weight: 700; font-size: 1.12rem; }

/* ——— 聯絡：深色收尾 ——— */
.bs--stay-square .sq-contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sq-s5); padding: var(--sq-sec) var(--sq-line) var(--sq-s8); background: var(--sq-ink); color: #fff; }
.sq-contact p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--sq-on-dark); }
.sq-contact > a { font-family: var(--latin); font-size: clamp(2.5rem, 7.5vw, 6rem); letter-spacing: -.04em; line-height: 1; color: #fff; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.sq-contact > div { width: 100%; margin-top: var(--sq-sec); padding-top: var(--sq-s5); border-top: 1px solid rgba(216,224,232,.24); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sq-s3) var(--sq-s5); color: var(--sq-on-dark); }
.sq-contact > div a { color: var(--sq-on-dark); }

/* ——— 頁尾：只留法律行＋語言，跟內容同一條線 ——— */
.bs--stay-square .bs-foot { background: var(--sq-pale); border: 0; padding: var(--sq-s6) 0 var(--sq-s8); }
.bs--stay-square .bs-foot .wrap { max-width: none; padding: 0 var(--sq-line); }
.bs--stay-square .bs-foot__grid { display: none; }
.bs--stay-square .bs-foot__bottom { margin: 0; padding: 0; border: 0; }
.bs--stay-square .bs-foot__legal { color: var(--sq-ink); }
.bs--stay-square .bs-dock { background: var(--sq-pale); border: 0; box-shadow: 0 -6px 20px rgba(23,35,51,.08); }

/* ——— 平板 ——— */
@media (max-width: 1024px) {
  .sq-places article:nth-child(even) { transform: none; }
  .sq-collection .sq-places { padding-bottom: 0; }
  .sq-plan { min-height: 0; }
}

/* ——— 手機：照片在上、閱讀欄疊上來；所有區塊單欄、同一條 gutter ——— */
@media (max-width: 760px) {
  .bs--stay-square { --sq-sec: clamp(64px, 18vw, 88px); --sq-s10: 48px; }
  .bs--stay-square .sq-hero { display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0; }
  .sq-stage { position: relative; top: auto; order: -1; height: 52svh; min-height: 300px; }
  .sq-copy { position: relative; z-index: 2; min-height: 0; margin-top: -40px; padding: var(--sq-s5) var(--sq-gutter) var(--sq-s6); }
  .sq-toplink { display: none; }
  .sq-topline { justify-content: flex-start; }
  .sq-topline img { width: min(60%, 200px); }
  .sq-hero__body { padding: var(--sq-s8) 0 var(--sq-s6); }
  .sq-hero__body h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .sq-hero__body p { font-size: 1rem; }
  .sq-action { width: 100%; }
  .bs--stay-square .sq-intro, .sq-collection__head, .bs--stay-square .sq-use, .bs--stay-square .sq-faq { grid-template-columns: minmax(0, 1fr); gap: var(--sq-s6); }
  .sq-collection__head { margin-bottom: var(--sq-s8); }
  .sq-places { grid-template-columns: minmax(0, 1fr); gap: var(--sq-s8); }
  .bs--stay-square .sq-plans, .bs--stay-square .sq-venue { grid-template-columns: minmax(0, 1fr); }
  .sq-plan, .sq-plan:first-child, .sq-plan:last-child { padding: var(--sq-sec) var(--sq-gutter); }
  .sq-plan strong { padding-top: var(--sq-s8); font-size: clamp(3.5rem, 17vw, 5rem); }
  .sq-venue > div { padding: var(--sq-sec) var(--sq-gutter); }
  .sq-venue figure { min-height: 0; aspect-ratio: 4 / 3; }
  .sq-contact > div { flex-direction: column; margin-top: var(--sq-s10); }
  .bs--stay-square .bs-foot { padding-bottom: 104px; } /* 讓出底部動作列 */
  .bs--stay-square .bs-dock { gap: var(--sq-s3); padding: var(--sq-s3) var(--sq-gutter) calc(var(--sq-s3) + env(safe-area-inset-bottom)); }
}
@media (max-width: 340px) {
  html[lang="ja"] .sq .sq-hero__body h1 { font-size: 1.95rem; letter-spacing: -.03em; }
}
@media (prefers-reduced-motion: reduce) {
  .sq-stage img, .sq-action { transition: none; }
  .sq-action:hover { transform: none; }
}