/* ============================================================
   World of Casino — Blog 單篇文章版型 (blog/posts/*)
   ------------------------------------------------------------
   修復:原文章僅載入列表用 blog.css,缺文章內文樣式導致滿版跑版。
   本檔樣式化既有語意 class(.entry-content/.post-hero/.post-lead…),
   做出與站內一致的置中閱讀欄與排版。使用 design-tokens.css 變數。
   ============================================================ */

.page-blog-post .site-main {
  background: var(--color-bg);
  padding: 2.5em 0 4em;
}

/* 置中閱讀欄 */
.page-blog-post .entry-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* 麵包屑 */
.page-blog-post .breadcrumb {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: 1.5em;
}
.page-blog-post .breadcrumb a {
  color: var(--color-brand);
  text-decoration: none;
}
.page-blog-post .breadcrumb a:hover { text-decoration: underline; }

/* 標題區 */
.page-blog-post .post-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.6rem, 4.2vw, 2.25rem);
  line-height: 1.3;
  color: var(--color-text-strong);
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
.page-blog-post .post-meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 1.6em;
  display: flex;
  flex-wrap: wrap;
  gap: .35em .2em;
  align-items: center;
}
.page-blog-post .post-meta .author { font-weight: var(--fw-medium); color: var(--color-link-secondary); }

/* 主視覺 */
.page-blog-post .post-hero-image {
  margin: 0 0 2em;
}
.page-blog-post .post-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* 前言 lead */
.page-blog-post .post-lead p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--color-link-secondary);
  font-weight: var(--fw-medium);
  margin: 0 0 1.8em;
  padding-left: 1em;
  border-left: 4px solid var(--color-accent);
}

/* 內文標題 */
.page-blog-post .entry-content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.4;
  color: var(--color-text-strong);
  margin: 2.2em 0 .7em;
  padding-bottom: .35em;
  border-bottom: 2px solid var(--color-border-soft);
}
.page-blog-post .entry-content h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--color-text-strong);
  margin: 1.8em 0 .6em;
}

/* 段落與清單 */
.page-blog-post .entry-content p { margin: 0 0 1.3em; }
.page-blog-post .entry-content ul,
.page-blog-post .entry-content ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.page-blog-post .entry-content li { margin: 0 0 .6em; line-height: 1.8; }
.page-blog-post .entry-content li::marker { color: var(--color-accent); }
.page-blog-post .entry-content strong { color: var(--color-text-strong); font-weight: var(--fw-semibold); }

/* 內文連結 */
.page-blog-post .entry-content a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.page-blog-post .entry-content a:hover { color: var(--color-brand-soft); }

/* 負責任博弈提醒框 */
.page-blog-post .responsible-gambling-note {
  margin: 3em 0 1.5em;
  padding: 1.4em 1.6em;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
}
.page-blog-post .responsible-gambling-note h3 {
  margin: 0 0 .5em;
  font-size: var(--fs-md);
  color: var(--color-text-strong);
}
.page-blog-post .responsible-gambling-note p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--color-link-secondary);
}

/* 文章導覽:上一篇 / 下一篇 */
.page-blog-post .post-nav {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 2.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-border-soft);
}
.page-blog-post .post-nav .post-nav-link {
  flex: 1 1 0;
  max-width: 48%;
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: .9em 1.1em;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color .15s ease, background .15s ease;
}
.page-blog-post .post-nav .post-nav-link:hover {
  border-color: var(--color-brand);
  background: var(--color-bg-subtle);
}
.page-blog-post .post-nav .post-nav-next { text-align: right; align-items: flex-end; }
.page-blog-post .post-nav .post-nav-dir {
  font-size: var(--fs-sm);
  color: var(--color-brand);
  font-weight: var(--fw-semibold);
}
.page-blog-post .post-nav .post-nav-title {
  font-size: var(--fs-sm);
  color: var(--color-link-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-blog-post .post-nav .post-nav-spacer { flex: 1 1 0; max-width: 48%; }

.page-blog-post .post-nav-back {
  text-align: center;
  margin: 1.4em 0 0;
}
.page-blog-post .post-nav-back a {
  color: var(--color-brand);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.page-blog-post .post-nav-back a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .page-blog-post .post-nav { flex-direction: column; }
  .page-blog-post .post-nav .post-nav-link { max-width: 100%; }
  .page-blog-post .post-nav .post-nav-next { text-align: left; align-items: flex-start; }
  .page-blog-post .post-nav .post-nav-spacer { display: none; }
}

/* RWD */
@media (max-width: 768px) {
  .page-blog-post .site-main { padding: 1.5em 0 3em; }
  .page-blog-post .entry-content { font-size: 1rem; line-height: 1.8; }
  .page-blog-post .post-lead p { font-size: 1.08rem; padding-left: .8em; }
  .page-blog-post .responsible-gambling-note { padding: 1.1em 1.2em; }
}