/* =========================================================
   Niiice Layout2 — blog.css
   最新動態（news 列表 / 單篇）＋ 作品展示（projects archive / types archive / 單篇）
   值取自母站捕捉 CSS（非目測）：
     - news 列表：Elementor post-688 + loop item 679
     - news 單篇 hero：post-725；內文 / 側欄 / 相關文章：Blocksy global/main（--sidebar-width:22%、--sidebar-gap:8%）
     - projects archive：post-756 + loop item 259
     - project 單篇：post-769 + 規格 grid 781
   class 一律 nb- 前綴避免與 base.css / 其他頁面 CSS 互撞。
   斷點同 base：tablet ≤1024px、mobile ≤767px。
   ========================================================= */

/* ---------- 共通：banner 內列 / 麵包屑 ---------- */
/* 母站 banner 內列 margin-bottom 48px（手機 24）；banner 本體（250/240、justify-end、
   下緣 1px、無背景圖＝palette-7 純色底）由 base.css .niiice-banner 提供 */
.nb-banner__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
}
.nb-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
.nb-breadcrumbs a { color: var(--palette-3); }
.nb-breadcrumbs a:hover { color: var(--color-accent-hover); }

/* ---------- 共通：日期 / 分類 chip（膠囊）/ 分頁 ---------- */
.nb-date {
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
/* news 卡 / 單篇 hero 同款 chip（post-679 / post-725：palette-7 底、1px palette-5 框、
   radius 80、padding 4px 16px、hover palette-6）——注意與專案卡「疊圖白 chip」不同款 */
.nb-chip {
  display: inline-block;
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  background: var(--palette-7);
  border: 1px solid var(--palette-5);
  border-radius: 80px;
  padding: 4px 16px;
  transition: background-color .2s ease;
}
.nb-chip:hover { background: var(--palette-6); color: var(--palette-3); }

/* 分頁（post-688 / post-756 同款：置中、間距 24px、margin-top 48px） */
.nb-pagination { margin-top: 48px; }
.nb-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 24px;
}
.nb-pagination .page-numbers {
  color: var(--palette-3);
  letter-spacing: var(--ls-typo);
}
.nb-pagination a.page-numbers:hover,
.nb-pagination .page-numbers.current { color: var(--palette-4); }

.nb-empty { color: var(--palette-3); }

/* =========================================================
   News 列表（home.php / index.php fallback；post-688）
   ========================================================= */
.nb-news {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 80px;
  margin-bottom: 104px;
}
/* 左欄 20%：桌機 1px 全框 + padding 48/72（平板 24；手機無框） */
.nb-news__filter {
  flex: 0 0 20%;
  max-width: 20%;
  border: var(--hairline);
  padding: 48px 72px;
}
/* 右欄 80%：框線 上右下 1px、左 0（與左欄相接成一體格線）；列距 48px */
.nb-news__list {
  flex: 0 0 80%;
  max-width: 80%;
  border: var(--hairline);
  border-left: 0;
  padding: 48px 72px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* 分類直排選單（14px、列距 16px、hover/active pill 底 palette-6 radius 80px；
   母站 item 水平 padding 0 → pill 貼齊文字寬） */
.nb-cat-menu li:not(:last-child) { margin-bottom: 16px; }
.nb-cat-menu a {
  display: inline-block;
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  padding: 2px 0;
  border-radius: 80px;
  transition: background-color .2s ease;
}
.nb-cat-menu a:hover,
.nb-cat-menu li.is-active a { background: var(--palette-6); color: var(--palette-3); }

/* 文章卡（loop item 679）：row、space-between、align center、gap 40px */
.nb-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.nb-card__media {
  flex: 0 0 40%;
  max-width: 40%;
  display: block;
}
.nb-card__media img { width: 100%; height: auto; }
/* 內容列：row wrap、align center、gap 16px 24px；標題獨佔一行 */
.nb-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  min-width: 0;
}
.nb-card__title {
  width: 100%;
  font-size: var(--typo-text-fs);
  font-weight: 400;
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  margin: 0;
}
.nb-card__title a { color: var(--color-heading); }
.nb-card__title a:hover { color: var(--color-accent-hover); }

/* =========================================================
   News 單篇（single.php；hero post-725 + Blocksy 原生內文）
   ========================================================= */
/* hero 內容列：row wrap、align-end、gap 16px、margin-bottom 48px；h1 寬 100% */
.nb-single-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 48px;
}
.nb-single-hero__title { width: 100%; margin: 0; }

/* 主體：內文欄 + 右 sidebar 22%、gap 8%（Blocksy --sidebar-width / --sidebar-gap 實測值）
   上下留白＝Blocksy content spacing 預設 60px（近似值，capture 未逐項量） */
.nb-single {
  margin-top: 60px;
  margin-bottom: 60px;
}
.nb-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22%;
  column-gap: 8%;
  align-items: start;
}

/* 內文（對齊 blog-format.js：封面圖 → 導言 → 圖文穿插） */
.nb-entry__cover { margin: 0 0 32px; }
.nb-entry__cover img { width: 100%; height: auto; }
.nb-entry__content > * + * { margin-top: 1.5em; }
.nb-entry__content h2 { margin-top: 2em; }
.nb-entry__content h2:first-child { margin-top: 0; }
.nb-entry__content img { max-width: 100%; height: auto; }
.nb-entry__content a { color: var(--color-accent); }
.nb-entry__content a:hover { color: var(--color-accent-hover); }

/* 標籤列（Blocksy entry-tags 實測：mt 40、gap 10、膠囊 80px、14px w500、
   .3em .85em、inset 1px 框） */
.nb-tags {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nb-tags a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  padding: .3em .85em;
  border-radius: 80px;
  box-shadow: inset 0 0 0 1px var(--palette-5);
  transition: background-color .2s ease, color .2s ease;
}
.nb-tags a:hover { background: var(--palette-6); color: var(--palette-4); }

/* 上一篇 / 下一篇（Blocksy posts-nav 實測：2 欄 grid、gap 8%、mt 50、縮圖欄 70px） */
.nb-postnav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8%;
  margin-top: 50px;
}
.nb-postnav__link {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--palette-4);
}
.nb-postnav__item--next .nb-postnav__link {
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
  margin-left: auto;
}
.nb-postnav__thumb {
  flex: 0 0 70px;
  max-width: 70px;
}
.nb-postnav__thumb img { width: 100%; height: auto; }
.nb-postnav__text { display: block; min-width: 0; }
.nb-postnav__label {
  display: block;
  font-size: var(--typo-secondary-fs);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
.nb-postnav__title {
  display: block;
  font-size: 16px;
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
}
.nb-postnav__link:hover .nb-postnav__title { color: var(--color-accent-hover); }

/* 右側欄（母站 ct-hidden-sm/md：≤1024 隱藏；widget 間距 40px） */
.nb-sidebar {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.nb-sidebar__title {
  font-size: var(--fs-h4);
  margin-bottom: 16px;
}
.nb-sidebar ul li:not(:last-child) { margin-bottom: 8px; }
.nb-sidebar ul a {
  font-size: var(--typo-secondary-fs);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
.nb-sidebar ul a:hover { color: var(--color-accent-hover); }
.nb-search { display: flex; gap: 8px; }
.nb-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--palette-7);
  border: 1px solid var(--palette-5);
  border-radius: 0;
  padding: 8px 12px;
  font-size: var(--typo-secondary-fs);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
.nb-search button {
  background: var(--palette-7);
  border: 1px solid var(--palette-5);
  padding: 8px 16px;
  font-size: var(--typo-secondary-fs);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  transition: background-color .2s ease;
}
.nb-search button:hover { background: var(--palette-6); }

/* 相關文章（Blocksy related：容器底 palette-7、3/2/1 欄、標題 16px、meta 14px） */
.nb-related {
  background: var(--palette-7);
  padding: 60px 0;
}
.nb-related__title { margin-bottom: 24px; }
.nb-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.nb-related__media { display: block; }
.nb-related__media img { width: 100%; height: auto; }
.nb-related__item-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--ls-typo);
  margin: 16px 0 8px;
}
.nb-related__item-title a { color: var(--color-heading); }
.nb-related__item-title a:hover { color: var(--color-accent-hover); }

/* =========================================================
   Projects archive（archive-projects.php / taxonomy-types.php；post-756）
   ========================================================= */
.nb-projects {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 80px;
  margin-bottom: 104px;
}
/* 分類橫排選單：置中；item 14px、padding 24px 水平 4px 垂直、間距 16px、
   hover/active pill 底 palette-6 radius 80px */
.nb-type-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
}
.nb-type-menu a {
  display: inline-block;
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  padding: 4px 24px;
  border-radius: 80px;
  transition: background-color .2s ease;
}
.nb-type-menu a:hover,
.nb-type-menu li.is-active a { background: var(--palette-6); color: var(--palette-3); }

/* loop grid：4 欄（平板 2、手機 1）、column-gap 48、row-gap 64 */
.nb-projects__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 64px;
}

/* 專案卡（loop item 259）：column、space-between、gap 8px */
.nb-pcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.nb-pcard__media { position: relative; }
/* 疊圖白 chip：絕對定位左上、白底 palette-9、padding 0 8px、14px、z-index 5 */
.nb-pcard__chip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--palette-9);
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
  padding: 0 8px;
}
.nb-pcard__chip:hover { color: var(--palette-4); }
.nb-pcard__img-link { display: block; }
.nb-pcard__img {
  width: 100%;
  height: var(--project-card-img-h); /* 264px */
  object-fit: cover;
  object-position: center center;
  margin-bottom: 8px;
}
div.nb-pcard__img { min-height: 0; } /* 無圖佔位同高 */
.nb-pcard__title {
  font-size: var(--typo-text-fs);
  font-weight: 400;
  line-height: var(--typo-text-lh);
  letter-spacing: var(--ls-typo);
  margin: 0;
}
.nb-pcard__title a { color: var(--color-heading); }
.nb-pcard__title a:hover { color: var(--color-accent-hover); }
.nb-pcard__date { margin-bottom: 24px; }

/* =========================================================
   Project 單篇（single-projects.php；post-769 + 規格 grid 781）
   ========================================================= */
/* banner：column、align-start、gap 12px、margin-bottom 48px */
.nb-project-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 48px;
}
.nb-project-hero .niiice-banner-title { margin: 0; }
.nb-project-hero__term {
  font-size: var(--typo-secondary-fs);
  line-height: var(--typo-secondary-lh);
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}
.nb-project-hero__term:hover { color: var(--palette-4); }

/* 主體：margin 56/64（手機 48/48）、column、widget 間距 24px */
.nb-project {
  margin-top: 56px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* featured 大圖外框：1px hairline 全框 + padding 48px（手機 24） */
.nb-project__hero {
  border: var(--hairline);
  padding: 48px;
}
.nb-project__hero img,
.nb-project__hero .nb-project__featured { width: 100%; height: auto; }
div.nb-project__featured { min-height: 320px; }

/* 規格 grid：3 欄（手機 1）、下緣 1px、padding-bottom 40px；
   cell＝row、align center、gap 12px 24px（手機 12）、上下 padding 12px */
.nb-project__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: var(--hairline);
  padding-bottom: 40px;
}
.nb-spec {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 0;
}
.nb-spec__label {
  font-weight: 500;
  letter-spacing: var(--ls-typo);
  color: var(--palette-4);
}
.nb-spec__value {
  letter-spacing: var(--ls-typo);
  color: var(--palette-3);
}

/* Related Projects：column、gap 12px、margin-bottom 104px；
   eyebrow 色 palette-3（post-769 實測，蓋掉 base eyebrow 的 heading 色）；h2 下距 36px */
.nb-project-related {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 104px;
}
.nb-project-related__eyebrow { color: var(--palette-3); }
.nb-project-related__title { margin: 0 0 36px; }

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 1024px) {
  /* news 兩欄 padding 收 24（post-688 tablet 值） */
  .nb-news__filter,
  .nb-news__list { padding: 24px; }

  /* 單篇側欄隱藏（母站 ct-hidden-sm/md） */
  .nb-single__layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .nb-sidebar { display: none; }

  .nb-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .nb-banner__row {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .nb-breadcrumbs { width: 100%; }

  /* news：兩欄轉直向；外距 0/80（post-688 mobile 值） */
  .nb-news {
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 80px;
  }
  .nb-news__filter {
    flex: 1 1 100%;
    max-width: 100%;
    border: 0;
    padding: 24px;
  }
  .nb-news__list {
    flex: 1 1 100%;
    max-width: 100%;
    border-width: 1px 0;
    padding: 48px 24px;
  }
  .nb-cat-menu li:not(:last-child) { margin-bottom: 12px; }
  .nb-cat-menu a { padding: 4px 0; }

  /* 文章卡轉直向（loop item 679 mobile：column、gap 8、圖 100%） */
  .nb-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .nb-card__media {
    flex: 1 1 auto;
    max-width: 100%;
  }

  /* 單篇 hero 內列下距 24（post-725 mobile 值） */
  .nb-single-hero__meta { margin-bottom: 24px; }
  .nb-single { margin-top: 48px; margin-bottom: 48px; }
  .nb-postnav { row-gap: 24px; }
  .nb-related { padding: 40px 0; }
  .nb-related__grid { grid-template-columns: minmax(0, 1fr); }

  /* projects archive（post-756 mobile：外距 0/80、1 欄、選單間距 12） */
  .nb-projects { margin-top: 0; margin-bottom: 80px; }
  .nb-projects__grid { grid-template-columns: minmax(0, 1fr); }
  .nb-type-menu ul { gap: 0 12px; }

  /* project 單篇（post-769 mobile：主體 48/48、外框 padding 24、規格 1 欄、
     related mt 60 / mb 80、cell gap 12） */
  .nb-project { margin-top: 48px; margin-bottom: 48px; }
  .nb-project__hero { padding: 24px; }
  .nb-project__specs { grid-template-columns: minmax(0, 1fr); }
  .nb-spec { gap: 12px; }
  .nb-project-related { margin-top: 60px; margin-bottom: 80px; }
}