/* ================================================================
   VACANCIES PAGE — vacancies.css
   ================================================================ */

/* ── Banner ── */
.vac-banner {
  background: var(--surface-low); padding: 80px 32px;
  position: relative; overflow: hidden;
}

.vac-banner__eyebrow {
  font-size:.75rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--crimson);
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; position:relative; z-index:1;
}
.vac-banner__h1 {
  font-family:var(--f-display); font-size:2.5rem; font-weight:800;
  color:var(--primary); line-height:1.1; letter-spacing:-.02em;
  margin-bottom:10px; position:relative; z-index:1;
}
.vac-banner__sub { font-size:1rem; color:var(--on-surface-var); position:relative; z-index:1; max-width:60ch; }
@media(max-width:768px){ .vac-banner { padding:56px 20px; } .vac-banner__h1 { font-size:1.875rem; } }

/* ── Filter bar ── */
.vac-filter-bar {
  background:#fff; border-bottom:1px solid var(--outline-var);
  padding:16px 32px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  position:sticky; top:72px; z-index:500;
  box-shadow:0 2px 8px rgba(1,21,80,.06);
}
.vac-filter-btn {
  padding:7px 18px; border-radius:9999px; border:1px solid var(--outline-var);
  background:#fff; font-size:.8125rem; font-weight:700; color:var(--on-surface-var);
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.vac-filter-btn.active,
.vac-filter-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.vac-filter-count {
  margin-left:6px; background:rgba(149,3,41,.12); color:var(--crimson);
  border-radius:9999px; padding:1px 8px; font-size:.7rem; font-weight:800;
}
.vac-filter-btn.active .vac-filter-count { background:rgba(255,255,255,.2); color:#fff; }
.vac-filter-btn--empty { opacity:.45; cursor:default; pointer-events:none; }
@media(max-width:768px){ .vac-filter-bar { padding:12px 20px; top:72px; } }

/* ── Main layout ── */
.vac-body { padding:48px 32px 80px; background:#fff; min-height:60vh; }
@media(max-width:768px){ .vac-body { padding:32px 20px 56px; } }

.vac-section-label {
  font-size:.75rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--crimson);
  display:flex; align-items:center; gap:8px;
  margin-bottom:24px; padding-bottom:12px;
  border-bottom:1px solid var(--outline-var);
}
.vac-grid { display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }

/* ── Vacancy card ── */
.vac-card {
  background:#fff; border:1px solid var(--outline-var); padding:28px 32px;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px;
  transition:box-shadow .2s, transform .2s;
}
.vac-card:hover { box-shadow:0 6px 28px rgba(1,21,80,.1); transform:translateY(-2px); }
@media(max-width:768px){ .vac-card { flex-direction:column; gap:20px; clip-path:none; border-radius:8px; padding:22px; } }

.vac-card__left { flex:1; min-width:0; }
.vac-card__dept {
  font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--crimson); margin-bottom:6px;
}
.vac-card__title {
  font-family:var(--f-display); font-size:1.1875rem; font-weight:700;
  color:var(--primary); margin-bottom:10px; line-height:1.3;
}
.vac-card__meta {
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px;
}
.vac-card__meta-item {
  display:flex; align-items:center; gap:5px;
  font-size:.8125rem; color:var(--on-surface-var);
}
.vac-card__meta-item i { color:var(--crimson); font-size:11px; }
.vac-card__excerpt {
  font-size:.9rem; color:var(--on-surface-var); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Type badge */
.vac-type {
  display:inline-block; padding:3px 12px; border-radius:9999px;
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.vac-type--Full-Time  { background:rgba(46,125,50,.1);  color:#2e7d32; }
.vac-type--Part-Time  { background:rgba(21,101,192,.1); color:#1565c0; }
.vac-type--Contract   { background:rgba(230,81,0,.1);   color:#e65100; }
.vac-type--Internship { background:rgba(106,27,154,.1); color:#6a1b9a; }
.vac-type--Volunteer  { background:rgba(198,40,40,.1);  color:#c62828; }

.vac-card__right {
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  flex-shrink:0; min-width:160px;
}
@media(max-width:768px){ .vac-card__right { align-items:flex-start; flex-direction:row; flex-wrap:wrap; min-width:0; } }

.vac-closing {
  font-size:.8rem; text-align:right; line-height:1.5;
}
.vac-closing__label { color:var(--on-surface-var); display:block; }
.vac-closing__date  { font-weight:700; color:var(--primary); }
.vac-closing__date--soon    { color:#e65100; }
.vac-closing__date--expired { color:#c62828; }
.vac-closing__date--open    { color:var(--crimson); }

.vac-apply-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; background:var(--crimson); color:#fff;
  font-size:.8125rem; font-weight:700; text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:filter .2s;
}
.vac-apply-btn:hover { filter:brightness(1.1); }
.vac-apply-btn--expired { background:var(--on-surface-var); cursor:default; filter:none; }

/* ── Detail modal / expanded view ── */
.vac-detail {
  display:none; border-top:1px solid var(--outline-var);
  margin-top:20px; padding-top:20px;
}
.vac-detail.open { display:block; }
.vac-detail h4 {
  font-family:var(--f-display); font-size:.9375rem; font-weight:700;
  color:var(--primary); margin-bottom:8px; margin-top:16px;
}
.vac-detail h4:first-child { margin-top:0; }
.vac-detail p, .vac-detail li {
  font-size:.9rem; color:var(--on-surface-var); line-height:1.75;
}
.vac-detail ul { padding-left:18px; }
.vac-detail li { margin-bottom:4px; }
.vac-detail-toggle {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8125rem; font-weight:700; color:var(--primary);
  background:none; border:none; cursor:pointer; padding:0; margin-top:12px;
}
.vac-detail-toggle:hover { color:var(--crimson); }

/* ── Empty state ── */
.vac-empty {
  text-align:center; padding:64px 24px;
  background:#fff; border:1px dashed var(--outline-var); border-radius:8px;
}
.vac-empty i { font-size:2.5rem; color:var(--outline-var); margin-bottom:16px; display:block; }
.vac-empty h3 { font-family:var(--f-display); font-size:1.25rem; color:var(--primary); margin-bottom:8px; }
.vac-empty p { font-size:.9375rem; color:var(--on-surface-var); line-height:1.65; }

/* ── CTA ── */
.vac-cta {
  padding:80px 32px; background:var(--primary);
  text-align:center; position:relative; overflow:hidden;
}
.vac-cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(149,3,41,.15), transparent 60%);
  pointer-events:none;
}
.vac-cta__h2 { font-family:var(--f-display); font-size:2rem; font-weight:800; color:#fff; margin-bottom:12px; position:relative; z-index:1; }
.vac-cta__sub { font-size:1rem; color:rgba(255,255,255,.78); max-width:52ch; margin:0 auto 32px; line-height:1.7; position:relative; z-index:1; }
.vac-cta__btns { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; position:relative; z-index:1; }
.vac-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; font-family:var(--f-body); font-size:.9375rem; font-weight:700;
  text-decoration:none; transition:all .2s;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.vac-btn:hover { filter:brightness(1.08); transform:translateY(-2px); }
.vac-btn--crimson { background:var(--crimson); color:#fff; }
.vac-btn--outline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); clip-path:none; border-radius:2px; }