/* ==========================================================================
   Vacancy detail page (vacancy-detail.html)
   Figma 125:1653 (empty form) / 129:2751 (filled), mobile 141:5039 / 141:5743
   Depends on: variables.css, base.css, header.css, footer.css, style.css,
   forms.css. Behaviour: js/vacancy.js
   ========================================================================== */

/* sections sit 60px apart here (the site default is 100px) */
.job-page {
  gap: 60px;
}

/* ---- Header ---- */

.job-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 60px;
}

.job-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.job-head__team {
  padding: 6px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-main-light);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-medium);
  color: var(--color-zinc-600);
}

.job-head__details {
  display: flex;
  gap: 24px;
}

.job-head__details li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--color-zinc-500);
}

.job-head__details img {
  width: 24px;
  height: 24px;
}

.job-head__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--color-zinc-900);
}

/* ---- Description ---- */

.job {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.job__top {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.job__intro {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.job__lead {
  font-weight: var(--fw-medium);
  color: var(--color-zinc-500);
}

.job__list {
  padding-left: 27px;
  list-style: disc;
  color: var(--color-zinc-900);
}

.job__heading {
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  color: var(--color-zinc-400);
}

/* contact card, right of the intro */
.job-contact {
  flex: 0 0 397px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--color-zinc-400);
  border-radius: var(--radius-md);
}

.job-contact__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.job-contact__label {
  color: var(--color-zinc-400);
}

.job-contact__value {
  color: var(--color-zinc-900);
  transition: color 0.2s ease;
}

.job-contact__value:hover {
  color: var(--color-secondary);
}

.job-contact__socials {
  display: flex;
  gap: 12px;
}

.job-contact__social {
  display: flex;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-zinc-200);
  transition: background-color 0.2s ease;
}

.job-contact__social:hover {
  background: var(--color-main);
}

.job-contact__social img {
  width: 24px;
  height: 24px;
}

/* ---- Application form ---- */

/* the divider above the form, inside the page gutter */
.apply::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 60px;
  background: var(--color-zinc-200);
}

.apply__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.apply__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.apply__block--half {
  width: calc(50% - 12px);         /* Figma: 608px of 1240 */
}

.apply__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* grey sentence above each field, key word in brand purple */
.apply__prompt {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-zinc-100);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: var(--fw-medium);
  color: var(--color-zinc-800);
}

.apply__prompt em {
  font-style: normal;
  color: var(--color-secondary);
}

.apply__cv {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.apply__cv .field {
  flex: 1 1 0;
}

/* the visible file box; the real <input type="file"> is visually hidden */
.apply__file {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.apply__file-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-soft);
}

.apply__file.has-file .apply__file-name {
  color: var(--color-text-main);
}

.apply__file-clear {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.apply__file-clear[hidden] {
  display: none;
}

.apply__file-clear img {
  width: 20px;
  height: 20px;
}

.apply__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.apply__send {
  height: 48px;
  font-weight: var(--fw-regular);
}

/* Figma empty state: the button is at half opacity until the form is complete */
.apply__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.apply__status {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--color-main-darker);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
  .job__top {
    flex-direction: column-reverse;   /* contacts first, as on Figma mobile */
    gap: 20px;
  }

  .job-contact {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .job-page {
    gap: 20px;
  }

  .job-head {
    gap: 12px;
    padding-top: 20px;
  }

  .job-head__meta {
    gap: 12px;
  }

  .job-head__title {
    font-size: 24px;
    line-height: 36px;
  }

  .job {
    gap: 20px;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .job__intro {
    gap: 16px;
  }

  .job__list {
    padding-left: 21px;
  }

  .job__heading {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
  }

  .job-contact {
    gap: 12px;
    padding: 12px;
  }

  .job-contact__item {
    gap: 6px;
  }

  .job-contact__value {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
  }

  .job-contact__social {
    padding: 4px;
  }

  .job-contact__social img {
    width: 20px;
    height: 20px;
  }

  /* the divider spans the whole screen on Figma mobile */
  .apply {
    padding-inline: 0;
  }

  .apply::before {
    margin-bottom: 20px;
  }

  .apply__form {
    padding-inline: var(--gutter);
  }

  .apply__block {
    gap: 12px;
  }

  .apply__block--half {
    width: 100%;
  }

  .apply__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .apply__prompt {
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
  }

  .apply__cv {
    flex-direction: column;
    align-items: stretch;
  }
}