/* =========================================================
   BLOG DETAILS (blog-post.html)
========================================================= */

/* Remove any visual card/background completely */
.blog-image-wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
}

/* ✅ Apply overlap to WRAPPER (not image) to avoid empty space */
#pcPostWrap .blog-image-wrapper {
  margin-top: -120px !important; /* final tuned value */
}

/* Hero image (no negative margins here) */
.blog-main-img {
  width: 100%;
  display: block;

  height: clamp(260px, 40vw, 440px);
  object-fit: cover;

  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

/* Tighten gap between image and title */
#pcPostWrap > .mb-5.text-center {
  margin-bottom: 1.15rem !important; /* replaces Bootstrap mb-5 */
}

/* Title spacing refinement */
#pcPostTitle {
  margin-top: 0.2rem;
  margin-bottom: 0.75rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Content typography */
.pc-post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Images inside content */
.pc-post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin: 16px 0;
}

/* Tags */
.pc-tag {
  background: rgba(21,185,217,.12);
  color: #0b6b7a;
  border: 1px solid rgba(21,185,217,.25);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  display: inline-block;
  margin: 0 6px 6px 0;
}

/* =========================================================
   RESPONSIVE (MOBILE SAFE)
========================================================= */

@media (max-width: 575.98px) {
  #pcPostWrap .blog-image-wrapper {
    margin-top: 0 !important; /* disable overlap on mobile */
  }

  .blog-main-img {
    height: clamp(220px, 55vw, 320px);
    border-radius: 14px;
  }

  #pcPostWrap > .mb-5.text-center {
    margin-bottom: 1rem !important;
  }
}