/* =============================================
   CAREER COMPONENTS

   Components:
   1) People bar (two-column text)
   2) People carousel (5 images on desktop)
   3) Fleet + Join overlap (two panels + centered carousel)

   Uses existing nb-offer-carousel scroll-snap + nav JS.
   ============================================= */

/* ---------------------------------------------
   1) People bar
   --------------------------------------------- */
.nb-career-people-bar {
  background: #2b2b2b;
  color: #ffffff;
}

.nb-career-people-bar .elementor-heading-title {
  color: #ffffff !important;
}

.nb-career-people-bar .elementor-widget-text-editor,
.nb-career-people-bar .elementor-widget-text-editor p {
  color: #ffffff !important;
}

/* ---------------------------------------------
   2) People carousel (5-up desktop)
   --------------------------------------------- */
/* Can be overridden in Elementor: Layout > Min Height (supports responsive controls). */
.nb-offer-carousel.nb-career-people-carousel {
  min-height: 360px;
}

.nb-career-people-carousel > .e-con-inner {
  min-height: inherit;
}

/* Remove default carousel padding/gap (flush images)
   Must beat `css/nb-offer-carousel.css` selector specificity (important rules). */
.nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]),
.nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]),
.nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner,
.nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner {
  gap: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Make the image fill the full card height (without breaking Elementor editor) */
.nb-career-people-carousel .nb-offer-card {
  border-radius: 0 !important;
  overflow: hidden;
}

/* Keep widget in-flow (so cards don't collapse when min-height isn't set) */
.nb-career-people-carousel .nb-offer-card .elementor-widget-image {
  flex: 1 1 auto;
  min-height: 0;
}

.nb-career-people-carousel .nb-offer-card .elementor-widget-image .elementor-widget-container,
.nb-career-people-carousel .nb-offer-card .elementor-widget-image .elementor-image {
  height: 100%;
}

.nb-career-people-carousel .nb-offer-card .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop: 5 visible items */
@media (min-width: 1025px) {
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > [data-element_type] {
    flex: 0 0 20% !important;
    width: 20% !important;
    min-width: 20% !important;
    max-width: 20% !important;
  }
}

/* Tablet: 3 visible items */
@media (max-width: 1024px) and (min-width: 768px) {
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > [data-element_type] {
    flex: 0 0 33.3333% !important;
    width: 33.3333% !important;
    min-width: 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

/* Mobile: 1 visible item */
@media (max-width: 767px) {
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > [data-element_type],
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .e-con,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > .elementor-element,
  .nb-offer-carousel.nb-career-people-carousel:not([class*="e-grid"]) > .e-con-inner > [data-element_type] {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1024px) {
  .nb-offer-carousel.nb-career-people-carousel {
    min-height: 320px;
    max-height: 50vh; /* Prevent portrait images from being too tall on iPad */
  }
}

@media (max-width: 767px) {
  .nb-offer-carousel.nb-career-people-carousel {
    min-height: 240px;
  }
}

/* People carousel arrows: overlay on top of images */
.nb-career-people-carousel-wrapper .nb-carousel-nav,
.nb-career-people-carousel ~ .nb-carousel-nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.nb-career-people-carousel-wrapper .nb-carousel-nav.nb-prev,
.nb-career-people-carousel ~ .nb-carousel-nav.nb-prev {
  left: 16px !important;
}

.nb-career-people-carousel-wrapper .nb-carousel-nav.nb-next,
.nb-career-people-carousel ~ .nb-carousel-nav.nb-next {
  right: 16px !important;
}

.nb-career-people-carousel-wrapper .nb-carousel-nav svg,
.nb-career-people-carousel ~ .nb-carousel-nav svg {
  width: 18px !important;
  height: 18px !important;
}

.nb-career-people-carousel-wrapper .nb-carousel-nav svg polyline,
.nb-career-people-carousel ~ .nb-carousel-nav svg polyline {
  stroke-width: 2.5 !important;
}

/* ---------------------------------------------
   3) Fleet + Join overlap section
   --------------------------------------------- */
.nb-career-overlap {
  position: relative;
  overflow: visible;
  /* Extra vertical space so the middle image never overlaps adjacent sections */
  --nb-career-overlap-min-height: 640px;
  min-height: var(--min-height, var(--nb-career-overlap-min-height));
  /* Elementor containers often use `min-height: var(--min-height)` internally */
  --min-height: var(--nb-career-overlap-min-height);
  --nb-career-overlap-panel-pad: 56px;
  --nb-career-middle-width: min(280px, 34vw);
  --nb-career-middle-aspect: 4 / 5;
  --nb-career-middle-stack-offset: 32px;
  --nb-career-middle-stack-offset-x: 24px; /* horizontal offset for the back image */
  --nb-career-middle-clearance: clamp(32px, 3.5vw, 56px); /* spacing between text and middle stack */
}

.nb-career-overlap .nb-career-panel--left {
  background: #8f8f8f;
  color: #ffffff;
}

.nb-career-overlap .nb-career-panel--left .elementor-heading-title,
.nb-career-overlap .nb-career-panel--left .elementor-widget-text-editor,
.nb-career-overlap .nb-career-panel--left .elementor-widget-text-editor p {
  color: #ffffff !important;
}

.nb-career-overlap .nb-career-panel--right {
  background: #ffffff;
  color: #000000;
}

.nb-career-overlap .nb-career-panel--right .elementor-heading-title {
  color: #000000 !important;
}

.nb-career-overlap .nb-career-panel--right .elementor-widget-text-editor,
.nb-career-overlap .nb-career-panel--right .elementor-widget-text-editor p {
  color: #000000 !important;
}

/* Default panel padding (overridable in Elementor) */
.nb-career-overlap .nb-career-panel--left,
.nb-career-overlap .nb-career-panel--right {
  --padding-top: 80px;
  --padding-bottom: 80px;
  --padding-left: 60px;
  --padding-right: 60px;
}

/* Align both columns from the top so the headings line up, even when the right column has more content. */
#career-fleet-join.nb-career-overlap .nb-career-panel--left,
#career-fleet-join.nb-career-overlap .nb-career-panel--right {
  --justify-content: flex-start !important;
}

/* Centered image carousel (absolute on desktop) */
.nb-career-overlap > .nb-career-middle-carousel,
.nb-career-overlap > .nb-career-middle-carousel-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Keep overall stack centered when the back card has a horizontal offset. */
  transform: translate(calc(-50% - (var(--nb-career-middle-stack-offset-x) / 2)), -50%);
  width: var(--nb-career-middle-width) !important;
  aspect-ratio: var(--nb-career-middle-aspect);
  z-index: 10;
}

/* Can be overridden in Elementor: Layout > Min Height (supports responsive controls). */
.nb-offer-carousel.nb-career-middle-carousel {
  min-height: 300px;
}

#career-fleet-join.nb-career-overlap .nb-career-panel--left {
  /* Keep text away from the centered overlap stack (without over-shrinking the content area). */
  padding-right: max(
    var(--padding-right, var(--nb-career-overlap-panel-pad)),
    calc((var(--nb-career-middle-width) / 2) + var(--nb-career-middle-clearance))
  );
}

#career-fleet-join.nb-career-overlap .nb-career-panel--right {
  /* Keep text away from the centered overlap stack (without over-shrinking the content area). */
  padding-left: max(
    var(--padding-left, var(--nb-career-overlap-panel-pad)),
    calc((var(--nb-career-middle-width) / 2) + var(--nb-career-middle-clearance))
  );
}

/* Offset background block behind the centered carousel */
.nb-career-middle-carousel > .e-con-inner {
  min-height: inherit;
  height: 100%;
}

/* When JS wraps the carousel, keep the inner carousel in normal flow */
.nb-career-middle-carousel-wrapper > .nb-career-middle-carousel {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100%;
  z-index: auto !important;
  z-index: 1 !important;
}

/* Middle carousel: single slide visible */
.nb-offer-carousel.nb-career-middle-carousel.e-con:not([class*="e-grid"]),
.nb-offer-carousel.nb-career-middle-carousel:not([class*="e-grid"]),
.nb-offer-carousel.nb-career-middle-carousel.e-con:not([class*="e-grid"]) > .e-con-inner,
.nb-offer-carousel.nb-career-middle-carousel:not([class*="e-grid"]) > .e-con-inner {
  display: block !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* Safety: if Elementor outputs this container as grid, still force stack mode on frontend. */
body:not(.elementor-editor-active) .nb-offer-carousel.nb-career-middle-carousel[class*="e-grid"],
body:not(.elementor-editor-active) .nb-offer-carousel.nb-career-middle-carousel[class*="e-grid"] > .e-con-inner {
  display: block !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* Override base offer-carousel card sizing (3-up) so stacked cards can fill the middle width. */
.nb-offer-carousel.nb-career-middle-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card,
.nb-offer-carousel.nb-career-middle-carousel.e-con:not([class*="e-grid"]) > .nb-offer-card.e-con-full,
.nb-offer-carousel.nb-career-middle-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card,
.nb-offer-carousel.nb-career-middle-carousel.e-con:not([class*="e-grid"]) > .e-con-inner > .nb-offer-card.e-con-full,
.nb-offer-carousel.nb-career-middle-carousel:not([class*="e-grid"]) > .nb-offer-card,
.nb-offer-carousel.nb-career-middle-carousel:not([class*="e-grid"]) > .nb-offer-card.e-con-full {
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  scroll-snap-align: none !important;
}

/* Two-layer stack: show only 2 slides (front + back). JS swaps which slides are visible. */
.nb-offer-carousel.nb-career-middle-carousel {
  position: relative;
}

.nb-career-middle-carousel .nb-offer-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
  position: relative;
  min-height: inherit;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Hide empty/placeholder slides (frontend only). */
body:not(.elementor-editor-active) .nb-career-middle-carousel [data-nb-empty-slide="1"] {
  display: none !important;
}

.nb-career-middle-carousel .nb-offer-card.nb-stack-back {
  opacity: 1;
  z-index: 1;
  transform: translate(
    var(--nb-career-middle-stack-offset-x),
    calc(var(--nb-career-middle-stack-offset) * -0.5)
  );
}

.nb-career-middle-carousel .nb-offer-card.nb-stack-front {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  transform: translateY(calc(var(--nb-career-middle-stack-offset) * 0.5));
}

.nb-career-middle-carousel .nb-offer-card.nb-stack-hidden {
  display: none !important;
}

/* Fallback (no JS): show first 2 slides only - stair effect */
.nb-career-middle-carousel:not(.nb-stack-ready) .nb-offer-card:nth-child(1) {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  transform: translateY(calc(var(--nb-career-middle-stack-offset) * 0.5));
}

.nb-career-middle-carousel:not(.nb-stack-ready) .nb-offer-card:nth-child(2) {
  opacity: 1;
  z-index: 1;
  transform: translate(
    var(--nb-career-middle-stack-offset-x),
    calc(var(--nb-career-middle-stack-offset) * -0.5)
  );
}

/* Hide third slide and beyond */
.nb-career-middle-carousel:not(.nb-stack-ready) .nb-offer-card:nth-child(n+3) {
  display: none !important;
}

/* Make image fill the card without affecting layout height */
.nb-career-middle-carousel .nb-offer-card .elementor-widget-image {
  position: absolute;
  inset: 0;
}

.nb-career-middle-carousel .nb-offer-card .elementor-widget-image .elementor-widget-container,
.nb-career-middle-carousel .nb-offer-card .elementor-widget-image .elementor-image,
.nb-career-middle-carousel .nb-offer-card .elementor-widget-image img {
  width: 100%;
  height: 100%;
}

.nb-career-middle-carousel .nb-offer-card .elementor-widget-image img {
  object-fit: cover;
  display: block;
}

/* Middle carousel arrows */
.nb-career-middle-carousel-wrapper .nb-carousel-nav,
.nb-career-middle-carousel ~ .nb-carousel-nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Mobile: re-enable arrows for the *stack* carousel.
   Elementor overrides globally hide offer-carousel arrows on mobile (expects swipe),
   but the career middle carousel is not a swipe scroller. */
@media (max-width: 767px) {
  .nb-career-middle-carousel-wrapper.nb-carousel-active .nb-carousel-nav {
    display: flex !important;
  }
}

.nb-career-middle-carousel-wrapper .nb-carousel-nav.nb-prev,
.nb-career-middle-carousel ~ .nb-carousel-nav.nb-prev {
  left: 12px !important;
}

.nb-career-middle-carousel-wrapper .nb-carousel-nav.nb-next,
.nb-career-middle-carousel ~ .nb-carousel-nav.nb-next {
  right: 12px !important;
}

.nb-career-middle-carousel-wrapper .nb-carousel-nav svg,
.nb-career-middle-carousel ~ .nb-carousel-nav svg {
  width: 18px !important;
  height: 18px !important;
}

.nb-career-middle-carousel-wrapper .nb-carousel-nav svg polyline,
.nb-career-middle-carousel ~ .nb-carousel-nav svg polyline {
  stroke-width: 2.5 !important;
}

/* Responsive: stack and disable absolute overlap */
@media (max-width: 1024px) and (min-width: 768px) {
  .nb-career-overlap {
    --nb-career-overlap-min-height: 600px;
    min-height: var(--min-height, var(--nb-career-overlap-min-height));
    --min-height: var(--nb-career-overlap-min-height);
    --nb-career-overlap-panel-pad: 40px;
    --nb-career-middle-width: min(280px, 70vw);
    --nb-career-middle-aspect: 4 / 5;
    --nb-career-middle-stack-offset: 24px;
    --nb-career-middle-stack-offset-x: 20px;
    --nb-career-middle-clearance: 24px;
  }

  /* Align middle carousel to the left on tablets */
  .nb-career-overlap > .nb-career-middle-carousel,
  .nb-career-overlap > .nb-career-middle-carousel-wrapper {
    left: 50%;
    transform: translate(calc(-50% - (var(--nb-career-middle-stack-offset-x) / 2)), -50%);
  }

  .nb-offer-carousel.nb-career-middle-carousel {
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  .nb-career-overlap {
    --nb-career-overlap-min-height: 0px;
    min-height: var(--min-height, var(--nb-career-overlap-min-height));
    --min-height: var(--nb-career-overlap-min-height);
    --nb-career-overlap-panel-pad: 24px;
    --nb-career-middle-width: 0px;
    --nb-career-middle-aspect: 4 / 5;
    --nb-career-middle-stack-offset: 0px;
    --nb-career-middle-stack-offset-x: 0px;
    --nb-career-middle-clearance: 0px;
  }

  .nb-career-overlap > .nb-career-middle-carousel,
  .nb-career-overlap > .nb-career-middle-carousel-wrapper {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100% !important;
    max-width: 520px;
    margin: 16px auto;
  }

  .nb-offer-carousel.nb-career-middle-carousel {
    min-height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  /* Force cover fit on mobile to ensure no distortion in the new aspect ratio */
  .nb-offer-carousel.nb-career-middle-carousel img {
    object-fit: cover !important;
  }
}

/* ---------------------------------------------
   Note: No Elementor editor special-casing needed
   because images remain in normal flow.
   --------------------------------------------- */