/**
 * Careers Component Styles
 *
 * Uses CSS variables for theming.
 */

.careers-component {
  background: var(--color-dark-blue, #1C2E45);
  color: #fff;
  display: block;
  overflow: hidden;
  padding: 6rem var(--content-gutter) var(--block-margin);
	position: relative;
  width: 100%;
}

.simple-page .careers-component {
  left: 50%;
  transform: translateX(-50%);
  width: 100dvw;
}

.careers-component::before {
  background: url('/app/themes/lovekansas/dist/images/love-kansas-texture.webp') top center;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  mix-blend-mode: color-burn;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0.6;
}

.careers-component::after {
  background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  content: '';
  display: block;
  height: 3.5rem;
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
}

.careers-bg {
  background: transparent no-repeat center top;
  background-size: cover;
  display: block;
  filter: saturate(0);
  height: 100%;
  left: 0;
  mix-blend-mode: screen;
  opacity: .075;
  position: absolute;
  top: 0;
  width: 100%;
}

.careers-component-content {
  display: block;
  margin: 0 auto 2.75rem;
  max-width: var(--content-max-width);
  position: relative;
  width: 100%;
}

.careers-preheadline {
  color: #A4AAB3;
  display: block;
  font-size: .875rem;
  line-height: 1.25em;
  margin: 0 0 .7857em;
  position: relative;
  padding: 0;
}

.careers-headline {
  color: #fff;
  display: block;
  font-family: var(--font-heading);
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 1em;
  margin: 0 0 1em;
  max-width: 8.75em;
  padding: 0 1em 0 0;
  position: relative;
  z-index: 1;
}

.careers-headline::before {
  background: url('/app/themes/lovekansas/dist/images/small-badge.webp') center;
  background-size: contain;
  bottom: 0;
  content: '';
  display: block;
  height: 1.625rem;
  left: 100dvw;
  margin: 0 0 0 calc((var(--content-gutter) * -2) - 1.625rem);
  position: absolute;
  width: 1.625rem;
}

.careers-headline::after {
  border-right: 2px solid var(--color-yellow, #E9B10F);
  bottom: 2.3125rem;
  content: '';
  display: block;
  height: auto;
  left: 100dvw;
  margin: 0 0 0 calc((var(--content-gutter) * -2) - .875rem);
  position: absolute;
  top: -5.5rem;
  width: 0;
}

.careers-industries-wrap {
  display: block;
  max-width: 40rem;
  position: relative;
  width: 100%;
  padding: 0;
}

.careers-industries-title {
  color: #A4AAB3;
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin: 0 0 1em;
  position: relative;
}

.careers-industries {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

.careers-industry {
  background: rgba(9,20,34,.5);
  backdrop-filter: blur(.5em);
  border-radius: 5em;
  color: #fff;
  display: inline-block;
  font-size: 1rem;
  line-height: 1.25em;
  padding: .625em 1em;
  cursor: default;
  position: relative;
  text-decoration: none;
  transition: .2s;
  vertical-align: top;
}

@media (hover: hover) {
  a.careers-industry:hover {
    background: rgba(9,20,34,1);
    cursor: pointer;
  }
}

a.careers-industry:focus-visible {
  background: rgba(9,20,34,1);
  cursor: pointer;
}

.careers-callout {
  background: rgba(0,0,0,.2);
  border-radius: 0 .5rem .5rem 0;
  border-left: .1875rem solid var(--color-yellow, #E9B10F);
  display: block;
  margin: 0 0 2rem;
  padding: 1.25rem 1.25rem 1.5rem;
  position: relative;
  width: 100%; 
}

.callout-stat {
  color: #fff;
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0 0 .5rem;
  position: relative;
}

.callout-description {
  color: #fff;
  display: block;
  font-size: 1rem;
  line-height: 1.25em;
  margin: 0 0 .5em;
  position: relative;
}

.callout-source {
  color: #A4AAB3;
  display: block;
  font-size: .75rem;
  line-height: 1.25em;
  position: relative;
}

.careers-testimonials-wrap {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: var(--content-max-width);
  position: relative;
  width: 100%;
  /* Prevent layout shift during carousel initialization */
  min-width: 0;
}

.careers-testimonials-title {
  color: #fff;
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25rem;
  margin: 0 0 1em;
  position: relative;
}

.careers-testimonials-title span {
  color: var(--color-yellow, #E9B10F);
}

.careers-component .careers-carousel {
  padding: 0;
}

.careers-component .splide.careers-carousel {
  padding: 0 0 4rem;
}

@media (width >= 768px) {
  .careers-component::after {
    height: 4rem;
  }

  .careers-headline {
    font-size: 3.375rem;
  }
}

@media (width >= 1024px) {
  .careers-component {
    padding: 8rem var(--content-gutter) 5rem;
  }

  .careers-component::after {
    height: 6rem;
  }

  .careers-component-content {
    padding: 0 0 0 3rem;
  }

  .careers-preheadline {
    font-size: 1rem;
  }

  .careers-headline {
    font-size: 3.9375rem;
    margin: 0 0 .75em;
  }

  .careers-headline::before {
    left: 0;
    margin: 0 0 0 -3rem;
  }

  .careers-headline::after {
    left: 0;
    margin: 0 0 0 -2.275rem;
    top: -7.5rem;
  }

  .careers-industries-title {
    font-size: 1.25rem;
  }

  .careers-callout {
    margin: -3rem 0 0 0;
    position: absolute;
    right: var(--content-gutter);
    top: auto;
    transform: translateY(-100%);
    width: 12.875rem;
  }

  .callout-stat {
    font-size: 2rem;
  }

  .callout-description {
    margin: 0 0 1em;
  }

  .careers-testimonials-wrap {
    margin: 5rem auto 0;
    padding: 0 0 0 3rem;
  }

  .careers-testimonials-title {
    margin: -2.3rem auto 1em auto;
    order: 2;
    padding: 0 10rem;
    text-align: center;
    width: 100%;
  }
}

@media (width >= 1200px) {
  .careers-component::after {
    height: 8rem;
  }

  .careers-component-content {
    padding: 0 0 0 4rem;
  }

  .careers-preheadline {
    font-size: 1.125rem;
  }

  .careers-headline {
    font-size: 4.5rem;
  }

  .careers-headline::before {
    margin: 0 0 0 -4rem;
  }

  .careers-headline::after {
    margin: 0 0 0 -3.275rem;
  }

  .careers-headline::after {
    top: -9.5rem;
  }

  .careers-industries-wrap {
    max-width: 50rem;
  }

  .careers-industries-title {
    font-size: 1.375rem;
  }

  .careers-industry {
    font-size: 1.125rem;
  }

  .careers-testimonials-wrap {
    padding: 0 0 0 4rem;
  }

  .careers-component .splide.careers-carousel {
    padding: 0 0 5rem;
  }

  .careers-carousel .splide__arrows {
    bottom: 1rem;
  }

  .careers-testimonials-title {
    font-size: 1.375rem;
    margin: -3.3rem auto 1em auto;
  }
}

@media (width >= 1536px) {
  .careers-component {
    padding: 10rem var(--content-gutter) var(--block-margin);
  }
  
  .careers-component::after {
    height: 12rem;
  }

  .careers-component-content {
    padding: 0 0 0 5rem;
  }

  .careers-headline {
    font-size: 5rem;
  }

  .careers-headline::before {
    margin: 0 0 0 -5rem;
  }

  .careers-headline::after {
    margin: 0 0 0 -4.275rem;
  }

  .careers-testimonials-wrap {
    padding: 0 0 0 5rem;
  }

  .careers-component .splide.careers-carousel {
    padding: 0 0 6rem;
  }

  .careers-carousel .splide__arrows {
    bottom: 2rem;
  }

  .careers-testimonials-title {
    margin: -4.3rem auto 1em auto;
  }

  .careers-component .user-submission__badge {
    right: 0;
  }
}

@media (width >= 1742px) {
  .careers-callout {
    right: calc((100dvw - var(--content-max-width)) / 2);
  }
}