@charset "UTF-8";
/* =========================================================
   WT官網｜project.css（乾淨版：只保留一套權威規則）
   - 適用：建案內頁（project-*.html / page-project-detail）
   - 已清除：重複/互斥的 Gallery、Hero、Submenu 規則
   ========================================================= */

/* =========================================================
   變數
   ========================================================= */
:root{
  --wt-header-h: 92px;         /* 桌機 header 高度（可依實際微調） */
  --wt-mobile-header-h: 52px;  /* 手機 header 高度（可依實際微調） */
  --wt-submenu-h: 54px;        /* 子選單高度 */
  --gal-gap: 14px;             /* 相簿卡片間距 */
}

/* =========================================================
   子選單（Project Submenu）
   ========================================================= */
body.page-project-detail .project-submenu.sticky-submenu{
  position: sticky;
  top: var(--wt-header-h);
  z-index: 900;

  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 1240px){
  body.page-project-detail .project-submenu.sticky-submenu{
    top: var(--wt-mobile-header-h);
  }
}

/* 橫向捲動列（你的 HTML：.submenu-scroll） */
body.page-project-detail .project-submenu .submenu-scroll{
  height: var(--wt-submenu-h);
  display: flex;
  align-items: center;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  white-space: nowrap;
  scrollbar-width: none;

  /* 提示可滑動：兩側淡出 */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
}
body.page-project-detail .project-submenu .submenu-scroll::-webkit-scrollbar{ display:none; }

/* 子選單 pill（你的 HTML：.submenu-item / a） */
body.page-project-detail .project-submenu .submenu-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 14px;

  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,245,236,.75);

  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(15,23,42,.82);

  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
body.page-project-detail .project-submenu .submenu-item:hover{
  background: rgba(233,223,190,.55);
  border-color: rgba(201,151,0,.35);
  transform: translateY(-1px);
}
body.page-project-detail .project-submenu .submenu-item.active{
  background: linear-gradient(180deg, rgba(201,151,0,.95), rgba(169,124,0,.95));
  border-color: rgba(201,151,0,.55);
  color: #fff;
}

/* =========================================================
   頁面底色
   ========================================================= */
body.page-project-detail{
  background-color: #f2f4f8;
}

/* =========================================================
   Hero（封面）
   ========================================================= */
body.page-project-detail .project-detail-hero{
  position: relative;
  padding: 10px 0 10px;
  background: linear-gradient(135deg, #0d3b66 0%, #182840 55%, #101820 100%);
  color: #fff;
}

body.page-project-detail .project-hero-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

body.page-project-detail .project-hero-eyebrow{
  margin: 0 0 5px;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 22px;
  color: rgba(255,255,255,.78);
}

body.page-project-detail .project-hero-title{
  margin: 0 0 15px;
  font-size: clamp(28px, 3vw, 250px);
  line-height: 1.15;
  letter-spacing: .06em;
}

body.page-project-detail .project-hero-tagline{
  margin: 0 0 5px;
  font-size: 20px;
  line-height: 1.9;
  color: rgba(255,255,255,.86);
}

body.page-project-detail .project-hero-highlights{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.84);
  line-height: 1.5;
  font-size: 15.5px;
}
body.page-project-detail .project-hero-highlights li{ margin: 2px 0; }



@media (max-width: 980px){
  body.page-project-detail .project-detail-hero{ padding: 34px 0 34px; }
  body.page-project-detail .project-hero-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body.page-project-detail .project-hero-image img{ height: 260px; }
}

/* =========================================================
   內容區（建案資訊）
   ========================================================= */
body.page-project-detail .project-detail-section{
  padding: 60px 0  ;
}

body.page-project-detail .project-info-section .container{
  max-width: 1120px;
}

body.page-project-detail .project-info-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
  gap: 24px;
}

body.page-project-detail .project-info-card{
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 24px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

body.page-project-detail .project-info-card h2{
  margin: 0 0 16px;
  font-size: 18px;
  color: #111;
}

body.page-project-detail .project-info-card dl{ margin: 0; }

body.page-project-detail .project-info-card dl > div{
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed #e1e3ea;
}
body.page-project-detail .project-info-card dl > div:last-child{ border-bottom: none; }
body.page-project-detail .project-info-card dt{ font-weight: 600; color: #666; }
body.page-project-detail .project-info-card dd{ margin: 0; color: #333; }

body.page-project-detail .project-feature-list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}
body.page-project-detail .project-feature-list li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
}
body.page-project-detail .li::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--secondary, #c99700);
}
body.page-project-detail .project-info-note{
  margin-top: 10px;
  font-size: 12px;
  color: #888;
}

@media (max-width: 1024px){
  body.page-project-detail .project-info-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   ✅ 建案實景相簿（Carousel 唯一權威版）
   - 你的 HTML 已包含：.gallery-viewport + .gallery-clip + #galTrack
   ========================================================= */

/* 每頁張數：桌3 / 平2 / 手1（給 JS 讀用） */
body.page-project-detail{ --gal-perview: 3; }
@media (max-width: 980px){ body.page-project-detail{ --gal-perview: 2; } }
@media (max-width: 640px){ body.page-project-detail{ --gal-perview: 1; } }

body.page-project-detail .project-gallery{
  margin: 20px 0 ;
}
body.page-project-detail .project-gallery .container{
  max-width: 1120px;
}

body.page-project-detail .project-gallery .gallery-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.page-project-detail .project-gallery .gallery-title{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
}

/* 外層：放箭頭（不裁切） */
body.page-project-detail .project-gallery .gallery-viewport{
  position: relative;
  overflow: visible;
}

/* 裁切層：只裁圖片列（關鍵） */
body.page-project-detail .project-gallery .gallery-clip{
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

/* 滑動列 */
body.page-project-detail .project-gallery .gallery-track{
  display: flex;
  gap: var(--gal-gap);
  padding: 6px;
  will-change: transform;
  transition: transform .35s ease;
}

/* 每張卡片寬度（永遠 3/2/1 張） */
body.page-project-detail .project-gallery .gallery-card{
  flex: 0 0 calc(
    (100% - (var(--gal-gap) * (var(--gal-perview) - 1)))
    / var(--gal-perview)
  );
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;

  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(16,24,40,.10);
}

body.page-project-detail .project-gallery .gallery-card img{
  width: 100%;
  height: 260px;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}
body.page-project-detail .project-gallery .gallery-card:hover img{
  transform: scale(1.03);
}

@media (max-width: 980px){
  body.page-project-detail .project-gallery .gallery-card img{ height: 240px; }
}
@media (max-width: 640px){
  body.page-project-detail .project-gallery .gallery-card img{ height: 240px; }
}

/* 箭頭（外推、金色） */
body.page-project-detail .project-gallery .gbtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  background: linear-gradient(180deg, #c9a14a, #b58a2c);
  box-shadow: 0 8px 18px rgba(181,138,44,.35);
}
body.page-project-detail .project-gallery .gbtn:hover{
  background: linear-gradient(180deg, #ddb35a, #c99a36);
}

body.page-project-detail .project-gallery .gbtn-prev{ left: -56px; }
body.page-project-detail .project-gallery .gbtn-next{ right: -56px; }

@media (max-width: 640px){
  body.page-project-detail .project-gallery .gbtn-prev{ left: -20px; }
  body.page-project-detail .project-gallery .gbtn-next{ right: -20px; }
}

/* dots */
body.page-project-detail .project-gallery .gallery-dots{
  display:flex;
  gap: 8px;
  justify-content:center;
  margin-top: 12px;
}
body.page-project-detail .project-gallery .gallery-dots .dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.20);
  cursor: pointer;
}
body.page-project-detail .project-gallery .gallery-dots .dot.is-active{
  width: 20px;
  background: rgba(0,0,0,.45);
}

/* =========================================================
   生活機能 / 地圖
   ========================================================= */
body.page-project-detail .project-location-layout{
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 28px;
}

body.page-project-detail .project-location-text h2{
  margin: 0 0 10px;
  font-size: 20px;
}

body.page-project-detail .project-location-text p{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: #444;
}

body.page-project-detail .project-location-list{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 14px;
  color: #444;
}
body.page-project-detail .project-location-list li{ margin-bottom: 4px; }

body.page-project-detail .project-location-map .map-embed-wrapper{
  border-radius: 20px;
  background: #dfe6f2;
  min-height: 260px;
  overflow: hidden;
  border: 1px dashed #b2c0dd;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
body.page-project-detail .project-location-map .map-embed-wrapper iframe{
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}
@media (max-width: 768px){
  body.page-project-detail .project-location-layout{ grid-template-columns: 1fr; }
  body.page-project-detail .project-location-map .map-embed-wrapper,
  body.page-project-detail .project-location-map .map-embed-wrapper iframe{
    height: 220px;
    min-height: 220px;
  }
}

/* =========================================================
   Lightbox（唯一版本）
   ========================================================= */
body.page-project-detail .lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  display: none; /* JS 開啟時改成 flex */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 24px;
}

body.page-project-detail .lightbox-main{
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

body.page-project-detail #lightbox-img{
  max-width: 100%;
  max-height: 72vh;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

body.page-project-detail .lightbox-caption{
  text-align: center;
  color: #fff;
  opacity: .92;
}
body.page-project-detail .lightbox-caption h4{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}

body.page-project-detail .lightbox-close{
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  opacity: .9;
}

body.page-project-detail .lightbox-prev,
body.page-project-detail .lightbox-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}
body.page-project-detail .lightbox-prev{ left: 14px; }
body.page-project-detail .lightbox-next{ right: 14px; }

@media (max-width: 640px){
  body.page-project-detail .lightbox{ padding: 14px; }
  body.page-project-detail .lightbox-prev,
  body.page-project-detail .lightbox-next{ width: 40px; height: 40px; }
}

/* =========================================================
   Work Grid（如果頁面有用到）
   ========================================================= */
body.page-project-detail .work-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
body.page-project-detail .work-card{ cursor: pointer; }

body.page-project-detail .work-img-wrapper{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--team-radius, 18px);
  background: #eee;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
body.page-project-detail .work-img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
body.page-project-detail .work-card:hover .work-img-wrapper img{
  transform: scale(1.06);
}
body.page-project-detail .work-title{
  font-weight: 800;
  margin-top: 12px;
  color: var(--team-blue, #0d3b66);
}
body.page-project-detail .work-loc{
  font-size: 13px;
  color: var(--wt-gray-500, #7b8490);
}

@media (max-width: 992px){
  body.page-project-detail .work-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  body.page-project-detail .work-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   影片輪播（owl carousel，如果頁面有用到）
   ========================================================= */
body.page-project-detail .work-slider-section{
  margin-top: 60px;
  padding: 30px 15px;
}
body.page-project-detail .work-slider-section .section-header{
  text-align: left;
  margin-bottom: 26px;
}
body.page-project-detail .work-slider-section .section-title{
  font-size: 26px;
  margin: 0;
}

body.page-project-detail .video-carousel-wrapper{
  position: relative;
  padding: 10px 0;
}
body.page-project-detail .video-item{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  cursor: pointer;
}
body.page-project-detail .video-img-container{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 6px;
}
body.page-project-detail .video-img-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, opacity .35s ease;
  opacity: .92;
}
body.page-project-detail .video-img-container::after{
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,151,0,.92);
  color: #101820;
  font-size: 18px;
  z-index: 2;
  transition: transform .2s ease, filter .2s ease;
}
body.page-project-detail .video-item:hover .video-img-container img{
  transform: scale(1.05);
  opacity: 1;
}
body.page-project-detail .video-item:hover .video-img-container::after{
  transform: translate(-50%,-50%) scale(1.06);
  filter: brightness(1.05);
}
body.page-project-detail .video-caption{
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3.2em;
  text-align: justify;
}

/* owl nav */
body.page-project-detail .owl-nav button{
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: rgba(0,0,0,0.7) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  transition: .2s;
}
body.page-project-detail .owl-nav button:hover{
  background: rgba(201,151,0,0.95) !important;
  color: #101820 !important;
}
body.page-project-detail .owl-prev{ left: -18px; }
body.page-project-detail .owl-next{ right: -18px; }

@media (max-width: 1024px){
  body.page-project-detail .owl-nav{ display: none; }
}


body.page-project-detail .project-detail-hero .project-hero-layout{
  padding-left: calc(var(--wt-gutter) + 100px);
  padding-right: calc(var(--wt-gutter) + 100px);
}

body.page-project-detail .project-submenu .submenu-scroll {
  padding-left: calc(var(--wt-gutter) + 100px);
  padding-right: calc(var(--wt-gutter) + 100px);
}

/*-----自己改手機版--------------------------*/
@media (max-width: 640px){
  body.page-project-detail .project-detail-hero .project-hero-layout{
  padding-left: calc(var(--wt-gutter) );
  padding-right: calc(var(--wt-gutter)  );
}

body.page-project-detail .project-submenu .submenu-scroll {
  padding-left: calc(var(--wt-gutter)  );
  padding-right: calc(var(--wt-gutter) );
}

}



/*----方案 ----------------------------------------------*/

body.page-project-detail .project-detail-hero{
  background:
    radial-gradient(
      1200px 420px at 50% 45%,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 55%
    ),
    radial-gradient(
      900px 380px at 10% 35%,
      rgba(201,161,74,.12),
      rgba(201,161,74,0) 60%
    ),
    #2b4f73; /* ⭐ 霧藍中階 */
  padding: 20px 0 20px;
}



/* Hero 直向建物圖：完整顯示、不裁切 */


/*------------------------- 
.project-hero-image{
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,0.45);
  background:#000;
}
.project-hero-image img{
  width:100%;
  height: 340px;
  object-fit: cover;
}

body.page-project-detail .project-hero-image{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
body.page-project-detail .project-hero-image img{
  width: 100%;
  height: min(360px, 42vh);
  object-fit: cover;
  display: block;
}

 -----------------------------*/


body.page-project-detail .project-hero-image img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  display: block;
}


/*----------------------------------*/

/* ======================================================
   Hero 圖片「融進背景」：不圓角、不卡片、不框
   ====================================================== */
body.page-project-detail .project-hero-image{
  position: relative;
}

body.page-project-detail .project-hero-image img{
  width: 100%;
  height: auto;
  display: block;
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 75%,
    rgba(0,0,0,0) 100%
  );
}


/* 讓 Hero 右圖高度，視覺上接近左側文字區 */
body.page-project-detail .project-hero-image{
  display: flex;
  align-items: center; /* 垂直置中圖片 */
}

body.page-project-detail .project-hero-image img{
  width: 100%;
  height: auto;
  max-height: 420px;   /* ⭐ 關鍵：比左文略低 */
  object-fit: contain;
}

@media (max-width: 640px){
  body.page-project-detail .project-hero-image img{
    max-height: 360px;
  }
}

/* =========================================================
   Typography（kicker 只留一套：左金線版）
   ========================================================= */
.page-project-detail .kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .20em;
  color: rgba(13,59,102,.82);
  border-left: 3px solid var(--team-gold);
  padding-left: 10px;
  margin-bottom: 5px;
}