/* ==========================================================================
   MediaNet Master Blog Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARTICLE BODY & TYPOGRAPHY
   -------------------------------------------------------------------------- */
.hs-blog-post .blog-post__body,
.hs-blog-post article.blog-post .blog-post__body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: #000000 !important;
  -webkit-font-smoothing: antialiased !important;
}

.hs-blog-post .blog-post__body p,
.hs-blog-post article.blog-post .blog-post__body p,
.hs-blog-post .blog-post__body li,
.hs-blog-post article.blog-post .blog-post__body li {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.25rem !important; /* 20px */
  line-height: 1.75 !important;
  color: #000000 !important;
}

/* ARTICLE HEADLINE (H1 Tightened Line Height) */
html body .blog-post__header h1,
html body .blog-post__title,
html body h1.blog-post_title,
html body .blog-post__body h1,
html body h1 {
  font-size: 3rem !important; /* 48px */
  line-height: 1.08 !important; /* Compact multi-line titles */
  color: #121733 !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
}

/* AUTHOR BYLINE & DATE METADATA FIX */
html body .blog-post__header .blog-post__meta,
html body .blog-post__meta,
html body .hs-blog-post .blog-post__body .blog-post__meta,
html body .blog-post_author,
html body .blog-post_date,
html body .post-header_author,
html body .post-header_date {
  font-size: 0.95rem !important; /* ~15px readable metadata */
  line-height: 1.4 !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1.75rem !important;
}

html body .blog-post__meta a,
html body .blog-post_author a,
html body .blog-post_author span,
html body .post-header_author a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #bf1f2e !important; /* Red highlight brand color */
  text-decoration: none !important;
}

/* IN-BODY HEADINGS */
.hs-blog-post .blog-post__body h2,
html body .blog-post__body h2 {
  font-size: 2.25rem !important; /* 36px */
  line-height: 1.25 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.35rem !important;
}

.hs-blog-post .blog-post__body h3,
html body .blog-post__body h3 {
  font-size: 1.75rem !important; /* 28px */
  line-height: 1.3 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.35rem !important;
}

.hs-blog-post .blog-post__body h4 {
  font-size: 1.375rem !important; /* 22px */
  line-height: 1.35 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.25rem !important;
}


/* --------------------------------------------------------------------------
   2. TABLE OF CONTENTS STYLING
   -------------------------------------------------------------------------- */
html body .blog-toc-wrapper,
html body #blog-toc,
html body .toc-container {
  background-color: #f8fafc !important;
  border-left: 4px solid #bf1f2e !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 0 8px 8px 0 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html body .blog-toc-header,
html body .blog-toc-wrapper p:first-child,
html body .toc-title {
  color: #121733 !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

html body .blog-toc-wrapper ul,
html body .blog-toc-wrapper ol {
  margin: 0 !important;
  padding-left: 1.25rem !important;
  list-style-type: disc !important;
}

html body .blog-toc-wrapper li {
  margin-bottom: 0.5rem !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

html body .blog-toc-wrapper a {
  color: #1e293b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

html body .blog-toc-wrapper a:hover {
  color: #bf1f2e !important;
  text-decoration: underline !important;
}


/* --------------------------------------------------------------------------
   3. RELATED POSTS SECTION & CARDS GRID
   -------------------------------------------------------------------------- */
/* Section Containment & Bottom Gap Above Blue Banner */
html body section.blog-related-posts,
html body .blog-related-posts {
  margin-bottom: 3.5rem !important;
  padding-bottom: 1rem !important;
}

/* Outer Grid Row Layout */
section.blog-related-posts .blog-related-posts__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 1.5rem !important;
  margin-top: 1.5rem !important;
}

/* Individual Card Container */
html body section.blog-related-posts .blog-related-posts__post,
html body .blog-related-posts .blog-related-posts__post {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 calc(33.333% - 1.5rem) !important;
  min-width: 280px !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html body section.blog-related-posts .blog-related-posts__post:hover,
html body .blog-related-posts .blog-related-posts__post:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Explicit Card Ordering */
html body section.blog-related-posts .blog-related-img-wrap,
html body .blog-related-posts .blog-related-img-wrap {
  order: 1 !important;
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  background-color: #f1f5f9 !important;
}

html body section.blog-related-posts .post-item_minute-count--styles,
html body section.blog-related-posts .blog-related-posts_date,
html body .blog-related-posts .post-item_minute-count--styles,
html body .blog-related-posts .blog-related-posts_date {
  order: 2 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

html body section.blog-related-posts .blog-related-posts__post h3,
html body section.blog-related-posts .blog-related-posts__post h4,
html body section.blog-related-posts .blog-related-posts__post a,
html body .blog-related-posts .blog-related-posts__post a {
  order: 3 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #121733 !important;
  text-decoration: none !