/* =====================================================================
 * MoversBoard — List View
 *
 * Modifier on .jobs-grid that flips each .job-card from a vertical block
 * into a horizontal row:
 *
 *   [type+id+price]   [route]   [meta stacked]   [footer stacked]
 *      flex 0          flex 1      flex 0           flex 0
 *
 * Inherits everything else from grid-view.css (.job-card geometry, status
 * badge, type-badges, etc.). On mobile (<=768px) the modifier is no-op —
 * cards revert to the vertical block stack.
 * ===================================================================== */

.jobs-grid.list-view {
    grid-template-columns: 1fr;
}

.list-view .job-card {
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 16px;
}

.list-view .job-card-top    { flex: 0 0 auto; flex-direction: column; gap: 4px; }
.list-view .job-route       { flex: 1; }
.list-view .job-meta        { border-top: none; padding-top: 0; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.list-view .job-card-footer { border-top: none; padding-top: 0; flex-direction: column; gap: 4px; flex: 0 0 auto; }

/* ---------- Responsive: collapse back to vertical on small screens ---------- */
@media (max-width: 768px) {
    .list-view .job-card {
        flex-direction: column;
        align-items: stretch;
    }
}