/* Default Desktop Layout */
.book-card {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns of equal width */
    gap: 20px;
    padding: 20px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    align-items: start; /* Align items to the top of the grid */
    margin-top: 3%;
 	margin-bottom: 10%;
}

.book-content {
    grid-column: 1 / span 1; /* Content will be in the first column */
    padding: 4% 5% 2% 5%;
}

.book-image {
    grid-column: 2 / span 1; /* Image will be in the second column */
    justify-self: center; /* Center the image within its column */
}

.book-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Button Styling */
.book-button {
    font-family: inherit;
    font-weight: bold;
    font-size: 15px;
    padding: 10px 15px;
    background: #ffd814 !important;
    color: black !important;
    margin: 10px 0;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    display: inline-block;
    border: none;
    border-radius: 5px;
    width: 250px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    box-shadow: var(--wp--preset--shadow--natural); /* Adding a shadow for depth */
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.book-button:hover {
    background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange); /* Adding gradient on hover */
    box-shadow: var(--wp--preset--shadow--deep); /* Deep shadow on hover */
}

.book-button:active {
    background: var(--wp--preset--color--vivid-red); /* Darken on click */
    box-shadow: var(--wp--preset--shadow--crisp); /* Crisp shadow on click */
}

.book-title {
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 30px !important; /* You can adjust this based on the provided variables */
    color: #ad0000 !important;
    line-height: 1.5;
    margin: 10px 0 !important;
    text-align: left;
    text-decoration: none !important;
    background: transparent;
    padding: 0;
    box-shadow: none !important;
    transition: 0.25s ease;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box !important;
}

.book-pros {
  margin-top: 5%;
  margin-bottom: 5%;
}
.book-cons {
  margin-top: 5%;
}

/* Grid layout for the book gallery */
.book-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 20px;
  	margin-top: 3%;
  	margin-bottom: 10%;
}

/* Gallery item styles */
.book-gallery-item {
    border: 1px solid #dee2e6;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Book image inside the gallery */
.book-gallery-image img {
    width: 80%;
    height: auto;
    border-radius: 4px;
}

/* Title styling reusing existing book-title class */
.book-gallery-title a {
    font-family: inherit;
    font-weight: bold;
    font-size: 18px;
    color: #ad0000;
    text-decoration: none;
    display: block;
    margin-top: 10px;
    transition: 0.25s ease;
}

/* Title hover effect */
.book-gallery-title a:hover {
    color: #0073e6;
}

/* Reusing book-button class for consistency */
.book-gallery-item .book-button {
    margin-top: 10px;
    padding: 10px 15px;
    width: 100%; /* Full width for smaller buttons */
}

/* Responsive for Tablets and Smaller Screens (up to 1024px) */
@media (max-width: 1024px) {
    .book-card {
        grid-template-columns: 1fr; /* Switch to a single column layout */
        text-align: center; /* Center text and image */
    }

    .book-image {
        grid-column: 1 / span 1; /* Ensure the image takes full width */
        margin-bottom: 20px; /* Add some space between image and content */
    }

    .book-content {
        grid-column: 1 / span 1; /* Content takes full width */
        text-align: center; /* Center text */
    }
}

/* Extra small screens (Mobile Phones) */
@media (max-width: 768px) {
    .book-card {
        padding: 10px; /* Reduced padding for small screens */
        grid-template-columns: 1fr; /* Ensure it's one column on mobile */
    }

    .book-image {
        margin-bottom: 20px; /* Space below the image */
    }

    .book-content h2 {
        font-size: 1.5rem; /* Adjust heading size */
    }

    .book-content p {
        font-size: 1rem; /* Adjust paragraph size */
    }

    a.book-button {
        padding: 10px 20px; /* Adjust button padding */
        width: 100%; /* Make button full width on mobile */
    }
}

/* Specific Media Query for iPhone 12 (max-width 390px) */
@media (max-width: 390px) {
    .book-card {
        grid-template-columns: 1fr; /* Force single column */
        text-align: center; /* Center everything */
    }

    .book-image {
        margin-bottom: 20px; /* Add space below image */
    }

    .book-content {
        text-align: center; /* Ensure content is centered */
    }

    a.book-button {
        width: 100%; /* Full width button */
    }
}