/* ==========================================================================
   MediaNet Master Blog Stylesheet (Consolidated Production Baseline)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. UNIVERSAL DARK BLUE CANVAS & WHITE READING CARD
   -------------------------------------------------------------------------- */
body.hs-blog-post,
body.blog-post-page,
body.hs-content-type-blog-post,
html body .blog-post-wrapper,
html body article.blog-post-wrapper,
html body.hs-blog-post .body-container-wrapper,
html body.hs-blog-post .content-wrapper,
html body.hs-blog-post .row-fluid-wrapper {
  background-color: #121733 !important; /* Dark Blue Canvas */
}

body.hs-blog-listing,
body.hs-blog-index,
body.hs-blog-listing .body-container-wrapper {
  background-color: #ffffff !important;
}

/* White Reading Card Container */
html body .hs-blog-post article.blog-post,
html body article.blog-post,
html body .body-container-wrapper article,
html body .hs-blog-post .content-wrapper article {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3.5rem 3.5rem !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 3.5rem !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. HERO SPLIT (TITLE LEFT | FEATURED IMAGE RIGHT & AUTHOR BYLINE)
   -------------------------------------------------------------------------- */
html body article.blog-post .blog-post__header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html body .blog-post__header h1,
html body .blog-post__title h1,
html body h1.blog-post_title,
html body article.blog-post h1 {
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  color: #121733 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Author Byline & Date */
html body .blog-post__header .blog-post__author,
html body article.blog-post .blog-post__author,
html body article.blog-post .blog-post__title .blog-post__author,
html body div.blog-post__author {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html body .blog-post__header .blog-post__author a,
html body article.blog-post .blog-post__author a,
html body div.blog-post__author a,
html body .blog-post__author span {
  color: #bf1f2e !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

html body article.blog-post .blog-post__header img {
  max-width: 380px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   2. ARTICLE CONTENT TYPOGRAPHY & RESPONSIVE IMAGE STYLING
   -------------------------------------------------------------------------- */
html body .blog-post__body p,
html body .blog-post__body h1,
html body .blog-post__body h2,
html body .blog-post__body h3,
html body .blog-post__body h4,
html body .blog-post__body h5,
html body .blog-post__body ul:not(.blog-toc-wrapper ul),
html body .blog-post__body ol,
html body .blog-post__body table,
html body .blog-post__body img,
html body .blog-post__body figure,
html body .blog-post__body blockquote {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Body Paragraphs */
html body .blog-post__body p,
html body .blog-post__body p [style*="color"],
html body .blog-post__body span:not(.blog-post__author span),
html body .blog-post__body li,
html body article.blog-post p,
html body article.blog-post li {
  color: #1e293b !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.25rem !important;
}

/* Headings Clamp */
html body .blog-post__body h2,
html body article.blog-post h2,
html body .blog-post__body h2[style*="font-size"],
html body article.blog-post h2[style*="font-size"],
html body .blog-post__body h2 *,
html body article.blog-post h2 * {
  font-size: 1.65rem !important;
  line-height: 1.25 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  clear: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html body .blog-post__body h3,
html body article.blog-post h3,
html body .blog-post__body h3 * {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  clear: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* In-body Links */
html body .blog-post__body a:not(.blog-toc-wrapper a):not(#blog-toc a),
html body article.blog-post .blog-post__body a:not(.blog-toc-wrapper a) {
  color: #bf1f2e !important;
  text-decoration: underline !important;
}

/* Responsive Image Formatting */
html body .blog-post__body img,
html body article.blog-post img,
html body .blog-post__body figure img,
html body .blog-post__body .hs-responsive-embed img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   3. IN-BODY TABLES
   -------------------------------------------------------------------------- */
html body .blog-post__body table,
html body article.blog-post table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  display: table !important;
}

html body .blog-post__body table th,
html body article.blog-post table th,
html body .blog-post__body table tr:first-child th,
html body .blog-post__body table tr:first-child td,
html body article.blog-post table tr:first-child td,
html body .blog-post__body table tr:first-child th *,
html body .blog-post__body table tr:first-child td * {
  background-color: #121733 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  padding: 8px 10px !important;
  border: none !important;
  line-height: 1.2 !important;
}

html body .blog-post__body table td,
html body article.blog-post table td {
  padding: 8px 10px !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  line-height: 1.3 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-right: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. TOC SIDE-BY-SIDE FLOAT & ARTICLE PULL-UP
   -------------------------------------------------------------------------- */
html body article.blog-post,
html body .hs-blog-post article.blog-post {
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  max-width: 1180px !important;
  margin: 1.5rem auto 3.5rem auto !important;
  box-sizing: border-box !important;
}

html body article.blog-post::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* TOC: Left float, sticky, single red accent line */
html body .blog-toc-wrapper {
  float: left !important;
  width: 240px !important;
  position: sticky !important;
  top: 2.5rem !important;
  margin: 0 40px 2rem 0 !important;
  padding: 1.25rem 1rem !important;
  background-color: #f8fafc !important;
  border-left: 4px solid #bf1f2e !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
  display: block !important;
  max-height: calc(100vh - 6rem) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

/* Strip inner borders inside TOC */
html body .blog-toc-wrapper *,
html body #blog-toc * {
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* Hide Table of Contents title */
html body .blog-toc-header,
html body .blog-toc-wrapper .blog-toc-header,
html body .blog-toc-wrapper .toc-title,
html body .blog-toc-wrapper p,
html body #blog-toc p,
html body .blog-toc-wrapper span:first-child {
  display: none !important;
}

/* TOC links */
html body .blog-toc-wrapper ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html body .blog-toc-wrapper li {
  list-style: none !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

html body .blog-toc-wrapper a {
  display: block !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Smooth jump scroll */
html {
  scroll-behavior: smooth !important;
}

.blog-post__body h2,
.blog-post__body h3 {
  scroll-margin-top: 5rem !important;
}

/* Active Highlight Item (Red text + soft tint pill) */
html body .blog-toc-wrapper a.active-toc-item,
html body #blog-toc a.active-toc-item {
  color: #bf1f2e !important;
  font-weight: 700 !important;
  background-color: rgba(191, 31, 46, 0.08) !important;
}

/* Pull Article Body UP alongside the TOC */
html body .blog-post__body,
html body article.blog-post .blog-post__body {
  margin-left: 280px !important;
  width: auto !important;
  max-width: 860px !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  padding: 3rem !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Align Header/Title with Article Body */
html body .blog-post__header,
html body .blog-post__title {
  margin-left: 280px !important;
  max-width: 860px !important;
  box-sizing: border-box !important;
}

/* Author module across full width at bottom */
html body #aboutAuthorSocialModule,
html body article.blog-post #aboutAuthorSocialModule {
  clear: both !important;
  position: relative !important;
  z-index: 30 !important;
  background-color: #ffffff !important;
  width: 100% !important;
  margin-top: 3.5rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Contain article floats cleanly before author section */
html body .blog-post__body::after,
html body article.blog-post::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* --------------------------------------------------------------------------
   5. AUTO-HIDE EMPTY TOC
   -------------------------------------------------------------------------- */
html body .blog-toc-wrapper:not(:has(a)),
html body #blog-toc:not(:has(a)),
html body .blog-toc-wrapper[data-hidden="true"],
html body .blog-toc-wrapper.is-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   6. RELATED POSTS 3-COLUMN FLEX GRID (FIXED)
   -------------------------------------------------------------------------- */
html body .blog-related-posts,
html body section.blog-related-posts {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 4rem auto 3rem auto !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
  clear: both !important;
  display: block !important;
}

html body .blog-related-posts h2,
html body section.blog-related-posts h2 {
  font-size: 1.75rem !important;
  line-height: 1.3 !important;
  color: #121733 !important;
  font-weight: 800 !important;
  margin-bottom: 2rem !important;
  text-align: left !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Reset HubSpot outer row wrapper */
html body .blog-related-posts .row-fluid-wrapper {
  width: 100% !important;
  margin-left: 0 !important;
  display: block !important;
}

/* Flex Grid Track: side-by-side columns */
html body .blog-related-posts__list,
html body .blog-related-posts .row-fluid,
html body section.blog-related-posts > div:not(.blog-related-posts__title) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 2rem !important;
  width: 100% !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

/* Individual Cards (3-column layout) */
html body .blog-related-posts__post,
html body .blog-related-posts article,
html body .blog-related-posts .related-post-card,
html body .blog-related-posts [class*="span"] {
  flex: 0 1 calc(33.333% - 1.35rem) !important;
  width: calc(33.333% - 1.35rem) !important;
  max-width: calc(33.333% - 1.35rem) !important;
  min-width: 280px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  float: none !important;
  padding: 1.75rem !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

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

html body .blog-related-posts h3,
html body .blog-related-posts h4,
html body .blog-related-posts a {
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html body .blog-related-posts img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  margin: 1rem 0 !important;
  box-shadow: none !important;
}

html body .blog-related-posts p,
html body .blog-related-posts span {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  margin: 0 0 0.5rem 0 !important;
}

/* --------------------------------------------------------------------------
   7. MOBILE & TABLET RESPONSIVE CLEANUP (<= 991PX)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  html body .blog-toc-wrapper,
  html body #blog-toc,
  html body .toc-container,
  html body .blog-toc-list {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
  }

  html body article.blog-post,
  html body .hs-blog-post article.blog-post,
  html body .blog-post-wrapper article {
    max-width: 100% !important;
    margin: 1rem auto 2rem auto !important;
    padding: 0 1rem !important;
    display: block !important;
  }

  html body .blog-post__header,
  html body .blog-post__title,
  html body .blog-post__body,
  html body article.blog-post .blog-post__body {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  html body .blog-post__body,
  html body article.blog-post .blog-post__body {
    padding: 2rem 1.25rem !important;
    border-radius: 12px !important;
  }

  html body .blog-post__header h1,
  html body .blog-post__title h1,
  html body article.blog-post h1,
  html body .blog-post__body h1 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.75rem !important;
  }

  html body article.blog-post .blog-post__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }

  html body article.blog-post .blog-post__header img {
    max-width: 100% !important;
  }

  html body .blog-post__body h2,
  html body article.blog-post h2 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    margin-top: 1.75rem !important;
  }

  html body .blog-post__body h3,
  html body article.blog-post h3 {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
  }

  html body .blog-post__body p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  html body #aboutAuthorSocialModule,
  html body article.blog-post #aboutAuthorSocialModule {
    margin-top: 2rem !important;
    padding: 1.5rem 1rem !important;
  }

  html body .blog-related-posts__post,
  html body .blog-related-posts article,
  html body .blog-related-posts [class*="span"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}

/* ==========================================================================
   BLOG HOMEPAGE & CATEGORY POST GRID (POLISHED SYSTEM)
   ========================================================================== */

/* ==========================================================================
   BLOG HOMEPAGE & CATEGORY POST GRID (FINAL RECONCILED SYSTEM)
   ========================================================================== */

/* --------------------------------------------------------------------------
   8. HERO FEATURED BANNER (50/50 HORIZONTAL LOCK)
   -------------------------------------------------------------------------- */
.featured-post-wrap {
  max-width: 1180px !important;
  margin: 2rem auto 3rem auto !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
}

.featured-post-item {
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  padding: 2.5rem !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: block !important;
}

.featured-post-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}

/* Force nowrap so image stays on the right side and doesn't drop down */
div.featured-post-tagcontent,
.featured-post-item div.featured-post-tagcontent {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* Overrides module_blog_t flex-wrap: wrap */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

div.featured-post-content,
.featured-post-item div.featured-post-content {
  flex: 1 1 52% !important;
  width: 52% !important;
  max-width: 52% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

div.featured-post-image,
.featured-post-item div.featured-post-image {
  flex: 1 1 48% !important;
  width: 48% !important;
  max-width: 48% !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

div.featured-post-image a {
  display: block !important;
  width: 100% !important;
}

/* Featured Post Image (Full Uncropped Fit) */
div.featured-post-image,
.featured-post-item div.featured-post-image {
  flex: 1 1 48% !important;
  width: 48% !important;
  max-width: 48% !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

div.featured-post-image a {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

div.featured-post-image img,
.featured-post-item div.featured-post-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: contain !important; /* Preserves entire illustration without cutting megaphone/text */
  border-radius: 12px !important;
  display: block !important;
  box-shadow: none !important; /* Strips harsh shadow border around the transparent/white graphic */
}
}

.featured-post-content h4,
.featured-post-content h3,
.featured-post-content a {
  font-size: 1.75rem !important;
  line-height: 1.25 !important;
  color: #121733 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* --------------------------------------------------------------------------
   9. POST LISTING GRID (COMPACT CARD HEIGHT)
   -------------------------------------------------------------------------- */
.post-listing {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 1.5rem !important; /* Reduced from 2rem */
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 3-column feed cards - tightened padding */
.post-listing .blog-index__post,
.post-listing article.post-item {
  flex: 0 1 calc(33.333% - 1rem) !important;
  width: calc(33.333% - 1rem) !important;
  max-width: calc(33.333% - 1rem) !important;
  min-width: 280px !important;
  margin: 0 !important;
  padding: 1.25rem !important; /* Reduced padding brings card height down */
  background-color: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.post-listing .blog-index__post:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Compact Image Height */
.post-listing .blog-index__post img {
  width: 100% !important;
  height: 140px !important; /* Reduced from 180px to shave 40px off card height */
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0.6rem 0 !important;
  display: block !important;
}

/* Compact Headings */
.post-listing .blog-index__post h2,
.post-listing .blog-index__post h3,
.post-listing .blog-index__post a {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Compact Excerpt */
.post-listing .blog-index__post p {
  font-size: 0.825rem !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  margin-bottom: 0.5rem !important;
}

/* --------------------------------------------------------------------------
   10. UNIFIED PILLS, BADGES & METADATA
   -------------------------------------------------------------------------- */
.featured-post-featuredtag,
.latest-post-item .featured-post-featuredtag,
.featured-tag {
  display: inline-block !important;
  background-color: #bf1f2e !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 0.75rem !important;
  width: auto !important;
  white-space: nowrap !important;
}

.featured-body-tags,
.c-tags,
.post-listing .blog-index__post .c-tags,
.latest-post-item .c-tags {
  margin-top: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  padding-top: 0.75rem !important;
}

.featured-body-tags a,
.c-tags a,
.featured-body-tags span,
.c-tags span {
  display: inline-block !important;
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}

.featured-body-tags a:hover,
.c-tags a:hover {
  background-color: #121733 !important;
  color: #ffffff !important;
}

.featured-post-minute-count,
.post-publish-date {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  display: inline-block !important;
  margin-right: 0.75rem !important;
}

/* --------------------------------------------------------------------------
   11. SUBSCRIBE TO OUR BLOG CARD & FORM (COMPACT HEIGHT)
   -------------------------------------------------------------------------- */
.post-listing .blog-index__subscribe-card-parent-wrapper--layout,
.post-listing div[class*="subscribe-card-parent-wrapper"] {
  flex: 0 1 calc(33.333% - 1rem) !important;
  width: calc(33.333% - 1rem) !important;
  max-width: calc(33.333% - 1rem) !important;
  min-width: 280px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Remove stray red circle indicator */
.blog-index__subscribe-card-parent-wrapper--layout::before,
.blog-index__subscribe-card-parent-wrapper--layout::after,
.blog-subscribe-module::before,
.blog-subscribe-module::after,
.blog-index__subscribe-card-wrapper--layout::before,
.blog-index__subscribe-card-wrapper--layout::after,
div[class*="subscribe-card"]::before,
div[class*="subscribe-card"]::after {
  display: none !important;
  content: none !important;
}

/* Compact Navy Card */
.blog-subscribe-module,
.blog-index__subscribe-card-wrapper--layout {
  background-color: #121733 !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.25rem !important; /* Tighter padding */
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
}

.blog-subscribe-module h4,
.blog-subscribe-module .blog-index__subscribe-card-title--styles {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.25 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.blog-subscribe-module p,
.blog-subscribe-module .blog-index__subscribe-card-subtitle--styles {
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  margin: 0 0 0.85rem 0 !important;
}

.blog-subscribe-module input[type="email"],
.blog-subscribe-module input[type="text"] {
  background-color: #ffffff !important;
  color: #121733 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 0.85rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.5rem !important;
  text-align: left !important;
}

.blog-subscribe-module .legal-consent-container,
.blog-subscribe-module div[class*="legal"],
.blog-subscribe-module .hs-richtext {
  color: #cbd5e1 !important;
  font-size: 0.725rem !important;
  line-height: 1.35 !important;
  margin: 0.25rem 0 0.65rem 0 !important;
}

.blog-subscribe-module a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

.blog-subscribe-module input[type="submit"],
.blog-subscribe-module button,
.blog-subscribe-module .hs-button {
  background-color: #bf1f2e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
}
/* ==========================================================================
   SUBSCRIBE CARD DISCLAIMER & LINK COLOR FIX (MAX SPECIFICITY)
   ========================================================================== */
html body .post-listing .blog-subscribe-module .legal-consent-container,
html body .post-listing .blog-subscribe-module .legal-consent-container p,
html body .post-listing .blog-subscribe-module .legal-consent-container span,
html body .post-listing div[class*="subscribe-card"] .legal-consent-container,
html body .post-listing div[class*="subscribe-card"] p,
html body .post-listing div[class*="subscribe-card"] span {
  color: #cbd5e1 !important; /* High-contrast light slate text */
}

/* Force pure white with clear underline on all links & mailto inside the card */
html body .post-listing .blog-subscribe-module a,
html body .post-listing .blog-subscribe-module a:link,
html body .post-listing .blog-subscribe-module a:visited,
html body .post-listing .blog-subscribe-module a[href^="mailto"],
html body .post-listing div[class*="subscribe-card"] a,
html body .post-listing div[class*="subscribe-card"] a:link,
html body .post-listing div[class*="subscribe-card"] a:visited,
html body .post-listing div[class*="subscribe-card"] a[href^="mailto"],
html body .post-listing .blog-subscribe-module a *,
html body .post-listing div[class*="subscribe-card"] a * {
  color: #ffffff !important; /* Crisp, pure white */
  text-decoration: underline !important;
  font-weight: 700 !important;
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body .post-listing .blog-subscribe-module a:hover,
html body .post-listing div[class*="subscribe-card"] a:hover {
  color: #f1f5f9 !important;
  text-decoration: underline !important;
}