/* Cards Block Styles */
.career-cards-container .default-content-wrapper h1,
.career-cards-container .default-content-wrapper h2 {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 82rem;
  padding: 0 1.25rem;
}

.career-cards-container .default-content-wrapper {
  margin: 0 auto;
}

.career-cards-container .default-content-wrapper .button-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.career-cards {
  margin: 0;
}

.career-cards > ul {
  list-style: none;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.875rem, 1fr));
  gap: 1.5rem;
  justify-content: center;
  max-width: 82rem;
}

.career-cards > ul:not(:has(li.default, li.overlay-image)) {
  grid-template-columns: repeat(auto-fill, minmax(16.0625rem, 1fr));
  padding: 0;
  margin: 0;
}

.career-cards > ul > li {
  border-radius: 1rem 0;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: -0.66rem 0.33rem 1.25rem 0 rgb(0 0 0 / 8%);
  width: 18.5rem;
  height: 18.75rem;
}

.career-cards > ul > li:not(.default, .overlay-image) {
  border: 0.0625rem solid var(--color-border-card);
  background-color: var(--color-white);
  border-radius: 0;
  width: auto;
  height: auto;
  box-shadow: none;
}

.career-cards:not(:has(li.default, li.overlay-image)) .cards-card-body {
  margin: 0;
}

.career-cards:not(:has(li.default, li.overlay-image)) .cards-card-image {
  line-height: 0;
}

.career-cards > ul > li:not(.default, .overlay-image) img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Default Variant Styles */
.career-cards > ul > li.default {
  position: relative;
  border: none;
  border-radius: 1rem;
  padding: 0;
  text-align: left;
  justify-content: flex-start;
  background: var(--color-background-mo-blue);
  width: 18.5rem;
  height: 18.75rem;
  box-shadow: -0.66rem 0.33rem 1.25rem 0 rgb(0 0 0 / 8%);
}

.career-cards > ul > li.default::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.0625rem;
  background: var(--gradient-card-background);
  border-radius: 1rem;
  /* stylelint-disable-next-line property-no-vendor-prefix, declaration-property-value-no-unknown */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  /* stylelint-disable-next-line property-no-vendor-prefix, declaration-property-value-no-unknown */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.career-cards > ul > li.default:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 2rem rgb(255 165 0 / 15%);
}

.career-cards li.default .service-card-content {
  width: 14.25rem;
  height: 12.125rem;
  position: absolute;
  top: 3.375rem;
  left: 2.3125rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

.career-cards li.default .service-card-icon {
  display: block;
}

.career-cards li.default .service-card-icon img,
.career-cards li.default .service-card-icon svg {
  width: 4rem;
  height: 4rem;
  color: var(--color-primary);
}

.career-cards li.default .service-card-title {
  font-family: inter, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.career-cards li.default .service-card-description {
  font-family: inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-primary);
  max-width: 100%;
}

.career-cards li.default .button.default {
  justify-content: flex-start;
  font-size: 0.875rem;
}

.career-cards li.default .button.default:hover {
  outline: inherit;
  outline-offset: inherit;
  background-color: inherit;
  color: inherit;
  transform: inherit;
}

.career-cards li.default .button.default:focus {
  outline: inherit;
  outline-offset: inherit;
}

.career-cards li.default .button.default::before {
  filter: none;
}

/* Overlay Image Variant Styles */
.career-cards > ul > li.overlay-image {
  position: relative;
  cursor: default;
  border: none;
  border-radius: 1rem;
  background: var(--color-white);
  padding: 0;
  text-align: center;
  justify-content: center;
  width: 18.5rem;
  height: 18.75rem;
}

.career-cards > ul > li.overlay-image::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.0625rem;
  background: var(--gradient-overlaycard-background);
  border-radius: 1rem;
  /* stylelint-disable-next-line property-no-vendor-prefix, declaration-property-value-no-unknown */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  /* stylelint-disable-next-line property-no-vendor-prefix, declaration-property-value-no-unknown */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.career-cards > ul > li.overlay-image:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 2rem rgb(255 165 0 / 15%);
  text-align: left;
}

@media (width > 768px) {
  .career-cards > ul > li.overlay-image:hover .service-card-default-content {
    opacity: 0;
  }

  .career-cards > ul > li.overlay-image:hover .service-card-image {
    opacity: 1;
  }

  .career-cards > ul > li.overlay-image:hover .service-card-overlay {
    opacity: 1;
  }

  .career-cards > ul > li.overlay-image:hover .service-card-overlay-content {
    opacity: 1;
    transform: translateY(0);
  }
}

.career-cards li.overlay-image .service-card-default-content {
  position: relative;
  z-index: 10;
  width: 13.625rem;
  height: 13.75rem;
  top: 0;
  left: 2.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transition: opacity 0.3s ease;
  padding: 0;
}

.career-cards li.overlay-image:hover .service-card-default-content {
  opacity: 0;
}

.career-cards li.overlay-image .service-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.career-cards li.overlay-image:hover .service-card-image {
  opacity: 1;
}

.career-cards li.overlay-image .service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem 0;
}

.career-cards li.overlay-image .service-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-overlaycard);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 1rem 0;
}

.career-cards li.overlay-image:hover .service-card-overlay {
  opacity: 1;
}

.career-cards li.overlay-image .service-card-overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 2rem 2.5rem;
  color: var(--color-white);
  opacity: 0;
}

.career-cards li.overlay-image:hover .service-card-overlay-content {
  opacity: 1;
  transform: translateY(0);
}

.career-cards li.overlay-image .service-card-icon {
  margin-bottom: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.career-cards li.overlay-image .service-card-icon img,
.career-cards li.overlay-image .service-card-icon svg {
  width: 3.375rem;
  height: 3.375rem;
}

.career-cards li.overlay-image .service-card-default-content .service-card-title {
  font-family: inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  text-align: left;
  margin-top: 1.375rem;
}

.career-cards
  li.overlay-image
  .service-card-default-content
  .service-card-description {
  font-family: inter, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  display: block;
}

.career-cards li.overlay-image .service-card-overlay-content .service-card-title {
  font-family: inter, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-white);
  display: inline-block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word; /* ensures long words wrap */
  max-width: 10.5ch;
}

/* Static overlay variant (plain authored cards transformed) */
.career-cards > ul > li.overlay-static {
  position: relative;
  cursor: default;
  border: none;
  border-radius: 1rem;
  background: var(--color-white);
  padding: 0;
  text-align: center;
  justify-content: center;
  width: 18.5rem;
  height: 18.75rem;
}

.career-cards > ul > li.overlay-static::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.0625rem;
  background: var(--gradient-overlaycard-background);
  border-radius: 1rem;
  pointer-events: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.career-cards li.overlay-static .service-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1; /* always visible */
}

.career-cards li.overlay-static .service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.career-cards li.overlay-static .service-card-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-overlaycard);
  z-index: 2;
  opacity: 1; /* always visible */
  border-radius: 1rem 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.career-cards li.overlay-static .service-card-overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 2rem 2.5rem;
  color: var(--color-white);
  opacity: 1; /* always visible */
}

/* stylelint-disable-next-line no-descending-specificity */
.career-cards li.overlay-static .service-card-title {
  font-family: inter, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-white);
  display: inline-block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 10ch;
}

/* stylelint-disable-next-line no-descending-specificity */
.career-cards li.overlay-static .service-card-description {
  font-family: inter, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-white);
  margin-top: 0.5rem;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  max-width: 22ch;
}

/* Large desktop breakpoint */
@media (width >= 1440px) {
  .career-cards-container .default-content-wrapper h1,
  .career-cards-container .default-content-wrapper h2 {
    margin-bottom: 3rem;
    padding: 0;
  }

  .career-cards > ul {
    grid-template-columns: repeat(4, 18.875rem);
    gap: 1.5rem;
    padding: 0;
  }
}

/* Medium to large desktop breakpoint */
@media (width <= 1439px) and (width > 1024px) {
  .career-cards-container .default-content-wrapper h1,
  .career-cards-container .default-content-wrapper h2 {
    margin-bottom: 2.5rem;
    padding: 0 2.5rem;
  }

  .career-cards > ul {
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 1.25rem;
    padding: 0 2.5rem;
  }

  .career-cards > ul > li {
    width: 100%;
    max-width: 18.875rem;
  }
}

/* Tablet breakpoint */
@media (width <= 1024px) and (width > 768px) {
  .career-cards-container .default-content-wrapper h1,
  .career-cards-container .default-content-wrapper h2 {
    margin-bottom: 2rem;
    padding: 0 2.5rem;
  }

  .career-cards {
    padding: 2.5rem 0;
  }

  .career-cards > ul {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    padding: 0 2.5rem;
    max-width: none;
  }

  .career-cards > ul > li {
    width: 100%;
    max-width: 18rem;
    height: 16rem;
  }

  .career-cards > ul > li.default {
    width: 100%;
    max-width: 18rem;
    height: 16rem;
  }

  .career-cards li.default .service-card-content {
    width: 12rem;
    height: 10rem;
    top: 2.5rem;
    left: 1.5rem;
  }

  .career-cards li.default .service-card-icon img,
  .career-cards li.default .service-card-icon svg {
    width: 3rem;
    height: 3rem;
  }

  .career-cards li.default .service-card-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .career-cards li.default .service-card-description {
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .career-cards > ul > li.overlay-image {
    width: 100%;
    max-width: 18rem;
    height: 16rem;
  }

  .career-cards li.overlay-image .service-card-default-content {
    left: 1.5rem;
  }

  .career-cards li.overlay-image .service-card-icon img,
  .career-cards li.overlay-image .service-card-icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Small tablet breakpoint */
@media (width <= 768px) and (width > 480px) {
  .career-cards-container .default-content-wrapper h1,
  .career-cards-container .default-content-wrapper h2 {
    margin-bottom: 1.5rem;
    padding: 0 1rem;
  }

  .career-cards {
    padding: 1.5rem 0;
  }

  .career-cards > ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0 1rem;
    max-width: none;
  }

  .career-cards > ul:not(:has(li.default, li.overlay-image)) {
    grid-template-columns: 1fr;
  }

  .career-cards > ul > li {
    width: 100%;
    height: 12rem;
  }

  .career-cards > ul > li.default {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    margin-bottom: 1rem;
    box-shadow: none;
  }

  .career-cards > ul > li.default::before {
    display: none;
  }

  .career-cards > ul > li.default:hover {
    transform: none;
    box-shadow: none;
  }

  .career-cards li.default .service-card-content {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
  }

  .career-cards li.default .service-card-icon {
    display: none;
  }

  .career-cards li.default .service-card-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .career-cards li.default .service-card-description {
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 1rem;
  }

  .career-cards > ul > li.overlay-image {
    width: 100%;
    height: 12rem;
    border: none;
    padding: 1rem;
  }

  .career-cards li.overlay-image .service-card-default-content {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
  }

  .career-cards li.overlay-image .service-card-icon img,
  .career-cards li.overlay-image .service-card-icon svg {
    width: 2rem;
    height: 2rem;
  }

  .career-cards li.overlay-image .service-card-default-content .service-card-title {
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: center;
    margin-top: 0.875rem;
  }

  .career-cards
    li.overlay-image
    .service-card-default-content
    .service-card-description {
    font-size: 0.75rem;
  }
}

/* Mobile breakpoint */
@media (width <= 480px) {
  .career-cards-container .default-content-wrapper h1,
  .career-cards-container .default-content-wrapper h2 {
    margin-bottom: 1.25rem;
    padding: 0 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .career-cards {
    padding: 1rem 0;
  }

  .career-cards > ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0 1rem;
    max-width: none;
  }

  .career-cards > ul:not(:has(li.default, li.overlay-image)) {
    grid-template-columns: 1fr;
  }

  .career-cards > ul > li {
    width: 100%;
    height: 6.75rem;
  }

  .career-cards > ul > li.default {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    margin-bottom: 1rem;
    box-shadow: none;
  }

  .career-cards > ul > li.default::before {
    display: none;
  }

  .career-cards > ul > li.default:hover {
    transform: none;
    box-shadow: none;
  }

  .career-cards li.default .service-card-content {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
  }

  .career-cards li.default .service-card-icon {
    display: none;
  }

  .career-cards li.default .service-card-title {
    font-size: 1rem;
    line-height: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .career-cards li.default .service-card-description {
    font-size: 0.875rem;
    line-height: 1.143;
    margin-bottom: 1.5rem;
  }

  .career-cards > ul > li.overlay-image {
    width: 100%;
    height: 6.75rem;
    padding: 0.75rem;
  }

  .career-cards li.overlay-image .service-card-default-content {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    padding: 0.25rem;
  }

  .career-cards li.overlay-image .service-card-icon img,
  .career-cards li.overlay-image .service-card-icon svg {
    width: 2rem;
    height: 2rem;
  }

  .career-cards li.overlay-image .service-card-icon {
    margin-bottom: 0.25rem;
  }

  .career-cards li.overlay-image .service-card-default-content .service-card-title {
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 0;
    margin-top: 0.875rem;
  }

  .career-cards
    li.overlay-image
    .service-card-default-content
    .service-card-description {
    display: none;
  }

  .career-cards li.overlay-image .service-card-overlay-content .service-card-title {
    font-size: 0.875rem;
    line-height: 1rem;
    transform: translate(-1.25rem, 0.625rem);
  }
}

.button-container .button.primary {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
}

/* Hide button container on desktop */
@media (width > 1024px) {
  .career-cards .button-container {
    display: none;
  }
}

/* Loading state */
.career-cards.loading {
  opacity: 0.7;
  pointer-events: none;
}