/* Final overrides loaded after the template and skin styles. */

.ai-message .message-bubble:has(.blog-details-page) {
  max-width: 880px !important;
  width: min(100%, 880px) !important;
}

.blog-details-page {
  background: linear-gradient(180deg, #f4fbfd 0%, #ffffff 46%) !important;
  border: 1px solid rgba(20, 171, 161, .16) !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 35px rgba(20, 171, 161, .08) !important;
  color: #333 !important;
  overflow: hidden !important;
  padding: 18px !important;
  width: min(100%, 880px) !important;
}

.blog-details-page .blog-details-hero {
  background: transparent !important;
  border-radius: 20px !important;
  min-height: auto !important;
  overflow: visible !important;
}

.blog-details-page .blog-details-hero::after {
  content: none !important;
}

.blog-details-page .blog-details-hero img {
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .08) !important;
  display: block !important;
  height: 320px !important;
  object-fit: cover !important;
  width: 100% !important;
}

.blog-details-page .project-details-hero-overlay {
  color: #333 !important;
  max-width: none !important;
  padding: 18px 4px 8px !important;
  position: static !important;
  text-shadow: none !important;
}

.blog-details-page .project-details-hero-overlay h2 {
  color: #252525 !important;
  font-size: 1.8rem !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
  margin: 12px 0 8px !important;
}

.blog-details-page .project-details-hero-overlay p {
  color: #555 !important;
  line-height: 1.75 !important;
  max-width: 720px !important;
  opacity: 1 !important;
}

.blog-details-meta-line {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  font-size: .85rem !important;
}

.blog-details-meta-line span:not(.blog-card-category) {
  align-items: center !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 999px !important;
  color: #555 !important;
  display: inline-flex !important;
  gap: 5px !important;
  opacity: 1 !important;
  padding: 5px 10px !important;
}

.blog-details-page .project-details-body {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 20px !important;
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: minmax(0, 1fr) 260px !important;
  padding: 24px !important;
}

.blog-details-page .project-details-main h3 {
  color: #14aba1 !important;
  font-size: .82rem !important;
  letter-spacing: .08em !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

.blog-details-content p {
  color: #444 !important;
  font-size: .98rem !important;
  line-height: 1.85 !important;
  margin-bottom: 16px !important;
  opacity: 1 !important;
}

.blog-details-page .project-details-meta {
  background: #f8fcfd !important;
  border-color: rgba(20, 171, 161, .14) !important;
}

.blog-details-tags span {
  background: #f4fbfa !important;
  color: #14aba1 !important;
}

body.dark .blog-details-page {
  background: #191919 !important;
  color: #f1f5f9 !important;
}

body.dark .blog-details-page .project-details-hero-overlay h2,
body.dark .blog-details-page .project-details-hero-overlay p,
body.dark .blog-details-content p {
  color: #f1f5f9 !important;
}

body.dark .blog-details-page .project-details-body,
body.dark .blog-details-meta-line span:not(.blog-card-category),
body.dark .blog-details-page .project-details-meta {
  background: #222 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

@media (max-width: 767px) {
  .blog-details-page {
    padding: 12px !important;
  }

  .blog-details-page .blog-details-hero img {
    height: 220px !important;
  }

  .blog-details-page .project-details-body {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
}