@charset "utf-8";
/* =============================================================
   ReSarah — Desktop A02 情境找鞋（頁面專屬）
   ※ 共用樣式在 common.css，請先載入 common.css
   Section 對照（設計稿 Y 座標，frame 1440 × 7975）
     hero            0 – 900
     scenarios     900 – 3219   bg #efe7dc  情境九宮格
     styles       3219 – 4348   Different wedding styles（款式輪播）
     details      4348 – 5140   bg #ebcfcd
     faq          5140 – 6133   那些，新娘最常問的事
     band         6133 – 7000   全幅影像 + 標語
     visit        7000 – 7717
     footer       7717 – 7975   bg #212121
   ============================================================= */

/* 圖片一律寫在 HTML 的 <img src="img/…">，本檔不放任何 background-image */

/* =============================================================
   01 HERO 文案
   Figma：標題 X=580 / Y=372 / W=704（靠左）
          中文區塊 Y=602 起，位於標題右側
   ============================================================= */
.hero__copy {
  position: absolute;
  top: 372px;
  left: 580px;
  right: 39px;
  display: grid;
  grid-template-columns: 704px;
  color: var(--c-text-invert);
}
.hero__title { grid-column: 1; text-align: left; }

.hero__aside {
  grid-column: 2;
  align-self: end;
  margin: 0 0 -70px -365px;   /* 中文壓在英文標題右下角，對齊 Figma */
  width: 340px;
}
.hero__lead {
  font-size: var(--fs-title-b);
  line-height: var(--lh-title-b);
  font-weight: 500;
  margin-bottom: 12px;
  white-space: nowrap;
}
.hero__desc {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  max-width: 306px;
  margin-bottom: 18px;
}

/* =============================================================
   02 情境九宮格
   Figma：3 列（3 / 2 寬卡 / 3），卡片高 681、列距 732
   ============================================================= */
.scenes { background: var(--c-surface-default); padding: 24px 0 90px; }
.scenes__label { margin-bottom: 40px; }

/* 6 欄基底：一般卡佔 2 欄（一列 3 張）、寬卡佔 3 欄（一列 2 張）
   直接新增 .scene-card 就會自動往下排，不用改 CSS */
/* repeat start：.scene-card */
.scenes__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 50px 24px;
}
.scene-card { grid-column: span 2; display: flex; flex-direction: column; }
.scene-card--wide { grid-column: span 4; }

/* min-height 讓同一列的圖片上緣對齊（對應 Figma：圖片統一從 y=1176 起） */
.scene-card__desc {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  min-height: calc(var(--lh-caption) * 2);
  margin-bottom: 10px;
}
.scene-card__title {
  font-size: var(--fs-title-b);
  line-height: var(--lh-title-b);
  font-weight: 500;
  min-height: calc(var(--lh-title-b) * 2);
  margin-bottom: 18px;
}
.scene-card__foot { margin-top: auto; }
.scene-card__fig { 
/*    aspect-ratio: 380 / 444; */
    margin-bottom: 14px; }
.scene-card--wide .scene-card__fig { 
/*    aspect-ratio: 590 / 444; */
}
.scene-card__foot { display: flex; justify-content: flex-end; }
/* repeat end */

/* =============================================================
   03 Different wedding styles（款式輪播，卡片高低錯落）
   ============================================================= */
.styles { padding: 90px 0 70px; overflow: hidden; }
.styles__label { margin-bottom: 46px; }
.styles__head { display: flex; gap:30px; align-items: flex-start; margin-bottom: 40px; position: absolute;z-index: 1;}
.styles__title { 
/*    flex: 0 0 490px;*/
}
.styles__intro { max-width: 440px; font-size: var(--fs-caption); line-height: var(--lh-caption);margin-top: 30px; }

/* 輪播本體向右滿版溢出（對齊 Figma：卡片延伸出畫布） */
.styles__slider-wrap { margin-left: calc((100vw - min(100vw, var(--container))) / 2 + 20px); margin-top: 200px}

/* repeat start：.style-card — 直接複製即可，錯落節奏每 3 張循環一次 */
/* 注意：slick 是把 slick-slide 這個 class 加在 .style-card 本身，
   所以錯落位移要下在同一個元素上（不是後代選擇器）。 */
.style-card { width: 292px; margin-right: 24px; }
.styles__slider .style-card:nth-child(3n+1) { margin-top: 168px; }
.styles__slider .style-card:nth-child(3n+2) { margin-top: 0; }
.styles__slider .style-card:nth-child(3n+3) { margin-top: 108px; }

.style-card__fig { 
/*    aspect-ratio: 292 / 325; */
    margin-bottom: 14px; }
.style-card__no {
  font-family: var(--ff-display);
  font-size: 56px;
  line-height: 1;
  color: var(--c-surface-gold);
}
.style-card__name { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin: 2px 0 4px; }
.style-card__desc { font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* repeat end */

.styles__foot {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 46px;
}
.styles__progress {
  flex: 1;
  height: 1px;
  background: var(--c-line);
  position: relative;
  max-width: 420px;
  margin-left: auto;
}
.styles__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--c-text-primary);
  width: 33%;
  transition: width .4s ease, transform .4s ease;
}
/* 卡片不再固定寬，改由內容（圖片）決定 */
.styles__slider .style-card{
  width: auto;
  margin-right: 24px;

  /* 關鍵：只讓 fig 參與寬度計算，文字不撐寬 */
  display: grid;
  grid-template-columns: min-content;
}
/* 文字欄位寬度歸零、但視覺上撐滿卡片寬 */
.styles__slider .style-card > :not(.style-card__fig){
  width: 0;
  min-width: 100%;
}

/* 版位解除固定比例，改成「固定高度、寬度自動」 */
.styles__slider .style-card__fig{
  aspect-ratio: auto;
  height: 325px;          /* 統一視覺高度，錯落節奏才不會亂 */
  width: auto;
}
.styles__slider .style-card__fig > img{
  height: 100%;
  width: auto;            /* 覆寫 common.css 的 width:100% */
  object-fit: contain;    /* 不裁切，完整比例 */
  max-width: none;
}
.styles__slider .style-card__fig{ min-width: 200px; max-width: 480px; }
.styles__slider .style-card__fig > img{ object-fit: cover; } /* 超出範圍時才裁 */

.styles__slider .style-card--spacer{
  width: 120px;              /* 這個值 = 最後一張右邊想留的空白 */
  margin-right: 0;
  margin-top: 0 !important;  /* 不要吃到 nth-child(3n) 的錯落位移 */
  min-width: 0;
}
/* =============================================================
   04 Details（A02 版：2 大項）
   ============================================================= */
.a02-details { position: relative; background: var(--c-brand-primary); padding: 60px 0 80px; overflow: hidden; }
.a02-details__mega { position: absolute; left: -30px; top: -50px; color: var(--c-surface-white); }
.a02-details__inner { position: relative; }
.a02-details__intro { margin: 0 0 54px auto; max-width: 320px; }
.a02-details__intro h2 { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 10px; }
.a02-details__intro p  { font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* repeat start：.a02-detail — 新增會自動排入 2 欄 */
.a02-details__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 40px 60px; max-width: 960px;justify-self: end;}
.a02-detail { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.a02-detail__no { font-family: var(--ff-display); font-size: 64px; line-height: .9; color: var(--c-accent-pink); }
.a02-detail__t { font-size: var(--fs-bodyb); line-height: var(--lh-bodyb); font-weight: 700; margin-bottom: 10px; }
.a02-detail__d { font-size: var(--fs-caption); line-height: var(--lh-caption); max-width: 300px; margin-bottom: 20px; }
.a02-detail__fig { aspect-ratio: 248 / 205; max-width: 248px; margin-bottom: 18px; }
/* repeat end */

/* =============================================================
   05 那些，新娘最常問的事（沿用 A01 的 .guide-item）
   ============================================================= */
.faq { padding: 80px 0 80px; }
.faq__head { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; margin-bottom: 40px; }
.faq__title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; }
.faq__foot { margin-top: 34px; display: flex; justify-content: flex-end; }
/* 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 */

/* =============================================================
   06 全幅影像 + 標語
   ============================================================= */
.band { position: relative; min-height: 640px; color: var(--c-text-invert); display: flex; align-items: center; }
.band__bg {
    position: absolute;
}
.band__bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.band__inner { position: relative; z-index: 1; display: flex;
    flex-wrap: wrap;
    justify-content: right;padding: 120px 0;align-items: center;}
.band__group {
margin-top: 25vh;
}
.band__en { font-family: var(--ff-display); font-size: 80px; line-height: 1.15; max-width: 700px; margin-bottom: 26px; position: absolute;}
.band__zh { font-size: 28px; line-height: var(--lh-title); font-weight: 700; margin-bottom: 10px; }
.band__desc { font-size: 18px; line-height: 1.7; max-width: 400px; }

/* =============================================================
   對齊 Figma 稿高度（≥1440 才套用）
   ============================================================= */
@media (min-width: 1440px) {
  .scenes      { min-height: 2319px; }
  .styles      { min-height: 1129px; }
/*  .a02-details { min-height: 792px; }*/
/*  .faq         { min-height: 993px; }*/
  .band        { min-height: 867px; }
  .visit       { min-height: 717px; }
}

/* =============================================================
   RWD
   ============================================================= */
@media (max-width: 1439px) {
  .hero__copy { left: 0; right: 0; padding-inline: var(--header-pad); grid-template-columns: 1fr; }
  .hero__title { grid-column: 1; }
  .hero__aside { grid-column: 1; margin: 24px 0 0; width: auto; }
  .hero__lead { white-space: normal; }
  .styles__slider-wrap { margin-left: 0; }
}

@media (max-width: 1024px) {
  .hero__copy { top: 260px; }
  .scenes__grid { grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }
  .scene-card, .scene-card--wide { grid-column: span 2; }
.scene-card--wide .scene-card__fig{ aspect-ratio: auto; height: 475px; }
  .styles__head { flex-direction: column; gap: 20px; }
  .styles__title { flex: none; }
  .faq__head { grid-template-columns: 1fr; }
  .band__en { font-size: 44px; }
}

@media (max-width: 767px) {
  .hero__copy { top: auto; bottom: 90px; }
  .scenes { padding: 20px 0 60px; }
  .scenes__grid { grid-template-columns: 1fr; gap: 36px; }
  .scene-card, .scene-card--wide { grid-column: 1; }
  .styles, .faq { padding: 60px 0; }
  .a02-details { padding: 50px 0 60px; }
  .a02-details__intro { margin-left: 0; max-width: none; }
  .a02-details__list { grid-template-columns: 1fr; gap: 34px; }
  .a02-detail { grid-template-columns: 64px 1fr; }
  .a02-detail__no { font-size: 44px; }
  .styles__slider .style-card { margin-top: 0 !important; }
  .band { min-height: 440px; padding: 60px 0; }
  .band__en { font-size: 32px; }
}
/* 情境卡版位：固定高 475px，圖片滿版裁切 */
.scene-card__fig,
.scene-card--wide .scene-card__fig{
  aspect-ratio: auto;
  height: clamp(300px, 38vw, 475px);   /* 桌機 475，窄螢幕自動縮 */
  margin-bottom: 14px;
}
.scene-card__fig > img{ object-position: center 40%; }  /* 往上偏一點 */
/* =============================================================
   RWD 修正（2026-09-30）：手機 / 平板溢出與重疊
   ============================================================= */
/* Hero：<img> 要 cover 撐滿，否則 16:10 的圖在手機只有上半、下方露出底色 */
.hero__media > img { width: 100%; height: 100%; object-fit: cover; }

/* Band：底圖要撐滿整區 */
.band__bg { inset: 0; }
.band__bg > img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1439px) {
  /* Visit：門市卡 minmax(280px) 在 1110 以下擠不下兩欄 */
  .visit__stores { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 1024px) {
  /* Styles：標題區在桌機是 absolute 疊在輪播上方，單欄時會壓到圖 → 回到一般流 */
  .styles__head { position: static; margin-bottom: 24px; }
  .styles__slider-wrap { margin-top: 0; }

  /* Details：minmax(420px) 在 768–900 會撐出兩欄溢出 → 固定兩等分 */
  .a02-details__intro { margin-top: 110px; }
  .a02-details__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; max-width: none; justify-self: stretch; }
  .a02-detail { grid-template-columns: 72px 1fr; }

  /* FAQ：桌機左邊留 280px 給標題欄，單欄時要拿掉，否則整排往右推出畫面 */
  .guide__list { grid-template-columns: 1fr; padding-left: 0; margin-left: 0; }

  /* Band：英文標語不再 absolute 疊在中文上，改成上下排 */
  .band__inner { flex-direction: column; align-items: flex-start; justify-content: center; padding-inline: 20px; }
  .band__en { position: static; margin-bottom: 20px; }
  .band__group { margin-top: 0; }

  /* Visit：改單欄、Visit 大字放右側空位 */
  .visit__grid  { grid-template-columns: 1fr; gap: 40px; }
  .visit__label { margin-bottom: 48px; }
  .visit__mega  { left: auto; right: 0; top: 260px; }
}

@media (max-width: 767px) {
  /* Hero：圖滿版後文字壓在畫面上 → 底部漸層加深、文字加淡陰影（同首頁） */
  .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); }

  /* Details：大字不往左上出血 */
  .a02-details__mega  { left: 12px; top: -12px; }
  .a02-details__intro { margin: 50px 0 32px; }
  .a02-details__list  { grid-template-columns: 1fr; }
  .a02-detail { grid-template-columns: 56px 1fr; gap: 12px; }

  /* FAQ：縮圖 186 → 88，文字才有空間 */
  .guide-item { grid-template-columns: 88px 1fr auto; gap: 14px; padding: 20px 0; align-items: center; }
  .faq__foot  { justify-content: flex-start; }

  /* Band */
  .band__inner { padding-block: 0; }
  .band__desc  { font-size: 15px; }
  .band__zh    { font-size: 22px; line-height: 32px; }

  /* Visit：大字放在標籤與標題之間；門市卡兩欄並排 */
  .visit__label { margin-bottom: 92px; }
  .visit__mega  { left: 12px; right: auto; top: 72px; }
  .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; }
}