/* ===== Careers page (career.php) — builds on transactions.css (.ot-*), site theme --rr-* ===== */

/* section subtitles under .ot-head titles */
.ot-head .cr-sub { margin: .8rem 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--ot-gray); }

/* ---- Join the Rise family: image + values ---- */
.cr-join {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.cr-join-media {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: #f6f7fa;
  border: 1px solid var(--ot-border);
  box-shadow: 0 24px 56px rgba(27, 42, 91, .1);
}
.cr-join-media img { display: block; width: 100%; height: auto; }
.cr-join-stat {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(21, 23, 28, .14);
  font-size: .85rem;
  color: var(--ot-gray);
}
.cr-join-stat strong { display: block; font-size: 1.3rem; line-height: 1.1; color: var(--ot-ink); }
.cr-join-stat .ot-ico { width: 46px; height: 46px; font-size: 1.15rem; background: var(--ot-ink); color: #fff; }
.cr-join-copy > p { margin: 0 0 1.8rem; font-size: 1.05rem; line-height: 1.85; color: var(--ot-gray); }
.cr-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cr-value {
  padding: 1.4rem;
  background: #fbfcff;
  border: 1px solid var(--ot-border);
  border-radius: 20px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.cr-value:hover { border-color: var(--ot-navy); box-shadow: 0 14px 34px rgba(27, 42, 91, .1); transform: translateY(-4px); }
.cr-value:hover .ot-ico { background: var(--ot-ink); color: #fff; }
.cr-value .ot-ico { width: 50px; height: 50px; font-size: 1.25rem; }
.cr-value h3 { margin: .9rem 0 .3rem; font-size: 1.08rem; font-weight: 700; color: var(--ot-ink); }
.cr-value p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ot-gray); }

/* ---- Life at Rise: endless photo strip ---- */
.cr-life { overflow: hidden; }
.cr-strip {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: cr-scroll 40s linear infinite;
}
.cr-life:hover .cr-strip { animation-play-state: paused; }
.cr-strip img {
  flex: 0 0 auto;
  width: 360px;
  height: 278px !important;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(27, 42, 91, .1);
}
.cr-strip img:nth-child(even) { margin-top: 28px; }
@keyframes cr-scroll { to { transform: translateX(calc(-50% - 10px)); } }   /* the photo set is printed twice */

/* ---- Openings ---- */
.cr-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 32px; }
.cr-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--ot-border);
  border-radius: 999px;
  background: #fff;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ot-gray);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.cr-filter button span { padding: 1px 8px; border-radius: 999px; background: var(--ot-circle); font-size: .75rem; color: var(--ot-navy); }
.cr-filter button:hover { border-color: var(--ot-ink); color: var(--ot-ink); }
.cr-filter button.is-active { background: var(--ot-ink); border-color: var(--ot-ink); color: #fff; }
.cr-filter button.is-active span { background: rgba(255, 255, 255, .2); color: #fff; }

.cr-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.cr-job {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ot-border);
  border-radius: 20px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.cr-job[hidden] { display: none; }
.cr-job:hover { border-color: var(--ot-navy); box-shadow: 0 14px 34px rgba(27, 42, 91, .1); transform: translateY(-3px); }
.cr-job:hover .ot-ico { background: var(--ot-ink); color: #fff; }
.cr-job .ot-ico { flex: 0 0 54px; width: 54px; height: 54px; font-size: 1.3rem; }
.cr-job-info { flex: 1; min-width: 0; }
.cr-job h3 { margin: 0 0 .55rem; font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: var(--ot-ink); }
.cr-job-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--ot-gray); }
.cr-job-meta li { display: inline-flex; align-items: center; gap: 5px; }
.cr-job-meta i { color: var(--ot-navy); }
.cr-apply {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--ot-ink);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.cr-apply:hover { background: #000; }
.cr-apply i { transition: transform .2s; }
.cr-apply:hover i { transform: translateX(3px); }

/* ---- Didn't find a role? ---- */
.cr-cv {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ot-border);
  border-radius: 28px;
  box-shadow: 0 16px 44px rgba(27, 42, 91, .08);
}
.cr-cv-media { align-self: stretch; background: #fff; }
.cr-cv-media img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.cr-cv-body { padding: 3rem 3.2rem; }
.cr-cv-body .rr-title { margin-bottom: 1rem; }
.cr-cv-body > p { margin: 0 0 1.6rem; font-size: 1.05rem; line-height: 1.8; color: var(--ot-gray); }
.cr-cv-mail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.6rem;
  padding: 14px 18px;
  border-radius: 16px;
  background: #f6f7fa;
  color: var(--ot-ink);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
  transition: background .2s;
}
.cr-cv-mail:hover { background: var(--ot-circle); color: var(--ot-ink); }
.cr-cv-mail small { display: block; font-size: .78rem; font-weight: 500; color: var(--ot-gray); word-break: normal; }
.cr-cv-mail .ot-ico { flex: 0 0 48px; width: 48px; height: 48px; font-size: 1.15rem; background: var(--ot-ink); color: #fff; }
.cr-cv .rr-btn { min-height: 50px; border: 0; cursor: pointer; }

/* ---- Application modal (Bootstrap modal, restyled) ---- */
.cr-modal .modal-dialog { max-width: 720px; }
.cr-modal .modal-content { border: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.cr-modal-head {
  position: relative;
  padding: 1.6rem 2rem;
  color: #fff;
  background: linear-gradient(135deg, #0c0b0b, #625651);   /* same as the enquiry popups */
}
.cr-modal-head .adv-eyebrow,
.cr-modal-eyebrow { display: block; margin-bottom: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cr-modal-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #fff; }
.cr-modal-head p { margin: .35rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .75); }
.cr-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.cr-modal-close:hover { background: #fff; color: var(--ot-ink, #15171c); transform: rotate(90deg); }
.cr-modal .modal-body { padding: 1.8rem 2rem .6rem; }
.cr-modal .modal-footer { padding: .6rem 2rem 1.8rem; border: 0; }
.cr-label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 600; color: var(--ot-ink, #15171c); }
.cr-label span { color: #c0392b; }
.cr-modal .form-control,
.cr-modal .form-select {
  min-height: 48px;
  border: 1px solid var(--ot-border, #d8dbe2);
  border-radius: 12px;
  background-color: #fbfcff;
  font-size: .98rem;
}
.cr-modal .form-control:focus,
.cr-modal .form-select:focus { background-color: #fff; border-color: var(--rr-navy, #1b2a5b); box-shadow: 0 0 0 3px rgba(27, 42, 91, .12); }
.cr-modal .input-group-text { border: 1px solid var(--ot-border, #d8dbe2); border-radius: 12px 0 0 12px; background: #eef0f6; font-weight: 600; }
.cr-modal .input-group .form-control { border-radius: 0 12px 12px 0; }
.cr-modal input[type="file"].form-control { padding: .7rem .9rem; }
.cr-file-note { margin: .4rem 0 0; font-size: .8rem; color: var(--ot-gray, #5e6470); }
.cr-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--ot-ink, #15171c);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  transition: background .2s, transform .2s;
}
.cr-submit:hover { background: #000; transform: translateY(-1px); }

@media (max-width: 991.98px) {
  .cr-join { grid-template-columns: 1fr; gap: 40px; }
  .cr-join-media { max-width: 520px; margin: 0 auto; }
  .cr-jobs { grid-template-columns: 1fr; }
  .cr-cv { grid-template-columns: 1fr; }
  .cr-cv-media { max-height: 380px; }
  .cr-cv-media img { object-position: center top; }
}
@media (max-width: 575.98px) {
  .cr-values { grid-template-columns: 1fr; gap: 12px; }
  .cr-value { padding: 1.15rem; }
  .cr-strip { gap: 12px; animation-duration: 30s; }
  .cr-strip img { width: 240px; height: 185px !important; border-radius: 16px; }
  .cr-strip img:nth-child(even) { margin-top: 18px; }
  @keyframes cr-scroll { to { transform: translateX(calc(-50% - 6px)); } }
  .cr-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 24px; padding: 0 12px 4px; }
  .cr-filter::-webkit-scrollbar { display: none; }
  .cr-filter button { flex: 0 0 auto; }
  .cr-job { flex-wrap: wrap; gap: 14px; padding: 1.2rem; }
  .cr-job .ot-ico { flex-basis: 46px; width: 46px; height: 46px; font-size: 1.1rem; }
  .cr-apply { width: 100%; justify-content: center; }
  .cr-cv { border-radius: 22px; }
  .cr-cv-media { max-height: 300px; }
  .cr-cv-body { padding: 1.8rem 1.4rem; }
  .cr-cv .rr-btn { width: 100%; justify-content: space-between; }
  .cr-modal .modal-dialog { margin: .6rem; }
  .cr-modal-head { padding: 1.3rem 1.3rem; }
  .cr-modal-head h2 { font-size: 1.25rem; padding-right: 40px; }
  .cr-modal .modal-body { padding: 1.3rem 1.3rem .4rem; }
  .cr-modal .modal-footer { padding: .4rem 1.3rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-strip { animation: none; }
  .cr-life { overflow-x: auto; }
}

/* the fixed Enquire/WhatsApp bar sits above Bootstrap modals on phones; hide it while the form is open */
body.modal-open .bottom-bar { display: none !important; }