/* =========================================================
   OPENINGS.CSS — Current Openings page only. Extends careers.css
   (same master careers template: hero-careers, feature-grid, mini-grid,
   flip-grid, timeline-v, dept-grid, faq-grid, cta-band, sticky-apply)
   with the components unique to a job board: glass search/filter bar,
   job cards, department "open positions" count badge, and the saved-job
   bookmark state. Depends on main.css tokens + careers.css primitives.
   ========================================================= */

/* ---------- Section 1: glass search / filter panel ---------- */
.job-search-panel{
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 26px 26px; margin-top:44px;
}
.job-search-row{ display:grid; grid-template-columns: 2fr repeat(4, 1fr) auto; gap:12px; align-items:center; }
@media (max-width: 1100px){ .job-search-row{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .job-search-row{ grid-template-columns: 1fr; } }

.job-search-input{ position:relative; }
.job-search-input i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color: var(--slate-soft); pointer-events:none; }
.job-search-input input{
  width:100%; padding:12px 16px 12px 42px; border-radius:999px; border:1px solid var(--rule);
  background: var(--white); font-family: var(--f-body); font-size:.88rem; color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
}
.job-search-input input:focus{ outline:none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,154,144,.15); }

.job-filter-select{
  width:100%; padding:12px 14px; border-radius:999px; border:1px solid var(--rule);
  background: var(--white); font-family: var(--f-body); font-size:.84rem; color: var(--ink);
  cursor:pointer; transition: border-color .25s;
}
.job-filter-select:focus{ outline:none; border-color: var(--teal); }

.job-search-clear{
  flex-shrink:0; white-space:nowrap; padding:12px 18px; border-radius:999px; border:1px solid var(--rule);
  background:transparent; color: var(--slate-soft); font-size:.84rem; cursor:pointer;
  transition: border-color .25s, color .25s;
}
.job-search-clear:hover{ border-color: var(--teal-deep); color: var(--teal-deep); }

.jobs-count{ margin-top:22px; font-family: var(--f-mono); font-size:.82rem; color: var(--slate-soft); }
.jobs-count strong{ color: var(--ink); }

/* ---------- Section 2: job cards ---------- */
.jobs-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; margin-top:22px; }
@media (max-width: 860px){ .jobs-grid{ grid-template-columns: 1fr; } }

.job-card{ position:relative; height:100%; border-radius: var(--radius-lg); padding:1px; transition: transform .4s var(--ease); }
.job-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(140deg, var(--navy-brand), var(--teal) 70%, var(--teal-soft));
  opacity:0; transition: opacity .5s var(--ease);
}
.job-card:hover{ transform: translateY(-6px); }
.job-card:hover::before{ opacity:1; }
.job-card-inner{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  background: var(--white); border-radius: calc(var(--radius-lg) - 1px);
  padding: 26px 24px; box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease);
}
.job-card:hover .job-card-inner{ box-shadow: var(--shadow-lift); }

.job-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.job-title-row{ display:flex; align-items:center; gap:12px; }
.job-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: var(--paper-dim); color: var(--teal-deep); font-size:1.05rem; transition: transform .4s var(--ease), background .3s, color .3s;
}
.job-card:hover .job-icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.job-title-wrap h3{ font-size:1.02rem; margin:0 0 3px; color: var(--ink); line-height:1.3; }
.job-dept{ font-family: var(--f-mono); font-size:.74rem; color: var(--teal-deep); letter-spacing:.03em; }

.job-save{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid var(--rule);
  background: var(--white); display:grid; place-items:center; color: var(--slate-soft); cursor:pointer;
  transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.job-save:hover{ transform: scale(1.08); }
.job-save.saved{ border-color: var(--teal); color: var(--teal-deep); background: rgba(10,154,144,.1); }

.job-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0; font-size:.78rem; color: var(--slate-soft); }
.job-meta span{ display:inline-flex; align-items:center; gap:6px; }
.job-meta i{ color: var(--teal-deep); font-size:.85em; }

.job-desc{ font-size:.86rem; color: var(--slate-soft); line-height:1.55; margin:0 0 16px; }

.job-skills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.job-skill{
  font-family: var(--f-mono); font-size:.7rem; padding:5px 12px; border-radius:999px;
  background: var(--paper-dim); color: var(--ink); border:1px solid var(--rule);
}

.job-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--rule);
}
.job-location{ font-size:.78rem; color: var(--slate-soft); display:inline-flex; align-items:center; gap:6px; }
.job-location i{ color: var(--teal-deep); }

.jobs-empty{ display:none; text-align:center; padding:70px 20px; color: var(--slate-soft); }
.jobs-empty.show{ display:block; }
.jobs-empty i{ font-size:2rem; color: var(--rule); margin-bottom:14px; display:block; }

/* ---------- Section 3: department "open positions" count badge ---------- */
.dept-card{ cursor:pointer; }
.dept-count{
  display:inline-block; margin-top:8px; font-family: var(--f-mono); font-size:.7rem;
  padding:3px 11px; border-radius:999px; background: rgba(10,154,144,.1); color: var(--teal-deep);
  transition: background .3s, color .3s;
}
.dept-card:hover .dept-count{ background: var(--teal-deep); color:#fff; }