@charset "utf-8";
/* =============================================================
   ReSarah — Desktop A01 首頁（頁面專屬）
   ※ 共用樣式在 common.css，請先載入 common.css
   Section 對照（設計稿 Y 座標）
     hero            0 – 900
     handmade      900 – 1851   bg #efe7dc
     scenarios    1851 – 2974   全幅影像 + 情境輪播
     made         2974 – 3611
     details      3611 – 4161   bg #ebcfcd
     rental       4161 – 5297
     news         5297 – 6038   bg #efe7dc
     guide        6038 – 6766
     about        6766 – 7591   bg #ebcfcd
     visit        7591 – 8267
     footer       8267 – 8525   bg #212121
   ============================================================= */

/* ★ 圖片來源已全部移到 PHP（Function/Get_Home.php → ui_bg()）
   CSS 不再寫任何 background-image: url(...)，
   Hero 幾張、換哪張圖，都由 $HOME['hero'] 決定。
   共用的 cover / center / no-repeat 寫在 common.css 的 .bgimg。 */

/* =============================================================
   01 HERO 圖片：index.php 的 .hero__media 裡放的是 <img>（不是背景圖），
   必須 cover 撐滿，否則 16:10 的圖在手機只有 234px 高、下方露出底色
   ============================================================= */
.hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* =============================================================
   01 HERO 文案（Figma：copy block X=612 / Y=428 / W=789）
   ============================================================= */
.hero__copy {
  position: absolute;
  top: 428px;
  left: 612px;
  width: 789px;
  color: var(--c-text-invert);
}
.hero__title { text-align: right; }
.hero__lead {
  margin-top: -15px;            /* Figma：Y=613，與標題文字框重疊 */
  max-width: 480px;
  font-size: var(--fs-title-b);
  line-height: var(--lh-title-b);
  font-weight: 500;
}
.hero__actions {
  position: absolute;
  top: 255px;                   /* 683 − 428 */
  left: 494px;                  /* 1106 − 612 */
  display: flex;
  gap: 24px;
}

/* =============================================================
   02 Purely Hand-made
   ============================================================= */
.handmade { background: var(--c-surface-default); padding: 50px 0 50px; }
.handmade__grid {
  display: grid;
  grid-template-columns: 776px 354px;
  grid-template-areas:
    'figA figC'
    'figB copy';
  gap: 0px 30px;
  align-items: center;
}
.handmade__fig-a { grid-area: figA; aspect-ratio: 776 / 473;margin-left: -50px; }
.handmade__fig-b { grid-area: figB; aspect-ratio: 396 / 280; max-width: 396px;}
.handmade__fig-c { grid-area: figC; aspect-ratio: 354 / 489; width: 354px; max-width: 100%; margin-left: auto;margin-top: 100px; }
.handmade__copy  { grid-area: copy;margin-left: -150px; }

.handmade__title { margin-bottom: 0px; }
.handmade__sub {
  font-size: var(--fs-bodyb);
  line-height: var(--lh-bodyb);
  font-weight: 700;
/*  margin-bottom: 16px;*/
    margin-left: -80px;
}
.handmade__text { max-width: 300px; margin-left: -80px;}

/* =============================================================
   03 情境找鞋（全幅影像 + 情境輪播）
   ============================================================= */
.scenarios {
  position: relative;
  background: #4a4a4a;
  color: var(--c-text-invert);
  padding: 20px 0 60px;
}
.scenarios__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .9; }
.scenarios > * { position: relative; z-index: 1; }
.scenarios__label { margin: 0 0 24px var(--header-pad); color: var(--c-text-invert); }

/* repeat start：.scen-card 直接複製即可，slick 會自動計算 */
.scen-slider { margin-bottom: 40px; }
.scen-card { position: relative; aspect-ratio: 295 / 440; overflow: hidden; }
.scen-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.scen-card__img img {
    width: 100%;
}
.scen-card__name {
  position: absolute;
  left: 20px; bottom: 18px;
  font-size: var(--fs-bodyb);
  line-height: var(--lh-bodyb);
  color: var(--c-text-invert);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.scen-card.is-active { outline: 3px solid var(--c-surface-white); outline-offset: -3px; }
/* repeat end */

.scenarios__foot {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--header-pad);
  display: flex;
  align-items: center;
  gap: 32px;
}
.scenarios__quote {
  flex: 1;
  font-size: var(--fs-bodyb);
  line-height: var(--lh-bodyb);
  border-top: 1px solid rgba(255,255,255,.75);
  padding-top: 22px;
  max-width: 420px;
  margin-left: auto;
}
.scenarios .slider-nav button { color: var(--c-text-invert); }

/* =============================================================
   04 Made-To-Order
   ============================================================= */
.made { padding: 50px 0 50px; }
.made__head { display: flex; gap: 0px; align-items: flex-start; margin-bottom: 0px; }
.made__title { flex: 0 0 490px; }
.made__intro { max-width: 560px; margin-top: 30px;}
.made__intro strong { display: block; font-weight: 700; font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); }

/* repeat start：.made-card 可無限新增 */
.card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;margin-top: -50px; }
.made-card { position: relative; aspect-ratio: 291 / 436; overflow: hidden; color: var(--c-text-invert); }
.made-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.made-card__body { position: absolute; left: 16px; right: 16px; bottom: 20px; }
.made-card__no { font-family: var(--ff-display); font-size: 64px; line-height: 1; opacity: .9; }
.made-card__name { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 600; }

.made-card--text {
  background: none;
  color: var(--c-text-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: flex-start;
}
.made-card--text .en { font-family: var(--ff-display); font-size: 22px; letter-spacing: .04em; }
.made-card--text .zh { font-size: var(--fs-body); line-height: var(--lh-body); }
/* repeat end */

/* =============================================================
   05 Details
   ============================================================= */
.details { position: relative; background: var(--c-brand-primary); padding: 60px 0 90px; overflow: hidden; }
.details__mega { position: absolute; left: -50px; top: -3px; color: var(--c-surface-white); }
.details__inner { position: relative; }
.details__intro { margin: 50px 0 70px auto; max-width: 320px; }
.details__intro h2 { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 10px; }
.details__intro p  { font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* repeat start：.detail-item */
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 46px 60px;max-width: 960px;justify-self: end; }
.detail-item { display: flex; gap: 18px; align-items: flex-start; }
.detail-item__no { font-family: var(--ff-display); font-size: 64px; line-height: .8; color: var(--c-accent-pink); flex: none; }
.detail-item__t { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 4px; }
.detail-item__d { font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* repeat end */

/* =============================================================
   06 Wedding Day Ready（婚鞋租借）
   ============================================================= */
.rental { padding: 30px 0 30px; }
.rental__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: auto 1fr;
  gap: 60px 0px;
  align-items: start;
}
.rental__aside { grid-row: 1 / span 2; }
.rental__aside .display { margin-bottom: 40px; }
.rental__en { font-family: var(--ff-display); font-size: 22px; letter-spacing: .04em; margin-bottom: 12px; }
.rental__zh { margin-bottom: 16px; }
.rental__intro { grid-column: 2; max-width: 620px; margin-bottom: 8px; margin-left: 60px;
    margin-top: 30px;}

/* repeat start：.rental-card */
.rental__cards { grid-column: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;margin-left: -25px; }
.rental-card { position: relative; aspect-ratio: 450 / 450; overflow: hidden; }
.rental-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rental-card__name {
  position: absolute;
  left: 20px; bottom: 18px;
  font-size: var(--fs-bodyb);
  line-height: var(--lh-bodyb);
  font-weight: 600;
  color: var(--c-text-invert);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
/* repeat end */

/* =============================================================
   07 News（近期活動）
   ============================================================= */
.news { position: relative; background: var(--c-surface-default); padding: 60px 0 90px; overflow: hidden; }
.news__mega { position: absolute; left: -20px; top: -40px; color: var(--c-surface-white); }
.news__inner { position: relative; }
.news__label { margin-bottom: 24px; position: absolute;}
.news__intro { margin: 0 0 40px auto; max-width: 400px; font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* repeat start：.news-item */
.news__list { display: grid; gap: 60px; }
.news-item { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: center; }
.news-item__meta h3 { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 20px; }
.news-item__tags { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.news-item__fig { aspect-ratio: 873 / 477; }
/* repeat end */

/* =============================================================
   08 婚鞋指南
   ============================================================= */
.guide { padding: 90px 0 100px; }
.guide__head { display: grid; grid-template-columns: 280px 440px 140px; gap: 30px; align-items: start; margin-bottom: 56px; }
.guide__title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; margin-bottom: 14px; }
.guide__text  { max-width: 440px; }

/* repeat start：.guide-item（A02 也用同一組） */
.guide__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 0 20px;padding-left: 280px; margin-left: 30px;}
.guide-item {
  display: grid;
  grid-template-columns: 186px 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 30px 0;
  border-bottom: 1px solid var(--c-text-primary);
}
.guide-item__fig { aspect-ratio: 1; }
.guide-item__t { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 8px; }
.guide-item__d { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.guide-item__more { align-self: center; font-size: 20px; line-height: 1; transition: transform .25s ease; }
.guide-item:hover .guide-item__more { transform: rotate(90deg); }
/* repeat end */

/* =============================================================
   09 About
   ============================================================= */
.about { background: var(--c-brand-primary); padding: 0px 0 60px; }
.about__grid { display: grid; grid-template-columns: 60px 1fr 260px 200px; gap: 30px; align-items: start; }
.about__vertical { font-family: var(--ff-display); font-size: 90px; line-height: 1; writing-mode: vertical-rl; align-self: end; margin-bottom: 20px; }
.about__fig { aspect-ratio: 596 / 709; }
.about__copy h2 { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 14px; }
.about__copy p  { font-size: var(--fs-caption); line-height: var(--lh-caption); margin-bottom: 12px; }
.about__thumbs { display: grid; gap: 12px; align-content: space-between;height: 100%;}
.about__thumbs > * { aspect-ratio: 220 / 220; }   /* 有圖(.bgimg)或佔位(.ph)都要維持比例 */
.about__foot { margin-top: 34px; }
.about__copy {
    align-self: end;
}



.store-card__fig { aspect-ratio: 332 / 396; margin-bottom: 16px; }
.store-card__name {
  font-family: var(--ff-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  color: var(--c-surface-gold);
  margin-bottom: 8px;
}
.store-card__name b { font-family: var(--ff-base); font-weight: 400; color: var(--c-text-primary); }
.store-card__desc { font-size: var(--fs-caption); line-height: var(--lh-caption); margin-bottom: 14px; }
/* repeat end */

/* =============================================================
   各 section 對齊 Figma 稿高度（≥1440 才套用）
   ============================================================= */
@media (min-width: 1440px) {
  .handmade  { min-height: 951px; }
  .scenarios { min-height: 1123px; }
  .made      { min-height: 637px; }
  .details   { min-height: 550px; }
  .rental    { min-height: 1000px; }
  .news      { min-height: 741px; }
  .guide     { min-height: 728px; }
  .about     { min-height: 825px; }
  .visit     { min-height: 676px; }
}

/* =============================================================
   RWD
   ============================================================= */
@media (max-width: 1439px) {
  .hero__copy { left: auto; right: 0; width: min(789px, calc(100% - 40px)); }
  .hero__actions { position: static; margin-top: 24px; justify-content: flex-end; }
  .about__grid { grid-template-columns: 50px 1fr 240px; }
  .about__thumbs { grid-column: 3; grid-template-columns: repeat(3, 1fr); }
  /* 02 Handmade 1025–1439：兩欄寫死 776+354 會在 1200 以下撐出橫向溢出 → 改成可縮的 minmax
     fig-a 的 -50px 出血改成「最多吃掉容器左側留白」，1280 以上仍是 -50（外觀與原本相同） */
  .handmade__grid  { grid-template-columns: minmax(0, 776px) minmax(0, 354px); }
  .handmade__fig-a { margin-left: max(-50px, min(-20px, (1160px - 100vw) / 2)); }
  /* 04 Made 1025–1439：minmax(260px) 在 1280 以下會 3+1 換行 → 降到 220px，維持一列 4 張 */
  .card-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  /* 10 Visit 1025–1439：門市卡 minmax(280px) 在 1110 以下擠不下兩欄會直排 → 降到 240px */
  .visit__stores { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 1024px) {
  .hero__copy { top: 300px; }
  .handmade__grid { grid-template-columns: 1fr; grid-template-areas: 'figA' 'figC' 'figB' 'copy'; }
  /* 02 Handmade 手機版：桌機拼貼用的負 margin（fig-a -50 / copy -150 / sub・text -80）要全部歸零，否則會溢出畫面左側
     fig-c 靠右 72%、fig-b 靠左 78% 並往上疊 56px，保留一點拼貼感 */
  .handmade__grid  { gap: 0; }
  .handmade__fig-a { margin-left: 0; }
  .handmade__fig-c { width: 72%; max-width: 440px; margin: 24px 0 0 auto; }
  .handmade__fig-b { position: relative; z-index: 1; width: 78%; max-width: 520px; margin: -56px 0 0 0; }
  .handmade__copy  { margin: 40px 0 0 0; }
  .handmade__sub, .handmade__text { margin-left: 0; }
  .handmade__sub   { margin-top: 12px; }
  .handmade__text  { max-width: none; margin-top: 12px; }
  .made__head { flex-direction: column; gap: 24px; }
  .made__title { flex: none; }
  /* Header（首頁）：common.css 要到 767 才切漢堡，768–1024 時 7 個選單＋按鈕擠一排、logo 被擠不見
     → 首頁提前到 1024 就切漢堡（內頁的 CSS 本來就是 1023 切） */


  .nav { position: absolute; inset: 100% 0 auto 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--header-pad) 24px; }
  .site-header.is-open .nav { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a { padding: 12px 0; border-bottom: 1px solid rgba(33,33,33,.08); font-size: 16px; }
  .nav .btn--gold { margin-top: 16px; align-self: flex-start; }
  /* 04 Made 平板：文字卡改成橫向一列（不再套直式比例），三張圖卡一列；取消 -50px 上疊避免蓋到介紹文 */
  .made__head  { gap: 16px; }
  .made__intro { margin-top: 0; }
  .card-row    { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
  .made-card--text { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .made-card--text .btn { margin-left: auto; }
  /* 05 Details 平板：minmax(380px) 在 768–880 會撐出兩欄 820px 溢出 → 固定兩等分；介紹文下移避開 Details 大字 */
  .details__intro { margin-top: 110px; }
  .detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; max-width: none; justify-self: stretch; }
  .rental__grid { grid-template-columns: 1fr; }
  .rental__intro, .rental__cards { grid-column: 1; }
  /* 06 Rental 平板：aside 取消跨兩列、縮小間距；桌機的 intro 縮排 60 / cards -25 出血都歸零；圖卡一列 4 張 */
  .rental__grid  { grid-template-rows: none; gap: 28px 0; }
  .rental__aside { grid-row: auto; }
  .rental__aside .display { margin-bottom: 24px; }
  .rental__intro { margin: 0; max-width: 640px; }
  .rental__cards { margin-left: 0; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .guide__head { grid-template-columns: 1fr; }
  .guide__list { grid-template-columns: 1fr; padding-left: 0; margin-left: 0;}
  .visit__grid { grid-template-columns: 1fr; }
  .visit__label { margin-bottom: 48px; }
  /* 10 Visit 平板：Visit 大字改放右側（營業資訊旁的空位），不再壓在標題與內文上 */
  .visit__mega { left: auto; right: 0; top: 260px; }
  .visit__grid { gap: 40px; }
  /* 09 About 手機版（方案 B）：左窄欄直排 About + 主圖貼齊上緣 → 三張小圖 → 文案
     注意：1439 層的 .about__thumbs { grid-column: 3 } 會漏下來，這裡用 grid-area / grid-column 蓋掉 */
  .about { padding: 0 0 60px; }
  .about__grid {
    grid-template-columns: clamp(44px, 12vw, 72px) 1fr;
    grid-template-areas: "vert fig" "thumbs thumbs" "copy copy";
    column-gap: 12px; row-gap: 12px;
  }
  .about__vertical { grid-area: vert; writing-mode: vertical-rl; font-size: clamp(52px, 14vw, 90px); align-self: end; margin: 0 0 -6px; }
  .about__fig    { grid-area: fig; aspect-ratio: 596 / 709; max-height: 640px; width: 100%; }   /* width:100% 不能省，否則 max-height 會反推縮小寬度 */
  .about__thumbs { grid-area: thumbs; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 8px; height: auto; }
  .about__copy   { grid-area: copy; align-self: start; margin-top: 24px; max-width: 560px; }
  .news-item { grid-template-columns: 1fr; gap: 24px; }
  /* 07 News 平板：「近期活動」標籤在桌機是 absolute 放左欄空位，單欄時會壓到活動標題 → 改回一般流；介紹文下移避開 News 大字 */
  .news__intro { margin-top: 70px; }
  .news__list  { gap: 24px; }
  .news__label { position: static; margin-bottom: 0; }
  .news-item__meta h3 { margin-bottom: 12px; }
}

@media (max-width: 767px) {
  .hero__copy { top: auto; bottom: 96px; left: 20px; right: 20px; width: auto; }
  .hero__title { text-align: left; }
  .hero__lead { margin-top: 12px; }
  .hero__actions { gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
  /* 手機：圖滿版後文字會壓在畫面上 → 構圖略偏左、底部漸層加深、文字加淡陰影 */
  .hero__media > img { object-position: 35% center; }
  .hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.7) 100%); }
  .hero__copy  { text-shadow: 0 1px 12px rgba(0,0,0,.35); }

  .handmade { padding: 70px 0 60px; }
  .made, .rental, .guide { padding: 60px 0; }
  /* 06 Rental 手機：圖卡 2×2（原本 4 張方圖直排，整區 2230px 高） */
  .rental__grid  { gap: 20px 0; }
  .rental__cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rental-card__name { left: 12px; bottom: 10px; }
  /* 04 Made 手機：文字卡固定在上排（sticky），三張圖卡在下排橫向滑動（每張 62%，露出下一張提示可滑） */
  .card-row {
    grid-template-columns: none; grid-template-rows: auto auto;
    grid-auto-flow: column; grid-auto-columns: 62%;
    gap: 16px 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px;
  }
  .card-row::-webkit-scrollbar { display: none; }
  .made-card { grid-row: 2; scroll-snap-align: start; }
  .made-card--text { grid-row: 1; grid-column: 1 / span 3; justify-self: start; width: calc(100vw - 40px); position: sticky; left: 0; }
  /* 07 News 手機：大字 News 不再往上 / 往左出血（原本被切掉一半） */
  .news__mega  { left: 12px; top: -12px; }
  .news__intro { margin: 50px 0 32px; }
  .news__list  { gap: 16px; }
  .news-item   { gap: 16px; }
  .details, .news, .visit { padding: 50px 0 60px; }   /* .about 不在此列：手機版主圖要貼齊上緣 */
  .details__intro, .news__intro { margin-left: 0; max-width: none; }
  /* 05 Details 手機：大字不再往左出血（避免 D 被切成 etails）、數字縮小
     HTML 順序是照桌機兩欄寫的（01,03,02,04），單欄時用 order 排回 01→04（新增項目時要一併調整） */
  .details__mega  { left: 12px; }
  .details__intro { margin: 50px 0 40px; }
  .detail-list { grid-template-columns: 1fr; gap: 24px; }
  .detail-item { gap: 14px; }
  .detail-item__no { font-size: 48px; min-width: 52px; }
  .detail-item:nth-child(3) { order: 1; }
  .detail-item:nth-child(2) { order: 2; }
  .detail-item:nth-child(4) { order: 3; }
  .guide-item { grid-template-columns: 110px 1fr auto; gap: 14px; padding: 20px 0; }
  /* 10 Visit 手機：Visit 大字放在標籤與標題之間、不再往左出血；門市卡改兩欄並排，LINE 按鈕對齊底部 */
  .visit__label { margin-bottom: 92px; }
  .visit__mega  { left: 12px; right: auto; top: 82px; }
  .visit__grid  { gap: 32px; }
  .visit__stores { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .store-card { display: flex; flex-direction: column; }
  .store-card .btn { align-self: flex-start; }
  .store-card__fig  { margin-bottom: 10px; }
  .store-card__name { font-size: 18px; line-height: 26px; margin-bottom: 4px; }
  .store-card__name b { display: block; font-size: 15px; line-height: 22px; }
  .store-card__desc { flex: 1; font-size: 13px; line-height: 20px; margin-bottom: 10px; }
  .scenarios__foot { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .scenarios__quote { margin-left: 0; }
}