/* Обёртка */
.vacancies-accordion {
  max-width: 1200px;
  margin: 0 auto 40px;
}

/* Каждый элемент — полностью кликабельный блок */
.vacancy-item {
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid #000000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Увеличиваем высоту и делим summary на три ряда */
.vacancy-item summary {
  display: flex;
  flex-direction: column;     /* вертикальная раскладка */
  align-items: flex-start;    /* выравнивание по левому краю */
  padding: 24px;              /* больше внутреннего отступа */
  /* background-color: #ffffff; */
  cursor: pointer;
  z-index: 1; 
}

/* Дата сверху */
.vacancy-item summary .vacancy-date {
  font-size: 16px;
  color: #3b3b3b;
  opacity: 0.8;
  margin-bottom: 8px;
}

/* Заголовок вакансии по центру summary */
.vacancy-item summary .vacancy-title {
  font-size: 28px;
  font-weight: 600;
  color: #000000;
  margin: 0;
  margin-bottom: 8px;
}

/* Теги внизу summary */
.vacancy-item summary .vacancy-tags {
  font-size: 16px;
  color: #3b3b3b;
  opacity: 0.9;
  margin: 0;
}

/* Hover-эффект */
.vacancy-item summary:hover {
  background-color: #4059b1;
  color: #ffffff;
}

.vacancy-item summary:hover .vacancy-date,
.vacancy-item summary:hover .vacancy-title,
.vacancy-item summary:hover .vacancy-tags {
  color: #ffffff !important;
}

/* Скрываем контент */
.vacancy-details .vacancy-details{
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.2s ease;
  overflow: hidden;
}

/* Когда <details> открыт */
.vacancy-item[open] .vacancy-details {
  padding: 16px 20px 24px;
  max-height: 2000px; 
}

.vacancy-item[open] summary{
  background-color: #4059b1;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.vacancy-item[open] summary .vacancy-date {
  color: #ffffff;
}
.vacancy-item[open] summary .vacancy-title {
  color: #ffffff;
}
.vacancy-item[open] summary .vacancy-tags {
  color: #ffffff;
}