{# Masonry Grid Initialization Partial #}
{# Include this partial on pages that need Masonry layout for card grids #}
{# Usage: Add data-masonry='{"percentPosition": true}' to your grid container #}

<script src="/js/vendor/masonry.pkgd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all Masonry grids on the page
    var grids = document.querySelectorAll('[data-masonry]');
    grids.forEach(function(grid) {
        try {
            var options = JSON.parse(grid.dataset.masonry);
            new Masonry(grid, options);
        } catch (e) {
            console.error('Masonry initialization error:', e);
            // Fallback to default options
            new Masonry(grid, {
                percentPosition: true,
                itemSelector: '.card'
            });
        }
    });
});
</script>