/*
 * page-blog-post.css
 * Loaded only on the Blog Post page (page-blog-post.php).
 *
 * Cascade conflicts:
 *  - .section-label  → companies adds display:flex + ::after ruler; need block + no ruler
 *  - .section-title  → studio wins with clamp(1.8rem,3vw,2.6rem) margin-bottom:20px;
 *                      blog-post (related section) needs clamp(1.5rem,2.2vw,2rem) margin-bottom:28px
 *  - .related-card   → resource-detail-sheets (last def, line 2828) wins with display:flex row style;
 *                      blog-post needs the block card style (white bg, border, border-radius:12px)
 */

/* outer container widths — override main.css 1300px / 56px */
.post-hero-inner   { max-width: 1100px; padding: 56px 48px 48px; }
.article-wrap      { max-width: 1100px; padding: 60px 48px 60px; }
.back-to-blog      { max-width: 1100px; padding: 0 48px 16px; }
.related-section   { max-width: 1100px; padding: 0 48px 72px; }

/* hero blur background */
.post-hero { position: relative; overflow: hidden; }

.post-hero-blur-bg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.05);
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 31, 0.72);
}

.post-hero-inner { position: relative; z-index: 1; }

/* author avatars — headshot image */
.post-avatar img,
.author-bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* remove text fallback padding when showing an image */
.post-avatar:has(img),
.author-bio-avatar:has(img) {
  font-size: 0;
  padding: 0;
}

/* section-label: remove companies' flex+ruler */
.section-label {
  color: var(--blue);
  display: block;
  gap: 0;
}

.section-label::after {
  display: none;
}

/* section-title in related section: smaller clamp */
.section-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}

/* related-card: resource-detail-sheets (last def) wins with flex row + padding:10px;
   blog-post needs the block card style with white bg and border */
.related-card {
  display: block;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  padding: 0;
  gap: 0;
  margin-bottom: 0;
  transition: all 0.2s;
}

.related-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 132, 197, 0.08);
  background: white;
}