@import 'common.css';

.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 0; }
.page-header h1 { font-family: var(--font-heading); font-size: 28px; font-weight: 600; color: var(--color-ink); }
.search-form { display: flex; gap: 12px; }
.search-form input { padding: 12px 18px; border: 1px solid var(--light-border); border-radius: 14px; width: 240px; font-family: inherit; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(8px); }
.search-form button { padding: 12px 24px; background: linear-gradient(145deg, #d4728f, var(--color-primary)); color: #fff; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; font-weight: 500; transition: transform 0.2s; box-shadow: 0 4px 16px rgba(199, 91, 122, 0.25); }
.search-form button:hover { transform: translateY(-1px); opacity: 0.95; }

.jobs-section { margin-bottom: 80px; }
.job-list { display: flex; flex-direction: column; gap: 16px; }
.job-card {
    position: relative;
    background: rgba(255, 252, 254, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 26px 28px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    color: inherit;
    transition: all 0.28s ease;
    box-shadow: 0 4px 24px rgba(199, 91, 122, 0.07);
    border-left: 4px solid rgba(199, 91, 122, 0.22);
}
.job-card-stretch { position: absolute; inset: 0; z-index: 1; }
.job-publisher { pointer-events: auto; }
.job-publisher .publisher-link { position: relative; z-index: 2; }
.job-card:hover {
    box-shadow: 0 14px 40px rgba(199, 91, 122, 0.12);
    border-left-color: var(--color-primary);
    border-color: rgba(255, 200, 218, 0.85);
    text-decoration: none;
    color: inherit;
    transform: translateY(-3px);
}
.job-main { flex: 1; min-width: 200px; position: relative; pointer-events: none; }
.job-main h4 { font-size: 18px; margin: 0 0 8px; color: var(--color-ink); line-height: 1.35; }
.job-main .desc { color: var(--color-ink-muted); font-size: 14px; margin: 0 0 12px; line-height: 1.65; }
.job-meta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.job-meta .salary { color: var(--color-success); font-weight: 700; font-size: 16px; }
.job-meta .location, .job-meta .type, .job-meta .job-date { color: var(--color-ink-muted); font-size: 13px; }
.job-publisher {
    position: relative;
    flex-shrink: 0;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    border: 1px solid var(--light-border);
    color: var(--color-primary);
    font-size: 14px;
}