/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/


/* Books page - fix flex layouts that WP strips */
.books-filter-buttons {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.books-filter-buttons a {
    display: inline-block !important;
}
.books-card-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.books-card-grid > a {
    display: inline-block !important;
    width: 280px;
}

/* Books page filter buttons */
#genre-filters {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}
#genre-filters .genre-btn {
    display: inline-block !important;
    background: #333;
    color: #ccc;
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}
#genre-filters .genre-btn.active {
    background: #c0392b !important;
    color: #fff !important;
}

/* Books grid */
#books-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 40px;
}
#books-grid .book-card {
    display: inline-block !important;
    width: 280px;
    vertical-align: top;
    text-decoration: none;
}
#books-grid .book-card.hidden {
    display: none !important;
}


.content_slider.carousel .content_slider_ul .content_slider_li {
    aspect-ratio: 1288 / 1920;
    height: auto !important;
}
.content_slider.carousel .content_slider_ul .content_slider_li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}


/* Slider carousel - full poster aspect ratio */
.content_slider.carousel .content_slider_ul {
    height: auto !important;
}
.content_slider.carousel .content_slider_ul .content_slider_li {
    aspect-ratio: 1288 / 1920;
    height: auto !important;
}
.content_slider.carousel .content_slider_ul .content_slider_li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
}