/* ==========================================================================
   MyJobAlly — News and Resource (blog) public pages
   ========================================================================== */

/* ---- Blog page layout: main content first, sidebar second ---- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

/* ---- Category filter pills (listing page) ---- */
.category-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-lg);
}
.category-filter-row a {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-body);
}
.category-filter-row a.active {
  background: var(--brand-pink);
  border-color: var(--brand-pink);
  color: #fff;
}
.category-filter-row a:hover:not(.active) { border-color: var(--brand-pink); color: var(--brand-pink); }

/* ---- Post grid (listing page) ---- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* In-feed ad spacing, matched to .job-list .ad-zone in jobs.css —
   added on request. The grid's own row gap (--space-lg, 48px) is
   larger than .job-list's flex gap (--space-sm, 16px), and that gap
   applies whether or not the ad's own margin is present — so reducing
   just the ad's margin (as jobs.css does) wasn't enough on its own
   here. A negative margin pulls the ad in to counteract the extra grid
   gap specifically, landing at roughly the same total visual space
   the job listing's ad has, without shrinking the gap between regular
   post cards elsewhere in the grid. */
.post-grid .ad-zone {
  margin: -24px 0;
}

.post-grid-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.post-grid-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--bg-alt);
}
.post-grid-card-body { padding: var(--space-md); }
.post-grid-card .category-badge { margin-bottom: var(--space-sm); }
.post-grid-card h2 { font-size: 18px; margin-bottom: 8px; line-height: 1.35; }
.post-grid-card h2 a:hover { color: var(--brand-pink); }
.post-grid-card p { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-sm); }
.post-grid-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12.5px;
  color: var(--text-muted);
}
.post-grid-card-meta .icon { width: 13px; height: 13px; }

/* ---- Sidebar (listing + post pages) ---- */
.blog-sidebar-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.blog-sidebar-card h3 { font-size: 15px; margin-bottom: var(--space-sm); }

.category-list { list-style: none; }
.category-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13.5px;
}
.category-list li:last-child { border-bottom: none; }
.category-list a:hover { color: var(--brand-pink); }
.category-list .count { color: var(--text-muted); }

.popular-post-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-light);
}
.popular-post-item:last-child { border-bottom: none; }
.popular-post-item img {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.popular-post-item h4 { font-size: 13.5px; line-height: 1.35; margin-bottom: 2px; }
.popular-post-item h4 a:hover { color: var(--brand-pink); }
.popular-post-item span { font-size: 11.5px; color: var(--text-muted); }

.newsletter-sidebar-card {
  background: var(--brand-navy);
  color: #fff;
  border: none;
}
.newsletter-sidebar-card h3 { color: #fff; }
.newsletter-sidebar-card p { font-size: 13px; color: #A8AFB9; margin-bottom: var(--space-sm); }
.newsletter-sidebar-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #3A4552;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  color: #fff;
  margin-bottom: var(--space-sm);
}
.newsletter-sidebar-card input::placeholder { color: #6B7280; }

/* ---- Single post page ---- */
.post-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-lg) 0;
}
.post-hero h1 { font-size: 32px; margin: var(--space-sm) 0; line-height: 1.25; }
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 13.5px;
  color: var(--text-muted);
}
.post-hero-meta .author { display: flex; align-items: center; gap: 8px; }
.post-hero-meta .author img {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-pink-soft);
}
.post-hero-meta span.sep { color: var(--border-light); }

.post-featured-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}

/* ---- Article body (rendered from rich text) ---- */
.article-body h2 { font-size: 22px; margin: var(--space-lg) 0 var(--space-sm); }
.article-body h3 { font-size: 18px; margin: var(--space-md) 0 var(--space-xs); }
.article-body p { font-size: 16px; line-height: 1.75; margin-bottom: var(--space-md); color: var(--text-body); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-md) var(--space-md); font-size: 16px; line-height: 1.75; }
.article-body li { margin-bottom: 8px; }
.article-body img { border-radius: var(--radius-sm); margin: var(--space-md) 0; }
.article-body blockquote {
  border-left: 3px solid var(--brand-pink);
  padding-left: var(--space-md);
  font-style: italic;
  color: var(--text-body);
  margin: var(--space-md) 0;
}
.article-body a { color: var(--brand-pink); text-decoration: underline; }

.post-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-lg) 0;
}

.post-share-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-lg);
}
.post-share-row span { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }

/* ---- Author bio ---- */
.author-bio-card {
  display: flex;
  gap: var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
}
.author-bio-card img { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-pink-soft); flex-shrink: 0; }
.author-bio-card h4 { font-size: 15px; margin-bottom: 4px; }
.author-bio-card p { font-size: 13.5px; color: var(--text-muted); }

/* ---- Related posts ---- */
.related-posts-section { background: var(--bg-alt); padding: var(--space-xl) 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr; }
  .blog-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .post-hero h1 { font-size: 24px; }
  .post-hero-meta { flex-wrap: wrap; row-gap: 6px; }
}