/* ─────────────────────────────────────────────────────────────────────────────
   sections/main_post_list/styles.css
   Section-scoped styles for the single post detail page.
   Blog card styles are provided by resource_card.css + blog_card.css.
───────────────────────────────────────────────────────────────────────────── */

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.post-breadcrumb {
  color: var(--clr-gray-400, #9ca3af);
}

.post-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.post-breadcrumb a:hover {
  color: var(--clr-primary);
}

/* ── Post header ──────────────────────────────────────────────────────────── */
.post-detail-header {
  border-bottom: 1px solid var(--clr-gray-200, #e5e7eb);
  padding-bottom: 1.5rem;
}

.post-detail-meta {
  color: var(--clr-gray-400, #9ca3af);
}

/* ── Hero image ───────────────────────────────────────────────────────────── */
.post-detail-image {
  border-radius: var(--card-radius, 8px);
  overflow: hidden;
  max-height: 520px;
}

.post-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Post body (rich text) ────────────────────────────────────────────────── */
.post-detail-body {
  max-width: 72ch;
  line-height: 1.75;
}

/* ── Related posts ────────────────────────────────────────────────────────── */
.post-related {
  border-top: 1px solid var(--clr-gray-200, #e5e7eb);
  padding-top: 2rem;
}

.post-related-title {
  font-size: var(--fs-h3, 1.5rem);
}

.post-related-grid {
  display: grid;
  grid-template-columns: repeat(var(--col-mobile, 1), 1fr);
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .post-related-grid {
    grid-template-columns: repeat(var(--col-tablet, 2), 1fr);
  }
}

@media (min-width: 1024px) {
  .post-related-grid {
    grid-template-columns: repeat(var(--col-desktop, 3), 1fr);
  }
}