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

   TABLE OF CONTENTS
   ─────────────────
   01. Blog Listing Section
   02. Blog Listing Card
   03. Responsive — Mobile (≤ 767px)
   ============================================================ */


/* ============================================================
   01. BLOG LISTING SECTION
   ─ Full-page blog grid with section heading.
   ─ All cards are visible by default — no toggle needed here,
     unlike the homepage which hides extra cards behind a button.
   ============================================================ */

.blog-listing-section {
  padding: 80px 40px 100px;
}

/* Section heading */
.blog-listing__title {
  font-family: Raleway;
  font-weight: 800;
  font-size: 46px;
  line-height: 56px;
  letter-spacing: 0%;
  text-align: center;
  color: #4d1f1d;
}

/* Grid row top spacing */
.blog-listing-section .container .row {
  margin-top: 24px;
}

/* Column padding inside the grid */
.blog-listing-section .container .row .col-lg-4 {
  padding: 36px 26px 0 26px;
}


/* ============================================================
   02. BLOG LISTING CARD
   ─ Individual card — thumbnail image + title text.
   ============================================================ */

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

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

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

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


/* ============================================================
   03. RESPONSIVE — MOBILE (≤ 767px)
   ─ Reduces padding and font sizes for small screens.
   ============================================================ */

@media (max-width: 767px) {

  /* ── Blog listing section ── */
  .blog-listing-section {
    padding: 64px 14px 80px;
  }

  .blog-listing__title {
    font-size: 36px;
    line-height: 44px;
  }

  .blog-listing-section .container .row {
    margin-top: 28px;
    gap: 32px;
  }

  .blog-listing-section .container .row .col-lg-4 {
    padding: 20px 18px 0 18px;
  }

  /* ── Blog listing card ── */
  .blog-listing-card__body {
    padding: 22px 10px 0;
  }

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

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