.altvp-vacancies{
  background:var(--color-background);
}

.altvp-vacancies__container{
  max-width:1400px;
  margin:0 auto;
  padding:40px 40px;
}

.altvp-vacancies__grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:80px;
  align-items:start;
}

/* Левая колонка */
.altvp-vacancies__intro{
  position:sticky;
  top:40px;
}

.altvp-vacancies__title{
  font-size:42px;
  font-weight:700;
  line-height:1.2;
  color:var(--color-text);
}

.altvp-vacancies__desc{
  font-size:18px;
  font-weight:500;
  color:var(--color-text);
  margin-top:24px;
  line-height:1.6;
}

/* Правая колонка — список */
.altvp-vacancies__list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.altvp-vacancies__item{
  background:var(--color-light);
  border:1px solid var(--color-border);
  transition:border-color .35s cubic-bezier(.4,0,.2,1);
}

.altvp-vacancies__item--active{
  border-color:var(--color-primary);
}

/* Шапка карточки */
.altvp-vacancies__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:32px 40px;
  cursor:pointer;
  user-select:none;
}

.altvp-vacancies__header-text{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.altvp-vacancies__item-title{
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  color:var(--color-text);
}

.altvp-vacancies__item-salary{
  font-size:18px;
  font-weight:500;
  color:var(--color-text);
}

/* Кнопка-стрелка */
.altvp-vacancies__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background:transparent;
  border:1px solid var(--color-border);
  color:var(--color-text);
  cursor:pointer;
  flex-shrink:0;
  transition:background .35s cubic-bezier(.4,0,.2,1),
             border-color .35s cubic-bezier(.4,0,.2,1),
             transform .35s cubic-bezier(.4,0,.2,1);
}

.altvp-vacancies__toggle:hover,
.altvp-vacancies__toggle:focus{
  background:var(--color-light);
  border-color:var(--color-primary);
  outline:none;
}

.altvp-vacancies__toggle svg{
  width:24px;
  height:24px;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.altvp-vacancies__item--active .altvp-vacancies__toggle svg{
  transform:rotate(180deg);
}

/* Тело карточки */
.altvp-vacancies__body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}

.altvp-vacancies__item--active .altvp-vacancies__body{
  grid-template-rows:1fr;
}

.altvp-vacancies__body-inner{
  overflow:hidden;
}

.altvp-vacancies__content{
  padding:0 40px 32px 40px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Секции внутри вакансии */
.altvp-vacancies__section{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.altvp-vacancies__section-title{
  font-size:16px;
  font-weight:700;
  color:var(--color-text);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.altvp-vacancies__section-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.altvp-vacancies__section-list li{
  font-size:16px;
  font-weight:500;
  color:var(--color-text);
  padding-left:16px;
  position:relative;
}

.altvp-vacancies__section-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  width:6px;
  height:6px;
  background:var(--color-accent);
}

/* Кнопка Откликнуться */
.altvp-vacancies__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 32px;
  background:var(--color-accent);
  color:#ffffff;
  font-size:18px;
  font-weight:500;
  text-decoration:none;
  border:none;
  border-radius:0;
  cursor:pointer;
  align-self:flex-start;
  transition:background .35s cubic-bezier(.4,0,.2,1);
}

.altvp-vacancies__button:hover,
.altvp-vacancies__button:focus{
  background:var(--color-accent-hover);
  outline:none;
}

/* ============================================
   BREAKPOINTS
   ============================================ */

@media (max-width:1199px){
  .altvp-vacancies__container{
    padding:96px 40px;
  }
  .altvp-vacancies__grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .altvp-vacancies__intro{
    position:static;
  }
  .altvp-vacancies__title{
    font-size:34px;
  }
}

@media (max-width:767px){
  .altvp-vacancies__container{
    padding:80px 24px;
  }
  .altvp-vacancies__grid{
    gap:40px;
  }
  .altvp-vacancies__header{
    padding:24px;
    gap:16px;
  }
  .altvp-vacancies__item-title{
    font-size:18px;
  }
  .altvp-vacancies__item-salary{
    font-size:16px;
  }
  .altvp-vacancies__toggle{
    width:48px;
    height:48px;
  }
  .altvp-vacancies__content{
    padding:0 24px 24px 24px;
    gap:16px;
  }
  .altvp-vacancies__button{
    width:100%;
    align-self:stretch;
  }
}