/* ==================== SHARED JOB LIST (home, job detail, employer profile) ==================== */

.job-list {
    max-width: var(--gj-max-width);
    margin: 0 auto;
    padding: 0 var(--gj-page-px) var(--gj-space-2xl);
    list-style: none;
}

.job-row {
    display: flex;
    align-items: flex-start;
    gap: var(--gj-space-md);
    padding: var(--gj-space-lg) 0;
    border-bottom: 1px solid var(--gj-border-light);
    transition: background var(--gj-transition-fast);
    text-decoration: none;
    color: inherit;
}

.job-row:first-child {
    border-top: 1px solid var(--gj-border-light);
}

.job-row:hover {
    background: var(--gj-bg-warm);
    margin: 0 calc(var(--gj-space-sm) * -1);
    padding-left: var(--gj-space-sm);
    padding-right: var(--gj-space-sm);
    border-radius: var(--gj-radius-md);
}

.job-row-featured {
    background: var(--gj-accent-subtle);
    margin: 0 calc(var(--gj-space-sm) * -1);
    padding-left: var(--gj-space-sm);
    padding-right: var(--gj-space-sm);
    border-radius: var(--gj-radius-md);
    border-bottom-color: transparent;
}

.job-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--gj-radius-md);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--gj-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gj-text-xl);
    overflow: hidden;
}

.job-logo img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.job-info {
    flex: 1;
    min-width: 0;
}

.job-title {
    font-size: var(--gj-text-base);
    font-weight: 600;
    color: var(--gj-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-employer {
    font-size: var(--gj-text-sm);
    color: var(--gj-text-secondary);
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gj-space-2xs);
    margin-top: var(--gj-space-xs);
}

.job-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gj-space-2xs);
    flex-shrink: 0;
    text-align: right;
}

.job-location {
    font-size: var(--gj-text-sm);
    color: var(--gj-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.job-salary {
    font-size: var(--gj-text-xs);
    font-weight: 600;
    color: var(--gj-brand);
}

.job-date {
    font-size: var(--gj-text-xs);
    color: var(--gj-text-muted);
}


/* ==================== EMPTY STATE (within job list context) ==================== */

.job-list .empty-state {
    text-align: center;
    padding: var(--gj-space-3xl) var(--gj-space-md);
    color: var(--gj-text-muted);
}

.job-list .empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--gj-space-md);
}

/* ==================== LOAD MORE ==================== */

.job-list-more {
    max-width: var(--gj-max-width);
    margin: 0 auto var(--gj-space-2xl);
    padding: 0 var(--gj-page-px);
    text-align: center;
}


/* ==================== RESPONSIVE ==================== */

@media (max-width: 480px) {
    .job-row {
        flex-wrap: wrap-reverse;
        align-items: flex-start;
        gap: var(--gj-space-sm) var(--gj-space-lg);
    }

    .job-meta {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        margin-top: var(--gj-space-xs);
        width: 100%;
    }

    .job-location {
        font-size: var(--gj-text-xs);
    }
}