/* Migration overrides for the React/Swiper carousels (replacing legacy jQuery/Slick).
   Swiper renders its pagination/navigation into external elements that reuse the
   original Slick class names (.slick-dots / .slick-prev / .slick-next), so most of
   the look comes from the existing vendor.css/main.css. These rules:
   1. restore the position:relative context Slick used to add (via .slick-slider), and
   2. skin Swiper's bullet <span>s to look like the original Slick dot glyphs. */

/* Slick added .slick-slider (position:relative) to the carousel root; reproduce it
   so the absolutely-positioned dots/arrows anchor correctly. */
.carousel,
.high-light-carousel {
  position: relative;
}

/* Hero carousel dots: Swiper emits <span class="swiper-pagination-bullet"> into the
   external .slick-dots <ul>, whose container positioning (bottom:12%, left-aligned,
   padding-left:40px) already comes from main.css. The original Slick glyph styling
   lives in main.css under `.slick-dots li button:before` — which does NOT match
   Swiper's <span>s — so reproduce those final production values here: white 14px
   dot via the slick icon font, active dot red. */
.slick-dots .swiper-pagination-bullet {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.slick-dots .swiper-pagination-bullet::before {
  font-family: slick;
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "\2022"; /* • */
  text-align: center;
  opacity: 1;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots .swiper-pagination-bullet-active::before {
  color: #ea1b25;
}

/* Swiper's container is position:relative;z-index:1 (its core CSS), which paints the
   slide content above sibling arrows. The original Slick had no such stacking context,
   so only .slick-prev carried z-index:2 (from main.css) and .slick-next relied on the
   default level. Lift both arrows above Swiper's container so the next arrow isn't
   buried under the slide's .high-light-wrapper. */
.high-light-carousel .slick-prev,
.high-light-carousel .slick-next {
  z-index: 2;
}

/* Swiper marks a slide-locked navigation button with this class when there are too
   few slides to scroll; mirror Slick's hidden-arrow behavior. */
.high-light-carousel .slick-arrow.swiper-button-lock {
  display: none;
}

/* The legacy float(75%) + anonymous-table-cell(25%) columns wrap when rounding
   pushes them past 100%, dropping .careers-list below the carousel; the Swiper
   autoHeight also makes the columns height-independent. Lay the row out with
   flex instead and center the copy block against the current slide height.
   Scoped to >992px to keep main.css's single-column collapse below that. */
@media screen and (min-width: 993px) {
  .high-light {
    display: flex;
    align-items: center;
  }
  .high-light-carousel {
    float: none;
    flex: 0 0 75%;
  }
  .high-light .careers-list {
    display: block;
    flex: 0 0 25%;
  }
}