/* ==========================================================================
   Blog post page — article header, body typography (for admin-authored HTML),
   table of contents, share row, like/comment actions, comments.
   Shared blog styles (shell, rails, category colours): blog.css
   Markup: blog/post.php   Behaviour: assets/js/pages/blog-post.js
   ========================================================================== */

/* Reading-progress bar (width set by JS) */
.pb-bprog {
  position: fixed; left: 0; top: 0; z-index: 70; height: 3px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--pb-amber), var(--pb-primary)); transition: width .1s linear;
}

.pb-page-blog--post .pb-bmain { gap: 20px; }
@media (max-width: 899px) { .pb-page-blog--post .pb-shell--blog { padding: 14px 14px 96px; row-gap: 22px; } }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.pb-bpost__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px; font-size: 13.5px; color: #4a4a50; }
.pb-bpost__crumbs a { color: #4a4a50; }
.pb-bpost__crumbs a:hover { color: var(--pb-link); }
.pb-bpost__crumbs > i, .pb-bpost__crumb-cur > i { font-size: 9px; color: #9a9a9f; }
.pb-bpost__crumb-cur { display: none; align-items: center; gap: 8px; min-width: 0; color: var(--pb-text); font-weight: 600; }
.pb-bpost__crumb-cur span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
@media (min-width: 900px) { .pb-bpost__crumb-cur { display: inline-flex; } }

/* ── Hero image ─────────────────────────────────────────────────────────── */
.pb-bpost__hero { position: relative; margin: 0; overflow: hidden; border-radius: var(--pb-r-lg); background: #efe6d3; aspect-ratio: 4 / 3.3; }
.pb-bpost__hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.pb-bpost__hero-empty {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--pb-surface-warm), var(--pb-blog-promo-2)); color: var(--pb-amber); font-size: 72px;
}
.pb-btag--lg { position: absolute; left: 12px; top: 12px; height: 30px; padding: 0 13px; border-radius: 15px; gap: 7px; font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); color: #fff; }
.pb-btag--lg:hover { color: #fff; filter: brightness(1.08); }
.pb-btag--lg i { font-size: 11px; }
.pb-bpost__hero-save {
  position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .85); color: var(--pb-text); font-size: 15px;
}
@media (min-width: 900px) {
  .pb-bpost__hero { aspect-ratio: 700 / 242; }
  .pb-bpost__hero-save { display: none; }
}

/* ── Title block ────────────────────────────────────────────────────────── */
.pb-bpost__head { display: flex; flex-direction: column; gap: 12px; padding: 0 4px; }
.pb-bpost__title { font-weight: 900; font-size: 29px; line-height: 1.15; letter-spacing: -.01em; color: #141414; text-wrap: balance; overflow-wrap: anywhere; }
.pb-bpost__lead { font-size: 16px; line-height: 1.5; color: var(--pb-text-3); text-wrap: pretty; }
.pb-bpost__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.pb-bpost__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--pb-text-3); }
.pb-bpost__author { display: flex; align-items: center; gap: 10px; }
.pb-bpost__av {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pb-text); color: var(--pb-amber); font-family: var(--pb-font-head); font-weight: 800; font-size: 14px;
}
.pb-bpost__by { display: flex; flex-direction: column; gap: 2px 8px; }
.pb-bpost__by b { font-weight: 700; color: var(--pb-text); }
.pb-bpost__stat { display: flex; align-items: center; gap: 6px; color: var(--pb-text-3); }
.pb-bpost__stat i { font-size: 13px; }
a.pb-bpost__stat:hover { color: var(--pb-link); }
.pb-bpost__tools { display: flex; gap: 10px; }
.pb-bpost__tool {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--pb-border-3); border-radius: 50%; background: #fff; color: var(--pb-text); font-size: 15px;
}
.pb-bpost__tool:hover { background: var(--pb-amber-soft); }
.pb-bpost__tool--txt { font-family: var(--pb-font-head); font-weight: 800; font-size: 15px; }
.pb-bpost__tool--up { font-size: 17px; }
.pb-bpost__tool:disabled { opacity: .4; cursor: default; background: #fff; }
.pb-bpost__tool.is-on, .pb-bpost__hero-save.is-on { background: var(--pb-surface-warm); color: var(--pb-link); }
@media (min-width: 900px) { .pb-bpost__by { flex-direction: row; } .pb-bpost__date::before { content: '• '; } }

@container pb-blog (min-width: 640px) { .pb-bpost__title { font-size: 30px; } }
@container pb-blog (min-width: 720px) { .pb-bpost__title { font-size: 36px; } }
@media (min-width: 900px) { .pb-bpost__lead { font-size: 17px; } }
@media (max-width: 399px) { .pb-bpost__title { font-size: 26px; } }

/* ── Body ───────────────────────────────────────────────────────────────── */
.pb-bpost__body { --pb-fs: 1; display: flex; flex-direction: column; gap: 20px; padding: 0 2px; color: #2b2b30; }
.pb-bpost[data-fs="0"] .pb-bpost__body { --pb-fs: .92; }
.pb-bpost[data-fs="2"] .pb-bpost__body { --pb-fs: 1.12; }
@media (min-width: 900px) { .pb-bpost__body { padding: 0 4px; } }

/* Table of contents (built by JS from the article's <h2>s) */
.pb-btoc { overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--pb-blog-line); box-shadow: 0 2px 10px rgba(60, 40, 0, .04); }
.pb-btoc[hidden] { display: none; }
.pb-btoc__hd {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 0; background: none; text-align: left;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 17px; color: var(--pb-text);
}
.pb-btoc__hd > span { display: flex; align-items: center; gap: 12px; }
.pb-btoc__hd > span i { color: var(--pb-blog-gold); font-size: 18px; }
.pb-btoc__chev { font-size: 12px; color: var(--pb-link); transition: transform .25s; }
.pb-btoc__hd[aria-expanded="false"] .pb-btoc__chev { transform: rotate(180deg); }
.pb-btoc__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 20px; padding: 0 20px 16px; counter-reset: toc; }
.pb-btoc__hd[aria-expanded="false"] + .pb-btoc__list { display: none; }
.pb-btoc__list a {
  display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 4px 8px; border-radius: 8px;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: #2b2b30;
}
.pb-btoc__list a::before {
  counter-increment: toc; content: counter(toc); flex: none; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--pb-blog-gold); color: #fff;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 12px;
}
.pb-btoc__list a:hover { background: #faf6ec; color: #2b2b30; }
.pb-btoc__list a.is-active { background: var(--pb-amber-soft); font-weight: 700; }
@container pb-blog (min-width: 680px) { .pb-btoc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Article HTML (admin-authored; arbitrary tags) */
.pb-bpost__content { font-size: calc(16.5px * var(--pb-fs)); line-height: 1.65; overflow-wrap: anywhere; }
.pb-bpost__content > :first-child { margin-top: 0; }
.pb-bpost__content > :last-child { margin-bottom: 0; }
.pb-bpost__content p, .pb-bpost__content ul, .pb-bpost__content ol, .pb-bpost__content blockquote,
.pb-bpost__content figure, .pb-bpost__content table, .pb-bpost__content pre, .pb-bpost__content iframe,
.pb-bpost__content video, .pb-bpost__content .article-callout { margin: 0 0 20px; }
.pb-bpost__content h2 {
  margin: 32px 0 12px; font-weight: 900; font-size: calc(23px * var(--pb-fs)); line-height: 1.2; color: #141414; scroll-margin-top: calc(var(--pb-header-h) + 20px);
}
.pb-bpost__content h3 { margin: 24px 0 10px; font-size: calc(19px * var(--pb-fs)); line-height: 1.25; color: #141414; scroll-margin-top: calc(var(--pb-header-h) + 20px); }
.pb-bpost__content h4 { margin: 20px 0 8px; font-size: calc(17px * var(--pb-fs)); color: #141414; }
.pb-bpost__content strong, .pb-bpost__content b { color: var(--pb-text); font-weight: 700; }
.pb-bpost__content a { color: var(--pb-link); font-weight: 600; text-decoration: none; }
.pb-bpost__content a:hover { color: var(--pb-link-hover); }
.pb-bpost__content ul, .pb-bpost__content ol { padding: 0; }
.pb-bpost__content ul { list-style: none; }
.pb-bpost__content ul > li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.pb-bpost__content ul > li::before {
  content: '\f1b0'; position: absolute; left: 0; top: .42em; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .9em; color: var(--pb-orange-2);
}
.pb-bpost__content ol { margin-left: 24px; list-style: decimal; }
.pb-bpost__content ol > li { padding-left: 6px; margin-bottom: 10px; }
.pb-bpost__content ol > li::marker { color: var(--pb-blog-gold); font-weight: 800; }
.pb-bpost__content li > ul, .pb-bpost__content li > ol { margin: 8px 0 0; }
.pb-bpost__content img, .pb-bpost__content video { display: block; max-width: 100%; height: auto; margin: 0 0 20px; border-radius: 14px; }
.pb-bpost__content p > img:only-child { margin-bottom: 0; }
.pb-bpost__content figure { overflow: hidden; border-radius: 14px; }
.pb-bpost__content figure img { margin: 0; border-radius: 0; }
.pb-bpost__content figcaption { padding: 8px 4px 0; font-size: .85em; color: var(--pb-text-muted); }
.pb-bpost__content iframe { max-width: 100%; border: 0; border-radius: 14px; }
.pb-bpost__content blockquote, .pb-bpost__content .article-callout {
  padding: 18px 20px; border-radius: 14px; background: #fff8e8; border: 1px solid #fbe3a8; font-size: .95em; line-height: 1.6;
}
.pb-bpost__content blockquote > :last-child, .pb-bpost__content .article-callout > :last-child { margin-bottom: 0; }
.pb-bpost__content .article-callout strong { color: var(--pb-link); }
.pb-bpost__content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95em; }
.pb-bpost__content th, .pb-bpost__content td { padding: 10px 14px; border: 1px solid var(--pb-border); text-align: left; }
.pb-bpost__content th { background: var(--pb-amber-soft); font-family: var(--pb-font-head); }
.pb-bpost__content pre { overflow-x: auto; padding: 14px 16px; border-radius: 12px; background: #1d1d1f; color: #f4f4f6; font-size: .88em; line-height: 1.5; }
.pb-bpost__content code { padding: 1px 6px; border-radius: 6px; background: var(--pb-surface-2); font-size: .9em; }
.pb-bpost__content pre code { padding: 0; background: none; }
.pb-bpost__content hr { margin: 28px 0; border: 0; border-top: 1px solid var(--pb-border-3); }

/* ── Share + actions ────────────────────────────────────────────────────── */
.pb-bpost__foot { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; border-top: 1px solid #efece4; }
.pb-bshare { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.pb-bshare__lbl { display: flex; align-items: center; gap: 10px; margin-right: 6px; font-family: var(--pb-font-head); font-weight: 800; font-size: 16px; color: var(--pb-text); }
.pb-bshare__lbl i { color: var(--pb-blog-gold); }
.pb-bshare__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-width: 38px; padding: 0 14px; border: 0; border-radius: 8px;
  color: #fff; font-size: 14px; font-weight: 700;
}
.pb-bshare__btn:hover { color: #fff; filter: brightness(1.1); }
.pb-bshare__btn--fb { background: #1877f2; }
.pb-bshare__btn--x { background: #141414; padding: 0; width: 38px; }
.pb-bshare__btn--in { background: #0a66c2; }
.pb-bshare__btn--copy { background: #c9900e; padding: 0; width: 38px; }
.pb-bpost__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.pb-bpost__acts form { margin: 0; }
.pb-bact {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid var(--pb-border-3); border-radius: 22px;
  background: #fff; color: var(--pb-text); font-size: 15px; font-weight: 700;
}
.pb-bact:hover { color: var(--pb-text); background: var(--pb-amber-soft); }
.pb-bact i { font-size: 16px; }
.pb-bact .fa-paw { font-size: 17px; color: #b9b5ab; }
.pb-bact:hover .fa-paw { color: var(--pb-orange); }

/* ── Comments ───────────────────────────────────────────────────────────── */
.pb-bcomments { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--pb-r-lg); background: #fff; box-shadow: var(--pb-shadow-card); scroll-margin-top: calc(var(--pb-header-h) + 20px); }
.pb-bcomments__hd { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.pb-bcomments__hd i { color: var(--pb-blog-gold); }
.pb-bcomments__form { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.pb-bcomments__av {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--pb-text); color: #fff; font-family: var(--pb-font-head); font-weight: 800; font-size: 14px;
}
.pb-bcomments__av--sm { width: 40px; height: 40px; font-size: 13px; }
.pb-bcomments__av--guest { background: var(--pb-surface-warm); color: var(--pb-link); font-size: 16px; }
.pb-bcomments__field {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px; min-height: 48px; padding: 4px 5px 4px 16px;
  border: 1px solid var(--pb-border-3); border-radius: 24px; background: #fbfbfa;
}
.pb-bcomments__field:focus-within { border-color: var(--pb-primary); background: #fff; }
.pb-bcomments__field textarea {
  flex: 1; min-width: 0; max-height: 200px; padding: 9px 0; border: 0; outline: 0; resize: none; background: transparent;
  font-size: 15px; line-height: 1.4; color: var(--pb-text);
}
.pb-bcomments__field button {
  flex: none; width: 40px; height: 38px; border: 0; border-radius: 19px; background: var(--pb-primary); color: #fff; font-size: 14px;
}
.pb-bcomments__field button:hover { background: var(--pb-primary-hover); }
.pb-bcomments__form--guest { align-items: center; min-height: 48px; }
.pb-bcomments__form--guest p { font-size: 15px; color: var(--pb-text-3); }
.pb-bcomments__form--guest a { font-weight: 800; }
.pb-bcomments__empty { padding: 26px 16px; border: 1px dashed #e6e1d5; border-radius: 14px; text-align: center; color: var(--pb-text-3); font-size: 15px; }
.pb-bcomments__empty i { font-size: 30px; color: var(--pb-blog-gold); }
.pb-bcomments__empty p { margin-top: 8px; }
.pb-bcomments__list { display: flex; flex-direction: column; gap: 14px; }
.pb-bcomment { display: flex; align-items: flex-start; gap: 12px; }
.pb-bcomment__bubble { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: #f7f5f0; }
.pb-bcomment__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.pb-bcomment__top b { font-family: var(--pb-font-head); font-weight: 800; }
.pb-bcomment__top span { color: var(--pb-text-faint); }
.pb-bcomment__text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: #2b2b30; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Right rail extras ──────────────────────────────────────────────────── */
.pb-bmini--rel .pb-bmini__img { width: 72px; }
.pb-bmini--rel .pb-bmini__title { -webkit-line-clamp: 3; }
.pb-brail--tags { padding: 18px 16px; }
.pb-btags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pb-btags__tag {
  display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: #f4f2ec; color: #2b2b30; font-size: 14px; font-weight: 600;
}
.pb-btags__tag:hover { background: #fdf1d4; color: var(--pb-link-hover); }
.pb-brail--tags .pb-sec-hd { margin-bottom: 6px; }

@media (max-width: 899px) {
  .pb-page-blog--post .pb-brail--popular, .pb-page-blog--post .pb-brail--news { display: none; }
}
/* Left rail "Categories" (post page) */
.pb-bcats { padding: 16px 16px 14px; }
.pb-bcats__title { padding-bottom: 8px; }
.pb-bcats__list { display: flex; flex-direction: column; gap: 2px; }
.pb-bcats__link {
  display: flex; align-items: center; gap: 16px; height: 38px; padding: 0 12px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--pb-text); white-space: nowrap;
}
.pb-bcats__link i { width: 22px; text-align: center; font-size: 16px; color: var(--c); }
.pb-bcats__link:hover { background: #fbf8f0; color: var(--pb-text); }
.pb-bcats__link.is-active { background: var(--pb-amber-soft); font-weight: 700; color: var(--pb-link-hover); }