/* ==========================================================================
   Careers page (template-careers.php)
   --------------------------------------------------------------------------
   Scoped to `body.dmv2-chrome .main-content-wrapper` exactly like dm-pages.css,
   so nothing here can reach the header, the footer, or the home `.dm-v2`
   sections. Kept in its own file (not appended to dm-pages.css) so the Careers
   work stays mergeable alongside the in-flight home/technology restyle.

   Tokens come from css/dm-tokens.css (--dm-*). The --action / --ink-* aliases
   that dm-pages.css defines on :root are deliberately NOT relied on here.
   ========================================================================== */

/* --- Shared: collapse the legacy 80px .inner-container padding -------------
   style.css puts 80px top/bottom on .inner-container; the dmv2 section clamp
   adds its own. Without this every Careers band double-pads. Same one-liner
   the Contact and Industries sections use in dm-pages.css. */
body.dmv2-chrome .main-content-wrapper .careers-sec-1 > .inner-container,
body.dmv2-chrome .main-content-wrapper .careers-sec-2 > .inner-container,
body.dmv2-chrome .main-content-wrapper .careers-sec-3 > .inner-container {
  padding-top: 0;
  padding-bottom: 0;
}
body.dmv2-chrome .main-content-wrapper section.fullcontainer.careers-sec-1,
body.dmv2-chrome .main-content-wrapper section.fullcontainer.careers-sec-2,
body.dmv2-chrome .main-content-wrapper section.fullcontainer.careers-sec-3 {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

/* Two white bands in a row read as one dead zone. "Life at discovermarket"
   (careers-sec-2) carries the #F5F9FC tint, so while it is enabled the
   96 + 96 joint between its neighbours is broken by a colour change and looks
   right. Switch it off in the CMS (enable_2) and "Why work with dm" sits
   directly against "Open roles" with ~173px of uninterrupted white. The
   adjacent-sibling selector only matches in exactly that case — when an editor
   re-enables Life at dm, sec-2 lands between the two, this stops applying and
   Open roles gets its full clamp back. */
body.dmv2-chrome .main-content-wrapper section.fullcontainer.careers-sec-1 + section.fullcontainer.careers-sec-3 {
  padding-top: clamp(8px, 1vw, 16px);
}

/* --- Section 2: Why work with discovermarket ------------------------------
   Plain editorial columns, not cards. Nothing here is clickable, so the old
   bordered + shadowed + hover-lifting box was advertising a link that does not
   exist. The numeral carries the three-up rhythm on its own — no rule, no
   chrome. It stands in when an editor has not uploaded an icon (today: none of
   them have). auto-fit keeps the row honest if the repeater grows past three. */
body.dmv2-chrome .main-content-wrapper .careers-why-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}
body.dmv2-chrome .main-content-wrapper .careers-why-item {
  position: relative;
}
body.dmv2-chrome .main-content-wrapper .careers-why-index {
  display: block;
  margin-bottom: 14px;
  color: var(--dm-indigo, #1A5FD4);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
}
body.dmv2-chrome .main-content-wrapper .careers-why-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.dmv2-chrome .main-content-wrapper .careers-why-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.dmv2-chrome .main-content-wrapper .careers-why-item h5 {
  color: var(--dm-ink-strong, #011D2B);
}
body.dmv2-chrome .main-content-wrapper .careers-why-body,
body.dmv2-chrome .main-content-wrapper .careers-why-body p {
  color: var(--dm-ink-muted, #5A5A6E);
  margin-bottom: 0;
}
/* Editors put the bold lead-in and the copy on separate lines with a <br>.
   responsive.css hides every p>br below 1300px (a legacy heading-wrap rule),
   which ran the two together — restore it here. */
body.dmv2-chrome .main-content-wrapper .careers-why-body p > br {
  display: inline;
}

/* --- Section 3: Life at discovermarket (mosaic) ---------------------------
   A 4-column grid whose pattern repeats every 5 tiles: the 1st spans 2x2 and
   the next four take one cell each, which is exactly 8 cells = two full rows.
   So 5, 10, 15 tiles all tile perfectly and a stray remainder still flows
   sensibly. Editors control the photo/quote rhythm by tile order.

   The rail this replaces asked the CMS to decide layout: adding one photo
   changed the shape of the section. Here a tile is a slot, and the photos
   inside it cycle. */
body.dmv2-chrome .main-content-wrapper .careers-life-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Row height is chosen so a tile lands on the reference design's ~1.2:1
     landscape aspect, not picked as a round number. A column is
     (containerWidth - 3*gap)/4, so 19vw keeps a small tile near 330x274 and the
     large one near 680x568 across 1200-1460px. At 25vw the large tile came out
     680x740 — PORTRAIT — which is what made the section read as too tall: it
     was 1068px against 475 for "Why work with us" next door. The 280px ceiling
     matters because .container-lg caps at 1460px: past that the columns stop
     growing and an unclamped vw would keep stretching the rows. */
  /* minmax(..., auto): the clamp is a FLOOR, not a ceiling. Tiles are shorter
     now and quote length is editor-controlled, so a long quote would otherwise
     be clipped in silence by the tile's overflow:hidden. This lets its row grow
     instead — visible, and the 2x2 photo spanning two rows just crops taller. */
  grid-auto-rows: minmax(clamp(160px, 19vw, 280px), auto);
  gap: 20px;
}
body.dmv2-chrome .main-content-wrapper .careers-life-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--dm-r-lg, 20px);
  min-width: 0;
}
body.dmv2-chrome .main-content-wrapper .careers-life-tile:nth-child(5n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

/* --- Photo tiles ----------------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .careers-life-photo {
  background: #E9EEF6;
}
body.dmv2-chrome .main-content-wrapper .careers-life-frames {
  position: absolute;
  inset: 0;
}
/* Every frame is stacked and only opacity changes, so the cross-fade never
   reflows the tile and a slow-loading photo cannot collapse it. */
body.dmv2-chrome .main-content-wrapper .careers-life-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
body.dmv2-chrome .main-content-wrapper .careers-life-frame.is-active {
  opacity: 1;
}
/* The label chip. `figcaption` rather than a span so a photo tile is a real
   figure with a caption. */
body.dmv2-chrome .main-content-wrapper .careers-life-chip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 9px 20px;
  border-radius: var(--dm-r-pill, 999px);
  background: #fff;
  color: var(--dm-indigo, #1A5FD4);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: var(--dm-shadow-sm, 0 2px 8px rgba(63, 66, 227, .1));
}
body.dmv2-chrome .main-content-wrapper .careers-life-dots {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 7px;
}
body.dmv2-chrome .main-content-wrapper .careers-life-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
body.dmv2-chrome .main-content-wrapper .careers-life-dot.is-active {
  background: #fff;
  transform: scale(1.15);
}
body.dmv2-chrome .main-content-wrapper .careers-life-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --- Quote tiles ----------------------------------------------------------- */
body.dmv2-chrome .main-content-wrapper .careers-life-quote {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px;
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote p {
  margin: 0;
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 600;
  line-height: 1.35;
}
/* Attribution sits on the tile floor whatever the quote's length. */
body.dmv2-chrome .main-content-wrapper .careers-life-quote figcaption {
  margin-top: auto;
  padding-top: 24px;
  font-size: 15px;
  line-height: 1.35;
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote.is-dark {
  background: var(--dm-indigo-deep, #00299D);
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote.is-dark p {
  color: #fff;
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote.is-dark figcaption {
  color: rgba(255, 255, 255, .72);
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote.is-light {
  background: #fff;
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote.is-light p {
  color: var(--dm-indigo, #1A5FD4);
}
body.dmv2-chrome .main-content-wrapper .careers-life-quote.is-light figcaption {
  color: var(--dm-ink-muted, #5A5A6E);
}

/* Someone who has asked for less motion still gets every photo — the dots
   stay live and careers-filter.js does not start the timer. */
@media (prefers-reduced-motion: reduce) {
  body.dmv2-chrome .main-content-wrapper .careers-life-frame {
    transition: none;
  }
}

/* --- Section 4: Open roles ----------------------------------------------- */
/* Belt-and-braces for the fixed header: if a native fragment jump ever does
   fire (JS off, or a future theme change that restores normal body scrolling),
   this keeps the heading clear of the nav instead of under it. The JS handler
   in careers-filter.js measures the header live and is what actually runs. */
body.dmv2-chrome .main-content-wrapper #open-roles {
  scroll-margin-top: 96px;
}

body.dmv2-chrome .main-content-wrapper .careers-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin-bottom: 18px;
}
body.dmv2-chrome .main-content-wrapper .careers-search {
  position: relative;
  flex: 0 1 340px;
}
body.dmv2-chrome .main-content-wrapper .careers-search-input {
  width: 100%;
  height: 46px;
  padding: 0 18px;
  border: 1px solid #D5D5E6;
  border-radius: var(--dm-r-pill, 999px);
  background: #fff;
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 15px;
  color: var(--dm-ink-strong, #011D2B);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.dmv2-chrome .main-content-wrapper .careers-search-input::placeholder {
  color: var(--dm-ink-muted, #5A5A6E);
}
body.dmv2-chrome .main-content-wrapper .careers-search-input:focus {
  outline: none;
  border-color: var(--dm-indigo, #1A5FD4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-indigo, #1A5FD4) 15%, transparent);
}

/* Three dropdowns rather than three rows of pills: Job Type, Function and
   Location together carry ~15 options, and as pills they wrap into a block
   taller than the roles they filter on a phone. A <select> also gives the
   platform's own picker on mobile, which beats a hand-rolled menu. */
body.dmv2-chrome .main-content-wrapper .careers-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
body.dmv2-chrome .main-content-wrapper .careers-select-wrap {
  position: relative;
  display: inline-flex;
}
/* The chevron is a background image so the control keeps the native picker. */
body.dmv2-chrome .main-content-wrapper .careers-select {
  height: 46px;
  padding: 0 38px 0 18px;
  border: 1px solid #D5D5E6;
  border-radius: var(--dm-r-pill, 999px);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A5A6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: var(--dm-ink-strong, #011D2B);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
body.dmv2-chrome .main-content-wrapper .careers-select:hover {
  border-color: var(--dm-indigo, #1A5FD4);
}
body.dmv2-chrome .main-content-wrapper .careers-select:focus-visible {
  outline: none;
  border-color: var(--dm-indigo, #1A5FD4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-indigo, #1A5FD4) 15%, transparent);
}
/* An active filter is worth seeing at a glance — otherwise "no roles match"
   reads as "no roles" when it really means "you left a filter on". */
body.dmv2-chrome .main-content-wrapper .careers-select.is-filtering {
  background-color: var(--dm-indigo, #1A5FD4);
  border-color: var(--dm-indigo, #1A5FD4);
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
body.dmv2-chrome .main-content-wrapper .careers-clear-filters {
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--dm-indigo, #1A5FD4);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.dmv2-chrome .main-content-wrapper .careers-clear-filters[hidden] {
  display: none;
}

body.dmv2-chrome .main-content-wrapper .careers-result-count {
  margin: 0 0 26px;
  text-align: center;
  font-size: 14px;
  color: var(--dm-ink-muted, #5A5A6E);
}
/* With no filter applied the line is empty; its margin would still push the
   grid down by 26px, so collapse the element entirely. */
body.dmv2-chrome .main-content-wrapper .careers-result-count:empty {
  display: none;
}
body.dmv2-chrome .main-content-wrapper .careers-roles-grid {
  align-items: stretch;
}
/* No margin-bottom: the grid-15 columns already pad 15px top and bottom, so a
   24px margin on top made the row gap 54px against a 30px column gutter. */
body.dmv2-chrome .main-content-wrapper .careers-role-col {
  display: flex;
}
body.dmv2-chrome .main-content-wrapper .careers-role-col[hidden] {
  display: none;
}
body.dmv2-chrome .main-content-wrapper .careers-role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Tightened from 30px / 16px / 26px: with three short meta lines and a text
     link the card was mostly whitespace. */
  padding: 26px 26px 24px;
  border: 1px solid #E7E7F2;
  border-radius: var(--dm-r-lg, 20px);
  background: #fff;
  box-shadow: var(--dm-shadow-sm, 0 2px 8px rgba(63, 66, 227, .06));
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.dmv2-chrome .main-content-wrapper .careers-role-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--dm-shadow-md, 0 8px 24px rgba(63, 66, 227, .08));
}
body.dmv2-chrome .main-content-wrapper .careers-role-title {
  color: var(--dm-ink-strong, #011D2B);
  margin-bottom: 14px;
  padding-bottom: 0;
}
/* One line per attribute, all three the same icon + text shape. As a pin plus
   two pills they read as three different kinds of thing when they are three
   facts about one job; and side by side they wrapped into two ragged rows at
   card width. A fixed-width icon column keeps the labels on one left edge
   however wide the glyph is. */
body.dmv2-chrome .main-content-wrapper .careers-role-meta {
  display: flex;
  flex-direction: column;
  /* stretch, not flex-start: flex-start makes each row shrink-to-fit, and a
     shrink-to-fit flex item that is itself a flex row hits WebKit's intrinsic
     sizing bug -- Safari sizes the row to min-content, so "Human Resource"
     and "Full Time" break after the space while one-word values survive.
     Full-width rows are laid out identically in every engine; the icon and
     label are left-packed either way. */
  align-items: stretch;
  gap: 7px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
body.dmv2-chrome .main-content-wrapper .careers-role-meta li {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  font-size: 15px;
  line-height: 1.35;
  color: var(--dm-ink-muted, #5A5A6E);
}
body.dmv2-chrome .main-content-wrapper .careers-role-meta li i {
  flex: 0 0 16px;
  text-align: center;
  font-size: 14px;
  color: var(--dm-indigo, #1A5FD4);
}
/* Push the CTA to the card floor so the links align across a ragged row. */
body.dmv2-chrome .main-content-wrapper .careers-role-cta {
  margin-top: auto;
}
/* A left-aligned text link, not a 60px filled pill: six of these stacked three
   to a row made the button the loudest thing in the section, above the job
   titles. The ::after overlay makes the whole card the hit area while keeping
   exactly one real anchor — so keyboard focus, middle-click and "open in new
   tab" all behave like the link they are. */
/* Qualified `a.` throughout: dm-pages.css:79-80 paints every link inside
   .main-content-wrapper via `a:not(.btn):not(.custom-button):hover`, which
   carries one more element in its specificity than a bare class chain would.
   Without the element qualifier that rule wins and the hover lands on deep
   navy (--action-hover) rather than orange. */
body.dmv2-chrome .main-content-wrapper a.careers-role-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  color: var(--dm-indigo, #1A5FD4);
  font-family: var(--dm-font, "Montserrat", sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s ease;
}
/* Hovering the text itself rather than the rest of the card. */
body.dmv2-chrome .main-content-wrapper a.careers-role-link:hover,
body.dmv2-chrome .main-content-wrapper a.careers-role-link:focus {
  color: var(--dm-orange, #FE5000);
  text-decoration: none;
}
body.dmv2-chrome .main-content-wrapper a.careers-role-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--dm-r-lg, 20px);
}
body.dmv2-chrome .main-content-wrapper a.careers-role-link svg {
  flex: 0 0 auto;
  transition: transform .25s ease;
}
body.dmv2-chrome .main-content-wrapper .careers-role-card:hover a.careers-role-link {
  color: var(--dm-orange, #FE5000);
}
body.dmv2-chrome .main-content-wrapper .careers-role-card:hover a.careers-role-link svg {
  transform: translateX(4px);
}
/* The ring has to be drawn on the overlay, not the inline text, or keyboard
   focus outlines a few words in the corner of a card-sized click target. */
body.dmv2-chrome .main-content-wrapper a.careers-role-link:focus-visible {
  outline: none;
}
body.dmv2-chrome .main-content-wrapper a.careers-role-link:focus-visible::after {
  outline: 2px solid var(--dm-indigo, #1A5FD4);
  outline-offset: 4px;
}
body.dmv2-chrome .main-content-wrapper .careers-no-results,
body.dmv2-chrome .main-content-wrapper .careers-no-results-static {
  margin: 10px 0 0;
  text-align: center;
  font-size: 16px;
  color: var(--dm-ink-muted, #5A5A6E);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
  body.dmv2-chrome .main-content-wrapper .careers-why-list {
    gap: 32px;
  }
  /* Two columns: the large tile keeps its double width but drops to one row,
     so it stays the anchor of the mosaic without eating half a phone-sized
     page. */
  body.dmv2-chrome .main-content-wrapper .careers-life-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Two columns are roughly twice as wide as four, so the desktop row height
       would leave these tiles letterboxed at about 2.4:1. Held at the older
       25vw, which is what this breakpoint already looked like — the section
       only needed shortening on desktop, where the 2x2 tile lives. */
    grid-auto-rows: minmax(clamp(150px, 25vw, 260px), auto);
    gap: 14px;
  }
  body.dmv2-chrome .main-content-wrapper .careers-life-tile:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 1;
  }
  body.dmv2-chrome .main-content-wrapper .careers-life-quote {
    padding: 26px 24px 22px;
  }
}
@media (max-width: 767px) {
  /* One card per row: 16px between cards, like the stacked filters above. */
  body.dmv2-chrome .main-content-wrapper .careers-roles-grid {
    margin-top: -8px;
    margin-bottom: -8px;
  }
  body.dmv2-chrome .main-content-wrapper .careers-roles-grid > .careers-role-col {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body.dmv2-chrome .main-content-wrapper .careers-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  body.dmv2-chrome .main-content-wrapper .careers-search {
    flex: 1 1 auto;
  }
  /* Full-width selects stacked, rather than two half-width controls whose
     labels truncate ("All Job Ty…"). */
  body.dmv2-chrome .main-content-wrapper .careers-selects {
    flex-direction: column;
    align-items: stretch;
  }
  body.dmv2-chrome .main-content-wrapper .careers-select-wrap,
  body.dmv2-chrome .main-content-wrapper .careers-select {
    width: 100%;
  }
  /* One column, and rows sized by content rather than by the grid: a long
     quote at 375px is taller than any photo tile, and a fixed row height would
     either clip it or leave every photo letterboxed. */
  body.dmv2-chrome .main-content-wrapper .careers-life-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  body.dmv2-chrome .main-content-wrapper .careers-life-tile,
  body.dmv2-chrome .main-content-wrapper .careers-life-tile:nth-child(5n+1) {
    grid-column: span 1;
    grid-row: span 1;
  }
  body.dmv2-chrome .main-content-wrapper .careers-life-photo {
    aspect-ratio: 4 / 3;
  }
  body.dmv2-chrome .main-content-wrapper .careers-role-card {
    padding: 24px 22px 22px;
  }
}