:root{
    --book-card-min-height: 240px;
    --book-icon-max-height: 180px;
    --book-footer-fontsize: 0.95rem;
}

/* Card layout */
.book-card {
    min-height: var(--book-card-min-height);
    display: flex;
    flex-direction: column;
}

/* Body centers the icon and expands to make cards equal height */
.book-card .card-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    overflow: hidden;
}

/* Strong responsive rules to override inline width/height and make images larger */
.book-card .book-icon,
.book-card img {
    display: block;
    margin: 0 auto;
    max-width: 100% !important;                /* never overflow horizontally */
    width: auto !important;                    /* preserve aspect ratio */
    height: auto !important;                   /* preserve aspect ratio */
    max-height: var(--book-icon-max-height) !important; /* larger by default */
    object-fit: contain !important;
    border-radius: 12px;                       /* rounded corners */
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: transform .12s ease, box-shadow .12s ease;
}

/* Optional circular icon: add class "rounded-circle" to <img> for perfect circle */
.book-card .book-icon.rounded-circle,
.book-card img.rounded-circle {
    border-radius: 50% !important;
}

/* Subtle hover/active feedback */
.book-card .book-icon:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

/* Footer / title styling */
.book-card .card-footer,
.book-card .book-title {
    background: transparent;
    border-top: 1px solid rgba(0,0,0,.05);
    padding: .5rem .75rem;
    font-size: var(--book-footer-fontsize);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Utility: larger variant when you want an even bigger icon */
.book-card.book-card--large .book-icon {
    max-height: calc(var(--book-icon-max-height) * 1.35) !important;
}

/* Ensure Bootstrap utility .h-100 still applies */
.h-100 { height: 100% !important; }

/* Small screens: reduce min-height and icon max-height so layout fits */
@media (max-width: 576px) {
    :root {
        --book-card-min-height: 160px;
        --book-icon-max-height: 120px;
    }

    .book-card .card-body {
        padding: .4rem;
    }

    .book-card .card-footer,
    .book-card .book-title {
        font-size: .9rem;
        white-space: normal;
    }

    /* slightly reduce shadow on mobile for performance */
    .book-card .book-icon {
        box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    }
}

/* If some cards use iframes, keep them responsive */
.book-card .ratio, .book-card .embed-responsive {
    width: 100%;
    max-height: calc(var(--book-icon-max-height) * 1.6);
}