/* ============================================================
   Job cards from jobvision
   ------------------------------------------------------------
   Written to match the cards these stand in for, so the page
   does not change character when the plugin takes over: the
   same gradient, the same 16px corner, the same outlined
   button. The wrapper keeps the job-list class, so the theme's
   phone rules for that list apply to these too.
   ============================================================ */

.msk-jv-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.msk-jv-card {
  display: flex;
  flex-direction: column;
  gap: 18px;

  /* When these stand in for the hand-made cards, the box around them is the
     page's own — a flex column that lines its children up at the start rather
     than stretching them. Left to that, every card came out as wide as its own
     title and no wider, so a list of five jobs was five different widths. */
  width: 100%;
  align-self: stretch;

  padding: 30px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, #18636960 0%, #114145 100%),
    #ffffff15;
  color: #fff;
}

.msk-jv-card__title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
}

.msk-jv-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;

  margin: 0;
  font-size: 18px;
  color: rgb(255 255 255 / 82%);
}

/* The separator between the facts. A drawn dot rather than a character, so it
   sits on the middle of the line at any size and is not read out to anyone
   listening to the page.

   It belongs to the fact that follows it rather than sitting between two of
   them, which matters the moment the line wraps: as a separate item, a dot left
   stranded at the end of a line looks like a mistake. Carried by its own fact,
   it goes to the next line with it and reads as a bullet. */
.msk-jv-card__fact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.msk-jv-card__fact:not(:first-child)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  opacity: .5;
}

.msk-jv-card__link {
  align-self: flex-start;

  padding: 14px 30px;
  border: 1px solid #b96d51;
  border-radius: 8px;
  color: #dd9370;

  font-size: 16px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.msk-jv-card__link:hover,
.msk-jv-card__link:focus-visible {
  background: #b96d51;
  color: #fff;
}

.msk-jv-empty {
  padding: 30px 0;
  text-align: center;
  opacity: .75;
}

/* ── The wide layout: the button on the far side ─────────────
   Stacked, the card is a column of three things all starting at the same edge,
   which on a 1152px card left two thirds of it empty and the button sitting
   under its own title like an afterthought. The reading matter stays where a
   reader starts — title, then the line under it — and the one thing to do
   about it goes to the opposite edge, on the middle line of the card.

   A grid rather than a row, because the title and the line under it are two
   siblings and a row would put them beside each other. This way they keep the
   markup they have: no wrapper, and the phone layout below is untouched. */
@media (min-width: 1024px) {

  .msk-jv-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title action"
      "meta  action";
    align-items: center;
    column-gap: 40px;
    row-gap: 12px;
  }

  .msk-jv-card__title {
    grid-area: title;
  }

  .msk-jv-card__meta {
    grid-area: meta;
  }

  .msk-jv-card__link {
    grid-area: action;
    align-self: center;
    /* Logical, so it is the left in Persian and the right if this is ever read
       the other way round. */
    justify-self: end;
    white-space: nowrap;
  }

}

@media (max-width: 1023px) {

  .msk-jv-list {
    gap: 24px;
  }

  /* The same reasoning as the hand-made cards on a phone, and the same figures:
     see assets/css/mobile-fixes.css in the theme. The card's own words are not
     written on its edge, the secondary line is quieter than the title, and the
     button is wide enough for a thumb. */
  .msk-jv-card {
    gap: 14px;
    padding: 20px;
  }

  .msk-jv-card__title {
    font-size: 22px;
  }

  .msk-jv-card__meta {
    font-size: 15px;
  }

  .msk-jv-card__link {
    align-self: stretch;
    text-align: center;
  }

}

@media (prefers-reduced-motion: reduce) {

  .msk-jv-card__link {
    transition: none;
  }

}