/* Keep the vacancy list and the selected vacancy independently readable. */
@media (min-width: 761px) {
  .product-jobs-page .product-jobs-layout {
    height: clamp(26rem, calc(100dvh - 5.8rem), 58rem);
    min-height: 0;
    align-items: stretch;
  }

  .product-jobs-page .product-jobs-layout > .job-list,
  .product-jobs-page .product-jobs-layout > .product-job-detail {
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #a6cbb1 transparent;
    scrollbar-width: thin;
  }

  .product-jobs-page .product-jobs-layout > .job-list {
    padding: 2px 10px 2px 2px;
  }

  .product-jobs-page .product-jobs-layout > .product-job-detail {
    align-self: stretch;
    position: static;
  }
}

.product-jobs-page .product-jobs-layout .job-list-card.active {
  background: #effaf3;
  border-color: #087347;
  box-shadow: inset 5px 0 0 #087347, 0 4px 14px rgba(5, 103, 61, 0.14);
}

.product-jobs-page .product-jobs-layout .job-list-card.active strong {
  color: #075b39;
}

.product-jobs-page .product-jobs-layout .job-list-card.active .company-mark {
  background: #d9f0dc;
}

.product-jobs-page .product-jobs-layout .job-list-card:focus-visible {
  outline: 3px solid #087347;
  outline-offset: 2px;
}