/**
 * Careers Customizer Component Styles
 *
 * Simplified careers section for theme customizer (no testimonials or industries).
 * Uses CSS variables for theming.
 */

.careers-customizer-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%;
}

.careers-customizer-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-customizer-component::after {
  background: linear-gradient(to bottom,  rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0) 100%);
  content: '';
  display: block;
  height: 3.5rem;
  left: 0;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  width: 100%;
}

.careers-customizer-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-customizer-content {
  display: block;
  margin: 0 auto;
  max-width: var(--content-max-width);
  position: relative;
  width: 100%;
}

.careers-customizer-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-customizer-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-customizer-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-customizer-description {
  color: #fff;
  display: block;
  font-size: 1rem;
  line-height: 1.5em;
  margin: 0 0 2rem;
  max-width: 40rem;
  position: relative;
}

.careers-customizer-description strong {
  color: #fff;
  font-weight: 700;
}

.careers-customizer-description ul {
  list-style: disc;
  margin: 1em 0;
  padding-left: 1.5em;
}

.careers-customizer-description li {
  margin: 0.5em 0;
}

.careers-customizer-cta {
  display: block;
  margin: 2rem 0 0;
  position: relative;
}

.careers-customizer-button {
  background: var(--color-yellow, #E9B10F);
  border-radius: 0.25rem;
  color: var(--color-dark-blue, #1C2E45);
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25em;
  padding: 0.875em 1.75em;
  position: relative;
  text-decoration: none;
  transition: 0.2s;
}

@media (hover: hover) {
  .careers-customizer-button:hover {
    background: #d19f0e;
    transform: translateY(-2px);
  }
}

.careers-customizer-button:focus-visible {
  background: #d19f0e;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

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

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

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

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

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

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

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

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

  .careers-customizer-headline::before {
    left: 0;
    margin: 0 0 0 calc((var(--content-gutter) / -2) + -.8125rem);
  }

  .careers-customizer-headline::after {
    left: 0;
    margin: 0 0 0 calc((var(--content-gutter) / -2) + -.1rem);
    top: -7.5rem;
  }

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

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

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

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

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

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

  .careers-customizer-description {
    font-size: 1.125rem;
  }
}

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

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

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