/* ==========================================================================
   白鹿情感｜空間區塊樣式
   ---------------------------------------------------------------------------
   用於「關於白鹿」與「首頁」，呈現實際的辦公與洽談空間。
   版型：
     .bg-block     把空間照片當整區背景（上方壓遮罩）
     .space-hero   滿版大圖 ＋ 疊字
     .space-split  左圖右文
     .space-grid   多張並排
   ========================================================================== */

/* ==========================================================================
   區塊底圖
   ---------------------------------------------------------------------------
   把空間照片當成整個區塊的背景，上面壓深色遮罩讓文字保持可讀。
   遮罩強度三級，依文字量選擇：
     .bg-block--soft   只有標題 → 遮罩淡，照片看得清楚
     （預設）           標題＋一段說明
     .bg-block--deep   文字較多 → 遮罩深
   ========================================================================== */
.bg-block {
  position: relative;
  isolation: isolate;
  background-color: var(--ink-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* 遮罩：用偽元素疊漸層，避免直接壓在照片上造成髒色 */
.bg-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(27, 29, 34, .90) 0%,
    rgba(27, 29, 34, .72) 45%,
    rgba(27, 29, 34, .90) 100%);
}
.bg-block--soft::before {
  background: linear-gradient(180deg,
    rgba(27, 29, 34, .76) 0%,
    rgba(27, 29, 34, .50) 50%,
    rgba(27, 29, 34, .76) 100%);
}
.bg-block--deep::before {
  background: linear-gradient(180deg,
    rgba(27, 29, 34, .95) 0%,
    rgba(27, 29, 34, .86) 50%,
    rgba(27, 29, 34, .95) 100%);
}
.bg-block .wrap { position: relative; }

/* 底圖上的文字：統一提亮，確保對比足夠 */
.bg-block h2,
.bg-block h3,
.bg-block .hgroup__title { color: #fff; }
.bg-block p,
.bg-block .hgroup__lead,
.bg-block .case__excerpt { color: rgba(255, 255, 255, .9); }
.bg-block .hgroup__eyebrow,
.bg-block .space-head__eyebrow { color: #EBC9A6; }
.bg-block .rule { background: rgba(255, 255, 255, .34); }

/* 底圖上的卡片：改成半透明深色 + 白字，才不會與背景打架 */
.bg-block .case {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  backdrop-filter: blur(3px);
}
.bg-block .case__title { color: #fff; }
.bg-block .case__tag { background: rgba(255, 255, 255, .14); color: #fff; }
.bg-block .case__meta { color: rgba(255, 255, 255, .7); }
.bg-block .case__foot a,
.bg-block .link-arrow { color: #EBC9A6; }

/* ---------- 區塊外框 ---------- */
.space { padding: var(--sp-9) 0; }
.space--paper { background: var(--paper-100); }

/* ---------- A. 滿版大圖 ＋ 疊字 ---------- */
.space-hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(320px, 46vw, 520px);
  display: flex;
  align-items: flex-end;
}
.space-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.space-hero__body {
  position: relative;
  width: 100%;
  padding: clamp(24px, 5vw, 56px);
  background: linear-gradient(180deg,
    rgba(27,29,34,0) 0%, rgba(27,29,34,.55) 45%, rgba(27,29,34,.86) 100%);
  color: #fff;
}
.space-hero__eyebrow {
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: var(--sp-3);
}
.space-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.space-hero__text {
  max-width: 620px;
  font-size: 15.5px;
  line-height: 2.05;
  color: rgba(255,255,255,.92);
}

/* ---------- 完整大圖 ＋ 圖說 ----------
   用於照片本身構圖已完整、不該再裁切的情況。
   圖片以原始比例滿版顯示，說明文字放在圖片下方。 */
.space-full {
  margin: 0 0 var(--sp-8);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-50);
  box-shadow: var(--sh-md);
}
.space-full img {
  width: 100%;
  height: auto;        /* 依原始比例，不裁切 */
  display: block;
}
.space-full figcaption {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--ink-600);
}
.space-full figcaption strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
}

/* ---------- B. 左圖右文 ---------- */
.space-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.space-split--flip .space-split__media { order: 2; }
.space-split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.space-split__media img {
  width: 100%;
  height: auto;
  display: block;
}
.space-split__body { min-width: 0; }
.space-split__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}
.space-split__body p {
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink-700);
  margin-bottom: 1.2em;
}
.space-split__body p:last-child { margin-bottom: 0; }

/* 小清單：空間具備什麼 */
.space-list {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}
.space-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-600);
}
.space-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-500);
  opacity: .75;
}

/* ---------- C. 多張並排（縱向卡片）----------
   卡片是直式（3:4），與站上其他卡片的節奏一致。
   圖片用 cover 填滿，但 object-position 設在中央，
   主體（人物、桌椅）多位於畫面中央，不會被裁掉。 */
.space-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.space-grid figure {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  background: var(--paper-200);
  aspect-ratio: 3 / 4;          /* 直式卡片 */
}
.space-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;      /* 主體在中央，避免裁到 */
  display: block;
  transition: transform .8s var(--ease);
}
.space-grid figure:hover img { transform: scale(1.03); }
.space-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(180deg, rgba(27,29,34,0), rgba(27,29,34,.78));
}

/* ---------- 影片 ---------- */
.space-video {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--ink-900);
  position: relative;
}
.space-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 標題區 ---------- */
.space-head { text-align: center; margin-bottom: var(--sp-7); }
.space-head__eyebrow {
  font-family: var(--font-latin);
  font-size: 14px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-600);
  display: block;
  margin-bottom: var(--sp-3);
}

/* 底圖上的標題區：提高優先級，否則會被下面 .space-head p 的深灰色蓋掉。
   （.space-head p 出現在檔案較後段，同優先級下後者勝出） */
.bg-block .space-head__eyebrow { color: #EBC9A6; }
.bg-block .space-head h2 { color: #fff; }
.bg-block .space-head p {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.space-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.6;
}
.space-head p {
  max-width: 620px;
  margin: var(--sp-4) auto 0;
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--ink-600);
}

/* ---------- 響應式 ---------- */
@media (max-width: 1000px) {
  .space-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .space-split--flip .space-split__media { order: 0; }
  .space-grid { grid-template-columns: repeat(2, 1fr); }
  .space-grid figure:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .space { padding: var(--sp-7) 0; }
  .space-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .space-grid figure,
  .space-grid figure:last-child { grid-column: auto; }
  .space-split__body p { font-size: 15.5px; }
  .space-full figcaption { padding: var(--sp-4) var(--sp-5) var(--sp-5); font-size: 15px; }
}