/* Экспериментальный хедер для тестирования - только на мобильных */
@media (max-width: 767px) {
  .experimental-header {
    display: flex !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 20px !important;
  }
  /* EXP info is desktop-only */
  .exp-info { display: none !important; }
}

@media (max-width: 767px) {
  .exp-left {
    flex: 0 0 34%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    padding: 8px;
    box-sizing: border-box;
  }

  .exp-logo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 32px;
    display: block;
    margin: 0 auto;
  }

  .exp-center {
    flex: 0 0 53%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    padding: 0;
    box-sizing: border-box;
  }

  .experimental-header .exp-center .phone-block {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: auto !important;
    width: 100% !important;
  }

  .experimental-header .exp-center .phone-number {
    display: block !important;
    margin-bottom: 2px !important;
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
  }

  .experimental-header .exp-center .hours {
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
  }

  .exp-right {
    flex: 0 0 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    padding: 8px;
    box-sizing: border-box;
  }

  .exp-right .mobile-menu-toggle {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: static;
    float: none;
  }
}

/* Стили экспериментального хедера для планшета (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .experimental-header {
    display: flex !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 20px !important;
  }
  /* EXP info is desktop-only */
  .exp-info { display: none !important; }

  /* Логотип - левый блок (25%) */
  .exp-left {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    padding: 8px;
    box-sizing: border-box;
  }

  .exp-logo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 32px;
    display: block;
    margin: 0 auto;
  }

  /* Кнопка консультации (20%) */
  .exp-consultation {
    flex: 0 0 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
  }

  .exp-consultation .btn.btn-outline {
    display: block;
    font-size: 13px;
    padding: 0.5rem 0.75rem;
    white-space: nowrap; /* prevent wrapping */
    max-width: 100%;
  }

  /* Телефон - центральный блок (35%) */
  .exp-center {
    flex: 0 0 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    padding: 0;
    box-sizing: border-box;
  }

  .experimental-header .exp-center .phone-block {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: auto !important;
    width: 100% !important;
  }

  .experimental-header .exp-center .phone-number {
    display: block !important;
    margin-bottom: 2px !important;
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
  }

  .experimental-header .exp-center .hours {
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
  }

  /* Меню - правый блок (20%) */
  .exp-right {
    flex: 0 0 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    padding: 8px;
    box-sizing: border-box;
  }

  .exp-right .mobile-menu-toggle {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: static;
    float: none;
  }
}

/* Стили экспериментального хедера для десктопа (≥1024px) */
@media (min-width: 1024px) {
  .experimental-header {
    display: flex !important;
    width: 100% !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0.75rem 20px !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  /* 5 блоков: logo 18%, info 30%, consultation 14%, phone 20%, menu 8% */
  .exp-left { flex: 0 0 18%; display: flex; justify-content: center; align-items: center; }
  /* exp-info: single row with two sub-blocks: tagline (left, can wrap) and instant (right, no wrap) */
  .exp-info { flex: 0 0 30%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; }
  .exp-info .tagline { flex: 1; white-space: normal; } /* allow text wrapping */
  .exp-info .instant { flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; } /* instant stays on one line */
  .exp-consultation { flex: 0 0 14%; display: flex; justify-content: center; align-items: center; }
  .exp-consultation .btn.btn-outline { white-space: nowrap; }
  .exp-center { flex: 0 0 20%; display: flex; justify-content: center !important; align-items: center !important; padding: 0 !important; }
  .exp-right { flex: 0 0 8%; display: flex; justify-content: center; align-items: center; }

  .exp-left { padding: 0 !important; }

  .exp-logo {
    height: 56px !important;
    width: auto !important;
    border-radius: 12px !important;
    max-height: none !important;
    margin: 0 !important;
  }

  .exp-center { padding: 0 !important; }

  .experimental-header .exp-center .phone-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 160px !important;
    text-align: left !important;
    width: auto !important;
  }

  .experimental-header .exp-center .phone-number {
    color: #0F172A !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    font-size: 18px !important;
    letter-spacing: .2px !important;
    display: block !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    width: auto !important;
    align-self: auto !important;
  }

  .experimental-header .exp-center .hours {
    color: #667085 !important;
    font-size: 12px !important;
    margin-top: 2px !important;
    text-align: left !important;
    width: auto !important;
    align-self: auto !important;
    line-height: normal !important;
  }

  .exp-right {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.25rem !important;
    padding: 0 !important;
  }

  .exp-right .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #4F46E5 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.10) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
    float: none !important;
  }
}

@media (max-width: 767px) {
  /* Containers should use padding without exceeding viewport */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Базовые стили для мобильных */
  .site-header .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .site-logo {
    height: 2rem !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-menu-toggle,
  .mobile-menu-toggle.circle {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Скрываем иконку меню при открытом мобильном меню */
  .mobile-menu-toggle[aria-expanded="true"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  
  .phone-block {
    margin-left: 0.5rem !important;
    margin-right: auto !important;
    max-width: calc(100vw - 200px) !important;
  }
  
  /* Скрываем кнопку "Перезвоним за 1 минуту" на мобильных */
  .btn.btn-outline {
    display: none !important;
  }
  
  /* Исправляем hero section для мобильных */
  .hero-section {
    padding-top: 5rem !important;
    min-height: calc(100vh - 5rem) !important;
    overflow: visible !important;
  }
  
  .hero-content {
    padding: 2rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .hero-stats {
    margin-top: 2rem !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  /* Секции - только внешние отступы */
  .services-section,
  .why-choose-section,
  .about-section,
  .cases-section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  /* Заголовки секции кейсов */
  .cases-section .section-header {
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  /* Контейнеры без внутренних отступов */
  .services-section .container,
  .why-choose-section .container,
  .about-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Заголовки секций с отступами справа */
  .section-header {
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  .section-header h2,
  .section-header p {
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  .stat-card {
    margin: 0 0.5rem !important;
  }
  
  .site-header .container {
    padding: 0 40px !important;
  }
  
  /* Карточки услуг с отступами справа */
  .service-card {
    margin: 0 0 1rem 0 !important;
    padding: 1.5rem !important;
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
  }
  
  .service-icon {
    aspect-ratio: 1 !important;
    width: 4rem !important;
    height: 4rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Картинка в секции специализации с отступами справа */
  .why-choose-image {
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
  }
  
  .why-choose-image img {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  .carousel-btn {
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Карточки кейсов с отступами справа */
  .case-card {
    flex: 0 0 calc(100% - 40px) !important;
    margin: 0 0 1rem 0 !important;
    margin-right: 40px !important;
  }
  
  /* Контент на всю ширину */
  .why-choose-content {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  /* Заголовок и описание секции "Почему выбирают нас" */
  .why-choose-header {
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  .why-choose-header h2,
  .why-choose-header p {
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  /* Список преимуществ с отступами справа */
  .advantages-list {
    margin: 0 !important;
    padding: 0 !important;
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
  }
  
  /* Блоки преимуществ без двойных отступов */
  .advantage-item {
    flex-direction: column !important;
    text-align: center !important;
    padding: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.25rem 0 !important;
  }
  
  .advantage-icon {
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 auto 0.25rem auto !important;
  }
  
  /* Секция консультации */
  .consultation-section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  .consultation-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Заголовки секции консультации */
  .consultation-section .section-header {
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  /* Форма с отступами справа */
  .consultation-form {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 0 1rem 0 !important;
    margin-right: 40px !important;
    padding: 1.5rem !important;
  }
  
  /* Блоки контактов с отступами справа */
  .contact-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: calc(100% - 40px) !important;
    margin: 0 !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  .contact-card {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin: 0 0 1rem 0 !important;
    margin-right: 40px !important;
  }
  
  .contact-icon {
    aspect-ratio: 1 !important;
    width: 2rem !important;
    height: 2rem !important;
    flex-shrink: 0 !important;
  }
  
  /* Секция команды */
  .team-section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  .team-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Заголовки секции команды */
  .team-section .section-header {
    width: calc(100% - 40px) !important;
    margin-right: 40px !important;
    padding: 0 !important;
  }
  
  /* Карусель команды с отступами справа */
  .team-carousel {
    margin: 0 0 1rem 0 !important;
    margin-right: 40px !important;
  }
  
  .team-image {
    height: 300px !important;
  }
  
  .team-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  
  /* Элементы формы на всю ширину */
  .form-group input,
  .form-group textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Логотип в футере - исправление эллипса */
  .footer-logo,
  .site-footer .site-logo,
  .footer-section-header .w-10 {
    aspect-ratio: 1 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Секция консультации */
  .consultation-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .consultation-section .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Заголовки секции консультации */
  .consultation-section .section-header {
    width: 100% !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  
  /* Форма без правого зазора */
  .consultation-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem 0 !important;
    margin-right: 0 !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Блоки контактов без правого зазора */
  .contact-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1023px) {
  /* Home page: ensure proper side padding for consultation and contact blocks */
  .home .consultation-section { padding-left: 0 !important; padding-right: 0 !important; }
  .home .consultation-section .container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; }
  .home .consultation-section .section-header { width: 100% !important; margin-right: 0 !important; }
  .home .consultation-form, .home .contact-cards, .home .contact-card { width: 100% !important; margin-right: 0 !important; box-sizing: border-box !important; }
}