/*
   ===================================================================
   ||                                                               ||
   ||      N E O N   N E X U S   I N T E R F A C E   S T Y L E S    ||
   ||                                                               ||
   ||   Crafted from forgotten data streams & re-synchronized.      ||
   ||   No past, no future, only the vibrant present of design.     ||
   ||                                                               ||
   ===================================================================
*/

/* ~~~~~~~~~~~~~~ Hub Grid: The Card Nexus ~~~~~~~~~~~~~~ */
/* Styles for the connector grid itself, where cards are displayed */
/* (Originally from css/layout/hub.css) */

.connector-grid {
    display: grid;
    /* Responsive grid: min 280px width for cards, max 1fr (take available space) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg, 20px); /* Gap between cards, with fallback */
    padding: var(--spacing-xs, 5px) 0; /* Small padding around the grid */
}

/* Responsive adjustments for the hub grid */
@media (max-width: 900px) { /* Adjust breakpoint as needed */
    .connector-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--spacing-md, 15px);
    }
}

@media (max-width: 600px) { /* Further adjustment for smaller screens */
    .connector-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--spacing-md, 15px);
    }
}

@media (max-width: 400px) { /* Single column for very small screens */
    .connector-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md, 15px);
    }
}