/* ============================================================
   PAGE BANNER (inner pages)
============================================================ */
.page-banner {
  background: linear-gradient(135deg, var(--deep-teal) 0%, #2a9090 60%, var(--warm-orange) 100%);
  padding: 60px 24px;
  text-align: center;
}
.page-banner h1 {
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 10px;
}
.page-banner .breadcrumb {
  color: rgba(255,255,255,0.78);
  font-size: 0.88rem;
}
.page-banner .breadcrumb a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
}
.page-banner .breadcrumb a:hover { color: #fff; }

/* ============================================================
   PAGE CONTENT
============================================================ */
.page-content-wrap { max-width: 860px; }
.page-content h2   { margin: 32px 0 12px; }
.page-content h3   { margin: 24px 0 8px; }
.page-content p    { margin-bottom: 16px; line-height: 1.75; }
.page-content ul,
.page-content ol   { margin: 0 0 16px 24px; line-height: 1.75; }
.page-content img  { border-radius: var(--radius-md); margin: 24px 0; }

/* ============================================================
   BLOG / POSTS GRID
============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.25s;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post-thumb img  { width: 100%; height: 200px; object-fit: cover; }
.post-body       { padding: 24px; }
.post-body h2    { font-size: 1.1rem; margin-bottom: 8px; }
.post-body h2 a  { color: var(--deep-teal); }
.post-body h2 a:hover { color: var(--warm-orange); }
.post-meta       { font-size: 0.8rem; color: var(--warm-orange); margin-bottom: 10px; font-weight: 600; }
.post-excerpt p  { font-size: 0.88rem; line-height: 1.6; }

/* ============================================================
   SINGLE POST
============================================================ */
.single-post-layout { max-width: 800px; margin: 0 auto; }
.single-thumb       { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; }
.single-thumb img   { width: 100%; height: 420px; object-fit: cover; }
.post-meta-bar      { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.post-meta-bar span { font-size: 0.85rem; color: var(--warm-orange); font-weight: 600; }
.post-body-content  { line-height: 1.8; color: var(--text-dark); }
.post-body-content p { margin-bottom: 18px; }
.post-body-content h2,
.post-body-content h3 { margin: 32px 0 12px; }
.post-tags          { margin-top: 32px; padding-top: 20px; border-top: 1px solid #e8e0d8; }
.tag-list a         { display: inline-block; background: var(--light-orange); color: var(--soft-brown); padding: 4px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; margin: 4px; }
.post-nav           { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid #e8e0d8; }
.post-nav a         { color: var(--deep-teal); font-weight: 700; font-size: 0.9rem; }
.post-nav a:hover   { color: var(--warm-orange); }

/* ============================================================
   PAGINATION
============================================================ */
.page-numbers       { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.page-numbers a,
.page-numbers span  { display: inline-block; padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 0.88rem; }
.page-numbers a     { background: var(--white); color: var(--deep-teal); box-shadow: var(--shadow-sm); }
.page-numbers a:hover { background: var(--warm-orange); color: #fff; }
.page-numbers .current { background: var(--warm-orange); color: #fff; }

/* ============================================================
   RESPONSIVE (inner pages)
============================================================ */
@media (max-width: 768px) {
  .posts-grid { grid-template-columns: 1fr; }
  .single-thumb img { height: 240px; }
}