/* ============================================================
   RAMADAN JOURNAL — Blog Detail Stylesheet  (blog-detail.css)
   Author   : Ramadan Journal Team
   Version  : 1.0.0
   Depends  : Home.css  (navbar, sidebar, footer)

   TABLE OF CONTENTS
   ─────────────────
   01. Blog Detail Section (Hero Image + Article Body)
   02. You May Also Like Section
   03. Related Blog Cards
   04. Responsive — Tablet (≤ 991px)
   05. Responsive — Mobile (≤ 767px)
   ============================================================ */


/* ============================================================
   01. BLOG DETAIL SECTION (HERO IMAGE + ARTICLE BODY)
   ─ Full-width container holding the article hero image and
     the full article text content below it.
   ============================================================ */

.blog-detail-section {
  padding: 64px 40px 60px;
}

/* Hero / featured image */
.blog-detail__image img {
  border-radius: 20px;
  min-width: 100%;
}

/* Article text wrapper */
.blog-detail__content {
  padding: 0 4px;
}

/* Article title */
.blog-detail__content h2 {
  font-family: Raleway;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: 0%;
  text-align: center;
  color: #4d1f1d;
  margin-top: 46px;
  width: 86%;
  margin-inline: auto;
  margin-bottom: 40px;
}

/* Article body paragraphs */
.blog-detail__content p {
  font-family: Poppins;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  margin-bottom: 20px;
}

/* Bold inline labels (sub-section headings within paragraphs) */
.blog-detail__content p strong {
  font-weight: 600;
}


/* ============================================================
   02. YOU MAY ALSO LIKE SECTION
   ─ Related posts grid shown below the full article.
   ============================================================ */

.you-may-like-section {
  padding: 24px 40px 90px;
}

/* Section heading */
.you-may-like-title {
  font-family: Raleway;
  font-weight: 700;
  font-size: 38px;
  line-height: 48px;
  text-align: center;
  color: #4d1f1d;
  margin-bottom: 10px;
}

/* Grid row top spacing */
.you-may-like-section .container .row {
  margin-top: 30px;
}

/* Column padding inside the grid */
.you-may-like-section .container .row .col-lg-4 {
  padding: 24px 28px 0;
}


/* ============================================================
   03. RELATED BLOG CARDS
   ─ Shared card styles for the "You May Also Like" grid.
   ─ These match the blog card pattern used across the site.
   ============================================================ */

/* Card image container — fixed height with overflow crop */
.blog-card__image {
  min-height: 220px;
  max-height: 220px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-card__image img {
  border-radius: 16px;
  object-fit: cover;
  min-width: 100%;
  height: 220px;
}

/* Card text body */
.blog-card__body {
  padding: 22px 14px 0;
}

.blog-card__body h3 {
  font-family: Raleway;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0%;
  text-align: center;
  color: black;
  margin-bottom: 0 !important;
}


/* ============================================================
   04. RESPONSIVE — TABLET (≤ 991px)
   ============================================================ */

@media (max-width: 991px) {
  /* Tablet-specific overrides can be added here as needed */
}


/* ============================================================
   05. RESPONSIVE — MOBILE (≤ 767px)
   ─ Reduces padding, image height, and font sizes for small
     screens across both the article and related posts sections.
   ============================================================ */

@media (max-width: 767px) {

  /* ── Blog detail section ── */
  .blog-detail-section {
    padding: 44px 14px 30px;
  }

  /* Constrain and crop the hero image on mobile */
  .blog-detail__image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
  }

  .blog-detail__content {
    padding: 0 2px;
  }

  .blog-detail__content h2 {
    font-size: 24px;
    line-height: 32px;
    margin-top: 30px;
    width: 98%;
    margin-inline: auto;
    margin-bottom: 30px;
  }

  .blog-detail__content p {
    font-size: 15px;
    margin-bottom: 18px;
  }

  /* ── You May Also Like section ── */
  .you-may-like-section {
    padding: 30px 14px 64px;
  }

  .you-may-like-title {
    font-size: 32px;
    line-height: 40px;
  }

  .you-may-like-section .container .row {
    margin-top: -8px;
  }

  .you-may-like-section .container .row .col-lg-4 {
    padding: 44px 18px 0;
  }

  /* ── Related blog cards ── */
  .blog-card__body {
    padding: 20px 10px 0;
  }

  .blog-card__body h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 27px;
  }

} /* END: @media (max-width: 767px) */