/* ==========================================================================
   BLOG POSTS SECTION
   ========================================================================== */

.blog-posts-section {
  padding: var(--section-padding-lg) 0;
  background: var(--color-base);
}

.blog-posts-grid {
  margin-top: var(--space-2xl);
}

.blog-posts-grid .wp-block-post-template {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.blog-post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all var(--transition-base);
  height: 100%;
}

.blog-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.blog-post-card .post-thumbnail {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.blog-post-card .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-post-card:hover .post-thumbnail img {
  transform: scale(1.05);
}

/* Posts without a featured image would otherwise leave the card short and
   throw off the row height next to cards that do have one - fill the same
   16:9 slot with a quiet brand-toned placeholder so every card in the grid
   reads as the same shape. */
.blog-post-card:not(:has(.post-thumbnail))::before {
  content: '';
  display: block;
  aspect-ratio: 16/9;
  background-color: var(--color-surface-elevated);
  background-image:
    radial-gradient(
      circle,
      rgba(var(--color-accent-orange-rgb), 0.3) 0%,
      rgba(var(--color-accent-orange-rgb), 0.3) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      rgba(var(--color-accent-yellow-rgb), 0.25) 0%,
      rgba(var(--color-accent-yellow-rgb), 0.25) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.06) 1.5px,
      transparent 1.5px
    );
  background-size:
    70px 70px,
    90px 90px,
    50px 50px;
  background-position:
    22% 35%,
    72% 65%,
    50% 15%;
}

.blog-post-card .post-content {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.blog-post-card .post-title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: 1.3;
}

.blog-post-card .post-title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.blog-post-card .post-title a:hover {
  color: var(--color-accent-text);
}

.blog-post-card .post-date {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.blog-post-card .post-excerpt {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.blog-post-card .post-excerpt a {
  color: var(--color-accent-text);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.blog-post-card .post-excerpt a:hover {
  color: var(--color-accent-text-hover);
  gap: var(--space-sm);
}

.blog-post-card .post-excerpt a::after {
  content: '→';
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .blog-posts-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-posts-grid .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .blog-post-card .post-content {
    padding: var(--space-lg);
  }
}

/* The post cards carry their own surface and border - the query-loop <li>
   around each one shouldn't add a second background or padding */
.blog-posts-grid .wp-block-post-template > li {
  background: none;
  padding: 0;
  border-radius: 0;
}

.blog-posts-grid .wp-block-post-template > li:hover {
  transform: none;
}

/* Space between the post grid and the "View All Posts" button */
.blog-posts-section .wp-block-buttons {
  margin-top: var(--space-2xl);
}

/* ==========================================================================
   BLOG TOPIC PILLS - compact category row above the posts grid
   ========================================================================== */

.category-section {
  padding-top: var(--space-2xl);
  padding-bottom: 0;
}

.category-section-label {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.category-pills ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color var(--transition-base),
    color var(--transition-base);
}

a.category-pill:hover,
a.category-pill:focus-visible {
  border-color: var(--color-accent-orange);
  color: var(--color-accent-text);
}

.category-pill.is-current {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-base);
}

.category-pill-count {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* One swipeable row on phones instead of a tall wrapped block */
@media (max-width: 640px) {
  .category-pills ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    scrollbar-width: none;
  }

  .category-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
}