/* Masonry Layout for Content Cards */
/* Cards have natural heights and flow dynamically in two columns on desktop */

@media (min-width: 768px) {
    #contents-container {
        column-count: 2 !important;
        column-gap: 1.5rem !important;
        display: block !important;
        /* Override any grid display */
    }
}

.content-card {
    break-inside: avoid;
    cursor: grab;
    user-select: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.content-card:hover {
    background-color: var(--md-sys-color-surface-container);
}

.content-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.content-card.drag-over {
    background-color: var(--md-sys-color-primary-container);
    transform: scale(1.02);
}