/* ============================================================
   DUA BOOK — Blog Listing Stylesheet  (Blog.css)
   Author   : Dua Book Team
   Version  : 1.0.0
   Depends  : Home.css  (navbar, sidebar, footer, gradient wrapper)

   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 10 cards are visible by default (no toggle needed here,
     unlike the homepage which hides extra cards behind a button).
   ============================================================ */

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

/* Section heading — gradient text */
.blog-listing__title {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 44px;
  line-height: 56px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

/* Decorative script word ("Blogs") */
.blog-listing__title span {
  font-family: WhiteAngelica;
  font-weight: 400;
  color: #996a3c !important;
  background: none !important;
  -webkit-text-fill-color: #996a3c;
}

/* 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: 60px 28px 0 28px;
}

/* ============================================================
   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: 22px 14px 0;
}

.blog-listing-card__body h3 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: 0%;
  text-align: center;
  color: black;
  text-decoration: none !important;
}

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

@media (max-width: 767px) {
  /* ── Blog listing section ── */
  .blog-listing-section {
    padding: 60px 14px;
  }

  .blog-listing__title {
    font-size: 32px;
    line-height: 40px;
  }

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

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

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

  .blog-listing-card__body h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
  }
} /* END: @media (max-width: 767px) */