/* Location Job Search - Layout Styles */
/* Prefix: ljs- */

.ljs-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px; /* Corresponds to Bootstrap's gutter */
}

.ljs-main-content {
    grid-column: 1 / -1; /* Full width on mobile */
}

.ljs-sidebar {
    grid-column: 1 / -1; /* Full width on mobile */
}

.ljs-stats-grid {
    display: grid;
    gap: 1rem; /* Spacing between items */
}

/* On medium screens and up (like col-md-*), display as 3 columns */
@media (min-width: 768px) {
    .ljs-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop layout */
@media (min-width: 992px) {
    .ljs-main-content {
        grid-column: 1 / 9; /* 8 columns */
    }

    .ljs-sidebar {
        grid-column: 9 / -1; /* 4 columns */
    }
}