/* =====================================================
   Jobs Page Styles (specific to jobs.html)
   Annota v2.2 — Rose Porcelain
===================================================== */

/* ---------- Page background (subtle blooms) ---------- */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.9;
  background:
    radial-gradient(50vmax 38vmax at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%),
    radial-gradient(44vmax 36vmax at -10% 95%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%);
}

/* ---------- Header (title + meta) ---------- */
.page-head { padding:32px 0 8px }
.page-title { display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap }
.page-title h1 { font-size: clamp(22px, 3vw, 30px); letter-spacing:-.2px; margin:0 }
.meta { color:var(--muted); font-size:14px }

/* ---------- Filters Card ---------- */
.filters {
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:22px; box-shadow:var(--shadow); padding:16px; margin:14px 0 10px;
  display:block;
}

/* Always-on-top search bar */
.search-top {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  margin-bottom:8px; width:100%;
}

/* Mobile “Filters” toggle */
.filters-toggle{
  display:none;
  width:100%;
  align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:800;
}
.filters-toggle .chev{ transition: transform .2s ease; }
/* Open = ▲ (up), Closed = ▼ (down) */
.filters-toggle .chev{ transform: rotate(180deg); }
.filters.is-collapsed .filters-toggle .chev{ transform: rotate(0deg); }

/* Filters grid (EQUAL columns on desktop) */
.filters-grid {
  display:grid; gap:10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.filters-grid > * { min-width: 0; }
.filters-grid .field,
.filters-grid .filters-actions { width: 100%; }

/* Make “Clear” fill its column */
.filters-actions { display:flex; gap:8px; justify-content:flex-end }
.filters-actions .btn { width: 100%; }

/* Tablet & down: stack into two / one columns as before */
@media (max-width: 980px){
  .filters-grid{ grid-template-columns:1fr 1fr }
}

/* --- Phone layout --- */
@media (max-width: 520px){
  .filters-toggle{ display:flex; }
  .filters-grid{ grid-template-columns: 1fr; }
  .filters.is-collapsed .filters-grid{ display:none; }
}

.field {
  position: relative;
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
}
.field input { border:0; outline:0; width:100%; font:inherit; color:var(--ink) }

/* --- Native select baseline (kept for a11y & JS) --- */
.sel {
  appearance:none; border:0; background:transparent; padding:0; font:inherit; color:var(--ink);
  width:100%;   
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
}

/* -----------------------------------------------
   Custom SELECT (replaces native visual)
   - We visually hide the <select> and render a faux control
------------------------------------------------- */
.select {
  position: relative;
  flex: 1 1 auto;
  min-height: 24px;
}
.select__button {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  background: transparent;
  border:0;
  padding:0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.select__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.select__chev {
  width: 18px; height: 18px; flex: 0 0 18px;
  transition: transform .18s ease;
}
.select[aria-expanded="true"] .select__chev { transform: rotate(180deg); }

.select__list {
  position: absolute; z-index: 20;
  top: calc(100% + 8px); left: -12px; right: -12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 6px;
  display: none;
  max-height: 280px;
  overflow: auto;
}
.select[aria-expanded="true"] .select__list { display:block; }

.select__option {
  display:flex; align-items:center; gap:8px;
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:0; background:transparent;
  font:inherit; color:var(--ink);
  cursor:pointer;
  text-align:left;
}
.select__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  font-weight: 700;
}
.select__option:hover {
  background: color-mix(in srgb, var(--line) 60%, transparent);
}

/* Hide the original select but keep it accessible to AT if needed */
.sel.sel--visually-hidden {
  position:absolute !important;
  inset:auto auto auto 0 !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border:0 !important;
}

.icon { width:18px; height:18px; }

.toggle {
  position:relative; width:44px; height:26px; background:#eee;
  border-radius:999px; border:1px solid var(--line);
}
.toggle::after {
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:.2s;
}
.toggle[data-on="1"] { background: 
 color-mix(in srgb, var(--accent) 10%, #fff); }
.toggle[data-on="1"]::after { transform:translateX(18px) }

.filters-toggle span{
   font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
   font-weight: 600;
}

/* -----------------------------------------------
   FAVORITES filter button (in-bar)
   – Matches look/feel of other filter controls
------------------------------------------------- */
.fav-filter {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font: inherit;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  min-height: 40px;
}
.fav-filter img { width:18px; height:18px; display:block; }
/* swap outline/filled icons when active */
.fav-filter .heart-filled { display:none; }
.fav-filter.chip--active .heart-outline { display:none; }
.fav-filter.chip--active .heart-filled  { display:block; }

.fav-filter:hover { background: color-mix(in srgb, var(--line) 55%, transparent); }
.fav-filter.chip--active {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}

/* (legacy) generic chip container */
.chips { display:flex; flex-wrap:wrap; gap:8px; padding:8px 4px }

/* ---------- Results ---------- */
.results { padding:12px 0 56px }

/* Primary jobs grid */
.jobs { display:grid; gap:14px }
@media(min-width: 920px){ .jobs{grid-template-columns:1fr 1fr} }

/* Also ensure #jobs-list.jobs behaves if used directly */
#jobs-list.jobs { display:grid; gap:14px }
@media(min-width:920px){ #jobs-list.jobs{ grid-template-columns:1fr 1fr } }

/* Native .job cards */
.job {
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:20px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-rows:auto auto 1fr auto; gap:10px;

  /* NEW: smooth lift animation */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;

  /* ensure each card stretches to the grid row height */
  height: 100%;
}
/* Ensure title + heart share one row with the heart on the right */
.job__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem;
}
.job__head .job-title { margin:0; flex:1; }
.heart-btn { border:0; background:transparent; cursor:pointer; padding:4px; margin-left:.25rem; line-height:0; }
.heart-btn img { width:20px; height:20px; transition: transform .15s ease; }
.heart-btn[aria-pressed="true"] img { transform: scale(1.05); }

/* Hover/focus: remove scale to prevent text blur */
@media (hover: hover) and (pointer: fine){
  .job:hover {
    transform: translateY(-2px); /* removed scale(1.01) */
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  }
}
.job:focus-within {
  transform: translateY(-2px); /* removed scale(1.01) */
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}

.job-title { font-size:18px; font-weight:700; margin:0 }
.job-meta {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  color:var(--muted); font-size:13px;
}
.dot { width:4px; height:4px; background:#c3c1c6; border-radius:50% }

/* --- Truncated description: equal card heights --- */
.desc { 
  color:color-mix(in srgb, var(--ink) 85%, transparent); 
  font-size:14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* default clamp (overridden by .clamp-* classes) */
  -webkit-line-clamp: 4;
  /* reserve height so cards line up even before paint */
  line-height: 1.6;
}
.desc.clamp-3 { -webkit-line-clamp: 3; min-height: calc(1.6em * 3); }
.desc.clamp-4 { -webkit-line-clamp: 4; min-height: calc(1.6em * 4); }
.desc.clamp-5 { -webkit-line-clamp: 5; min-height: calc(1.6em * 5); }

.tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px }
.tag {
  background:color-mix(in srgb, var(--accent) 10%, #fff);
  color:var(--accent-ink);
  border:1px solid color-mix(in srgb, var(--accent) 30%, #fff);
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px;
}

/* Apply button with shine effect */
.apply {
  justify-self:start; display:inline-flex; align-items:center; gap:8px;
  padding: clamp(8px, 2.8vw, 10px) clamp(12px, 3.6vw, 14px);
  border-radius:999px; border:1px solid var(--line);
  background:var(--accent); color:var(--accent-ink); font-weight:800;
  margin-top: 5px;
  font-size: clamp(14px, 3.6vw, 15px);
  line-height:1;

  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.apply::before {
  content:"";
  position:absolute; top:-180%; left:-60%;
  width:40%; height:300%;
  transform: rotate(25deg) translateX(-250%);
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity:.8;
  pointer-events:none;
}
@keyframes btn-shine {
  from { transform: rotate(25deg) translateX(-260%); }
  to   { transform: rotate(25deg) translateX(350%); }
}
.job:hover .apply::before,
#jobs-list .card:hover .apply::before {
  animation: btn-shine .55s ease;
}

/* ---------- Pagination (two systems supported) ---------- */
.pager { display:flex; gap:6px; align-items:center; justify-content:center; padding:20px 0 }
/* Old pager style */
.page-btn {
  padding:8px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; font-weight:700;
}
.page-btn.active {
  background:var(--accent); color:var(--accent-ink);
  border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
}
/* jobs.js-created .pill buttons */
.pager .pill{
  padding:8px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; font-weight:700;
}
.pager .pill[aria-current="page"]{
  background:var(--accent); color:var(--accent-ink);
  border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
}

/* Bridge styles for legacy .card markup */
#jobs-list .card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:20px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-rows:auto auto 1fr auto; gap:10px;

  /* NEW: same hover animation for legacy cards */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine){
  #jobs-list .card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  }
}
#jobs-list .card:focus-within {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}
#jobs-list .card h3{ font-size:18px; font-weight:700; margin:0 }
#jobs-list .card .meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  color:var(--muted); font-size:13px;
}
#jobs-list .card .desc{ color:color-mix(in srgb, var(--ink) 85%, transparent); font-size:14px }
#jobs-list .card .chip, #jobs-list .card .apply{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--accent); color:var(--accent-ink); font-weight:900; text-decoration:none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .job, #jobs-list .card{ transition:none }
  .apply::before{ animation:none !important }
}

.chip span{
  width: 100%;
  text-align: start;
  font-weight: 400;
  font-size: 16px;
}