/* 形象頁（landing）版面：hero 雙色海報＋裝置舞台，以及 hero 以下各段的排版。
 * 元件本體在 components.css；這裡只管「放在哪、多大、怎麼疊」。
 *
 * 三個尺寸：
 *   ≥1024  桌面：左右各半（黃｜黑），Bana／PTT 分居兩側、裝置立在正中央接縫上，
 *          切換鈕左下、商店鈕右下（概念圖 1920×1080 的比例直接縮放）
 *   768–1023 平板：同左右分割，字級縮、切換鈕與商店鈕各自置中疊成一列
 *   <768   手機：改為上下分割（上黃下黑），Bana 靠左上、PTT 靠右下，
 *          裝置居中跨接縫，切換鈕在裝置正下方，商店鈕 2×2 滿寬
 */

/* 高度＝視窗高，但夾在 40–67.5rem 之間：超高視窗（4K、直立螢幕）不讓海報無限拉長，
   下方段落會露出來；極矮視窗則讓 hero 自己撐高、頁面捲動 */
.hero {
  position: relative;
  height: clamp(40rem, 100svh, 67.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--hero-text);
  overflow: clip;
  isolation: isolate;
}

.hero__pane {
  position: relative;
  min-height: 100%;
}

.hero__pane--warm {
  background: var(--hero-warm);
}

.hero__pane--dark {
  background: var(--hero-dark);
}

/* 兩個大字：絕對定位在各自的半邊，垂直置中；依目前裝置微調位置 */
.hero__word {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  color: var(--hero-text);
  font-weight: 700;
  transition: transform var(--dur-stage) var(--ease-out), opacity var(--dur-stage) var(--ease-out);
  user-select: none;
}

.hero__word--bana {
  left: 12.5vw; /* 概念圖 240/1920；用 vw 不用 %——包含塊是半邊 pane，% 會少一半 */
}

.hero__word--ptt {
  right: 12.5vw;
  font-weight: 400;
}

/* 寬裝置（iPhone Duo／平板／電腦）會蓋到字：字往外退、略縮，讓裝置成為主角 */
.hero[data-device="duo"] .hero__word,
.hero[data-device="pad"] .hero__word,
.hero[data-device="pc"] .hero__word {
  opacity: 0.92;
}

.hero[data-device="duo"] .hero__word--bana,
.hero[data-device="pad"] .hero__word--bana,
.hero[data-device="pc"] .hero__word--bana {
  transform: translateX(-14%) scale(0.86);
}

.hero[data-device="duo"] .hero__word--ptt,
.hero[data-device="pad"] .hero__word--ptt,
.hero[data-device="pc"] .hero__word--ptt {
  transform: translateX(14%) scale(0.86);
}

.hero[data-device="fold"] .hero__word--bana {
  transform: translateX(-6%) scale(0.94);
}

.hero[data-device="fold"] .hero__word--ptt {
  transform: translateX(6%) scale(0.94);
}

/* 裝置舞台：跨兩個半邊、置中；高度取 hero 的 77%（概念圖 833/1080） */
.hero__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: var(--z-stage);
  width: min(92vw, 68rem);
  height: min(77svh, 52rem);
}

/* 桌面：平板與 iPhone Duo 是同一個橫向比例，整張填滿舞台太滿，縮到 80%
   （進場動畫的終點也是 0.8，不會先放大再縮） */
@media (min-width: 1024px) {
  .hero .device-stage__img[data-device="duo"][data-active="true"],
  .hero .device-stage__img[data-device="pad"][data-active="true"] {
    transform: scale(0.8);
  }
}

/* 左下角：裝置切換膠囊 */
.hero__switch {
  position: absolute;
  left: var(--space-8);
  bottom: var(--space-8);
  z-index: var(--z-stage);
}

/* 右下角：商店鈕（上方一行「即將上架」；上架後拿掉這行與 aria-disabled） */
.hero__stores {
  position: absolute;
  right: var(--space-10);
  bottom: var(--space-8);
  z-index: var(--z-stage);
  display: grid;
  gap: var(--space-2);
  justify-items: end;
}

.hero__stores-note {
  font-family: var(--font-display);
  font-size: var(--text-body-s);
  letter-spacing: 0.2em;
  color: var(--hero-text);
  opacity: 0.7;
}

/* 左上角：第三方聲明（與右上導覽對稱；底部留給切換鈕與商店鈕） */
.hero__note {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--space-6) + 0.9rem);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body-s);
  color: var(--hero-text);
  opacity: 0.9;
  white-space: nowrap;
  z-index: var(--z-stage);
}

/* ---------- 平板 768–1023 ---------- */
@media (max-width: 1023px) {
  .hero__stage {
    height: min(60svh, 40rem);
    top: 46%;
  }

  .hero__word--bana {
    left: 8vw;
  }

  .hero__word--ptt {
    right: 8vw;
  }


  .hero__stores {
    left: 50%;
    right: auto;
    translate: -50% 0;
    bottom: var(--space-6);
    justify-items: center;
    width: max-content; /* 四顆商店鈕一列不折行，膠囊才有位置 */
  }

  .hero__switch {
    left: 50%;
    translate: -50% 0;
    bottom: 8.5rem;
  }

  /* 聲明會和導覽撞在同一列，這個寬度以下交給頁尾 */
  .hero__note {
    display: none;
  }
}

/* ---------- 手機 <768：上下分割 ---------- */
@media (max-width: 767px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    height: clamp(44rem, 100svh, 56rem);
  }

  .hero__word {
    top: auto;
    translate: none;
    font-size: clamp(3.5rem, 18vw, 4.5rem);
  }

  .hero__word--bana {
    left: var(--gutter);
    top: 5rem; /* 讓出頂部導覽列 */
  }

  .hero__word--ptt {
    right: var(--gutter);
    bottom: 14.5rem; /* 讓出切換鈕（下方 9.5rem 起）與商店鈕 */
  }

  .hero[data-device="duo"] .hero__word,
  .hero[data-device="pad"] .hero__word,
  .hero[data-device="pc"] .hero__word,
  .hero[data-device="fold"] .hero__word {
    transform: scale(0.9);
    opacity: 0.85;
  }

  .hero__stage {
    width: 86vw;
    height: min(44svh, 26rem);
    top: 41%;
  }

  .hero__switch {
    bottom: 9.5rem;
  }

  .hero__stores {
    left: var(--space-4);
    right: var(--space-4);
    translate: none;
    bottom: var(--space-4);
    justify-items: stretch;
  }

  .hero__stores-note {
    text-align: center;
  }

  .hero__stores .store-badges {
    width: 100%;
  }

  /* 右上角只留漢堡鈕，logo 不顯示 */
  .hero .site-nav .brand-mark {
    display: none;
  }
}

/* 超寬桌面：把 hero 的內容鎖在 1920 內，不讓字跑到天邊 */
@media (min-width: 1921px) {
  .hero__word--bana {
    left: calc(50vw - 720px);
  }

  .hero__word--ptt {
    right: calc(50vw - 720px);
  }
}

/* ---------- hero 以下：和紙底 ---------- */
.landing-main {
  background: var(--color-bg);
  color: var(--color-text);
}

/* 段落之間的髮絲線要跟內容同寬、置中（.hairline 的 margin: 0 會蓋掉 .container 的置中） */
.hairline.container {
  display: block;
  margin-inline: auto;
}

/* 關於：定義清單排成「標籤｜值」 */
.about-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.about-list > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.about-list dt {
  color: var(--color-text-faint);
  font-size: var(--text-body-s);
  letter-spacing: 0.1em;
}

.about-list dd {
  margin: 0;
}

@media (max-width: 639px) {
  .about-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}