/* Core expandable grid logic */
.card-expandable-wrapper {
    display: grid;
    grid-template-rows: 0fr; /* Starts collapsed */
    transition: grid-template-rows 0.4s ease-out;
}

/* When the "expanded" class is added via JS */
.card-expandable-wrapper.expanded {
    grid-template-rows: 1fr; /* Expands to fit content */
}

/* Inner content logic to handle visibility */
.card-expandable-inner {
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.card-expandable-wrapper.expanded .card-expandable-inner {
    opacity: 1;
    transition: opacity 0.5s ease-in 0.2s; /* Slight delay so it fades in after unfolding */
}

/* Hover effect for the new button */
.view-details-btn:hover {
    background-color: var(--gray-dark) !important;
    color: #ffffff !important;
}