/* PrimeSource Blog Styling Overrides */

/* Blog Article Page - Fix oversized heading */
.blog-article h1,
article h1,
[class*="blog"] h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  max-width: 800px !important;
}

/* Blog Article - Better hero image presentation */
.blog-article img:first-of-type,
article img:first-of-type {
  border-radius: 12px !important;
  max-height: 450px !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* Blog Card Titles - Always visible, not just on hover */
.blog-card .absolute {
  opacity: 1 !important;
}

/* Blog Card - Better title styling */
.blog-card h3,
.blog-card h4 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Blog listing page header */
.blog-header h1,
[class*="blog"] > h1 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
}

/* Improve content readability */
article p,
.blog-content p {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  max-width: 720px !important;
}

article h2,
.blog-content h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

article h3,
.blog-content h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-top: 2rem !important;
}