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

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


/* ============================================================
   01. KINDLE SECTION LAYOUT
   ─ Full-width container holding the two-column grid.
   ─ Left column: device/book image.
   ─ Right column: heading, description, and store link list.
   ============================================================ */

.kindle-section {
  padding: 70px 40px 80px;
}

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

/* Book / device illustration */
.kindle-section .container img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}


/* ============================================================
   02. KINDLE CONTENT (TEXT + LINKS)
   ─ Right-column text block: heading, intro copy, and the
     list of regional Amazon storefront links.
   ============================================================ */

/* Section heading */
.kindle__content h3 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: 0%;
  color: #582c00;
}

/* Intro paragraph */
.kindle__content p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  text-decoration: none !important;
  color: black;
  margin-top: 16px;
}

/* Generic anchor style within the content block */
.kindle__content a {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  color: black;
}

/* Store links list — top spacing */
.kindle__content ul {
  margin-top: 30px;
}

/* Individual store link list item */
.kindle__content ul li {
  margin-top: 16px;
}

/* Individual store link anchor */
.kindle__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 (optional utility class) */
.kindle__links-columns {
  column-gap: 70px;
  margin-top: -30px;
}


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

@media (max-width: 767px) {

  /* ── Kindle section ── */
  .kindle-section {
    padding: 50px 15px 60px;
  }

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

  /* ── Kindle content ── */
  .kindle__content {
    padding: 0 6px;
  }

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

  .kindle__content p {
    font-size: 16px;
    line-height: 26px;
    margin-top: 16px;
  }

  .kindle__content ul {
    margin-top: 30px;
  }

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

  .kindle__content ul li a {
    font-size: 16px;
    line-height: 26px;
  }

  .kindle__links-columns {
    column-gap: 30px;
    margin-top: -30px;
  }

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