/* --- ORIGINAL STYLES --- */
.bc-filter-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
}

button.bc-tab {
    color:#27272a;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;
    opacity: .6;
    transition: 0.3s; /* Smooth hover/active transition */
    border-radius: 0px;
}
button.bc-tab:hover {
    color:var(--cm-color-2,#0fbab4);
    background: none;   
    background-color: transparent;
}

.bc-tab.active {
    opacity: 1;
    color: var(--cm-color-2,#0fbab4);
    border-bottom: 2px solid var(--cm-color-2,#0fbab4);
    background: none;
}

.bc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bc-post img {
    width: 100%;
    height: auto;
}

.bc-post h3 {
    font-size: 16px;
    margin-top: 8px;
}
.bc-post a {
    color:#27272a;
    background-color: none;
}
.bc-post a:hover {
    color: var(--cm-color-1,#207daf);
}

/* --- NEW PRELOAD & ANIMATION LOGIC --- */

/* Hide all panes by default */
.bc-filter-pane {
    display: none; 
}

/* Only the pane with .active or currently shown via JS will be visible */
.bc-filter-pane.active {
    display: block; 
}

/* Fade-in effect for instant switching */
.bc-filter-pane {
    animation: bcFadeIn 0.4s ease;
}
/* Container for the thumbnail to enforce same height */
.bc-thumb-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Change to 1/1 for squares or 4/3 as preferred */
    overflow: hidden;
    border-radius: 4px; /* Optional: rounded corners */
    margin-bottom: 10px;
}

/* Force the image to fill the wrapper perfectly */
.bc-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crops the image to fill the area without stretching */
    display: block;
    transition: transform 0.3s ease;
}

/* Optional: Zoom effect on hover */
.bc-post-link:hover img {
    transform: scale(1.05);
}

/* Remove default link styling for the image wrapper */
.bc-post-link {
    display: block;
    text-decoration: none;
}


@keyframes bcFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- SMALL MOBILE TWEAK --- */
@media (max-width: 480px) {
    .bc-grid {
        grid-template-columns: 1fr; /* Full width on very small phones */
        gap: 20px;
    }
}