/* Layout safety */
.all-jobs{ position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.all-jobs--left{ position:relative; z-index:2; padding:40px; border:1px solid #171D28; border-radius:10px; display:flex; flex-direction:column; gap:20px; }
.all-jobs--right{ position:relative; z-index:1; }

/* Filters */
.jobs-filter-title{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.job-filters{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.job-filter{
  width:100%;
  display:flex; justify-content:center; align-items:center;
  padding:10px 12px;
  text-transform:uppercase;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:500; font-size:.875rem; line-height:1;
  border:1px solid #000; border-radius:12px; background:#fff;
  transition:transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.job-filter:hover{ cursor:pointer; transform: translateY(-1px); }
.job-filter--active{
  background: linear-gradient(90deg, #0171A7 0%, #002C41 100%);
  color:#fff; border-color: transparent;
}
.job-filters__clear{ display:inline-block; color:#0C4DA2; text-decoration: underline; font-size:.875rem; }

/* RESULTS – identical to your previous “more-about-btn” button design */
.jobs-results{ min-height: 80px; }
.jobs-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.jobs-loading,
.jobs-empty{
  padding:14px; border:1px dashed #cfd6e0; border-radius:10px; text-align:center; color:#505B6E; font-size:14px;
}

/* Base button */
.job-item.more-about-btn{
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  text-decoration: none;
  color: #333;
  border: 0;
}

/* left suitcase icon */
.job-item.more-about-btn .job-icon{
  width: 24px;
  height: 24px;
  z-index: 5;
}

/* blue bar underlay (starts ~75%) */
.job-item.more-about-btn .btn-text--underlay{
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 75%;
  background: #0171A7;
  z-index: 1;
  transition: width 0.3s ease;
}

/* right triangular notch */
.job-item.more-about-btn .btn-text--underlay::after{
  content: "";
  position: absolute;
  top: 0;
  right: -58px;
  width: 59px;
  height: 46px;
  background: #0171A7;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* title text (white on blue) */
.job-item.more-about-btn .btn-text{
  padding-left: 20px !important;
  padding-right: 60px !important;
  text-align: left;
  justify-content: flex-start;
  position: relative;
  z-index: 5;
  width: calc(100% - 59px);
  background: transparent;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job-item.more-about-btn .btn-text::after{ display: none; }

/* right arrow block image */
.job-item.more-about-btn .btn-image{
  margin-left: auto;
  z-index: 5;
}
.job-item.more-about-btn .btn-image img{
  width: 24px;
  height: 24px;
  transition: filter 0.3s ease;
  z-index: 999;
}

/* hover: bar expands to full width; arrow turns white */
.job-item.more-about-btn:hover .btn-text--underlay{ width: 100%; }
.job-item.more-about-btn:hover img{ filter: brightness(0) saturate(100%) invert(1); }

/* Pagination */
.jobs-pagination{ display:flex; align-items:bottom; gap:10px; margin-top:12px; }
.jobs-pagination button{
  padding:8px 12px; border:1px solid #E5ECF5; border-radius:8px; background:#fff; cursor:pointer;
}
.jobs-pagination button:disabled{ opacity:.5; cursor:not-allowed; }

/* Responsive */
@media (max-width: 1024px){
  .all-jobs{ grid-template-columns: 1fr; }
  .job-filters{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .job-filters{ grid-template-columns: 1fr; }
}
.all-jobs{ position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.all-jobs--left{ position:relative; z-index:1; }   /* was 2 – lowered */
.all-jobs--right{ position:relative; z-index:3; }  /* above left so list is clickable */
/* Layout + overlap fix */
.all-jobs{ position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.all-jobs--left{ position:relative; z-index:1; padding:40px; border:1px solid #171D28; border-radius:10px; display:flex; flex-direction:column; gap:20px; }
.all-jobs--right{ position:relative; z-index:3; }

.jobs-filter-title{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }

/* Filters */
.job-filters{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
.job-filter{
  width:100%; display:flex; justify-content:center; align-items:center;
  padding:10px 12px; text-transform:uppercase; font:500 .875rem/1 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  border:1px solid #000; border-radius:12px; background:#fff; transition:transform .08s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.job-filter:hover{ cursor:pointer; transform: translateY(-1px); }
.job-filter--active{ background: linear-gradient(90deg, #0171A7 0%, #002C41 100%); color:#fff; border-color: transparent; }
.job-filters__clear{ display:inline-block; color:#0C4DA2; text-decoration: underline; font-size:.875rem; }

/* Results list — your original blue button */
.jobs-results{ min-height: 80px; }
.jobs-grid{ display:grid; grid-template-columns: 1fr; gap:10px; }
.jobs-loading,.jobs-empty{ padding:14px; border:1px dashed #cfd6e0; border-radius:10px; text-align:center; color:#505B6E; font-size:14px; }

.job-item.more-about-btn{
  position: relative; display: flex; align-items: center; height: 46px; padding: 0 20px;
  border-radius: 10px; overflow: hidden; background: #FFFFFF; text-decoration: none; color: #333; border: 0;
  pointer-events:auto;
}
.job-item.more-about-btn .job-icon{ width:24px; height:24px; z-index:5; }

/* Blue underlay (75%) + notch */
.job-item.more-about-btn .btn-text--underlay{
  position: absolute; top:0; bottom:0; left:0; width:75%; background:#0171A7; z-index:1; transition: width .3s ease;
}
.job-item.more-about-btn .btn-text--underlay::after{
  content:""; position:absolute; top:0; right:-58px; width:59px; height:46px; background:#0171A7; clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Title */
.job-item.more-about-btn .btn-text{
  padding-left:20px !important; padding-right:60px !important; text-align:left; justify-content:flex-start;
  position:relative; z-index:5; width:calc(100% - 59px); background:transparent; color:#fff;
  font-family:"Inter",sans-serif; font-size:.875rem; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.job-item.more-about-btn .btn-text::after{ display:none; }

/* Right arrow */
.job-item.more-about-btn .btn-image{ margin-left:auto; z-index:5; }
.job-item.more-about-btn .btn-image img{ width:24px; height:24px; transition: filter .3s ease; z-index:999; }

/* Hover */
.job-item.more-about-btn:hover .btn-text--underlay{ width:100%; }
.job-item.more-about-btn:hover img{ filter: brightness(0) saturate(100%) invert(1); }

/* Pagination */
.jobs-pagination{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.jobs-pagination button{ padding:8px 12px; border:1px solid #E5ECF5; border-radius:8px; background:#fff; cursor:pointer; }
.jobs-pagination button:disabled{ opacity:.5; cursor:not-allowed; }

/* Responsive */
@media (max-width:1024px){ .all-jobs{ grid-template-columns:1fr; } .job-filters{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .job-filters{ grid-template-columns: 1fr; } }