/*!
 * Careers List — 1:3092 - 1:3219: the tab/search bar, the job rows (shared with the single
 * job page) and Show More; the side rings and ellipse (1:3084, 1:3085, 1:3087).
 *
 * Figma 1:3002 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc.
 *
 * Split from design/careers.css, which stays the source of truth. Mobile first;
 * desktop values are the frame's, as --monal-u units (1u == 1 Figma px / 10).
 */



/* ==========================================================================
   2. LISTING  1:3092 - 1:3219
   ========================================================================== */
.monal-careers-list { position: relative; padding: var(--monal-page-gap) 0 calc(var(--monal-page-gap) + var(--monal-u) * 2); }


/* --- the bar: category tabs + search (1:3099) --------------------------- */
.monal-careers-list__bar {
  display: flex; flex-direction: column; gap: calc(var(--monal-u) * 1.2);
  padding: calc(var(--monal-u) * 1.2);
  border-radius: calc(var(--monal-u) * 1.4); background: #f5f5f5;
}

.monal-careers-list__tabs {
  display: flex; gap: calc(var(--monal-u) * 2.4); margin: 0; padding: 0 calc(var(--monal-u) * .6); list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}

.monal-careers-list__tabs::-webkit-scrollbar { display: none; }

/* 1:3109 / 1:3110 — Poppins 18/24: the current tab SemiBold orange, the
   rest Light ink. */
.monal-careers-list__tab {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 32px; white-space: nowrap;
  font-weight: 300; font-size: max(calc(var(--monal-u) * 1.5), 14px); line-height: 1.33;
  color: var(--monal-c-ink); text-decoration: none; transition: color .25s;
}

.monal-careers-list__tab:hover { color: var(--monal-c-orange); }

.monal-careers-list__tab[aria-current="true"] { font-weight: 600; color: var(--monal-c-orange); }


.monal-careers-list__form { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--monal-u) * .8); margin: 0; }

/* 1:3103 — 326.592 x 49.091, a 1px black-20% outline, radius 12; the
   placeholder Poppins Light 16/24 at 70%, the glass 24 at its right. */
.monal-careers-list__search { position: relative; flex: 1 1 100%; min-width: 0; }

.monal-careers-list .monal-careers-list__input,
.monal-careers-list .monal-careers-list__select {
  display: block; width: 100%; height: 44px; margin: 0;
  padding: 0 calc(var(--monal-u) * 1.6);
  border: 1px solid rgba(0, 0, 0, .2); border-radius: calc(var(--monal-u) * 1.2);
  background: #fff; color: var(--monal-c-ink);
  font: inherit; font-weight: 300; font-size: 16px; line-height: 1.5;
}

.monal-careers-list .monal-careers-list__input { padding-right: 44px; }

.monal-careers-list .monal-careers-list__input::placeholder { color: rgba(0, 0, 0, .7); opacity: 1; }

.monal-careers-list .monal-careers-list__input:focus,
.monal-careers-list .monal-careers-list__select:focus { outline: none; border-color: var(--monal-c-orange); }

.monal-careers-list .monal-careers-list__input:focus-visible,
.monal-careers-list .monal-careers-list__select:focus-visible { box-shadow: 0 0 0 3px rgba(237, 120, 44, .25); }

.monal-careers-list__select-wrap { flex: 1 1 100%; min-width: 0; }

.monal-careers-list .monal-careers-list__select {
  padding-right: 36px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(30, 25, 22, .6) 50%), linear-gradient(135deg, rgba(30, 25, 22, .6) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

.monal-careers-list .monal-careers-list__go {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--monal-c-ink); cursor: pointer;
}

.monal-careers-list .monal-careers-list__go:hover,
.monal-careers-list .monal-careers-list__go:focus { background: none; color: var(--monal-c-orange); }

.monal-careers-list__go::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url(../../assets/monal/img/pages/careers-search.svg) center / contain no-repeat;
          mask: url(../../assets/monal/img/pages/careers-search.svg) center / contain no-repeat;
}

/* The submit for the selects without JS; JS submits on change instead. */
.monal-careers-list__apply-filters { flex: 1 1 100%; }

.monal-js .monal-careers-list .monal-careers-list__apply-filters { display: none; }


/* --- rows (1:3116, one per job) ----------------------------------------- */
.monal-careers-list__rows { margin: 0; padding: 0; list-style: none; }

.monal-job-row {
  display: flex; flex-direction: column; gap: calc(var(--monal-u) * 2);
  padding: calc(var(--monal-u) * 3.2) 0;
  border-bottom: 1px solid #d9d9d9;
}

.monal-job-row__main { min-width: 0; }

/* 1:3124 — Libertinus Serif Display 42/42, -1.68 tracking. */
.monal-job-row__title {
  margin: 0; font-family: var(--monal-f-display); font-weight: 400;
  font-size: max(calc(var(--monal-u) * 2.6), 24px); line-height: 1.1; letter-spacing: -.04em;
  color: #000;
}

.monal-job-row__title a { color: inherit; text-decoration: none; transition: color .25s; }

.monal-job-row__title a:hover { color: var(--monal-c-orange); }

/* 1:3123 — Poppins Regular 22/25.415 at 70% black. */
.monal-job-row__summary {
  margin: calc(var(--monal-u) * 1) 0 0;
  font-size: max(calc(var(--monal-u) * 1.5), 15px); line-height: 1.4; color: rgba(0, 0, 0, .7);
}

.monal-job-row__chips { display: flex; flex-wrap: wrap; gap: calc(var(--monal-u) * .8); margin: calc(var(--monal-u) * 2) 0 0; padding: 0; list-style: none; }

/* 1:3127 — a 1px #D9D9D9 outline, leaf corners (TL / BR 15.43), 57.223
   tall; Poppins SemiBold 14/21.606 uppercase, 24 in. */
.monal-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 calc(var(--monal-u) * 1.4);
  border: 1px solid #d9d9d9; border-radius: calc(var(--monal-u) * 1.2) 0 calc(var(--monal-u) * 1.2) 0;
  font-weight: 600; font-size: max(calc(var(--monal-u) * 1.2), 12px); line-height: 1.5;
  text-transform: uppercase; color: var(--monal-c-ink);
}

/* 1:3121 — "APPLY": Libertinus Serif Italic 30/18 uppercase, -1.2
   tracking, with the 17.063 arrow (1:3118). */
.monal-job-row__apply {
  align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--monal-u) * 1.4);
  min-height: 32px;
  font-family: var(--monal-f-serif); font-style: italic; font-size: max(calc(var(--monal-u) * 2.2), 20px); line-height: 1;
  letter-spacing: -.04em; text-transform: uppercase; color: #000; text-decoration: none; transition: color .25s;
}

.monal-job-row__arrow {
  flex: none; width: calc(var(--monal-u) * 1.5); height: calc(var(--monal-u) * 1.5); background: currentColor;
  -webkit-mask: url(../../assets/monal/img/pages/careers-apply-arrow.svg) center / contain no-repeat;
          mask: url(../../assets/monal/img/pages/careers-apply-arrow.svg) center / contain no-repeat;
  transition: transform .35s var(--monal-ease-out);
}

.monal-job-row__apply:hover { color: var(--monal-c-orange); }

.monal-job-row__apply:hover .monal-job-row__arrow { transform: translate(calc(var(--monal-u) * .25), calc(var(--monal-u) * -.25)); }


/* --- "Show more" (1:3093) and the empty states -------------------------- */
/* 1:3094 — 159.239 x 57.223, a 1px orange outline with leaf corners; the
   label Poppins SemiBold 14/21.606 uppercase, the down arrow (1:3096). */
.monal-careers-list__more-wrap { display: flex; justify-content: center; margin-top: calc(var(--monal-u) * 4); }

.monal-careers-list .monal-careers-list__more {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--monal-u) * 1.2);
  min-height: 48px; padding: 0 calc(var(--monal-u) * 2);
  border: 1px solid var(--monal-c-orange); border-radius: calc(var(--monal-u) * 1.3) 0 calc(var(--monal-u) * 1.3) 0;
  background: transparent; color: var(--monal-c-ink);
  font-weight: 600; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.55;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s, color .3s;
}

.monal-careers-list .monal-careers-list__more:hover,
.monal-careers-list .monal-careers-list__more:focus-visible { background: var(--monal-c-orange); color: #fff; }

.monal-careers-list__more-icon {
  flex: none; width: calc(var(--monal-u) * 1.1365); height: calc(var(--monal-u) * 1.405); background: currentColor;
  -webkit-mask: url(../../assets/monal/img/pages/careers-more-arrow.svg) center / contain no-repeat;
          mask: url(../../assets/monal/img/pages/careers-more-arrow.svg) center / contain no-repeat;
}

.monal-careers-list__more-icon--ne {
  width: calc(var(--monal-u) * 1.2); height: calc(var(--monal-u) * 1.2);
  -webkit-mask-image: url(../../assets/monal/img/pages/careers-apply-arrow.svg);
          mask-image: url(../../assets/monal/img/pages/careers-apply-arrow.svg);
}

/* Interpretation: the empty states are a row's title and summary styles,
   centred, with the outline button. */
.monal-careers-list__empty { padding: calc(var(--monal-u) * 6) 0 calc(var(--monal-u) * 2); text-align: center; border-bottom: 1px solid #d9d9d9; }

.monal-careers-list__empty .monal-job-row__summary { max-width: calc(var(--monal-u) * 60); margin-inline: auto; }

.monal-careers-list__count { margin: calc(var(--monal-u) * 2) 0 0; font-size: max(calc(var(--monal-u) * 1.3), 13px); color: var(--monal-c-muted); }

.monal-careers-list [data-monal-busy] { opacity: .5; transition: opacity .2s; }


.monal-careers-list__deco { display: none; }

.monal-job__apply .monal-job-row__arrow { width: calc(var(--monal-u) * 1.2); height: calc(var(--monal-u) * 1.2); }

.monal-job-more .monal-careers-list__rows { margin-top: calc(var(--monal-u) * 1.6); }

@media (min-width: 768px) {
  
    .monal-careers-list__bar { padding: calc(var(--monal-u) * 1.2) calc(var(--monal-u) * 1.6); }
  
    .monal-careers-list__form { flex-wrap: nowrap; }
  
    .monal-careers-list__search { flex: 1 1 auto; }
  
    .monal-careers-list__select-wrap { flex: 0 1 calc(var(--monal-u) * 18); }
  
    .monal-careers-list__apply-filters { flex: 0 0 auto; }
  
    .monal-job-row { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: calc(var(--monal-u) * 4); }
  
    .monal-job-row__apply { flex: none; }
}

@media (min-width: 1200px) {
  
  
    /* --- listing ------------------------------------------------------------ */
    /* The bar at y563: 100 under the lead. Footer panel at 2301.34, 150 under
       "Show more" (2151.34); the footer widget adds its own 24. */
    .monal-careers-list { padding: calc(var(--monal-u) * 10) 0 calc(var(--monal-u) * 12.6); }
  
    /* 1:3100 — 1544 x 80, #F5F5F5, radius 18; tabs from x219.61, the search
       box 14.41 in from the right. */
    .monal-careers-list__bar {
      flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--monal-u) * 3);
      min-height: calc(var(--monal-u) * 8); padding: 0 calc(var(--monal-u) * 1.441) 0 calc(var(--monal-u) * 3.161);
      border-radius: calc(var(--monal-u) * 1.8);
    }
  
    /* Tabs every 137 (right edges 329.61, 466.61 ...): 32 between labels. */
    .monal-careers-list__tabs { gap: calc(var(--monal-u) * 3.2); padding: 0; min-width: 0; }
  
    .monal-careers-list__tab { min-height: max(calc(var(--monal-u) * 4), 24px); font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.4); }
  
    .monal-careers-list__form { flex: none; gap: calc(var(--monal-u) * 1); }
  
    .monal-careers-list__search { flex: none; width: calc(var(--monal-u) * 32.659); }
  
    .monal-careers-list__select-wrap { flex: none; width: calc(var(--monal-u) * 18); }
  
    .monal-careers-list .monal-careers-list__input,
    .monal-careers-list .monal-careers-list__select {
      height: calc(var(--monal-u) * 4.909); padding-left: calc(var(--monal-u) * 1.86);
      font-size: max(calc(var(--monal-u) * 1.6), 14px); line-height: calc(var(--monal-u) * 2.4);
    }
  
    .monal-careers-list .monal-careers-list__input { padding-right: calc(var(--monal-u) * 4.6); }
  
    /* 1:3105 — the glass, 24, 11.59 in from the box's right. */
    .monal-careers-list .monal-careers-list__go { width: calc(var(--monal-u) * 4.718); }
  
    .monal-careers-list__go::before { width: calc(var(--monal-u) * 2.4); height: calc(var(--monal-u) * 2.4); }
  
  
    /* Rows: the first title at y693 (50 under the bar); chips end 50 above
       each divider and the next title starts 50 below it. */
    /* The 1px divider is inside the 50 below the chips, as Figma draws it. */
    .monal-job-row { padding: calc(var(--monal-u) * 5) 0 calc(var(--monal-u) * 5 - 1px); }
  
    .monal-job-row__title { font-size: calc(var(--monal-u) * 4.2); line-height: calc(var(--monal-u) * 4.2); letter-spacing: calc(var(--monal-u) * -.168); }
  
    /* 1:3123 at +57 (15 under the 42 line). */
    .monal-job-row__summary { margin-top: calc(var(--monal-u) * 1.5); font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.5415); }
  
    /* 1:3127 at y816: 40.6 under the summary. */
    .monal-job-row__chips { margin-top: calc(var(--monal-u) * 4.0585); gap: calc(var(--monal-u) * 1); }
  
    .monal-chip {
      min-height: calc(var(--monal-u) * 5.7223); padding: 0 calc(var(--monal-u) * 2.4);
      border-radius: calc(var(--monal-u) * 1.543) 0 calc(var(--monal-u) * 1.543) 0;
      font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.1606);
    }
  
    /* 1:3121 at y698 (5 under the title's top), ending at x1732. */
    .monal-job-row__apply {
      margin-top: calc(var(--monal-u) * .5); min-height: max(calc(var(--monal-u) * 2.4), 24px); gap: calc(var(--monal-u) * 2.6);
      font-size: calc(var(--monal-u) * 3); line-height: calc(var(--monal-u) * 1.8); letter-spacing: calc(var(--monal-u) * -.12);
    }
  
    /* 1:3118 — 17.063 (19.063 with its stroke). */
    .monal-job-row__arrow { width: calc(var(--monal-u) * 1.9063); height: calc(var(--monal-u) * 1.9063); }
  
  
    /* 1:3094 at y2094.12: 50 under the last divider. */
    .monal-careers-list__more-wrap { margin-top: calc(var(--monal-u) * 5); }
  
    .monal-careers-list .monal-careers-list__more {
      min-height: calc(var(--monal-u) * 5.7223); padding: 0 calc(var(--monal-u) * 2.4);
      border-radius: calc(var(--monal-u) * 1.543) 0 calc(var(--monal-u) * 1.543) 0;
      font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.1606);
    }
  
    .monal-careers-list__empty { padding: calc(var(--monal-u) * 10) 0 calc(var(--monal-u) * 5); }
  
  
    /* Page art beside the list (1:3085, 1:3084, 1:3087), placed from the
       section's top (y463): the 6% rings, turned and skewed as drawn, and the
       second blurred ellipse off the right edge. */
    .monal-careers-list__deco {
      display: block; position: absolute; z-index: -1; pointer-events: none;
      background: center / 100% 100% no-repeat;
    }
  
    .monal-careers-list__deco--ring-r,
    .monal-careers-list__deco--ring-l {
      width: calc(var(--monal-u) * 38.2851); height: calc(var(--monal-u) * 40.8555);
      background-image: url(../../assets/monal/img/pages/careers-ring.svg);
    }
  
    .monal-careers-list__deco--ring-r { left: calc(50% + var(--monal-u) * 78.58); top: calc(var(--monal-u) * 20.24); transform: rotate(40.74deg) skewX(-11.51deg) scaleX(-1); }
  
    .monal-careers-list__deco--ring-l { left: calc(50% - var(--monal-u) * 115.14); top: calc(var(--monal-u) * 98.02); transform: rotate(-40.74deg) skewX(-11.51deg); }
  
    .monal-careers-list__deco--glow {
      left: calc(50% + var(--monal-u) * 66.2); top: calc(var(--monal-u) * 111.26);
      width: calc(var(--monal-u) * 65.336); height: calc(var(--monal-u) * 65.336);
      background-image: url(../../assets/monal/img/pages/lead-ellipse.svg);
    }
  
    .monal-job-more .monal-careers-list__rows { margin-top: calc(var(--monal-u) * 3); }
}