/* ==========================================================================
   БАЗОВЫЕ СТИЛИ И СБРОС
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #0f2d6c;
  --secondary-color: #456AC2;
  --accent-color: #1a3570;
  --text-light: white;
  --text-dark: black;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 60px;
  --border-radius: 10px;
  --transition-speed: 0.3s;
}

body {
  margin: 0;
  overflow-x: hidden;
  min-width: 330px;
}

.page {
  font-family: sans-serif;
  background-color: var(--primary-color);
  color: var(--text-light);
  overflow-x: hidden;
  margin: 0 auto;
  min-height: 100vh;
}

/* ==========================================================================
   УТИЛИТЫ И ОБЩИЕ КОМПОНЕНТЫ
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.button {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-speed);
}

.button--primary {
  background-color: var(--secondary-color);
  color: var(--text-light);
}

.button--secondary {
  background-color: #E7E3DA;
  color: var(--text-dark);
}

/* ==========================================================================
   HEADER (Mobile First)
   ========================================================================== */
.header {
  background: url(images/back_mobile.png) no-repeat center center / cover;
  min-height: 385px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 8 / 9;
  width: 100%;
  background-position: left bottom;
}

.header__container_desktop {
  display: none;
}

.header__mobile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 25px;
  padding-bottom: 0;
}

.header__blok_mobile {
  align-self: flex-end;
}

.header__info {
  text-align: left;
  padding-top: var(--spacing-xs);
}

.header__photo {
  width: 200px;
  border-radius: 50%;
}

.header__span {
  font-size: 55px;
}

.header__title {
  text-align: left;
}

.header__subtitle {
  font-size: 20px;
  font-weight: 100;
  opacity: 0.8;
  padding-bottom: 0;
}

.header__text {
  font-size: 10px;
}

/* Навигация */
.nav {
  display: flex;
  /* Убираем justify-content из .nav */
  padding-right: 40px;
 
  background-color: rgba(0, 0, 0, 0.2);
}

/* Применяем justify-content к списку внутри */
/* nav__list - родительский контейнер для <li> */
.nav__list {
  display: flex;
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
  /* justify-content: space-between; */ /* Убираем, если хотим контролировать через gap или space-around */
  justify-content: flex-start; /* justify-content: space-around;  Или space-between, если нужно растянуть */
  align-items: flex-end;
  padding-bottom: 11px;
  width: 100%; /* Убедитесь, что список занимает всю ширину .nav */
  gap: 8px; /* Добавляем равномерное расстояние между элементами списка */
  box-sizing: border-box; /* Учитываем padding и border в ширину */
}

/* nav__list li - сами пункты меню */
.nav__list li {
  /* Убираем любые ненужные стили отсюда, если есть */
  /* Например, если раньше был flex-grow: 1; для растяжения, возможно, он больше не нужен */
  /* flex-grow: 1; */
   text-align: center;  /* Если текст внутри <a> нужно центрировать */
}

/* nav__list li a - ссылки внутри пунктов меню */
.nav__list li a {
  /* background: #2c4ea1; */
  padding: 5px 7px; /* Внутренние отступы */
  border-radius: 5px; /* Скругление */
  color: white;
  text-decoration: none;
  border: solid 1px; /* Основная граница */
  /* margin-right: 8px; */ /* Убираем этот отступ, заменяем на gap */
  font-size: 23px;
  display: block; /* Делаем ссылку блочным элементом, чтобы border и padding работали по всему содержимому */
  text-align: center; /* Центрируем текст внутри ссылки */
  box-sizing: border-box; /* Включаем padding и border в общую ширину/высоту */
}

.nav__list li a:hover {
  background-color: rgba(103, 109, 131, 1); /* Полупрозрачный тёмный фон при наведении */
  /* border: solid 0.3px; /* Проверьте, переопределяется ли border при наведении */
  /* border-color: white; /* Если нужно, можно изменить цвет границы при наведении */
}



.nav__social {
  /* display: flex; */ /* Временно убираем, если был */
  /* justify-content: space-between; /* И другие свойства, если были */
  padding-top: 5px; /* Поддерживаем текущий отступ, если нужен */
  display: flex; /* Снова включаем */
  flex-direction: column; /* Располагаем элементы вертикально */
  align-items: center; /* Центрируем элементы по горизонтали */
  text-align: center; /* Центрируем текст внутри p */
}

.nav__social_text {
  /* padding-bottom: 5px; /* Убираем, если нужно уменьшить отступ между текстом и иконками */
  padding-bottom: 2px; /* Уменьшенный отступ */
  margin: 0; /* Убираем стандартные отступы */
  font-size: inherit; /* Или задайте конкретный размер */
  /* Убедитесь, что цвет текста соответствует остальному меню */
  color: white; /* Добавляем, если не наследуется */
}

.nav__social_icons {
  display: flex; /* Располагаем иконки в строку */
  gap: 5px; /* Устанавливаем расстояние между иконками */
  justify-content: center; /* Центрируем иконки по горизонтали */
  align-items: center; /* Выравнивание по вертикали, если нужно */
  margin: 0; /* Убираем лишние внешние отступы, если есть */
}

.nav__social img {
  width: 40px; /* Устанавливаем ширину изображений */
  margin-right: 0; /* Отменяем предыдущий margin-right, если был */
  margin: 0; /* Опционально: убираем все отступы, если нужно контролировать через gap */
  /* Добавляем стили для интерактивности */
  transition: opacity 0.2s ease-in-out; /* Плавный переход для эффекта */
}

.nav__social a {
  /* Делаем ссылки блочными для лучшего контроля */
  display: inline-block;
  /* Опционально: добавить внутренний отступ к ссылке для увеличения области клика */
  /* padding: 5px; */
}

/* Опционально: эффект при наведении */
.nav__social a:hover img {
  opacity: 0.8; /* Уменьшаем прозрачность при наведении */
}



/* ==========================================================================
   NEWS / АКТУАЛЬНОЕ (Mobile First)
   ========================================================================== */
.news {
  padding: 25px;
  background-color: var(--accent-color);
}

.news__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.news__header_title {
  font-size: 22px;
}

.news__header_icon {
  width: 40px;
  height: 40px;
}

/* Слайдер для мобильных */
.news-container {
  max-width: 100%;
  overflow: hidden;
  padding: var(--spacing-sm);
  box-sizing: border-box;
  position: relative;
}

.news-slider-wrapper {
  display: block;
  max-width: 400px;
  margin: 0 auto;
}

.news-slider {
  display: flex;
  transition: transform var(--transition-speed) ease;
}

.news-news__card_body {
  min-width: 100%;
  flex: 0 0 100%;
}

.swiper-slide {
  border-radius: var(--border-radius);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
}

.swiper-slide img {
  width: 100%;
  height: 250px;
  border-radius: 6px;
  margin-bottom: var(--spacing-xs);
  object-fit: contain;
}

/* Карточка новости */
.news__card {
  background: var(--text-light);
  color: var(--text-dark);
  padding: 15px;
  border-radius: var(--border-radius);
  width: auto;
  padding-bottom: 50px;
}

.news__card img {
  margin-bottom: var(--spacing-xs);
  display: block;
  height: 250px;
  width: 100%;
  border-radius: var(--border-radius);
  cursor: pointer;
  object-fit: contain;
}

.news__date {
  text-align: center;
  padding-bottom: 7px;
  font-weight: 100;
}

.news__text {
  display: -webkit-box;
  -webkit-line-clamp: 11;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 203px;
  text-align: left;
}

/* Кнопки новостей */
.news__button {
  display: flex;
  justify-content: center;
}

.news__button_more {
  display: block;
  margin: 0 auto;
  padding: 14px;
  border-radius: 2%;
  margin-top: var(--spacing-md);
}


.news__button_inline {
    display: inline-block;
    margin-top: 10px;
    color: white;
    background: #456AC2;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    position: relative;
    margin-top: -20px;
}

.news__button_inline a {
  text-decoration: none;
  color: white; /* Это должно делать текст белым */
}

.news__button_id {
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    background: #456AC2;
    padding: 8px 12px;
    border-radius: 5px;
    border: none;
    border-style: solid;
    color: white;
    cursor: pointer;
    max-width: 150px;
    text-align: center;
}

/* Элементы управления слайдером */
.slider-controls {
  text-align: center;
  margin-top: 8px;
}

.slider-controls button {
  margin: 0 5px;
}

.slider_button {
  height: 35px;
  width: 35px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* ==========================================================================
   FOOTER (Mobile First)
   ========================================================================== */
.footer {
  background: url(images/footer.jpg) no-repeat center center / cover;
  padding: 25px;
  text-align: center;
  display: flex;
  justify-content: space-between;
}

.footer__menu {
  display: none;
  color: white;
}

.footer__contacts {
  display: flex;
  font-size: 12px;
  line-height: 15px;
  width: 100%;
  justify-content: space-between;
  text-align: left;
  margin-bottom: 15px;
  font-weight: 100;
}

.footer__street {
  display: inline;
}

.footer__social {
  padding-top: 0;
}

.footer__social img {
  width: 30px;
  margin-right: 5px;
}

.footer__menu_item {
  padding-bottom: 16px;

}

/* ==========================================================================
   BIO SECTION
   ========================================================================== */
.bio__content {
  padding: var(--spacing-md);
  display: flex;
}

.bio__title {
  padding-bottom: 30px;
}

.bio__text {
  font-weight: 100;
}

.bio__img {
  display: none;
  width: 252px;
  height: fit-content;
  margin-left: var(--spacing-md);
}

/* ==========================================================================
   POPUP / МОДАЛЬНЫЕ ОКНА
   ========================================================================== */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: var(--text-light);
  padding: var(--spacing-sm) 30px;
  border-radius: 8px;
  max-width: 90%;
  width: 400px;
  text-align: left;
  position: relative;
  border: solid 5px cornflowerblue;
}

.popup-content h2 {
  color: var(--secondary-color);
  margin-top: 0;
  font-size: 1.4rem;
}

.popup-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.popup-list li {
  margin-bottom: 12px;
}

.popup-list a {
  text-decoration: none;
  color: var(--secondary-color);
}

.popup-list a:hover {
  text-decoration: underline;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
}

.popup_img {
  width: 40px;
  height: 40px;
  margin-right: var(--spacing-sm);
}

.popup__item {
  border-style: solid;
  border-color: var(--secondary-color);
  padding: 9px 12px;
  border-radius: var(--border-radius);
  color: whitesmoke;
  display: flex;
}


@media (max-width: 599px) {
  .nav__list {
    /* Позволяет элементам переноситься на следующую строку, если не помещаются */
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Можно уменьшить или отключить gap на очень узких экранах */
    gap: 4px; /* или 0px */
    /* justify-content: center; /* Альтернатива, если не нравится wrap */
  }

  .nav__list li a {
    font-size: 11px; /* Уже у вас есть */
    /* Уменьшаем padding, чтобы сэкономить место */
    padding: 3px 4px; /* Уменьшено по сравнению с 5px 7px */
    /* border-radius: 5px; /* Можно оставить или немного изменить */
    /* border: solid 0.3px; /* border можно оставить */
    /* margin-right: 0; /* Уже убрано ранее */
  }

  /* Опционально: Если решили использовать wrap, можно выровнять элементы внутри строки */
  /* .nav__list li {
       flex: 0 0 auto; /* Элементы занимают только необходимое место */
       /* text-align: center; /* Центрировать текст внутри каждого li 
      } */
}

/* Дополнительно, если wrap не используется, можно попробовать еще меньший размер */
/* @media (max-width: 575px) { */
/*   .nav__list li a { */
/*     font-size: 10px; */
/*     padding: 2px 3px; */
/*   } */
/*   .nav__list { */
/*     gap: 2px; */
/*   } */
/* } */

/* Уже у вас есть, можно оставить или скорректировать */
@media (max-width: 560px) {
  .nav__list li a {
    font-size: 7px;
    padding: 2px 2px; /* Еще немного уменьшаем padding */
  }
  .nav__list { 
    justify-content: flex-start;
    gap: 2px; /* Или 0; */ 
  } 
}

@media (max-width: 370px) {
  .nav__list li a {
    font-size: 7px; /* Уменьшено с 7px */
    padding: 2px 2px; /* Уменьшено с 3px 4px */
  }
  .nav__list { 
   justify-content: flex-start;
    gap: 1px; /* Или 0; */
  } 
}

@media (max-width: 345px) {
  .nav__list li a {
    font-size: 6px; /* Уже у вас есть */
    padding: 1px 1px; /* Еще меньше padding */
  }
  .nav__list { 
  justify-content: flex-start; 
  } /* Убираем gap совсем */
}



/* ==========================================================================
   ТАБЛЕТКИ (min-width: 600px)
   ========================================================================== */
@media (min-width: 600px) {
  .header {
    aspect-ratio: 16 / 7;
    min-height: 482px;
    background: url(images/person5.jpg) no-repeat center center / cover;
    background-position: left bottom;
  }

  .header__mobile {
    padding: var(--spacing-md);
    padding-bottom: 0;
  }

  .header__span {
    font-size: 55px;
  }

  .header__subtitle {
    font-size: 20px;
  }

  .header__text {
    font-size: 12px;
  }

  .nav {
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
  }

  .nav__list li a {
    font-size: 11px;
    padding: 5px 7px;
    margin-right: 8px;
  }

  .nav__social img {
    width: 30px;
  }

  .nav__social_text {
    font-size: 12px;
  }

  .news__header_title {
    font-size: 32px;
  }

  .news {
    padding: var(--spacing-md);
  }

  .footer {
    padding: var(--spacing-md);
  }

  .footer__menu {
    display: block;
    color: white;
    text-align: left;
    font-size: inherit;
    font-weight: 100;
    list-style-position: inside;
  }

  .footer__menu a {
    color: white;
    text-decoration: none;
}

  .footer__contacts {
    display: block;
    font-size: inherit;
    line-height: 25px;
    width: auto;
  }

  .footer__social {
    padding-top: 10px;
  }

  .footer__street {
    display: none;
  }
}

/* ==========================================================================
   НЕТБУКИ (min-width: 860px)
   ========================================================================== */
@media (min-width: 860px) {
  .header__container_desktop {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .header__mobile {
    display: none;
  }

  .header__info {
    text-align: end;
    padding-top: var(--spacing-sm);
    padding-right: var(--spacing-md);
  }

  .header__title {
    text-align: end;
  }

  .header__span {
    font-size: 80px;
  }

  .header__subtitle {
    font-size: 40px;
    padding-bottom: 10px;
  }

  .nav__list {
    justify-content: flex-start;
  }

  .nav__list li a {
    font-size: 12px;
  }

  /* Отключение слайдера, включение grid */
  .news-slider-wrapper {
    display: none;
  }

  .news__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    justify-content: center;
    gap: 25px;
    margin: 0 auto;
  }

  .news__card {
    width: 350px;
  }

  .news__button_id {
    display: block;
  }

  .bio__img {
    display: block;
  }
}

/* ==========================================================================
   ДЕСКТОПЫ (min-width: 1000px)
   ========================================================================== */
@media (min-width: 1000px) {
  .header__span {
    font-size: 100px;
  }

  .nav__list li a {
    font-size: 18px;
  }
}

/* ==========================================================================
   ШИРОКИЕ ЭКРАНЫ (min-width: 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .header__span {
    font-size: 130px;
  }

  .nav__list li a {
    font-size: 23px;
  }
}

/* ==========================================================================
   МИКРО-КОРРЕКЦИИ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ
   ========================================================================== */
@media (max-width: 370px) {
  .nav__list li a {
    font-size: 7px;
    padding: 3px 4px;
  }
}

@media (max-width: 345px) {
  .nav__list li a {
    font-size: 6px;
  }
}