/* css/components/book-cover.css */

.bookshelf { 
    display: flex !important; /* Force flexbox layout */
    flex-direction: row;      /* Ensure horizontal flow */
    flex-wrap: wrap;          /* Allow wrapping to next line */
    justify-content: center;  /* Center items in the row */
    gap: 60px;                /* Space between books */
    padding: 40px 0; 
    perspective: 1000px; 
    width: 100%;
}

.book-cover {
    /* STRICT SIZING */
    width: 220px !important;
    height: 330px !important;
    flex: 0 0 220px !important; /* Don't grow, don't shrink, stay 220px */
    
    border-radius: 2px 6px 6px 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    
    /* Default Dark Base */
    background: #2D3748; 
    color: #F7FAFC;
    box-shadow: 
        inset 4px 0 0 rgba(255,255,255,0.1), /* Spine highlight */
        inset -4px 0 0 rgba(0,0,0,0.2), /* Edge shadow */
        5px 5px 15px rgba(0,0,0,0.15); /* Drop shadow */
}

/* The Spine Effect */
.book-cover::before {
    content: ''; 
    position: absolute; 
    left: 12px;
    top: 0; 
    bottom: 0; 
    width: 2px;
    background-color: rgba(0,0,0,0.2);
}

.book-cover:hover { 
    transform: translateY(-8px) rotateY(-5deg);
    box-shadow: 
        inset 4px 0 0 rgba(255,255,255,0.1),
        inset -4px 0 0 rgba(0,0,0,0.2),
        15px 15px 30px rgba(0,0,0,0.2);
}

.book-title { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.4rem; 
    font-weight: 500; 
    line-height: 1.2; 
    margin-bottom: 12px;
    letter-spacing: 0.02em;
    color: #FFF;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.book-author { 
    font-family: 'Inter', sans-serif;
    font-weight: 400; 
    font-size: 12px; 
    color: rgba(255,255,255,0.7); 
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* --- Sophisticated Color Themes --- */

/* Likkutei Sichos: Deep Navy */
#likkutei-sichos { 
    background-color: #1a365d; 
    background-image: linear-gradient(135deg, #1a365d 0%, #2a4365 100%);
    border: 1px solid #2c5282;
}

/* Maamorim: Deep Maroon/Burgundy */
#maamorim { 
    background-color: #742a2a; 
    background-image: linear-gradient(135deg, #742a2a 0%, #9b2c2c 100%);
    border: 1px solid #9b2c2c;
}

/* Sichos Kodesh: Deep Forest Green */
#sichos-kodesh { 
    background-color: #234e52; 
    background-image: linear-gradient(135deg, #234e52 0%, #285e61 100%);
    border: 1px solid #319795;
}