/* DN REAL ESTATE DEV — 內頁樣式
   對齊 Figma：Frame 2(philosophy) / Frame 3(news 列表) / Frame 4·7(projects 列表)
              / Frame 5(news 詳情) / Frame 6(project 詳情)
   共用骨架（header/footer/按鈕/色票）沿用 main.css，本檔只加內頁專屬區塊。
   共同版面：header 80 → 標題帶 220 → 麵包屑 y=320 → 內容 y=360（皆取自 Figma 絕對座標）
*/

/* ========================= 內頁標題帶 ========================= */
/* Figma Frame 21：1920×220，底圖 project-theone-01 + 60% 黑遮罩，標題 46/800 白字 */
.page-title {
  position: relative;
  display: grid;
  place-items: center;
  height: 220px;
  background: url('/img/project-wide-02.webp') center/cover no-repeat;
  isolation: isolate;
}
.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);   /* 設計稿實測 opacity 0.6 */
  z-index: -1;
}
.page-title h1 {
  margin: 0;
  font-size: var(--fs-46);
  font-weight: var(--fw-bold);
  line-height: 55px;
  color: var(--c-white);
  text-align: center;
  text-transform: uppercase;
}
:lang(th) .page-title h1 { text-transform: none; line-height: var(--lh-thai-tight); }

/* ========================= 麵包屑 ========================= */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(1560px, 100% - 48px);
  margin: 20px auto 0;
  padding-left: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--c-taupe);
}
.breadcrumb a:hover { color: var(--c-ink-950); }
.crumb-sep { width: 1px; height: 20px; background: var(--c-line); }
.crumb-current {
  color: var(--c-taupe-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}

/* 內容區起點：麵包屑下方 20px（Figma y=360 - 320 - 19 ≈ 21） */
.page-body { width: min(1560px, 100% - 48px); margin: 0 auto; padding: 40px 0 80px; }

/* ========================= 通用：段落區塊 ========================= */
.section-title {
  margin: 0;
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  line-height: 48px;
  color: var(--c-taupe-dark);
}
.section-rule {
  height: 1px;
  margin: 18px 0 0;
  background: var(--c-line);
  border: 0;
}
.body-text {
  margin: 22px 0 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: 26px;
  color: var(--c-taupe);
  white-space: pre-line;          /* 設計稿是手動斷行的多段文案 */
}
:lang(th) .body-text { line-height: var(--lh-thai-body); }

/* ========================= DN Philosophy（Frame 2） ========================= */
.phil-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 480px;
  margin-bottom: 56px;
  background: url('/img/project-hero-villa.webp') center/cover no-repeat;
  isolation: isolate;
}
.phil-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-overlay-40);
  z-index: -1;
}
.phil-statement {
  width: min(1252px, 100% - 48px);
  margin: 0;
  font-size: var(--fs-70);
  font-weight: var(--fw-bold);
  line-height: 84px;
  color: var(--c-white);
  text-align: center;
}
:lang(th) .phil-statement { line-height: var(--lh-thai-tight); }

/* 品牌標誌 + 首段（設計稿 671×206 的大 logo 靠左，右邊兩張照片） */
.phil-intro {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 64px;
}
.phil-intro-mark { flex: 0 0 44%; }
.phil-intro-mark img { width: min(671px, 100%); height: auto; }
.phil-intro-copy { flex: 1; min-width: 0; }
.phil-intro-copy .body-text { width: min(719px, 100%); }

.phil-figure { margin: 0 0 64px; }
.phil-figure img { width: 100%; height: 550px; object-fit: cover; }

/* 三段理念：標題 30/500 + 內文 20/400，段間 1px 分隔線 */
.phil-block + .phil-block { margin-top: 40px; }
.phil-block h3 {
  margin: 0;
  font-size: var(--fs-30);
  font-weight: var(--fw-medium);
  line-height: 36px;
  color: var(--c-taupe-dark);
}
.phil-block .body-text { margin-top: 14px; }
.phil-block hr { height: 1px; margin: 32px 0 0; background: var(--c-line); border: 0; }

/* 品牌原則：2×2（設計稿每格 750×178） */
.phil-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 60px;
  margin-top: 32px;
}
.phil-principle h4 {
  margin: 0;
  font-size: var(--fs-30);
  font-weight: var(--fw-medium);
  line-height: 36px;
  color: var(--c-taupe-dark);
}
.phil-principle .body-text { margin-top: 12px; }

.phil-section { margin-top: 72px; }

/* ========================= Projects 列表（Frame 4 / 7） ========================= */
/* 每列 1920×600：左 960 圖 / 右 960 文，偶數列左右對調 */
.project-row {
  display: flex;
  height: 600px;
}
.project-row > .project-row-photo { flex: 0 0 50%; overflow: hidden; }
.project-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.project-row-info {
  flex: 0 0 50%;
  padding: 80px clamp(24px, 3.1vw, 60px) 0;
  align-self: stretch;
}
.project-row:nth-child(even) { flex-direction: row-reverse; }

.project-row-info .project-name { margin: 0; }
.project-row-info .project-spec { margin-top: 40px; }
.project-row-info .btn-more { margin-top: 40px; }

/* coming soon 佔位列：未公開的建案不掛名稱也不留半邊白，
   改成滿版壓深＋文字置中（同設計稿側邊預覽的處理語彙，只是放大到整列）*/
.project-row.is-soon {
  position: relative;
  display: block;
  height: 320px;
}
.project-row.is-soon .project-row-photo {
  position: absolute;
  inset: 0;
  width: 100%;
}
.project-row.is-soon .project-row-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 底圖是亮色室內效果圖，壓深一點白字才咬得住 */
  background: rgba(20, 18, 18, .62);
}
.project-row.is-soon .project-row-info {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.project-row.is-soon .soon-text {
  margin: 0;
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  line-height: 48px;
  letter-spacing: .08em;
  color: var(--c-white);
  text-transform: uppercase;
}
:lang(th) .project-row.is-soon .soon-text { text-transform: none; letter-spacing: 0; }

.projects-list { margin-top: 40px; }

/* ========================= Project 詳情（Frame 6） ========================= */
/* 五段 1920×600：左照片 960 / 右效果圖 960 */
.project-gallery-row {
  display: flex;
  height: 600px;
}
.project-gallery-row > div { flex: 0 0 50%; overflow: hidden; }
.project-gallery-row img { width: 100%; height: 100%; object-fit: cover; }
.project-gallery-row:nth-child(even) { flex-direction: row-reverse; }
/* 落單的最後一張跨滿整列 */
.project-gallery-row.is-single > div { flex: 1 1 100%; }

.project-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}
.project-detail-head .project-name { margin: 0; }
.project-detail-head .project-spec { margin-top: 24px; }

/* ========================= News 列表（Frame 3） ========================= */
/* 卡片 365×507：圖 365×240 + 日期 20/500 + 標題 20/800 + 分隔線 + 摘要 14/400 + 小按鈕 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 60px 32px;
  margin-top: 40px;
}
.news-card { display: flex; flex-direction: column; }
.news-card-photo { height: 240px; overflow: hidden; }
.news-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.news-card:hover .news-card-photo img { transform: scale(1.04); }
.news-card-date {
  margin-top: 18px;
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: 24px;
  color: var(--c-taupe);
}
.news-card-title {
  margin: 8px 0 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 24px;
  color: var(--c-taupe-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card hr { height: 1px; margin: 16px 0 0; background: var(--c-line); border: 0; }
.news-card-excerpt {
  margin: 16px 0 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: var(--c-taupe);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 設計稿卡片按鈕是小一號的 120×38 */
.news-card .btn-more {
  width: 120px;
  height: 38px;
  margin-top: auto;
  font-size: var(--fs-12);
  line-height: 14px;
}
.news-card .btn-more-wrap { margin-top: 20px; }

/* ========================= News 詳情（Frame 5） ========================= */
.article { width: min(1000px, 100%); margin: 0 auto; }
.article-date {
  margin: 0;
  font-size: var(--fs-26);
  font-weight: var(--fw-medium);
  line-height: 31px;
  color: var(--c-taupe);
}
.article-title {
  margin: 12px 0 0;
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 38px;
  color: var(--c-taupe-dark);
}
.article hr { height: 1px; margin: 20px 0 0; background: var(--c-line); border: 0; }
.article-photos { display: grid; gap: 24px; margin: 32px 0 0; }
.article-photos img { width: 100%; height: auto; }
.article .body-text { width: min(960px, 100%); }
.article-back { margin-top: 48px; }

/* ========================= Contact ========================= */
/* 設計稿未提供此頁（導覽有 Contact 但無對應 frame）：沿用站內語彙做最小可用版本 */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 60px;
  margin-top: 40px;
}
.contact-item {
  padding: 32px 36px;
  background: var(--c-bg-soft);
}
.contact-item dt {
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--c-taupe);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.contact-item dd {
  margin: 12px 0 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: 34px;
  color: var(--c-taupe-dark);
  word-break: break-word;
}
:lang(th) .contact-item dt { text-transform: none; letter-spacing: 0; }

/* ========================= 空狀態 ========================= */
.empty-state {
  padding: 80px 0;
  font-size: var(--fs-20);
  line-height: 26px;
  color: var(--c-taupe);
  text-align: center;
}

/* ========================= RWD ========================= */
@media (max-width: 1439px) {
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-body { width: 100%; padding-left: 40px; padding-right: 40px; }
  .breadcrumb { width: 100%; padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 1024px) {
  .page-title { height: 160px; }
  .page-title h1 { font-size: 32px; line-height: 1.3; }

  .phil-hero { height: 320px; margin-bottom: 40px; }
  .phil-statement { font-size: 32px; line-height: 1.3; }
  .phil-intro { flex-direction: column; gap: 28px; margin-bottom: 40px; }
  .phil-intro-mark { flex: none; width: 100%; }
  .phil-intro-mark img { width: min(420px, 80%); }
  .phil-figure img { height: 320px; }
  .phil-principles { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .phil-section { margin-top: 48px; }
  .section-title { font-size: 28px; line-height: 1.3; }
  .phil-block h3, .phil-principle h4 { font-size: 22px; line-height: 1.35; }
  .body-text { font-size: 16px; line-height: 1.9; }

  .project-row, .project-gallery-row { flex-direction: column; height: auto; }
  .project-row:nth-child(even), .project-gallery-row:nth-child(even) { flex-direction: column; }
  .project-row > .project-row-photo, .project-gallery-row > div { flex: none; height: 300px; }
  .project-row-info { flex: none; padding: 32px 24px 48px; }
  .project-row.is-soon .soon-text {
    height: auto;
    padding: 24px;
    font-size: 22px;
    line-height: 1.35;
  }
  .project-detail-head { flex-direction: column; gap: 24px; }

  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }

  .article-title { font-size: 24px; line-height: 1.35; }
  .article-date { font-size: 18px; line-height: 1.4; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-item dd { font-size: 18px; line-height: 1.7; }
}

@media (max-width: 768px) {
  .page-title { height: 140px; }
  .page-title h1 { font-size: 26px; }
  .page-body { padding: 28px 20px 56px; }
  .breadcrumb { padding-left: 20px; padding-right: 20px; font-size: 14px; }
  .crumb-current { max-width: 22ch; }
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .phil-statement { font-size: 26px; }
}