/* =========================================================
   jobs-glass.css · v3 – grid layout, premium compact
   2025-07-08
   ========================================================= */

/* ---------- VARS ---------------------------------------- */
:root{
  --c-accent:#69a06a;
  --c-accent-hov:#4f8850;
  --c-accent-sec:#30abaf;
  --c-text:#303030;
  --radius:22px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.10);
  --shadow-md:0 10px 32px rgba(0,0,0,.14);
  --glass-bg:hsla(0,0%,100%,.40);
}

/* ---------- RESET / BASE -------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Montserrat",sans-serif;
  color:var(--c-text);
  background:url("../img/bg-blur.webp") center/cover fixed, #f5f6f8;
  min-height:100vh;
}

/* ---------- WRAPPER & TITLE ----------------------------- */
.page{
  width:min(1120px,94%);
  margin-inline:auto;
  padding:2.6rem 0 5rem;
  margin-top: 12vh;
}

h1{
  font-size:2rem;font-weight:700;letter-spacing:-.02em;
  text-align:center;color:var(--c-accent);margin-bottom:2.1rem;
  position:relative;
}
h1::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-12px;width:74px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--c-accent-sec),var(--c-accent));
}

/* ---------- FILTER BAR ---------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:1rem 1.2rem;justify-content:center;
  backdrop-filter:blur(15px) saturate(1.25);
  background:var(--glass-bg);border-radius:calc(var(--radius) - 5px);
  box-shadow:var(--shadow-sm);padding:1.2rem 1.6rem;margin-bottom:2.4rem;
}
.filters input,.filters select{
  font:inherit;padding:.55rem 1rem;border:1px solid rgba(0,0,0,.14);
  border-radius:14px;background:#fff;min-width:160px;
}
.filters button{
  font:inherit;padding:.6rem 1.55rem;border:none;border-radius:14px;
  background:var(--c-accent);color:#fff;cursor:pointer;
  transition:background .22s,transform .16s,box-shadow .16s;
}
.filters button:hover{
  background:var(--c-accent-hov);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}

/* =========================================================
   GRID LISTING
   ========================================================= */
.jobs-grid{
  display:grid;gap:1.7rem;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:stretch;
}

/* ---------- CARD ---------------------------------------- */
.job-card{
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;text-decoration:none;color:inherit;
  backdrop-filter:blur(18px) saturate(1.35);
  background:var(--glass-bg);border-radius:var(--radius);
  padding:1.6rem 2rem;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s,transform .25s;
}
.job-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-6px);
}
.job-card::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(135deg,
     rgba(48,171,175,.15) 0%,rgba(105,160,106,.18) 100%);
  mix-blend-mode:overlay;pointer-events:none;
}

.job-card h2{
  font-size:1.25rem;font-weight:700;letter-spacing:-.015em;
  color:var(--c-accent);margin-bottom:.5rem;position:relative;
}
.job-card h2::after{
  content:"";position:absolute;left:0;bottom:-5px;width:40px;height:2px;
  background:var(--c-accent-sec);border-radius:2px;
}
.badge{
  display:inline-block;padding:.22rem .75rem;font-size:.78rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  background:var(--c-accent-sec);color:#fff;border-radius:999px;
  margin:.9rem 0 1rem;
}

.info-line{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;
  font-size:.93rem;color:#3f3f3f;margin-bottom:.5rem;
}
.meta{
  font-size:.8rem;color:#666;display:flex;align-items:center;gap:.35rem;
}
.meta::before{content:"•";color:#999;font-size:.9rem;line-height:0;}

.private{
  margin-top:.5rem;font-size:.84rem;font-style:italic;color:#7a7a7a;
}

/* ---------- RESPONSIVE ---------------------------------- */
@media(max-width:540px){
  .filters{flex-direction:column;gap:.8rem;padding:1rem 1.2rem}
  .filters input,.filters select{width:100%}
}