/* ==========================================================================
   Careers page (careers.html) — Figma 125:1155, mobile 141:4691
   Depends on: variables.css, base.css, header.css, footer.css, style.css
   ========================================================================== */

.careers-hero .hero__title {
  line-height: 100px;
}

/* desktop decorations (the sparkle stays on phones, placed in style.css) */
@media (min-width: 1201px) {
  .careers-hero .hero__cursor {
    top: 85px;
    left: 294px;                 /* Figma: 194px inside the 100px-inset text box */
  }

  .careers-hero .hero__sparkle {
    top: 32px;
    right: 402px;
  }
}

/* the list sits on white, covering the hero grid lines (as in Figma) */
.vacancies {
  position: relative;
  margin-top: -40px;             /* Figma: 60px from the hero text, page gap is 100px */
  background: var(--color-white);
}

.vacancies__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* one row per position, the whole row is the link */
.vacancy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 23px;          /* Figma: 24px, with the 1px line drawn inside it */
  border-bottom: 1px solid var(--color-zinc-400);
  transition: border-color 0.3s ease;
}

.vacancy:hover {
  border-color: var(--color-secondary);
}

.vacancy__head {
  display: flex;
  align-items: center;
  gap: 40px;
}

.vacancy__title {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 45px;
  font-weight: var(--fw-semibold);
  color: var(--color-zinc-900);
  transition: color 0.3s ease;
}

.vacancy:hover .vacancy__title {
  color: var(--color-secondary);
}

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

.vacancy__team {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-zinc-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--color-zinc-800);
  white-space: nowrap;
}

.vacancy__salary {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-main-light);
  font-weight: var(--fw-semibold);
  color: var(--color-zinc-900);
  white-space: nowrap;
}

.vacancy__text,
.vacancy__meta {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--color-zinc-500);
}

.vacancy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 28px;              /* Figma: 40px under the description */
}

.vacancy__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vacancy__meta img {
  width: 24px;
  height: 24px;
}

@media (max-width: 1200px) {
  .careers-hero .hero__title {
    line-height: var(--lh-display);
  }
}

@media (max-width: 768px) {
  .vacancies {
    margin-top: -44px;           /* Figma mobile: 20px from the hero text */
  }

  .vacancies__list {
    gap: 20px;
  }

  .vacancy__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .vacancy__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
  }

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

  .vacancy__meta {
    margin-top: 8px;             /* Figma mobile: 20px under the description */
  }
}