/* ==========================================================
   --- Books Grid Section ---
   Container for all books, centered on the page
========================================================== */
.books-section {
  padding: 8px;
  /* General padding inside container */
  max-width: 1300px;
  /* Maximum width for larger screens */
  margin: 0 auto;
  /* Center container horizontally */
  text-align: center;
  /* Center headings and inline content */
}

/* Heading inside books section */
.books-section h2 {
  text-align: center;
  /* Center heading text */
  font-family: var(--font-Bombay)
}



.books-section h1 {
  font-family: var(--font-arabic);
  font-size: var(--font-subheading);
  color: var(--color-blue);
}





/* ==========================================================
   --- Grid Container ---
   Main grid layout for all book cards
========================================================== */
.grid {
  display: grid;
  /* Enable CSS Grid layout */
  gap: 5px;
  /* Space between grid items */
  justify-content: center;
  /* Center the grid within container */
  align-items: center;
  /* Align items vertically center (if different heights) */
}

/* ==========================================================
   --- Book Card ---
   Individual book card styling
========================================================== */
.book-card {
  display: flex;
  /* Flex for vertical layout */
  flex-direction: column;
  /* Stack image + details vertically */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  background: ghostwhite;
  /* Card background color */
  border-radius: 10px;
  /* Rounded corners */
  border: 3px solid var(--color-border);
  /* Card border color from CSS variable */
  max-width: 320px;
  /* Max width of single card */
  overflow: hidden;
  /* Hide overflow */
  position: relative;
  /* For hover pseudo-elements */

  /* Entry animation */
  opacity: 1;
  transform: scale(1);
  animation: cardEntry 0.9s ease-out forwards;

  /* Smooth hover transition for scale and shadow */
  transition: transform 0.8s ease, box-shadow 0.8s ease;
}

/* ==========================================================
   --- Card Entry Animation ---
   Animation when page loads
========================================================== */
@keyframes cardEntry {
  50% {
    opacity: 1;
    transform: scale(0.8) translateY(3px);
    /* Slight shrink + lift effect */
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    /* Final position */
  }
}

/* ==========================================================
   --- Card Hover Animation ---
   Zoom out and in on hover
========================================================== */
.book-card:hover {
  animation: zoomOutIn 1s ease forwards;
  /* Hover animation */
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  /* Add subtle shadow */
}

@keyframes zoomOutIn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
    /* Slight zoom out */
  }

  100% {
    transform: scale(1);
    /* Return to normal size */
  }
}

/* ==========================================================
   --- Book Cover Image ---
   Image styling for book covers
========================================================== */
.book-cover {
  width: 100%;
  /* Full width of card */
  height: auto;
  /* Maintain aspect ratio */
  display: block;
  /* Block element to avoid extra spacing */
}

.book-card img {
  width: 100%;
  object-fit: cover;
  /* Ensure image covers entire card area */
}

/* ==========================================================
   --- Book Details ---
   Title, author and other info
========================================================== */
.book-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* Center text */
}

.book-details .book-title {
  margin: 0 0 5px;
  /* Space below title */
  font-size: var(--font-subheading);
  color: var(--color-red);
  font-family: var(--font-Bombay);
  font-weight: normal;
    /* Soft depth */
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    
      /* Smooth animation */
      animation: colorChange 14s infinite ease-in-out;
}



/* Color flow */
@keyframes colorChange {
  0% {
    color: #8b0000;
  }

  33% {
    color: #350385;
  }

  66% {
    color: #03890e;
  }

  100% {
    color: #8b0000;
  }
}
/* Accessibility: motion کم کرنے والوں کیلئے */
@media (prefers-reduced-motion: reduce) {
  .book-details .book-title {
    animation: none;
    color: #8b0000;
  }
}



.book-author {
  color: var(--color-blue);
  margin: 0 0 10px 0;
  font-family: var(--font-urdu);
  font-size: var(--font-subheading);
}

/* ==========================================================
   --- Download Button ---
   Styled button at bottom of each card
========================================================== */
.download-btn {
  display: block;
  width: 100%;
  /* Full width of card */
  padding: 14px 0;
  /* Vertical padding */
  background: linear-gradient(135deg, #0b3d26, #0e4d2c);
  /* Green dome style gradient */
  color: #fff;
  font-size: var(--font-subheading);
  font-family: var(--font-Bombay);
  font-weight: normal;
  text-align: center;
  border: none;
  border-radius: 0 0 4px 4px;
  /* Rounded bottom corners */
  text-decoration: none;
  transition: all 0.4s ease;
  /* Smooth hover transition */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Subtle shadow */
}

/* ==========================================================
   --- Button Hover Glow Effect ---
   Golden/green spiritual glow
========================================================== */
.download-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      rgba(0, 128, 0, 0.6),
      rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 0;
}

.download-btn:hover::after {
  opacity: 1;
  transform: scale(1.2);
  animation: greenGlow 1.2s infinite ease-in-out;
}

.download-btn span {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
  /* Golden aura text */
}

@keyframes greenGlow {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}

/* ==========================================================
   --- Responsive Grid ---
   Media queries for different screen widths
========================================================== */

/* Large screens: 1200px and above */
@media(min-width: 1200px) and (max-width: 5000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    /* 4 cards per row */
    gap: 5px;
    justify-content: center;
    /* Center cards horizontally */
  }

  .books-section {
    padding: 5px;
    /* Reduce padding on large screens */
  }
}

/* Medium screens: 800px to 1200px */
@media(min-width: 800px) and (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    /* 4 cards per row */
    gap: 5px;
    justify-content: center;
  }

  .books-section {
    padding: 5px;
  }
}

/* Small screens: 600px to 800px */
@media(min-width: 600px) and (max-width: 800px) {
  .grid {
    grid-template-columns: repeat(2, minmax(250px, max-content));
    /* 2 cards per row, centered */
    gap: 5px;
    justify-content: center;
    /* Fix left-alignment issue */
  }

  .books-section {
    padding: 5px;
  }
}

/* Extra small screens: below 600px */
@media(max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 cards per row */
    gap: 5px;
    justify-content: center;
  }

  .books-section {
    padding: 5px;
  }
}