/* =============================================================================
   Title Size & Background Contrast Optimization - News & Blog Pages
   ============================================================================= */

/* Unified Hero Section Background Optimization */
#news-hero,
#blog-hero {
  position: relative;
  overflow: hidden;
  min-height: 320px !important;
  padding: 2.5rem 0 !important;
}

/* Enhanced Blue Gradient for Blog */
#blog-hero {
  background: linear-gradient(135deg, 
    #1e40af 0%,     /* Deep blue */
    #3b82f6 20%,    /* Primary blue */ 
    #60a5fa 60%,    /* Light blue */
    #93c5fd 85%,    /* Very light blue */
    #dbeafe 100%    /* Ultra light blue */
  ) !important;
}

/* Enhanced Green Gradient for News */  
#news-hero {
  background: linear-gradient(135deg,
    #047857 0%,     /* Deep green */
    #059669 20%,    /* Primary green */
    #10b981 60%,    /* Light green */ 
    #34d399 85%,    /* Very light green */
    #a7f3d0 100%    /* Ultra light green */
  ) !important;
}

/* Enhanced Grid Pattern Overlay for Better Contrast */
#news-hero::before,
#blog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.12) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%);
  background-size: 80px 80px, 60px 60px, 120px 120px, 120px 120px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

/* Optimized Title Typography for Maximum Readability */
.news-hero-content h1,
.blog-hero-content h1 {
  position: relative;
  z-index: 10;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 2.75rem !important;
  color: #ffffff !important;
  text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.6),
    4px 4px 12px rgba(0, 0, 0, 0.4),
    1px 1px 2px rgba(0, 0, 0, 0.8) !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

/* Icon Styling Enhancement */
.news-hero-content h1 i,
.blog-hero-content h1 i {
  color: rgba(255, 255, 255, 0.95) !important;
  margin-right: 0.75rem !important;
  text-shadow: 
    2px 2px 6px rgba(0, 0, 0, 0.5),
    1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Enhanced Lead Text Contrast */
.news-hero-content .lead,
.blog-hero-content .lead {
  position: relative;
  z-index: 10;
  font-family: 'Inter', sans-serif !important;
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 500 !important;
  text-shadow: 
    1px 1px 3px rgba(0, 0, 0, 0.5),
    2px 2px 6px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 2rem !important;
}

/* Enhanced Stats Section Readability */
.news-stats .stat-item,
.blog-stats .stat-item {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 16px !important;
  padding: 1.5rem 1rem !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.news-stats .stat-item:hover,
.blog-stats .stat-item:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-3px) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Enhanced Stat Numbers */
.news-stats .stat-number,
.blog-stats .stat-number {
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-shadow: 
    2px 2px 6px rgba(0, 0, 0, 0.5),
    1px 1px 3px rgba(0, 0, 0, 0.7) !important;
  line-height: 1 !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Inter', sans-serif !important;
}

/* Enhanced Stat Labels */
.news-stats .stat-label,
.blog-stats .stat-label {
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Enhanced Action Buttons */
.author-actions .btn,
.news-actions .btn {
  position: relative;
  z-index: 10;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.author-actions .btn:hover,
.news-actions .btn:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.author-actions .btn-success,
.news-actions .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.author-actions .btn-success:hover,
.news-actions .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Featured Card Enhancement */
.featured-news-card .card,
.featured-blog-card .card {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.3s ease !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.featured-news-card .card:hover,
.featured-blog-card .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 
    0 16px 48px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Responsive Enhancements */
@media (max-width: 992px) {
  .news-hero-content h1,
  .blog-hero-content h1 {
    font-size: 2.4rem !important;
  }
  
  #news-hero,
  #blog-hero {
    min-height: 280px !important;
    padding: 2rem 0 !important;
  }
}

@media (max-width: 768px) {
  .news-hero-content h1,
  .blog-hero-content h1 {
    font-size: 2rem !important;
    text-align: center !important;
  }
  
  .news-hero-content .lead,
  .blog-hero-content .lead {
    font-size: 1.05rem !important;
    text-align: center !important;
  }
  
  #news-hero,
  #blog-hero {
    min-height: 240px !important;
    padding: 1.75rem 0 !important;
  }
  
  .news-stats .stat-number,
  .blog-stats .stat-number {
    font-size: 2rem !important;
  }
}

@media (max-width: 576px) {
  .news-hero-content h1,
  .blog-hero-content h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  .news-hero-content .lead,
  .blog-hero-content .lead {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  #news-hero,
  #blog-hero {
    min-height: 200px !important;
    padding: 1.5rem 0 !important;
  }
  
  .news-stats .stat-item,
  .blog-stats .stat-item {
    padding: 1.25rem 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .news-stats .stat-number,
  .blog-stats .stat-number {
    font-size: 1.75rem !important;
  }
  
  .news-stats .stat-label,
  .blog-stats .stat-label {
    font-size: 0.8rem !important;
  }
}

/* Ensure Content Layering */
#news-hero .container,
#blog-hero .container,
#news-hero .row,
#blog-hero .row,
#news-hero .col-lg-7,
#blog-hero .col-lg-7,
#news-hero .col-lg-5,
#blog-hero .col-lg-5 {
  position: relative;
  z-index: 5;
}