body{ background:#fff; }

/* ===== Section headings ===== */
.section-title{
  text-align:center;
  margin-bottom:2.2rem;
}
.section-title h2{
  color:var(--rhc-green);
  font-weight:700;
}
.section-title .underline{
  width:60px;
  height:3px;
  background:var(--rhc-gold);
  margin:.6rem auto 0;
}

section{ padding:4rem 0; }
.bg-cream{ background:var(--rhc-cream); }

/* ===== Jobs Page Hero ===== */
.jobs-hero{
  position:relative;
  background:
    linear-gradient(100deg, rgba(14,42,30,.90) 0%, rgba(14,42,30,.78) 55%, rgba(14,42,30,.64) 100%),
    url('../img/people-hero.jpg') center/cover;
  color:#fff;
  padding:3.4rem 0 3.2rem;
  text-align:center;
}
.jobs-hero .eyebrow{
  display:block;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--rhc-gold-soft);
  font-weight:600;
  margin-bottom:.6rem;
}
.jobs-hero h1{
  font-size:2.4rem;
  font-weight:700;
  margin-bottom:0;
}
.jobs-hero .underline{
  width:60px;
  height:3px;
  background:var(--rhc-gold);
  margin:1rem auto 1.8rem;
}

/* ===== Search (in-hero, expands on focus) ===== */
.job-search{
  max-width:880px;
  margin:0 auto;
  text-align:left;
}
.js-row{
  display:flex;
  gap:.6rem;
}
.js-input{
  position:relative;
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
  background:#fff;
  border-radius:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:box-shadow .18s;
}
.js-input.js-keyword{ flex:2 1 0; }
.js-input > i{
  position:absolute;
  left:1rem;
  color:var(--rhc-gold);
  font-size:.9rem;
  pointer-events:none;
}
.js-input input,
.js-input select{
  width:100%;
  height:52px;
  border:0;
  outline:none;
  background:transparent;
  border-radius:9px;
  padding:0 1rem 0 2.6rem;
  font-size:.94rem;
  color:var(--rhc-green);
}
.js-input input::placeholder{ color:#a9a599; }
.js-input select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:2.4rem;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23C9A227' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
}
.js-input:focus-within{
  box-shadow:0 0 0 3px rgba(201,162,39,.5), 0 10px 30px rgba(0,0,0,.18);
}
.js-btn{
  flex:0 0 auto;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:0 1.9rem;
  border:0;
  border-radius:9px;
  background:var(--rhc-gold);
  color:var(--rhc-green);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.3px;
  white-space:nowrap;
  cursor:pointer;
  transition:.18s;
}
.js-btn:hover{ background:#fff; }

@media (max-width:720px){
  .js-row{ flex-direction:column; }
  .js-input.js-keyword{ flex:1 1 auto; }
  .js-btn{ width:100%; }
}

/* Filter chips */
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
  min-height:0;
}
.job-search .filter-chips{ justify-content:flex-start; }
.filter-chips:empty{ margin-top:0; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:#fff;
  border:1px solid var(--rhc-gold);
  color:var(--rhc-green);
  font-size:.82rem;
  font-weight:600;
  padding:.35rem .55rem .35rem .85rem;
  border-radius:30px;
  animation:chipIn .18s ease;
}
.chip .chip-remove{
  cursor:pointer;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--rhc-green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.68rem;
  border:none;
  line-height:1;
  transition:.2s;
}
.chip .chip-remove:hover{ background:#b0212b; }
@keyframes chipIn{
  from{ opacity:0; transform:scale(.85); }
  to{ opacity:1; transform:scale(1); }
}
.chip-clear-all{
  background:transparent;
  border:1px dashed rgba(255,255,255,.55);
  color:#e8e5da;
}
.chip-clear-all:hover{ color:#fff; border-color:#fff; }

/* ===== Results meta ===== */
.results-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  margin:2.6rem 0 1.6rem;
  padding-bottom:1rem;
  border-bottom:1px solid #ececec;
}
.results-count{
  font-size:1.15rem;
  font-weight:700;
  color:var(--rhc-green);
  margin:0;
}
.results-count span{ color:var(--rhc-gold); }
.results-right{
  display:flex;
  align-items:center;
  gap:1rem;
}
.results-note{
  font-size:.85rem;
  color:#8a8672;
  margin:0;
}
.slider-nav{
  display:flex;
  gap:.4rem;
}
.slider-nav[hidden]{ display:none; }
.slider-arrow{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #e2ded0;
  background:#fff;
  color:var(--rhc-green);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  cursor:pointer;
  transition:.18s;
}
.slider-arrow:hover:not(:disabled){
  background:var(--rhc-green);
  color:#fff;
  border-color:var(--rhc-green);
}
.slider-arrow:disabled{
  opacity:.35;
  cursor:default;
}

/* ===== Job cards: slider + expandable grid ===== */
@keyframes cardIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* how many cards per view — overridden per breakpoint */
.jobs-slider,
.jobs-expanded{ --per:4; --gap:1.25rem; }
@media (max-width:1100px){ .jobs-slider, .jobs-expanded{ --per:3; } }
@media (max-width:680px){ .jobs-slider, .jobs-expanded{ --per:2; } }
@media (max-width:520px){ .jobs-slider, .jobs-expanded{ --per:1; } }

/* --- Slider (default) --- */
.jobs-slider{
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:.4rem 2px 1.2rem;
  margin:0 -2px;
  scrollbar-width:none;
}
.jobs-slider::-webkit-scrollbar{ display:none; }
.jobs-slider[hidden]{ display:none; }
.jobs-slider > *{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align:start;
}

/* --- Expanded grid --- */
.jobs-expanded{
  display:grid;
  grid-template-columns:repeat(var(--per), 1fr);
  grid-auto-rows:1fr;
  gap:var(--gap);
  padding-top:.4rem;
}
.jobs-expanded[hidden]{ display:none; }

/* --- Card --- */
.job-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e6e2d6;
  border-radius:12px;
  background:#fff;
  padding:1.4rem;
  transition:box-shadow .2s, border-color .2s, transform .2s;
  animation:cardIn .3s ease;
}
.job-card:hover{
  border-color:#d6d0bd;
  box-shadow:0 14px 34px rgba(14,42,30,.12);
  transform:translateY(-3px);
}
.jc-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.6rem;
  margin-bottom:.9rem;
}
.jc-icon{
  width:46px;
  height:46px;
  flex-shrink:0;
  border-radius:10px;
  background:var(--rhc-cream);
  color:var(--rhc-green);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
}
.jc-badge{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--rhc-gold);
  background:rgba(201,162,39,.12);
  border:1px solid var(--rhc-gold);
  padding:.28rem .6rem;
  border-radius:20px;
  white-space:nowrap;
}
.jc-title{
  font-size:1.02rem;
  font-weight:700;
  color:var(--rhc-green);
  margin:0 0 .15rem;
  transition:color .2s;
}
.job-card:hover .jc-title{ color:var(--rhc-gold); }
.jc-company{
  font-size:.85rem;
  color:#6c6a60;
  font-weight:500;
}
.jc-meta{
  list-style:none;
  padding:0;
  margin:.9rem 0 0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.jc-meta li{
  font-size:.83rem;
  color:#5c5a51;
  display:flex;
  align-items:center;
  gap:.55rem;
}
.jc-meta i{
  color:var(--rhc-green);
  font-size:.8rem;
  width:15px;
  text-align:center;
}
.jc-desc{
  font-size:.84rem;
  color:#78766c;
  line-height:1.55;
  margin:.85rem 0 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.jc-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-top:auto;
  padding-top:1rem;
}
.jc-vacancies{
  font-size:.78rem;
  color:#8a8672;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.jc-vacancies i{ color:var(--rhc-green); }
.btn-apply{
  flex-shrink:0;
  display:inline-block;
  background:var(--rhc-green);
  color:#fff;
  border:none;
  font-weight:600;
  font-size:.83rem;
  padding:.5rem 1.15rem;
  border-radius:6px;
  text-decoration:none;
  text-align:center;
  transition:.2s;
}
.btn-apply:hover{
  background:var(--rhc-gold);
  color:#1a1a1a;
}

/* --- "View All Jobs" card at the end of the slider --- */
.view-all-card{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align:start;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.6rem;
  padding:1.5rem;
  border:1.5px dashed var(--rhc-gold);
  border-radius:12px;
  background:var(--rhc-cream);
  color:var(--rhc-green);
  cursor:pointer;
  transition:.2s;
}
.view-all-card:hover{
  background:#fff;
  box-shadow:0 14px 34px rgba(14,42,30,.12);
}
.view-all-card .va-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--rhc-green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.05rem;
}
.view-all-card .va-title{
  font-weight:700;
  font-size:.98rem;
}
.view-all-card .va-sub{
  font-size:.8rem;
  color:#8a8672;
}

/* --- Show Less toggle --- */
.jobs-viewtoggle{
  display:flex;
  justify-content:center;
  margin-top:1.6rem;
}
.jobs-viewtoggle[hidden]{ display:none; }
.btn-viewtoggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:transparent;
  border:1.5px solid var(--rhc-green);
  color:var(--rhc-green);
  font-weight:600;
  font-size:.88rem;
  padding:.6rem 1.6rem;
  border-radius:6px;
  cursor:pointer;
  transition:.2s;
}
.btn-viewtoggle:hover{
  background:var(--rhc-green);
  color:#fff;
}

/* ===== Empty State ===== */
.empty-state{
  display:none;
  text-align:center;
  padding:4rem 1rem;
}
.empty-state.active{
  display:block;
  animation:cardIn .3s ease;
}
.empty-state i{
  font-size:2.8rem;
  color:var(--rhc-gold);
  margin-bottom:1rem;
}
.empty-state h5{
  color:var(--rhc-green);
  font-weight:700;
  margin-bottom:.4rem;
}
.empty-state p{
  color:#8a8672;
  font-size:.9rem;
  margin-bottom:1.2rem;
}
.empty-state .btn-reset{
  background:transparent;
  border:1.5px solid var(--rhc-green);
  color:var(--rhc-green);
  font-weight:600;
  padding:.5rem 1.4rem;
  border-radius:5px;
}
.empty-state .btn-reset:hover{
  background:var(--rhc-green);
  color:#fff;
}

@media(max-width:767px){
  section{ padding:2.8rem 0; }
  .jobs-hero h1{ font-size:1.7rem; }
  .topbar{ text-align:center; }
  .topbar .col-md-6{ margin-bottom:.3rem; }
}
@media(max-width:520px){
  .slider-nav{ display:none; }
  .results-right{ width:100%; }
}