/* ==========================================================================
   Progressive Builders — blog.css
   Shared by the Blog / posts index (home.php), category archives
   (category.php), and tag archives (tag.php) — pb key "blog" for all three.
   Shared sections (page hero, .pb-post-card, pagination/empty-state) live in
   component.css.

   .pb-blogcats (Browse by Category) is home.php-only; category.php and
   tag.php are just hero + .pb-posts__grid, no category-intro section.

   Section-background rhythm (home.php):
     hero (navy) → categories (ivory) → latest articles (white)
   Section-background rhythm (category.php / tag.php):
     hero (navy) → post grid (ivory)
   ========================================================================== */

/* 02 — CATEGORY INTROS  (home.php only) --------------------------------- */
/* Flexbox (not grid) + centered so any category count (2, 5, 7...) sits
   centered instead of stretching or leaving empty grid tracks. */
.pb-blogcats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 44px;
}
.pb-blogcat {
  display: flex;
  flex-direction: column;
  flex: 0 1 340px;
  background: var(--pb-white);
  border: 1px solid var(--pb-border);
  border-top: 3px solid var(--pb-amber);
  border-radius: var(--pb-radius);
  padding: 28px 24px;
  color: var(--pb-slate);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}
.pb-blogcat:hover {
  transform: translateY(-6px);
  box-shadow: var(--pb-shadow-lg);
}
.pb-blogcat__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pb-radius-sm);
  background: var(--pb-tint);
  color: var(--pb-navy);
  font-size: 22px;
  margin-bottom: 16px;
}
.pb-blogcat__name {
  color: var(--pb-head);
  margin-bottom: 8px;
}
.pb-blogcat__desc {
  font-size: 0.95rem;
  color: var(--pb-ash);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 16px;
}
.pb-blogcat__more {
  font-family: var(--pb-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--pb-amber-dark);
}
.pb-blogcat__more i {
  margin-left: 6px;
  font-size: 0.82em;
  transition: transform 0.25s ease !important;
}
.pb-blogcat:hover .pb-blogcat__more {
  color: var(--pb-navy);
}
.pb-blogcat:hover .pb-blogcat__more i {
  transform: translateX(4px);
}

/* 03 — LATEST ARTICLES (posts loop)
   .pb-post-card + pagination/empty-state are shared components (component.css). */
.pb-posts {
  background: var(--pb-white);
}
.pb-posts .pb-section-title {
  color: var(--pb-head);
}
.pb-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 44px;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .pb-blogcat {
    flex-basis: calc(50% - 12px);
  }
  .pb-posts__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .pb-blogcat {
    flex-basis: 100%;
  }
  .pb-posts__grid {
    grid-template-columns: 1fr;
  }
}