/* ==========================================================================
   Blog — styles shared by the blog list (blog/index.php) and blog post
   (blog/post.php): page shell, category colours, right-rail widgets, promo cards.
   List-only styles: blog-list.css   Post-only styles: blog-post.css
   Markup: blog/*.php, includes/pages/blog/*.php
   ========================================================================== */

.pb-page-blog {
  /* page-local palette (not part of the global tokens) */
  --pb-blog-tag: #9a6f00;          /* category badge */
  --pb-blog-line: #f1eee7;         /* hairlines inside cards */
  --pb-blog-gold: #e0a31c;         /* section icons */
  --pb-blog-promo-1: #fff1cf;
  --pb-blog-promo-2: #fde3a2;
  --pb-blog-ok-bg: #eaf7ee;
  --pb-blog-ok-fg: #1a7a3c;
}

/* ── Category colours: each .pb-bc--<key> sets --c (icon/accent) and --tint (soft background) ── */
.pb-bc--all                 { --c: #906d02; --tint: #fdf1d4; }
.pb-bc--default             { --c: #906d02; --tint: #fdf1d4; }
.pb-bc--dogs                { --c: #a8641d; --tint: #f6e7d4; }
.pb-bc--cats                { --c: #e8892b; --tint: #fdeedd; }
.pb-bc--health-wellness     { --c: #f0353b; --tint: #fde3e4; }
.pb-bc--nutrition-recipes   { --c: #1f9d4c; --tint: #dcf5e4; }
.pb-bc--training-behavior   { --c: #3b5bdb; --tint: #e2e8fb; }
.pb-bc--housing-care        { --c: #e8892b; --tint: #fdeedd; }
.pb-bc--stories-experiences { --c: #e0a31c; --tint: #fdf1d4; }
.pb-bc--tips-tricks         { --c: #f5b301; --tint: #fdf1d4; }
.pb-bc--info                { --c: #c9900e; --tint: #fdf1d4; }
.pb-bc--products            { --c: #1f9d4c; --tint: #dcf5e4; }

/* ── Shell: the shared 3-column grid, but the right rail drops under the content below 1360px ── */
.pb-shell--blog {
  grid-template-areas: "main" "right";
  grid-template-columns: minmax(0, 680px);
  row-gap: 18px;
  padding: 12px 12px 96px;
}
.pb-shell--blog .pb-rail--left  { grid-area: left; }
.pb-shell--blog .pb-bmain       { grid-area: main; container: pb-blog / inline-size; gap: 18px; padding-top: 0; }
.pb-shell--blog .pb-rail--right {
  grid-area: right; display: flex; flex-direction: column; gap: 18px;
  position: static; max-height: none; overflow: visible; margin: 0; padding: 0;
}

@media (min-width: 900px) {
  .pb-shell--blog {
    grid-template-areas: "left main" "left right";
    grid-template-columns: var(--pb-col-left) minmax(0, 1fr);
    row-gap: 24px;
    padding: 16px 15px 40px 18px;
  }
  .pb-shell--blog .pb-bmain { gap: 20px; }
  .pb-shell--blog .pb-rail--right { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (min-width: 1360px) {
  .pb-shell--blog {
    grid-template-areas: "left main right";
    grid-template-columns: var(--pb-col-left) minmax(0, 1fr) var(--pb-col-right);
  }
  .pb-shell--blog .pb-rail--right {
    display: flex; position: sticky; top: calc(var(--pb-header-h) + 16px);
    max-height: calc(100vh - var(--pb-header-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; margin: -4px -8px 0; padding: 4px 8px 14px;
  }
  .pb-shell--blog .pb-rail--right::-webkit-scrollbar { display: none; }
}
.pb-shell--blog .pb-rail--right > * { min-width: 0; }

/* ── Photo placeholder when a post has no featured image ── */
.pb-bthumb-empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pb-surface-warm), var(--pb-blog-promo-2));
  color: var(--pb-amber); font-size: 26px;
}

/* ── Category badge ── */
.pb-btag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 11px; border-radius: 13px;
  background: var(--pb-blog-tag); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
}
.pb-btag i { font-size: 10px; flex: none; }

/* ── Right-rail cards ── */
.pb-brail { padding: 18px 16px 8px; }
.pb-brail .pb-sec-hd { margin-bottom: 6px; }
.pb-brail__fire { color: var(--pb-orange) !important; font-size: 20px !important; }
.pb-brail__env  { color: var(--pb-blog-gold) !important; font-size: 20px !important; }
.pb-brail__empty { padding: 10px 2px 14px; font-size: 14.5px; color: var(--pb-text-muted); }

.pb-bmini {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--pb-text);
  border-bottom: 1px solid var(--pb-blog-line);
}
.pb-bmini:last-child { border-bottom: 0; }
.pb-bmini:hover { color: var(--pb-text); }
.pb-bmini:hover .pb-bmini__title { color: var(--pb-link); }
.pb-bmini__img { flex: none; width: 62px; height: 60px; border-radius: 10px; object-fit: cover; display: block; }
.pb-bmini__txt { min-width: 0; }
.pb-bmini__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--pb-font-head); font-weight: 800; font-size: 15px; line-height: 1.3;
}
.pb-bmini__date { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--pb-text-muted); }
.pb-bmini__date i { font-size: 12px; }

/* Trending topics (re-uses .pb-topic from components/sidebar.css) */
.pb-brail--topics { padding: 16px 16px 14px; }
.pb-brail--topics .pb-sec-hd { margin-bottom: 14px; }
.pb-brail--topics .pb-topic { height: 52px; gap: 16px; }
.pb-brail--topics .pb-topic__name { font-size: 15px; }
.pb-brail--topics .pb-topic__ico i { color: var(--c); }

/* Newsletter */
.pb-brail--news { padding: 20px 18px 18px; }
.pb-brail--news .pb-sec-hd { margin-bottom: 0; }
.pb-bnl__lead { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--pb-text-3); }
.pb-bnl__form {
  display: flex; align-items: center; gap: 6px; height: 50px; margin-top: 16px; padding: 0 5px 0 16px;
  border: 1px solid var(--pb-border-3); border-radius: 12px; background: #fff;
}
.pb-bnl__form:focus-within { border-color: var(--pb-primary); }
.pb-bnl__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--pb-text); }
.pb-bnl__btn { flex: none; width: 44px; height: 40px; border: 0; border-radius: 10px; background: var(--pb-primary); color: #fff; font-size: 15px; }
.pb-bnl__btn:hover { background: var(--pb-primary-hover); }
.pb-bnl__note { margin-top: 10px; font-size: 13px; color: var(--pb-text-muted); }
.pb-bnl__note.is-error { color: var(--pb-red); }
.pb-bnl__ok {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--pb-blog-ok-bg); color: var(--pb-blog-ok-fg); font-size: 14.5px; font-weight: 600;
}
.pb-bnl__ok[hidden] { display: none; }

/* Promo cards */
.pb-bjoin, .pb-bjoinm {
  position: relative; overflow: hidden; display: block; box-shadow: none;
  background: linear-gradient(170deg, var(--pb-blog-promo-1) 0%, var(--pb-blog-promo-2) 100%);
}
.pb-bjoin { min-height: 180px; padding: 20px; }
.pb-bjoin img {
  position: absolute; right: 0; bottom: 0; width: 52%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.pb-bjoin h3 { position: relative; max-width: 60%; font-weight: 900; font-size: 19px; line-height: 1.2; }
.pb-bjoin p  { position: relative; max-width: 55%; margin-top: 8px; font-size: 13.5px; line-height: 1.45; }
.pb-bjoin .pb-btn { position: relative; margin-top: 14px; height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14.5px; }

.pb-bjoinm { min-height: 220px; padding: 22px 20px; }
.pb-bjoinm img {
  position: absolute; right: 0; bottom: 0; width: 62%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%); mask-image: linear-gradient(to right, transparent 0, #000 25%);
}
.pb-bjoinm__paw { position: absolute; right: 20px; top: 18px; font-size: 30px; color: var(--pb-amber); transform: rotate(14deg); }
.pb-bjoinm h3 { position: relative; font-weight: 900; font-size: 22px; line-height: 1.2; }
.pb-bjoinm p  { position: relative; margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: var(--pb-text-3); }
.pb-bjoinm .pb-btn { position: relative; margin-top: 16px; height: 44px; padding: 0 20px; border-radius: 22px; font-size: 15.5px; gap: 10px; }

@media (min-width: 900px) { .pb-bjoinm { display: none; } }