/* 
 * Стили для страницы вакансий
 * Файл: assets/vakansii.css
 * Адаптировано из референса Figma
 */

/* Основные стили страницы - по референсу */
.vacancies-page {
    max-width: 1170px;
    margin: 0 auto;
    padding: 32px 40px 80px;
    min-height: 70vh;
    background-color: #fff;
    position: relative;
}

/* Хлебные крошки - точное соответствие референсу */
.breadcrumbs {
    padding: 0 0 24px 0;
    font-size: 12px;
    color: #333;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    line-height: 100%;
}

.breadcrumbs a {
    color: #333;
    text-decoration: none;
}

.breadcrumbs .current {
    color: #9b9d8c;
}

.breadcrumbs span {
    margin: 0 8px;
}

/* Заголовок страницы */
.page-title {
    text-align: left;
    margin: 0 0 40px;
    color: #000;
    font-size: 36px;
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: -0.7px;
    font-family: 'Oswald', sans-serif;
}

/* Фильтр вакансий - точное соответствие референсу */
.vacancies-filter {
    margin: 0 0 40px;
    padding: 0;
    background: transparent;
    border: none;
}

.filter-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

.filter-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: max-content;
    gap: 12px;
}

.filter-item {
    flex-shrink: 0;
}

.filter-link {
    display: inline-block;
    padding: 11px;
    background-color: #1f1f1f;
    border: 1px solid #656565;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: 'Oswald', sans-serif;
    text-align: center;
}

.filter-link:hover {
    background-color: #2f2f2f;
}

.filter-item.active .filter-link {
    background-color: #798416;
    border-color: #656565;
    color: #fff;
}

/* Контейнер вакансий */
.vacancies-grid {
    margin-top: 0;
    padding-bottom: 0;
}

.vacancies-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding-bottom: 80px;
}

/* Карточка вакансии - точное соответствие референсу */
.vacancy-card {
    display: flex;
    flex-direction: column;
    background: #f3f3f3;
    border: 1px solid #798416;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    height: 501px;
    position: relative;
    overflow: hidden;
}

.vacancy-card:hover {
    background-color: #e8e8e8;
}

.vacancy-card:hover .vacancy-card-footer {
    background-color: #798416;
}

.vacancy-card:hover .vacancy-apply {
    color: #fff;
}

.vacancy-card:hover .vacancy-card-arrow {
    background-color: #798416;
}

.vacancy-card:hover .vacancy-card-arrow svg path {
    fill: #fff;
}

.vacancy-card-image {
    height: 259px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.vacancy-card-image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #798416;
    z-index: 1;
    pointer-events: none;
}

.vacancy-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vacancy-card-content {
    padding: 19px 19px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.vacancy-card-title {
    margin: 0;
    font-size: 24px;
    color: #333;
    line-height: 120%;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    min-height: 58px;
}

.vacancy-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}

.vacancy-salary {
    color: #798416;
    font-size: 20px;
    font-weight: 700;
    line-height: 120%;
    font-family: 'Oswald', sans-serif;
}

.vacancy-amount {
    color: #333;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    font-family: 'Oswald', sans-serif;
    padding-bottom: 15px;
}

.vacancy-card-footer {
    padding: 19px;
    background-color: #f3f3f3;
    border-top: 1px solid #798416;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    height: 77px;
    position: relative;
    z-index: 1;
}

.vacancy-apply {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Merriweather', serif;
}

.vacancy-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #f3f3f3;
    position: relative;
}

.vacancy-card-arrow svg {
    width: 9px;
    height: 13px;
}

.vacancy-card-arrow svg path {
    fill: #333;
    transition: fill 0.3s ease;
}



/* Сообщение об отсутствии вакансий */
.no-vacancies {
    text-align: center;
    padding: 60px 20px;
    background: #f3f3f3;
    border: 1px solid #798416;
    margin: 40px 0;
}

.no-vacancies p {
    font-size: 18px;
    color: #333;
    margin-bottom: 25px;
    font-family: 'Merriweather', serif;
}

.button-back {
    display: inline-block;
    padding: 12px 30px;
    background: #798416;
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    border: 1px solid #656565;
    transition: all 0.3s ease;
}

.button-back:hover {
    background: #657000;
}

/* Пагинация - стилизация под референс */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #ccc;
}

.nav-links {
    display: flex;
    gap: 8px;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    background: white;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    font-weight: 400;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: 'Merriweather', serif;
}

.page-numbers:hover:not(.current) {
    background: #f3f3f3;
}

.page-numbers.current {
    background: #798416;
    border-color: #798416;
    color: white;
}

.page-numbers.prev,
.page-numbers.next {
    padding: 0 20px;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .vacancies-page {
        max-width: 100%;
        padding: 32px 30px 80px;
    }
    
    .vacancies-container {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .vacancies-page {
        padding: 20px 15px 40px;
    }
    
    .page-title {
        font-size: 28px;
        margin: 0 0 30px;
    }
    
    .vacancies-filter {
        margin: 0 0 30px;
    }
    
    .filter-list {
        gap: 10px;
        padding: 0 0 10px 0;
        overflow-x: auto;
    }
    
    .filter-link {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .vacancies-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .vacancy-card {
        height: auto;
        min-height: 450px;
    }
    
    .vacancy-card-image {
        height: 200px;
    }
    
    .vacancy-card-content {
        padding: 15px 15px 0;
    }
    
    .vacancy-card-title {
        font-size: 20px;
        margin-bottom: 30px;
        min-height: 48px;
    }
    
    .vacancy-salary {
        font-size: 18px;
    }
    
    .vacancy-amount {
        font-size: 20px;
    }
    
    .vacancy-card-footer {
        padding: 15px;
        height: 70px;
    }
    
    .pagination {
        margin-top: 40px;
        padding-top: 30px;
    }
    
    .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .page-numbers.prev,
    .page-numbers.next {
        padding: 0 15px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 24px;
    }
    
    .vacancies-container {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .filter-list {
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: auto;
    }
    
    .filter-item {
        margin-bottom: 10px;
    }
    
    .vacancy-card {
        min-height: 400px;
    }
    
    .vacancy-card-image {
        height: 180px;
    }
}
/* Стили только для блока recruitment */
.recruitment-block {
    background-color: #82846f;
    padding: 40px 20px;
    margin-bottom: 80px;
}

.recruitment-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.recruitment-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.recruitment-left {
    flex: 1 1 300px;
}

.recruitment-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 10px;
    font-weight: bold;
}

.recruitment-subtitle {
    font-size: 16px;
    margin-bottom: 25px;
    color: #333;
}

.recruitment-button {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.recruitment-button:hover {
    background-color: #333;
}

.recruitment-right {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recruitment-phone {
    display: flex;
    flex-direction: column;
}

.phone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.phone-icon {
    font-size: 20px;
}

.recruitment-hotline {
    margin-top: 10px;
}

.hotline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hotline-numbers {
    font-weight: bold;
    font-size: 18px;
}

.hotline-text {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* Адаптивность только для этого блока */
@media (max-width: 768px) {
    .recruitment-content {
        flex-direction: column;
        text-align: center;
    }

    .phone-item, .hotline-item {
        justify-content: center;
    }
    
    .recruitment-left, .recruitment-right {
        flex: 1 1 100%;
    }
}
/* Все текстовые элементы внутри блока делаем белыми */
.recruitment-block,
.recruitment-block *:not(.recruitment-button) {
    color: #ffffff;
}

/* Отдельно для кнопки, хотя у нее и так белый текст */
.recruitment-button {
    color: #ffffff;
}
/* Стили для текста слева */
.recruitment-title,
.recruitment-subtitle {
    text-transform: uppercase;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: Merriweather, serif;
    font-size: 21.5px;
    font-weight: 700;
    line-height: 1.3;
}

/* Отдельно для заголовка и подзаголовка */
.recruitment-title {
    font-size: 21.5px;
    margin-bottom: 10px;
}

.recruitment-subtitle {
    font-size: 21.5px;
    margin-bottom: 25px;
}

/* Стили для цифр справа */
.phone-number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.hotline-numbers {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

/* Обновляем иконки чтобы соответствовали размеру цифр */
.phone-icon {
    font-size: 28px;
    line-height: 32px;
}

/* Мелкий текст под цифрами оставляем обычным */
.hotline-text {
    font-size: 14px;
    line-height: 1.3;
    margin-top: 5px;
}
.recruitment-button:hover {
    color: #ffffff !important;
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .recruitment-content {
        flex-direction: column;
        text-align: center;
    }
    
    .phone-item, .hotline-item {
        justify-content: center;
    }
    
    .recruitment-left, .recruitment-right {
        flex: 1 1 100%;
    }
    
    /* На мобильных уменьшаем цифры */
    .phone-number,
    .hotline-numbers {
        font-size: 24px;
    }
    
    .recruitment-title,
    .recruitment-subtitle {
        font-size: 18px;
    }
}
/* Стили для добавления белого круглого фона вокруг иконок */
.phone-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.phone-icon svg {
    width: 18px;
    height: 18px;
}

/* Для горячей линии можно добавить немного отличий, если нужно */
.hotline-item .phone-icon {
    width: 36px;
    height: 36px;
}

/* Убедимся, что контейнеры выравнены правильно */
.phone-item,
.hotline-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Для номеров телефонов */
.phone-number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

/* Для экстренных номеров */
.hotline-info {
    display: flex;
    flex-direction: column;
}

.hotline-numbers {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

.hotline-text {
    font-size: 14px;
    line-height: 1.3;
    color: #ffffff;
    margin-top: 5px;
    margin-bottom: 0;
}

/* Адаптивность */
@media (max-width: 768px) {
    .phone-item,
    .hotline-item {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 10px;
    }
    
    .phone-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .phone-number,
    .hotline-numbers {
        font-size: 24px;
    }
}
/* Контейнеры с иконками */
.phone-with-icon,
.hotline-with-icon {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}
.social-benefits{
  padding:0 40px;
  margin-bottom:64px;
}

.benefits-header{
  margin-bottom:32px;

}

.benefits-title,
.benefits-subtitle{
  font-family:'Merriweather',serif;
  font-size:21.5px;
  font-weight:700;
  line-height:22px;
  color:#657000;
  text-transform:uppercase;
  margin:0;
}

.benefits-title{ margin-bottom:8px; }

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}

.benefits-row{ display:contents; }

.benefit-box{
  border:1px solid #798416;
  background:#fff;
  padding:26px 24px;
  min-height:120px;
  box-sizing:border-box;
  font-family:'Merriweather',serif;
  font-size:16px;
  line-height:24px;
  color:#333;
}

.benefit-box p{ margin:0; }



.benefit-list{
  margin:0;
  padding-left:18px;
}

.benefit-list li{
  margin:0 0 10px 0;
}

.benefit-list li:last-child{ margin-bottom:0; }

@media (max-width:1200px){
  .benefits-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .benefit-box--wide{ grid-column:span 2; }
}

@media (max-width:768px){
  .benefits-grid{ grid-template-columns:1fr; }
  .benefit-box--wide{ grid-column:auto; }
}
.benefit-box:hover{
  background:#798416;
  color:#fff;
}

.benefit-box:hover p{
  color:#fff;
}
p.benefits-subtitle {
    font-size: 15.5px;
}
.vacancy-faq{
  margin-top:64px;
}

.vacancy-faq h2{
  font-family:'Merriweather', serif;
  font-size:21.5px;
  font-weight:700;
  line-height:22px;
  color:#657000;
  text-transform:uppercase;
  margin:0 0 32px 0;
}

.vacancy-faq__item{
  border:0;
  background:transparent;
  margin:0 0 18px 0;
}

.vacancy-faq__item:last-child{
  margin-bottom:0;
}

.vacancy-faq__item summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  border:1px solid #d9d9d9;
  border-radius:2px;
  padding:18px 70px 18px 22px;
  font-family:'Merriweather', serif;
  font-size:16px;
  line-height:24px;
  color:#333;
  background-color:#f3f3f3;
  background-image:linear-gradient(#798416,#798416);
  background-repeat:no-repeat;
  background-size:34px 34px;
  background-position:calc(100% - 18px) 50%;
}

.vacancy-faq__item summary::-webkit-details-marker{
  display:none;
}

.vacancy-faq__item summary:focus{
  outline:none;
}

.vacancy-faq__item summary::before,
.vacancy-faq__item summary::after{
  content:'';
  position:absolute;
  right:18px;
  top:50%;
  width:14px;
  height:2px;
  background:#fff;
  transform-origin:center;
  transition:transform .25s ease;
  transform:translate(-10px,-50%) rotate(0deg);
}

.vacancy-faq__item summary::after{
  transform:translate(-10px,-50%) rotate(90deg);
}

.vacancy-faq__item[open] summary::before{
  transform:translate(-10px,-50%) rotate(45deg);
}

.vacancy-faq__item[open] summary::after{
  transform:translate(-10px,-50%) rotate(-45deg);
}

.vacancy-faq__answer{
  margin-top:12px;
  background:#657000;
  border:1px solid #657000;
  border-radius:2px;
  padding:18px 22px;
  font-family:'Merriweather', serif;
  font-size:16px;
  line-height:24px;
  color:#fff;
}

.vacancy-faq__answer p{
  margin:0 0 12px 0;
}

.vacancy-faq__answer p:last-child{
  margin-bottom:0;
}

.vacancy-faq__answer a{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

.vacancy-faq__answer strong{
  font-weight:800;
}

@media (max-width: 768px){
  .vacancy-faq__item summary{
    padding:16px 60px 16px 16px;
    background-size:30px 30px;
    background-position:calc(100% - 14px) 50%;
  }

  .vacancy-faq__item summary::before,
  .vacancy-faq__item summary::after{
    right:14px;
    width:12px;
    transform:translate(-9px,-50%) rotate(0deg);
  }

  .vacancy-faq__item summary::after{
    transform:translate(-9px,-50%) rotate(90deg);
  }

  .vacancy-faq__item[open] summary::before{
    transform:translate(-9px,-50%) rotate(45deg);
  }

  .vacancy-faq__item[open] summary::after{
    transform:translate(-9px,-50%) rotate(-45deg);
  }
}