/* jobs.css — Vacatures + Stage public pages */

.jobs-intro { max-width: 720px; margin: 0 auto 56px; font-size: 1.08rem; color: var(--muted); line-height: 1.7; text-align: center; }

.jobs-section-title { font-size: 1.6rem; color: var(--navy); margin: 48px 0 24px; }
.jobs-section-title:first-of-type { margin-top: 0; }

.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-bottom: 24px; }

.job-card { display: block; padding: 28px 26px 24px; background: #fff; border-radius: var(--radius-card); box-shadow: 0 4px 18px rgba(20, 33, 61, 0.06); text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
.job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 33, 61, 0.12); text-decoration: none; }

.job-card__badge { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 50px; margin-bottom: 14px; }
.job-card__badge--vacature { background: rgba(20, 33, 61, 0.08); color: var(--navy); }
.job-card__badge--stage { background: rgba(193, 154, 91, 0.15); color: #8c8870; }

.job-card__title { font-size: 1.2rem; color: var(--navy); margin: 0 0 10px; line-height: 1.3; }
.job-card__desc { font-size: 0.95rem; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.job-card__meta span { position: relative; }
.job-card__meta span + span::before { content: "·"; position: absolute; left: -10px; }
.job-card__cta { font-size: 0.92rem; color: #8c8870; font-weight: 600; }

.jobs-empty { text-align: center; padding: 60px 20px; max-width: 560px; margin: 0 auto; }
.jobs-empty h2 { font-size: 1.5rem; color: var(--navy); margin-bottom: 12px; }
.jobs-empty p { color: var(--muted); line-height: 1.7; }

/* Detail page */
.job-detail { display: grid; grid-template-columns: 1fr 320px; gap: 48px; }
@media (max-width: 900px) { .job-detail { grid-template-columns: 1fr; } }

.job-detail__body { font-size: 1rem; line-height: 1.8; color: var(--text); }
.job-detail__body h2 { font-size: 1.4rem; color: var(--navy); margin: 32px 0 12px; }
.job-detail__body h3 { font-size: 1.15rem; color: var(--navy); margin: 24px 0 10px; }
.job-detail__body ul { padding-left: 22px; margin: 12px 0 20px; }
.job-detail__body li { margin-bottom: 8px; }

.job-aside { position: sticky; top: 110px; align-self: start; padding: 28px 26px; background: #fff; border-radius: var(--radius-card); box-shadow: 0 4px 18px rgba(20, 33, 61, 0.06); }
.job-aside h3 { font-size: 1.05rem; color: var(--navy); margin: 0 0 16px; }
.job-aside dl { margin: 0 0 22px; }
.job-aside dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 12px; }
.job-aside dd { font-size: 0.96rem; color: var(--navy); margin: 2px 0 0; }
.job-aside .apply-btn { display: block; width: 100%; padding: 14px 18px; background: var(--gold); color: #fff; border-radius: 8px; text-align: center; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.job-aside .apply-btn:hover { background: #8c8870; color: #fff; text-decoration: none; }
.job-aside .contact-line { display: block; font-size: 0.92rem; color: var(--muted); margin-top: 12px; text-align: center; }
.job-aside .pdf-btn { display: block; width: 100%; padding: 12px 16px; margin-top: 14px; background: #fff; color: var(--navy); border: 1.5px solid var(--navy); border-radius: 8px; text-align: center; font-weight: 600; text-decoration: none; font-size: 0.95rem; transition: background 0.2s, color 0.2s; }
.job-aside .pdf-btn:hover { background: var(--navy); color: #fff; text-decoration: none; }

/* Stage landing extras */
.stage-hero-card { padding: 32px 28px; background: linear-gradient(135deg, rgba(193, 154, 91, 0.08), rgba(20, 33, 61, 0.04)); border-radius: var(--radius-card); border: 1px solid rgba(193, 154, 91, 0.15); margin-bottom: 36px; }
.stage-hero-card h2 { color: var(--navy); margin: 0 0 8px; }
.stage-hero-card p { color: var(--muted); }