/* ===================================================
   Стили страницы "Контакты" (contacts.html)
   =================================================== */

/* ===========================
   ИСПРАВЛЕНИЕ НАВИГАЦИИ ДЛЯ ДИАПАЗОНА 768-1023px
   =========================== */



/* ===========================
   ОСНОВНЫЕ ПЕРЕМЕННЫЕ
   =========================== */
:root {
  --primary-red: #F70518;
  --text-blue: #1e2a4b;
  --text-gray: #B4B4B4;
  --grid-gap: 1.25em;
  --form-border: #E9ECEF;
  --form-focus:  #F70518;
;
}

/* ===========================
   БАЗОВАЯ СТРУКТУРА GRID
   =========================== */
/* Используем глобальные стили контейнера из main.css */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

.span-offset-1 { 
  grid-column: 7 / span 6; 
}

/* ===========================
   HEADER ПРОСТРАНСТВО
   =========================== */
.contacts-main {
  margin-top: 0;
  padding-top: 0;
}

/* ===========================
   ЗАГОЛОВОК СТРАНИЦЫ
   =========================== */
.contacts-headline {
  margin-bottom: 4em;
}

.contacts-headline__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(7rem, 8vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  color: var(--text-gray);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* ===========================
   ОСНОВНОЙ КОНТЕНТ
   =========================== */
.contacts-content-section {
  margin-bottom: clamp(3rem, 4.5vw, 6rem);
}

/* ===========================
   КОНТАКТНАЯ ИНФОРМАЦИЯ
   =========================== */
.contacts-info {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

.contacts-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
}

.contacts-info__icon {
  flex-shrink: 0;
  width: 4em;
  height: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacts-info__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contacts-info__content {
  flex: 1;
}

.contacts-info__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.3rem, 1.45vw, 1.6rem);
  font-weight: 700;
  color: #575757;
  margin: 0 0 0.5em 0;
  line-height: 1.3;
}



.contacts-info__text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 1.3vw, 1.4rem);
  line-height: 1.5;
  color: #575757;
  margin: 0;
}

.contacts-info__text a {
  color: var(--primary-red);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 1.7em;
  font-weight: 700;
}

.contacts-info__text a:hover {
  color: #d10416;
  text-decoration: underline;
}

/* ===========================
   ФОРМА ОБРАТНОЙ СВЯЗИ
   =========================== */
.contacts-form {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contacts-form__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2rem, 2vw, 2.5rem);
  font-weight: 700;
  color: var(--text-blue);
  margin: 0 0 0.5em 0;
  text-align: left;
}

.contact-form {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 1em;
  flex: 1;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Контейнер для полей ФИО и Email в одну строку */
.form-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1em;
}

/* Размеры полей по столбцам */
.form-group--3col {
  grid-column: span 6;
}

.form-group--6col {
  grid-column: span 12;
}

.form-group--3-5col {
  grid-column: span 6;
}

.form-group--2-5col {
  grid-column: span 6;
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Скрываем лейблы визуально, но оставляем для CMS и скринридеров */
.form-group label:not(.checkbox-label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Исключение для чекбокса - его лейбл должен быть видимым */
.checkbox-label {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  padding: 0;
  margin: 0;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: none !important;
}

.form-group input,
.form-group textarea {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.25rem, 1.33vw, 1.5rem);
  padding: clamp(1.2rem, 1.25vh, 1.5rem);
  border: 0.1em solid var(--form-border);
  border-radius: 0.5em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: #F4F5F7;
  width: 100%;
  box-sizing: border-box;
  color:#F70518;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
  font-weight: 400;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--form-focus);
  box-shadow: 0 0 0 0.125em #F70518;
}

.form-group textarea {
  min-height: 8em;
  resize: vertical;
}

/* Контейнер для чекбокса и кнопки в одну строку */
.form-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 1em;
  align-items: flex-start;
  margin-top: auto;
}

.form-bottom-row .form-group--checkbox {
  flex: 1;
  max-width: 50%;
}

.form-bottom-row .form-group--2-5col {
  flex: 0 0 40%;
  max-width: 40%;
  margin-left: auto;
}

/* Чекбокс */
.form-group--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 1em;
}

.checkbox-label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.8rem, 0.0vw, 1.05em) !important;
  line-height: 1.4;
  color: var(--text-blue);
  margin: 0;
  text-align: left;
  min-width: 28em;
  padding-left: 2.5em;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-red);
  border: 0.125em solid var(--form-border);
  border-radius: 0.25em;
  appearance: none;
  background: #fff;
  transition: all 0.3s ease;
  box-sizing: border-box;
  padding: 0;
}

.checkbox-label input[type="checkbox"]:checked {
  background: var(--primary-red);
  border-color: var(--primary-red);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 1em;
  background-position: center;
  background-repeat: no-repeat;
}

.checkbox-label input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 0.125em rgba(247, 5, 24, 0.25);
}

.checkbox-label .checkbox-text {
  display: block;
  text-indent: 0;
  padding-left: 0;
  text-align: left;
  line-height: 1.4;
}

.checkbox-label .blue-text {
  color: #0B4FB4;
}



.checkbox-label a {
  color: var(--primary-red);
  text-decoration: none;
}

.checkbox-label a:hover {
  text-decoration: underline;
}

/* Кнопка отправки */
.form-submit {
  background: var(--primary-red);
  color: #fff;
  border: 0.125em solid var(--primary-red);
  border-radius: 0.5em;
  padding: clamp(1rem, 1.1vw, 1.2rem) clamp(0em, 0.5vw,1rem);
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.form-submit:hover {
  background: #d10416;
  border-color: #d10416;
  transform: translateY(-0.05em);
}

.form-submit:disabled {
  background: var(--text-gray);
  border-color: var(--text-gray);
  cursor: not-allowed;
  transform: none;
}

/* ===========================
   КАРТА
   =========================== */
.contacts-map {
  margin-bottom: 6em;
}

.contacts-map__container {
  width: 100%;
  height: 437px;
  border-radius: 1em;
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.contacts-map__container iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1em;
}

/* Адаптивная высота карты */
@media (max-width: 1024px) {
  .contacts-map__container {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .contacts-map__container {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .contacts-map__container {
    height: 250px;
  }
}

/* ===========================
   АДАПТИВНОСТЬ
   =========================== */

   @media (min-width: 1280px) and (max-width: 1439px) {
    .contacts-headline__title {font-size: clamp(6rem, 7vw, 8rem);}
    .contacts-headline {margin-bottom: 2rem;}
    .contacts-info {gap:1rem;}
    .contacts-info__icon {width: clamp(3rem, 3.5vw, 4rem); height: clamp(3rem, 3.5vw, 4rem);}
    .contacts-info__title {font-size: clamp(1.1rem, 1.3vw, 1.5rem)}
    .contacts-info__text {font-size: clamp(1rem, 1.2vw, 1.3rem);}
    .contacts-form__title {font-size: clamp(1.5rem, 1.7vw, 2rem);}
    .contact-form {gap: 0;}
    .form-group input, .form-group textarea {font-size: clamp(1rem, 1.1vw, 1.3rem);}
    .form-submit {font-size: clamp(0.8rem, 1vw, 1.1rem);}
    .checkbox-label {font-size: clamp(0.65rem, 0.7vw, 1em) !important;}

   }

   @media (min-width:1024px) and (max-width:1279px) {
    .contacts-headline__title {font-size: clamp(6rem, 8vw, 9rem);}
    .contacts-info__title {font-size: clamp(1.2rem, 1.4vw, 1.6rem);}
    .contacts-info__text {font-size: clamp(0.9rem, 1.2vw, 1.4rem);}
    .contacts-form__title {font-size: clamp(1.5rem, 2vw, 2.5rem);}
    .contact-form {gap: 0;}
    .form-submit {font-size: clamp(0.8rem, 1.1vw, 1.2rem); padding: clamp(0.8rem, 1.1vw, 1.2rem) clamp(1rem, 1vw,1rem);}
    .checkbox-label {font-size: clamp(0.6rem, 1vw, 1.05em) !important;}
    .checkbox-label input[type="checkbox"] {width: 1.1rem; height: 1.1rem;}
    .form-group--checkbox {margin-top: 0;}
    .checkbox-label .checkbox-text {margin-top: 7px;}
    .form-group input, .form-group textarea {font-size: clamp(1.1rem, 1.33vw, 1.5rem);}

   }

   @media (min-width: 768px) and (max-width: 1023px) {
    .header .header__nav-wrapper {
      justify-content: center !important; /* Переопределяем start из main.css */
      grid-column: span 7 !important; /* Восстанавливаем исходное значение из HTML span-8 */
    }
    
    /* Стили для диапазона 768-1023px */
    .contacts-headline__title {
      font-size: clamp(4em, 5vw, 6em);
    }
    
    .contacts-content-section .span-5 {
      grid-column: span 12; /* Вертикальное расположение - полная ширина */
    }
    
    .contacts-content-section .span-6 {
      grid-column: span 12; /* Вертикальное расположение - полная ширина */
    }
    
    .span-offset-1 {
      grid-column: 1 / span 12; /* Вертикальное расположение - без отступа */
    }
    
    .contacts-info {
      margin-bottom: 3em;
    }
    
    .contacts-info__item {
      gap: 1em;
    }
    
    .contacts-info__icon {
      width: clamp(2.5em, 3vw, 3.5em);
      height: clamp(2.5em, 3vw, 3.5em);
    }
    
    .contacts-info__title {
      font-size: clamp(1.1rem, 1.3vw, 1.4rem);
    }
    
    .contacts-info__text {
      font-size: clamp(0.9rem, 1.1vw, 1.2rem);
    }
    
    .contacts-form {
      padding: 2em;
    }
    
    .contacts-form__title {
      font-size: clamp(1.5rem, 2vw, 2.2rem);
    }
    
    .contact-form {
      gap: 1.5em;
    }
    
    .form-group {
      margin-bottom: 1.5em;
    }
    
    .form-group input,
    .form-group textarea {
      padding: 1em;
      font-size: 1rem;
    }
    
    .btn--primary {
      padding: 1em 2em;
      font-size: 1rem;
    }

    .form-group--3col, .form-group--6col, .form-group--3-5col, .form-group--2-5col {
      grid-column: 1 / -1;
    }
    
  }
  @media (min-width: 576px) and (max-width: 767px) {
    .contacts-headline {
      margin-bottom: 2em;
    }
    .contacts-info__text a {
      font-size: clamp(1.8rem, 2vw, 2.5em);
    }
    .contacts-info {
      gap: 1em;
    }
    
  }

  @media (min-width: 320px) and (max-width: 575px) {
    :root {
      --container-pad: 10px;
    }
    
    .breadcrumbs {
      margin: 2em 0 0 0 !important;
    }
    .breadcrumbs-grid {
      margin: 3rem auto 0;
    }
    .header--white ~ main { padding-top: 0px; }
    .contacts-info__text a {font-size: clamp(1.2rem, 5vw, 6rem);}
    .contacts-info__text {
      font-size: clamp(0.8rem, 1vw, 1.1rem);
    }
    .contacts-headline {
      margin-bottom: 2em;
    }
    .contacts-info {
      margin-bottom: 1em;
    }
    .form-row {
      margin-bottom: 0 !important;
      gap: 0em;
    }
    .contact-form {
      gap: 0em;
    }
    .form-submit {
      font-size: clamp(0.9rem, 1vw, 1.1rem) !important;
    }
  }






@media (max-width: 1024px) {
  
  .contacts-form {
    padding: 2em;
  }

  
  .contacts-info__icon {
    width: 3em;
    height: 3em;
  }
}

@media (max-width: 767px) {
  .contacts-headline__title {
    font-size: 4em;
  }
  
  .contacts-content-section .span-5 {
    grid-column: span 12;
  }
  
  .contacts-content-section .span-6 {
    grid-column: span 12;
  }
  
  .span-offset-1 {
    grid-column: 1 / span 12;
  }
  
  .contacts-info {
    margin-bottom: 1em;
  }
  
  .contacts-info__item {
    gap: 1em;
  }
  
  .contacts-info__icon {
    width: 2.5em;
    height: 2.5em;
  }
  
  .contacts-form {
    padding: 1.5em;
  }
  
  .contacts-form__title {
    font-size: 1.8em;
    margin-bottom: 1.5em;
  }
  
  /* Мобильная адаптивность для формы */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .form-bottom-row {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .form-bottom-row .form-group--checkbox {
  max-width: 100%;
}

.form-bottom-row .form-group--2-5col {
  max-width: 100%;
  margin-left: 0;
}
  


  
  .form-group input,
  .form-group textarea {
    font-size: 1em;
    padding: 0.875em;
  }
  
  .checkbox-label {
    font-size: Clamp(0.8rem, 1vw, 1.2rem);
    min-width: auto;
  }
  
  .form-submit {
    font-size: 1.1em;
    padding: 1em 1.5em;
  }
}

@media (max-width: 480px) {
  .contacts-headline__title {
    font-size: 3em;
  }
  
  .contacts-info {
    gap: 2em;
  }
  
  .contacts-info__title {
    font-size: 1.2em;
  }
  
  
  .contacts-form__title {
    font-size: 1.6em;
  }
  
}