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

   TABLE OF CONTENTS
   ─────────────────
   01. Print Journal Section Layout
   02. Print Journal Content (Heading + Links)
   03. Responsive — Mobile (≤ 767px)
   ============================================================ */


/* ============================================================
   01. PRINT JOURNAL SECTION LAYOUT
   ─ Full-width container holding the two-column grid.
   ─ Left column  : journal cover image.
   ─ Right column : heading and two-column Amazon link list.
   ============================================================ */

.print-journal-section {
  padding: 80px 40px 90px;
}

/* Constrain the inner grid to a readable max-width */
.print-journal-section .container {
  max-width: 1020px;
}

/* Journal cover / product illustration */
.print-journal-section .container img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}


/* ============================================================
   02. PRINT JOURNAL CONTENT (HEADING + LINKS)
   ─ Right-column text block: page title and the two-column
     list of regional Amazon storefront links.
   ============================================================ */

/* Page heading */
.print-journal__content h3 {
  font-family: Raleway;
  font-weight: 800;
  font-size: 40px;
  line-height: 54px;
  letter-spacing: 0%;
  color: #4d1f1d;
}

/* Store links list — top spacing */
.print-journal__content ul {
  margin-top: 44px;
}

/* Individual store link list item */
.print-journal__content ul li {
  margin-top: 20px;
}

/* Individual store link anchor */
.print-journal__content ul li a {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  color: black;
  text-decoration: underline !important;
}

/* Two-column link list layout */
.print-journal__links-columns {
  column-gap: 90px;
  margin-top: -30px;
}


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

@media (max-width: 767px) {

  /* ── Section layout ── */
  .print-journal-section {
    padding: 60px 15px 56px;
  }

  .print-journal-section .container img {
    height: 400px;
  }

  /* ── Content block ── */
  .print-journal__content {
    padding: 0 6px;
  }

  .print-journal__content h3 {
    font-size: 32px;
    line-height: 40px;
    margin-top: 22px;
  }

  .print-journal__content ul {
    margin-top: 38px;
    padding-left: 21px;
  }

  .print-journal__content ul li {
    margin-top: 16px;
  }

  .print-journal__content ul li a {
    font-size: 15px;
    line-height: 26px;
  }

  /* Tighter gap on mobile so both columns fit side by side */
  .print-journal__links-columns {
    column-gap: 10px;
    justify-content: space-between;
    margin-top: -30px;
  }

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