/* min-height, not a fixed height - a floor so a short posting still
   matches the original design size, not a cap that clips a long one (e.g.
   a wrapped 3-line Agency value plus 6 rows). .career-vacancies-grid's
   items default to align-items: stretch (its own CSS sets no override), so
   every card in a row still stretches to match whichever sibling ends up
   tallest - same "floor + grid stretch" approach already used for the
   Publications Table's row height. */
.career-vacancy-card {
  display: flex;
  flex-direction: column;
  min-height: 416px;
}

.career-vacancy-card__caption {
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-h4);
  color: rgb(var(--color-dark));
}

.career-vacancy-card__title-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-h4);
  color: rgb(var(--color-main-blue));
  text-decoration: none;
}

.career-vacancy-card__title-link:hover {
  text-decoration: underline;
}

.career-vacancy-card__external-icon {
  display: inline;
  vertical-align: -2px;
  margin-left: var(--space-1);
}

.career-vacancy-card__divider {
  margin: var(--space-2) 0;
  border: none;
  border-top: 1px solid rgb(var(--color-grey) / 0.2);
}

/* gap guarantees at least 16px between rows at every breakpoint;
   justify-content: space-between still distributes any leftover height on
   top of that whenever the card ends up taller than its own 416px
   min-height (e.g. stretched to match a taller sibling in the same grid
   row) and has room to spread 5-6 rows across. */
.career-vacancy-card__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 0;
}

.career-vacancy-card__row {
  display: flex;
  gap: var(--space-1);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
}

.career-vacancy-card__label {
  flex: 0 0 154px;
  font-weight: var(--font-weight-h4);
  color: rgb(var(--color-dark));
}

.career-vacancy-card__value {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-dark));
}

/* Same breakpoint career-vacancies-grid.css already uses to drop to a
   single column. Label + value stack instead of sitting side by side -
   the label's fixed 154px flex-basis above is a WIDTH on desktop's row
   layout, but would become a HEIGHT once flex-direction is column, so it
   has to be reset here too, not just re-pointed. */
@media (max-width: 767px) {
  .career-vacancy-card__row {
    flex-direction: column;
  }

  .career-vacancy-card__label {
    flex: 0 0 auto;
  }
}