/* WiseLeaf Books Page Dynamic Images */
/* Enhances existing styles to support background images */

/* Hero Section - Dynamic Background Image Support */
.books-header {
    /* Ensure proper height for hero images */
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* Override existing background */
    background: none !important;
    
    /* Background image defaults (will be overridden by JS) */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* Ensure content is properly positioned */
    position: relative !important;
}

.books-header h1,
.books-header p {
    /* Ensure text is above background when shown */
    position: relative !important;
    z-index: 2 !important;
    margin: 0 auto !important;
}

/* Responsive adjustments - MINIMAL CONTAINER HEIGHT */
@media (max-width: 768px) {
    .books-header {
        min-height: 120px !important;
        height: 120px !important;
        max-height: 120px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .books-header {
        min-height: 100px !important;
        height: 100px !important;
        max-height: 100px !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }
}

/* Loading states */
.books-header[data-loading="true"] {
    background: var(--gradient-main) !important;
}

/* Smooth transitions */
.books-header {
    transition: all 0.3s ease !important;
}

/* CSS-only test - same approach as journals with WebP fallback */
.books-header {
    background-image: url('../images/pages/books-hero.jpg') !important;
    background-image: url('../images/pages/books-hero.webp') !important;
}

/* Hide text for testing */
.books-header h1,
.books-header p {
    display: none !important;
}