/* --- CARDS PAGE STYLES --- */
.card-media {
    height: 180px; 
    background-color: var(--md-sys-color-surface-container-highest);
    border-radius: 12px; 
    margin-bottom: 16px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--md-sys-color-on-surface-variant); 
    font-size: 48px;
}
.card-actions {
    display: flex; 
    gap: 8px; 
    justify-content: flex-end; 
    margin-top: 16px;
}

/* --- MUSIC NOTE STYLING --- */
.card-horizontal .card-media span {
    font-size: 32px;
    opacity: 0.8;
}

/* --- MASONRY GRID --- */
.masonry-grid {
    column-count: 3; 
    column-gap: 24px;
}
.masonry-item {
    display: inline-block; 
    width: 100%; 
    margin-bottom: 24px;
}
@media (max-width: 900px) { .masonry-grid { column-count: 2; } }
@media (max-width: 600px) { .masonry-grid { column-count: 1; } }

/* --- SEMANTIC CARDS --- */
.card-semantic { border-left: 4px solid; }
.card-success { border-color: var(--md-sys-color-success); background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.card-error { border-color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.card-warning { border-color: var(--md-sys-color-warning); background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }