/* JustBE blog — standard article + listing styling, on-brand.
   Header/footer come from the site's existing Elementor CSS (shared head);
   this file styles only the new blog template classes. */

:root {
  --jb-navy: rgb(26, 37, 48);
  --jb-wine: rgb(122, 40, 59);
  --jb-muted: #5b6671;
  --jb-line: #e4ddd3;
  --jb-cream: #f7f3ee;
  --jb-serif: "Hedvig Letters Serif", Georgia, serif;
  --jb-sans: "Hedvig Letters Sans", "Inter", system-ui, sans-serif;
}

/* ── Article ─────────────────────────────────────────────── */
.jb-post-wrap { background: #fff; }
.post.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.25rem 2rem;
  font-family: var(--jb-sans);
  color: var(--jb-navy);
  font-size: 1.075rem;
  line-height: 1.75;
}
.post h1 {
  font-family: var(--jb-serif);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}
.post h2 {
  font-family: var(--jb-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.25;
  margin: 2.75rem 0 1rem;
}
.post h3 {
  font-family: var(--jb-sans);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 2rem 0 .75rem;
  color: var(--jb-wine);
}
.post p { margin: 0 0 1.35rem; }
.post a { color: var(--jb-wine); text-underline-offset: 2px; }
.post ul, .post ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.post li { margin: 0 0 .5rem; }
.post img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.5rem 0; }
.post blockquote {
  margin: 2rem 0; padding: .5rem 0 .5rem 1.5rem;
  border-left: 3px solid var(--jb-wine);
  font-style: italic; color: var(--jb-muted);
}
.post hr { border: 0; border-top: 1px solid var(--jb-line); margin: 2.5rem 0; }

/* ── Recent posts ────────────────────────────────────────── */
.jb-blog-recent {
  max-width: 760px; margin: 1rem auto 4rem; padding: 2rem 1.25rem 0;
  border-top: 1px solid var(--jb-line); font-family: var(--jb-sans);
}
.jb-blog-recent h2 { font-family: var(--jb-serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 1rem; color: var(--jb-navy); }
.jb-blog-recent ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.jb-blog-recent a { color: var(--jb-wine); text-decoration: none; }
.jb-blog-recent a:hover { text-decoration: underline; }

/* ── Listing ─────────────────────────────────────────────── */
.jb-blog-wrap { background: var(--jb-cream); font-family: var(--jb-sans); color: var(--jb-navy); }
.jb-blog-head { max-width: 1100px; margin: 0 auto; padding: 4rem 1.25rem 1rem; text-align: center; }
.jb-blog-head h1 { font-family: var(--jb-serif); font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); margin: 0 0 .5rem; }
.jb-blog-head p { color: var(--jb-muted); margin: 0; }
.jb-blog-grid {
  max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem;
}
.jb-blog-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--jb-line); border-radius: 8px; overflow: hidden;
  text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s;
}
.jb-blog-card:hover { box-shadow: 0 10px 30px rgba(26,37,48,.08); transform: translateY(-2px); }
.jb-blog-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.jb-blog-card__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.jb-blog-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jb-wine); font-weight: 600; }
.jb-blog-card__title { font-family: var(--jb-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.25; margin: 0; }
.jb-blog-card__desc { color: var(--jb-muted); font-size: .94rem; line-height: 1.55; margin: 0; }
.jb-blog-card__date { color: var(--jb-muted); font-size: .8rem; margin-top: auto; }
.jb-blog-pagination { max-width: 1100px; margin: 0 auto 4rem; padding: 0 1.25rem; display: flex; gap: .75rem; justify-content: center; }
.jb-blog-pagination a, .jb-blog-pagination span { padding: .4rem .8rem; border-radius: 4px; text-decoration: none; color: var(--jb-navy); }
.jb-blog-pagination [aria-current="page"] { background: var(--jb-wine); color: #fff; }