/* =========================================================
   НОВЫЙ КРАСИВЫЙ ДИЗАЙН ДЛЯ СТРАНИЦЫ "КОНТАКТИ"
   ========================================================= */

/* ----- Общие стили страницы ----- */
body.contacts-page {
  background-color: #f8f9fe; /* Очень светлый, холодный фон */
}

.page-title {
  font-weight: 800;
  color: #111827;
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.page-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: #6b7280;
  max-width: 600px;
  margin: 0.5rem auto 0;
}

/* ----- Секция контактов ----- */
.contact-section {
  padding-bottom: 4rem;
}

/* Карта */
.map-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(124, 58, 237, 0.1);
  height: 100%;
  min-height: 400px; /* Минимальная высота на мобильных */
}
.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Хаб с контактами */
.contact-hub {
  background: #ffffff;
  border: 1px solid #e0d9f5;
  border-radius: 20px;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(124, 58, 237, 0.1);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  height: 100%;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f3e8ff;
  color: #7c3aed;
  display: grid;
  place-content: center;
  font-size: 1.25rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
}

.contact-details .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.contact-details .data {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}
.contact-details .data a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.contact-details .data a:hover {
  color: #7c3aed;
}

.route-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #7c3aed;
  text-decoration: none;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.route-link i {
  transition: transform 0.2s;
}
.route-link:hover i {
  transform: translateX(3px);
}
/* =========================================================
   ИСПРАВЛЕНИЕ ДЛЯ СТРАНИЦЫ "КОНТАКТЫ" (V2)
   - Делает баннер невидимым, но сохраняет его место.
   - Добавляет новый заголовок слева.
   ========================================================= */

/* 1. Делаем фон баннера прозрачным и убираем его содержимое */
body.contacts-page .breadcrumb-bg--contacts {
    background: none !important; /* Убираем фиолетовый фон и градиент */
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 3rem 0 1rem 0 !important; /* Оставляем отступ, чтобы футер не поднялся */
}

/* 2. Прячем старый текст ("Контакти" и хлебные крошки) */
body.contacts-page .breadcrumb-holder > div {
    display: none !important;
}

/* 3. Добавляем новый заголовок "Ми завжди раді вам" */
body.contacts-page .breadcrumb-holder::before {
    content: 'Ми завжди раді вам';
    display: block;
    text-align: left;
    
    /* Стили, как у заголовка "Наші пріоритети" */
    font-family: "Exo 2", sans-serif;
    font-size: 2rem; 
    font-weight: 700;
    line-height: 1.2;
    
    /* Фиолетовый цвет с вашего сайта */
    color: #A597E7 !important; 
}
/* =========================================================
   ИСПРАВЛЕНИЕ ДЛЯ СТРАНИЦЫ "КОНТАКТЫ" (ФИНАЛЬНАЯ ВЕРСИЯ)
   - Убирает баннер, но сохраняет отступ, чтобы футер не поднимался.
   - Добавляет заголовок "Ми завжди раді вам".
   ========================================================= */

/* 1. Полностью скрываем старый фиолетовый баннер */
body.contacts-page .breadcrumb-bg--contacts {
    display: none !important;
}

/* 2. Добавляем отступ и новый заголовок к следующей секции */
/* Целимся на главный контейнер <section class="py-8 py-md-10"> */
body.contacts-page .py-8.py-md-10 {
    /* Добавляем верхний отступ, чтобы компенсировать убранный баннер */
    margin-top: 50px !important;
    padding-top: 0 !important; /* Убираем старый отступ, чтобы не было слишком много места */
}

/* 3. Добавляем заголовок "Ми завжди раді вам" ПЕРЕД секцией с контактами */
body.contacts-page .py-8.py-md-10::before {
    content: 'Ми завжди раді вам';
    display: block;
    text-align: left;
    
    /* Стили, как у заголовка "Наші пріоритети" со страницы "Про нас" */
    font-family: "Exo 2", sans-serif;
    font-size: 2rem; 
    font-weight: 700;
    line-height: 1.2;
    
    /* Фиолетовый цвет с вашего сайта */
    color: #A597E7 !important;
    
    /* Отступ снизу от нового заголовка до карточек контактов */
    margin-bottom: 2.5rem;
}
/* css/contacts.css */

/* Карты с контактами */
.contact-cards .card {
  border: 0;
  border-radius: 18px;
  height: 100%;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.contact-cards .card .icon-rounded-circle-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.contact-cards .media-heading {
  font-weight: 700;
}

/* Карта и кнопка маршрута */
.map-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.map-embed {
  position: relative;
  padding-top: 56.25%; /* Соотношение 16:9 */
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.route-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 12px;
  padding: .75rem 1rem;
}