/* =============================================
   LOHAS · 生日活動專頁 (birthday.html)
   --------------------------------------------
   命名空間: .bd
   依賴: lohas-tokens.css / lohas-base.css / lohas-components.css
   ============================================= */

.bd{
  --bd-pink:        #F4C7CB;
  --bd-pink-soft:   #FBEDEE;
  --bd-pink-line:   #EFD6D8;
  --bd-rose:        #C97F86;
  --bd-rose-deep:   #A85E66;
}

.bd{
  background:#fff;
  color:var(--text-main);
}

/* =========================
   Hero Banner
   --------------------------------------------
   完全比照 index.html 的 .hero-banner
   (高度 / 對齊 / 間距 / 字級 / 遮罩 數值一致)
========================= */
.bd .hero-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    color: #fff;
    padding-left: 5%;
    padding-bottom: 40px;
}

.bd .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bd .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 底部由下往上的淡漸層 */
.bd .hero-bg::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.15) 18%,
        rgba(0,0,0,.10) 30%,
        rgba(0,0,0,.04) 42%,
        rgba(0,0,0,.01) 52%,
        rgba(0,0,0,0)   62%);
    pointer-events: none;
}

.bd .hero-content {
    text-align: left;
    max-width: 800px;
}

.bd .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: -10px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.bd .hero-subtitle {
    font-size: 1.0rem;
    margin-bottom: 5px;
    font-weight: 400;
    letter-spacing: 2px;
}

.bd .hero-btns .btn-outline {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
}

.bd .hero-btns .btn-outline:hover {
    background: #fff;
    color: #333;
}

@media (max-width: 768px) {
    .bd .hero-banner {
        padding-left: 20px;
        padding-bottom: 40px;
        align-items: flex-end;
        justify-content: flex-start;
        height: 100svh;
    }

    .bd .hero-content {
        max-width: 90%;
    }

    .bd .hero-title {
        font-size: 2.0rem;
        margin-bottom: 3px;
    }

    .bd .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 3px;
    }

    /* 兩顆按鈕強制並排、等寬,不換行 */
    .bd .hero-btns {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 10px;
    }

    .bd .hero-btns .btn {
        flex: 1 1 0;
        display: inline-block;
        padding: 8px 16px;
        font-size: 0.85rem;
        text-align: center;
        white-space: nowrap;
        margin-right: 0;
        margin-top: 0;
    }
}

/* =========================
   通用區塊
========================= */
.bd .bd-sec{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:96px 24px;
}
.bd .bd-sec--soft{
  max-width:none;
  background:var(--bd-pink-soft);
  padding-left:0;
  padding-right:0;
}
.bd .bd-sec--soft > .bd-sec-in{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}
.bd .bd-sec-head{
  text-align:center;
  margin-bottom:48px;
}
/* 區塊標題:比照 engraving 的 .section-title */
.bd .bd-sec-title{
  font-size:26px;
  font-weight:700;
  color:var(--lohas-brand);
  letter-spacing:2px;
  line-height:1.4;
  margin:0;
}
/* 標題下方短線:比照 .title-line */
.bd .bd-title-line{
  width:40px;
  height:2px;
  background:var(--lohas-brand);
  margin:15px auto;
}
.bd .bd-sec-desc{
  font-size:15px;
  color:var(--text-sub);
  line-height:1.85;
  letter-spacing:.5px;
  margin:0;
}

/* =========================
   四大好禮
========================= */
/* ⚠ 2026-08-31 由四欄改為兩欄置中(抽抽樂與最終大禮移除)。
   -----------------------------------------------------------------
   不能只是把卡片刪掉不動版面:repeat(4,1fr) 放兩張,
   會擠在左半邊、右半空一大片,看起來像載壞了。

   也不寫成 repeat(2,1fr) —— 那會讓兩張卡各佔 550px,
   一句話的說明配一張半個螢幕寬的卡,比空白更奇怪。
   限寬 + 置中,大小維持原本四欄時的樣子。 */
.bd .bd-perks{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 320px));
  justify-content:center;
  gap:20px;
}
.bd .bd-perk{
  background:#fff;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-lg);
  padding:34px 26px;
  text-align:center;
  transition:.25s;
}
.bd .bd-perk:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-card);
  border-color:var(--bd-pink-line);
}
.bd .bd-perk-ico{
  width:56px;
  height:56px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--bd-pink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bd-rose-deep);
  font-size:20px;
}
.bd .bd-perk h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:1px;
  margin:0 0 12px;
  color:var(--lohas-brand);
}
.bd .bd-perk p{
  font-size:14px;
  line-height:1.9;
  color:var(--text-sub);
  margin:0;
}

/* =========================
   生日禮物 · 圖文左右交錯
========================= */
.bd .bd-gift-rows{
  display:flex;
  flex-direction:column;
  gap:72px;
}
.bd .bd-gift-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
/* 偶數列:圖片換到右邊 */
.bd .bd-gift-row--rev .bd-gift-media{ order:2 }
.bd .bd-gift-row--rev .bd-gift-text{ order:1 }

.bd .bd-gift-media{
  overflow:hidden;
  box-shadow:var(--sh-card);
}
.bd .bd-gift-media img{
  width:100%;
  display:block;
}
.bd .bd-gift-no{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--bd-rose);
  margin-bottom:14px;
}
.bd .bd-gift-text h3{
  font-size:22px;
  font-weight:700;
  color:var(--lohas-brand);
  letter-spacing:2px;
  line-height:1.5;
  margin:0 0 14px;
}
.bd .bd-gift-text p{
  font-size:15px;
  line-height:1.9;
  letter-spacing:.5px;
  color:var(--text-sub);
  margin:0;
}

/* 送禮入口。這一區是四則圖文並列,放實色按鈕會把視覺重心整個拉過去,
   所以用底線文字連結 —— 有明確可點的樣子,但不搶版面。 */
.bd .bd-gift-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
  font-size:15px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--lohas-brand);
  text-decoration:none;
  border-bottom:1px solid var(--lohas-brand);
  padding-bottom:4px;
  transition:gap .18s, opacity .18s;
}
.bd .bd-gift-cta:hover{ gap:13px; opacity:.7 }

.bd .bd-gift-cta i{ font-size:12px }

/* =========================
   參加方式
========================= */
.bd .bd-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  counter-reset:bdstep;
}
.bd .bd-step{
  background:#fff;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-lg);
  padding:32px 24px;
  position:relative;
}
.bd .bd-step::before{
  counter-increment:bdstep;
  content:counter(bdstep,decimal-leading-zero);
  font-size:22px;
  color:var(--bd-pink);
  font-weight:700;
  letter-spacing:2px;
  display:block;
  margin-bottom:14px;
}
.bd .bd-step h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--lohas-brand);
  margin:0 0 12px;
}
.bd .bd-step p{
  font-size:14px;
  line-height:1.9;
  color:var(--text-sub);
  margin:0;
}

/* =========================
   取件方式
========================= */
/* ⚠ 用 flex 不用 grid。
   這個 class 有兩處在用:取件方式(現在只有一張)與眼鏡布那一段(兩張)。
   · 寫死 repeat(2,1fr) → 只有一張時會靠左、右半空一片
   · 改 auto-fit 也不行 → 空的那一欄雖然收成 0,【欄距還在】,
     單張會被推偏半個 gap(實測差 9px),看起來就是沒對準
   flex + justify-content:center 沒有那個問題,一張兩張都正。 */
.bd .bd-pickup{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  max-width:640px;
  margin:0 auto;
}
.bd .bd-pick{
  /* 當 .bd-pickup 的 flex 項目:能長能縮。
     ⚠ 這裡原本還有 max-width:311px。
     311 是當初兩張並排在 640px 容器時算出來的寬度((640-18)/2),
     被當成常數寫死了。後來卡片搬進 498px 的窄欄、變成一張一列,
     311 的上限就讓它縮在欄位中間 —— 左邊空 93px、右邊空 94px,
     跟同一欄的標題、段落、CTA 全部對不齊(2026-09-03 回報)。

     拿掉之後兩種情況都對:640px 容器裡兩張並排,flex 算出來
     還是各 311;窄欄裡一張一列,就長好長滿。 */
  flex:1 1 260px;
  background:#fff;
  border:1px solid var(--bd-pink-line);
  border-radius:var(--r-lg);
  padding:28px 24px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.bd .bd-pick i{
  font-size:18px;
  color:var(--lohas-brand);
  margin-top:3px;
}
.bd .bd-pick b{
  display:block;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--lohas-brand);
  margin-bottom:7px;
}
.bd .bd-pick span{
  font-size:14px;
  color:var(--text-sub);
  line-height:1.9;
}

/* =========================
   注意事項
========================= */
.bd .bd-notes{
  max-width:760px;
  margin:0 auto;
  background:var(--bg-warm);
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-lg);
  padding:32px 34px;
}
.bd .bd-notes h3{
  font-size:16px;
  font-weight:700;
  letter-spacing:1px;
  margin:0 0 16px;
  color:var(--lohas-brand);
}
.bd .bd-notes ul{
  margin:0;
  padding-left:20px;
}
.bd .bd-notes li{
  font-size:14px;
  line-height:2.1;
  color:var(--text-sub);
}

/* =========================
   社群
========================= */
.bd .bd-social{
  text-align:center;
  padding-bottom:84px;
}
.bd .bd-social p{
  font-size:15px;
  letter-spacing:.5px;
  color:var(--text-sub);
  margin:0 0 22px;
}
.bd .bd-social-links{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.bd .bd-social-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  border:1px solid var(--lohas-bd);
  border-radius:var(--r-pill);
  text-decoration:none;
  color:var(--lohas-brand);
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  transition:.2s;
  background:#fff;
}
.bd .bd-social-links a:hover{
  border-color:var(--lohas-brand);
  background:var(--lohas-brand);
  color:#fff;
}

/* =========================
   RWD
========================= */
@media (max-width:900px){
  .bd .bd-perks{ grid-template-columns:repeat(2,1fr) }
  .bd .bd-steps{ grid-template-columns:repeat(2,1fr) }
  /* .bd-pickup 已改為 flex,原本的 grid-template-columns 不再有作用。
     手機讓每張自己佔一整行。 */
  .bd .bd-pick{ flex-basis:100%; max-width:none }
  /* 手機:改上下排列,圖片一律在上 */
  .bd .bd-gift-rows{ gap:48px }
  .bd .bd-gift-row{ grid-template-columns:1fr; gap:24px }
  .bd .bd-gift-row--rev .bd-gift-media{ order:0 }
  .bd .bd-gift-row--rev .bd-gift-text{ order:0 }
  .bd .bd-gift-text h3{ font-size:20px }
}

@media (max-width:768px){
  .bd .bd-sec{ padding:56px 20px }
  .bd .bd-sec-head{ margin-bottom:36px }
  .bd .bd-notes{ padding:26px 22px }
}

@media (max-width:480px){
  .bd .bd-perks{ grid-template-columns:1fr }
  .bd .bd-steps{ grid-template-columns:1fr }
}

/* =========================
   壽星分享牆
   -------------------------
   資料來自 App 的生日分享。版型比照靈感分享牆:圖片為主、
   說明退到次要 —— 這一區要傳達的是「真的有人在這裡過生日」,
   不是讀完每一則。
========================= */

.bd .bd-wall{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  /* 每張卡片現在都是「方圖 + 一行稱呼」,高度本來就一致。
     仍然保留 align-items:start —— 稱呼太長換行時,
     不會把整排卡片一起撐高。 */
  align-items:start;
}

/* 張數少的時候:改成置中、每張限寬。
   -----------------------------------------------------------------
   固定四欄的 grid 放 1~3 張,會全部擠在左上角、右邊空一大片 ——
   那看起來像「載壞了」,而不是「目前只有這幾張」。

   auto-fit + 上限寬度 + justify-content:center,
   一張就是一張置中的卡,三張就是三張並排置中。
   四張以上不套這個 class,維持原本的滿版四欄。 */
.bd .bd-wall.is-sparse{
  grid-template-columns:repeat(auto-fit, minmax(0, 240px));
  justify-content:center;
}

.bd .bd-wall-card{
  background:#fff;
  border-radius:var(--r-lg, 18px);
  overflow:hidden;
  border:1px solid var(--lohas-line, #E8DED1);
  display:flex; flex-direction:column;
}

/* 固定正方形:照片是客人自己拍的,長寬比什麼都有。
   不固定的話整面牆會參差不齊,而參差的來源是別人的相機,不是設計。 */
.bd .bd-wall-media{
  position:relative;
  aspect-ratio:1 / 1;
  background:var(--bd-pink-soft, #FBF4F2);
}
.bd .bd-wall-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* 只有稱呼與日期 —— 客人沒有寫任何文字,這一區也不假裝有。
   2026-08-21 移除原本的兩行說明版位:那是照「客人自行上傳並撰寫」
   這個錯誤前提做的。 */
.bd .bd-wall-body{
  padding:12px 14px 14px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.bd .bd-wall-name{
  font-size:14px; font-weight:600; color:var(--lohas-brand);
  letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bd .bd-wall-date{
  flex-shrink:0;
  font-size:12px; color:var(--text-muted, #9B9186);
}
.bd .bd-wall-foot{ margin-top:32px; text-align:center }
.bd .bd-wall-more{
  min-height:44px; padding:0 34px;
  border:1px solid var(--lohas-brand);
  border-radius:var(--r-pill, 999px);
  background:transparent; color:var(--lohas-brand);
  font-family:inherit; font-size:14px; letter-spacing:.1em;
  cursor:pointer; transition:background .18s, color .18s;
}
.bd .bd-wall-more:hover{ background:var(--lohas-brand); color:#fff }
.bd .bd-wall-more:disabled{ opacity:.5; cursor:default }
.bd .bd-wall-end{
  margin:0; font-size:13px; color:var(--text-muted, #9B9186);
}

/* 預覽模式的橫幅。刻意做得顯眼且醜 ——
   它的用途就是讓人一眼看出「這不是真的」,不是融入版面。 */
.bd .bd-wall-preview{
  margin:0 0 24px;
  padding:12px 16px;
  border:1px dashed var(--err, #C0392B);
  border-radius:var(--r-md, 14px);
  background:var(--err-bg, #FDEDEC);
  color:var(--err, #C0392B);
  font-size:13px; line-height:1.8; text-align:center;
}

@media (max-width:900px){
  .bd .bd-wall{ grid-template-columns:repeat(3, 1fr); gap:14px }
}
@media (max-width:640px){
  .bd .bd-wall{ grid-template-columns:repeat(2, 1fr); gap:12px }
  .bd .bd-wall-body{ padding:12px 13px 14px }
}

/* =============================================================
   卡片詳細說明:可點的卡片 + 彈窗
   ============================================================= */

/* ⚠ 只有【真的有詳細內容】的卡片才會被加上 is-clickable(見 js)。
   全部卡片都給游標的話,按下去沒反應的那幾張會被當成壞掉。 */
.bd .bd-perk.is-clickable,
.bd .bd-step.is-clickable,
.bd .bd-pick.is-clickable{ cursor:pointer }
.bd .is-clickable:focus-visible{
  outline:2px solid var(--lohas-brand);
  outline-offset:3px;
}
.bd .bd-detail{ display:none }

/* 看得見的提示。沒有它,沒有人知道卡片可以點 —— 
   hover 才出現的提示在手機上等於不存在。 */
.bd .bd-more{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:14px;
  font-size:12.5px; font-weight:600; letter-spacing:1px;
  color:var(--lohas-brand);
}
.bd .bd-more i{ font-size:10px; transition:transform .2s }
.bd .is-clickable:hover .bd-more i{ transform:translateX(3px) }
/* ⚠ 取件卡是【橫向 flex】(icon + 文字區)。
   「詳細說明」是卡片的直接子元素,不處理的話會變成第三個並排的東西,
   跑到文字右邊、把卡片撐寬 —— 2026-09-01 就是這樣壞掉的。

   原本的解法是叫 js 把它塞進內層的 div,但那需要猜「哪一個 div 是
   文字區」,而 .bd-perk 的第一個 div 是圖示,猜錯就壓在圖示上
   (2026-09-03 壞在正式站)。改成在這裡處理:讓它獨佔一整行。
   排版的事留在 CSS,js 不必知道卡片長什麼樣子。 */
.bd .bd-pick{ flex-wrap:wrap }
.bd .bd-pick .bd-more{ margin-top:10px; flex-basis:100%; margin-left:34px }

/* ---- 彈窗 ---- */
.bd-modal{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:32px 18px;
}
.bd-modal[hidden]{ display:none }
.bd-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(47,42,36,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.bd-modal-box{
  position:relative;
  width:100%; max-width:520px;
  max-height:calc(100vh - 64px);
  overflow:auto;
  background:#fff;
  border-radius:var(--r-lg, 18px);
  padding:34px 30px 30px;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.bd-modal-x{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px;
  border:0; border-radius:50%;
  background:transparent; color:var(--text-muted, #9B9186);
  font-size:16px; cursor:pointer;
}
.bd-modal-x:hover{ background:var(--bd-pink-soft); color:var(--lohas-brand) }
.bd-modal-title{
  margin:0 34px 16px 0;
  font-size:19px; font-weight:700; letter-spacing:1px;
  color:var(--lohas-brand);
}
.bd-modal-body p{ margin:0 0 12px; font-size:14.5px; line-height:1.9; color:var(--text-sub) }
.bd-modal-body ul{ margin:0 0 12px; padding-left:20px }
.bd-modal-body li{ font-size:14px; line-height:1.95; color:var(--text-sub); margin-bottom:4px }
.bd-modal-body b{ color:var(--lohas-brand) }
.bd-modal-body .bd-detail-note{
  margin:16px 0 0; padding:11px 14px;
  border-radius:var(--r-md, 14px);
  background:var(--bd-pink-soft);
  font-size:13px; line-height:1.8;
}

@media (max-width:640px){
  .bd-modal{ padding:0; align-items:flex-end }
  /* 手機從底部推上來,並讓上緣留一段看得到底下的頁面 ——
     那一段是「這是疊在上面的東西」最直接的訊號。 */
  .bd-modal-box{
    max-width:none;
    max-height:88vh;
    border-radius:20px 20px 0 0;
    padding:30px 22px 26px;
  }
}