/* ==========================================================================
   Page-specific styles
   ========================================================================== */

/* ---- Homepage Hero ---- */
.hero {
  padding-block: 56px var(--space-xl);
  background: var(--background-soft);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap-lg);
  align-items: center;
}

.hero__eyebrow-signals {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.hero__signal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.hero__signal::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.hero__media {
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Inner Page Hero (About/Services/Projects/Blog/Contact) ---- */
.page-hero {
  padding-block: 56px var(--space-lg);
  background: var(--background-soft);
}

.page-hero__breadcrumb { margin-bottom: var(--space-md); }

.page-hero__subtitle {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  max-width: 640px;
  font-size: 17px;
}

.page-hero__media {
  margin-top: var(--space-lg);
  aspect-ratio: 21/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 767px) {
  .page-hero__media { aspect-ratio: 4/3; }
}

/* 真實案場照片方向不一（手機拍攝直式居多），無法用固定裁切比例保證主體不被切掉，
   改用 contain 完整顯示整張照片，背景填色做 letterbox，確保櫃體/施工細節不會被裁掉 */
.page-hero__media--photo {
  aspect-ratio: 4/3;
  background: var(--background-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-hero__media--photo img { object-fit: contain; width: 100%; height: 100%; }

@media (max-width: 767px) {
  /* 手機版拿掉固定裁切比例，寬度拉滿、高度依照片本身比例顯示，
     避免直式長照片被固定 4:3 框限制到縮很小 */
  .page-hero__media--photo {
    aspect-ratio: auto;
    height: auto;
    background: none;
    display: block;
  }
  .page-hero__media--photo img {
    width: 100%;
    height: auto;
    object-fit: initial;
    display: block;
  }
}

.section--gap-tight { padding-top: calc(var(--section-gap-mobile) / 3); }

@media (min-width: 1024px) {
  .section--gap-tight { padding-top: calc(var(--section-gap-desktop) / 3); }
}

/* ---- Two-service split section ---- */
.service-split__panel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}

.service-split__panel img {
  width: 100%; height: 100%;
}

.service-split__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: linear-gradient(to top, rgba(51,51,51,0.65), transparent);
  color: var(--color-white);
}

.service-split__caption h3 { color: var(--color-white); }
.service-split__caption p { color: rgba(255,255,255,0.85); margin-top: 6px; }

/* ---- Materials macro grid ---- */
.material-item { text-align: center; }
.material-item__media {
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.material-item h4 { font-size: 15px; margin-bottom: 4px; }
.material-item p { font-size: 13px; color: var(--text-muted); }

/* ---- Blog Preview / Cards ---- */
.blog-card__meta {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ---- Article typography ---- */
.article-content {
  max-width: var(--container-narrow);
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.9;
}
.article-content h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: 26px;
}
.article-content h3 {
  margin-top: var(--space-md);
  margin-bottom: 10px;
}
.article-content p { margin-bottom: var(--space-sm); }
.article-content ul, .article-content ol {
  margin-bottom: var(--space-sm);
  padding-left: 1.4em;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 8px; }
.article-content table {
  margin-bottom: var(--space-sm);
  font-size: 15px;
}
.article-content th, .article-content td {
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  text-align: left;
}
.article-content th { background: var(--background-soft); }
.article-content img { border-radius: var(--radius-md); margin-block: var(--space-sm); }
.article-content blockquote {
  border-left: 3px solid var(--gold);
  padding-left: var(--space-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.article-toc {
  background: var(--background-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.article-toc h4 { font-size: 14px; margin-bottom: 10px; }
.article-toc li { margin-bottom: 6px; font-size: 14px; }
.article-toc a { color: var(--walnut); }

/* ---- Project Detail Editorial Gallery ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-gap);
}
.gallery > * { border-radius: var(--radius-md); overflow: hidden; }
.gallery__large { grid-column: span 6; aspect-ratio: 16/9; }
.gallery__half { grid-column: span 3; aspect-ratio: 4/3; }
.gallery__tall { grid-column: span 2; aspect-ratio: 3/4; }
.gallery__wide { grid-column: span 4; aspect-ratio: 3/2; }

@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__half, .gallery__tall, .gallery__wide, .gallery__large { grid-column: span 1; }
}

/* ---- 404 ---- */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-xl);
}
.error-page__code {
  font-family: var(--font-en);
  font-size: 100px;
  color: var(--gold);
  line-height: 1;
}
.error-page__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* ---- Admin ---- */
.admin-body { background: var(--background-cream); min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--color-charcoal); color: var(--text-on-dark); padding: var(--space-md); }
.admin-sidebar a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: rgba(255,255,255,0.8); margin-bottom: 4px; }
.admin-sidebar a:hover, .admin-sidebar a.is-active { background: rgba(255,255,255,0.08); color: var(--color-white); }
.admin-main { padding: var(--space-lg); }
.admin-card { background: var(--color-white); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); }
.admin-table { width: 100%; font-size: 14px; }
.admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-color); text-align: left; }
.admin-table tbody tr.is-clickable { cursor: pointer; }
.admin-table tbody tr.is-clickable:hover { background: var(--background-soft); }
.admin-table .table-preview-link { display: inline-flex; color: var(--text-muted); background: none; border: none; padding: 0; cursor: pointer; }
.admin-table .table-preview-link:hover { color: var(--walnut); }
.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--background-soft); }
.admin-login__box { background: var(--color-white); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-md); width: 100%; max-width: 380px; box-shadow: var(--shadow-md); }

.status-badge {
  display: inline-block;
  width: 64px;
  padding: 4px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
}
.status-badge--new { background: #C7A86E; }
.status-badge--contacted { background: #7A5A3D; }
.status-badge--closed { background: #6B6863; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; overflow-x: auto; gap: 4px; }
}