/* Импортируем стили из index.css для единообразия */
@import url('../index.css');

/* Приветственное сообщение */
.intro {
  padding: clamp(3.75rem, 5vw, 5rem) 0; /* 60px → 80px */
  background: linear-gradient(135deg, rgba(10, 20, 40, 0.9), rgba(26, 39, 68, 0.9));
  text-align: center;
}

.intro-content {
  max-width: clamp(43.75rem, 50vw, 43.75rem); /* 700px */
  margin: 0 auto;
  animation: fadeInUp 1s ease-out;
}

.intro-content p {
  font-size: clamp(1rem, 1.2vw, 1.1rem); /* 1rem → 1.1rem */
  color: #c8c8c8;
  margin-bottom: clamp(0.9375rem, 0.9375vw, 0.9375rem); /* 15px */
}

/* Секция контактной информации */
.contact-info {
  padding: clamp(3.75rem, 5vw, 5rem) 0; /* 60px → 80px */
  background: rgba(26, 39, 68, 0.3);
}

.contact-details {
  max-width: clamp(43.75rem, 50vw, 43.75rem); /* 700px */
  margin: 0 auto;
  animation: slideInLeft 1s ease-out;
}

.contact-details p {
  font-size: clamp(1rem, 1.2vw, 1.1rem); /* 1rem → 1.1rem */
  color: #c8c8c8; /* Серый цвет для текста, как у "Адрес:", "Почта:" и т.д. */
  margin-bottom: clamp(0.9375rem, 0.9375vw, 0.9375rem); /* 15px */
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 0.625vw, 0.625rem); /* 10px */
}

.contact-details i {
  color: #ffd700; /* Золотой цвет для иконок, включая иконку адреса */
  font-size: clamp(1.125rem, 1.5vw, 1.5rem); /* 18px → 24px */
}

.contact-details a {
  color: #ffd700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-details a:hover {
  color: #d4af37;
}

.contact-details .phones p {
  display: block; /* Каждый телефон на новой строке */
}

.contact-details .phones a {
  display: block; /* Ссылка телефона на новой строке */
  margin-left: clamp(1.875rem, 1.875vw, 1.875rem); /* Отступ для выравнивания */
}

/* Стиль для адреса */
.contact-details .address {
  cursor: pointer;
}

.contact-details .address .address-text {
  color: #ffd700; /* Золотой цвет только для текста адреса */
}

.contact-details .address strong {
  color: #c8c8c8; /* Серый цвет для слова "Адрес:" */
}

/* Модальное окно для адреса */
.map-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: clamp(15rem, 18.75vw, 18.75rem); /* 240px → 300px */
  background: rgba(10, 20, 40, 0.95);
  border-radius: 1.25rem; /* 20px */
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: clamp(1.25rem, 1.25vw, 1.25rem); /* 20px */
  opacity: 0;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 2000;
}

.map-popup.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.map-popup a {
  display: block;
  color: #ffd700;
  text-decoration: none;
  font-size: clamp(1rem, 1.2vw, 1.1rem); /* 1rem → 1.1rem */
  margin-bottom: clamp(0.625rem, 0.625vw, 0.625rem); /* 10px */
  transition: color 0.3s ease;
}

.map-popup a:hover {
  color: #d4af37;
}

/* Социальные сети */
.socials {
  padding: clamp(3.75rem, 5vw, 5rem) 0; /* 60px → 80px */
}

.socials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); /* 300px */
  gap: clamp(1.25rem, 1.5625vw, 1.5625rem); /* 20px → 25px */
  margin-bottom: clamp(3.125rem, 3.125vw, 3.125rem); /* 50px */
}

.social-card {
  background: rgba(26, 39, 68, 0.6);
  padding: clamp(1.25rem, 1.5625vw, 1.5625rem); /* 20px → 25px */
  border-radius: 1.25rem; /* 20px */
  border: 1px solid rgba(255, 215, 0, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.social-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  transition: left 0.5s ease;
}

.social-card:hover::before {
  left: 100%;
}

.social-card:hover {
  transform: translateY(-10px);
  border-color: #ffd700;
  box-shadow: 0 20px 40px rgba(255, 215, 0, 0.1);
}

.social-card i {
  font-size: clamp(2rem, 2.5vw, 2.5rem); /* 32px → 40px */
  color: #ffd700;
  margin-bottom: clamp(0.9375rem, 0.9375vw, 0.9375rem); /* 15px */
}

.social-card h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.5rem); /* 1.4rem → 1.5rem */
  margin-bottom: clamp(0.9375rem, 0.9375vw, 0.9375rem); /* 15px */
  color: #ffd700;
}

.social-card p {
  color: #b8b8b8;
  margin-bottom: clamp(1.25rem, 1.25vw, 1.25rem); /* 20px */
  line-height: 1.6;
}

.qr-placeholder {
  width: 150px;
  height: 150px;
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid #ffd700;
  border-radius: 0.625rem; /* 10px */
  margin: 0 auto clamp(1.25rem, 1.25vw, 1.25rem) auto; /* 20px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8b8b8;
  font-size: clamp(0.875rem, 0.875vw, 0.875rem); /* 14px */
  text-align: center;
  overflow: hidden;
}

.qr-placeholder img {
  max-width: 100%;     /* не шире контейнера */
  max-height: 100%;    /* не выше контейнера */
  object-fit: contain; /* сохраняет пропорции, полностью помещается */
}

/* Адаптивность */
@media (max-width: 768px) {
  .intro {
    padding: clamp(3.75rem, 3.75vw, 3.75rem) 0; /* 60px */
  }

  .contact-info {
    padding: clamp(3.75rem, 3.75vw, 3.75rem) 0; /* 60px */
  }

  .socials {
    padding: clamp(3.75rem, 3.75vw, 3.75rem) 0; /* 60px */
  }

  .socials-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .intro {
    padding: clamp(3.125rem, 3.125vw, 3.125rem) 0; /* 50px */
  }

  .intro-content p {
    font-size: clamp(0.875rem, 1vw, 1rem); /* 1rem */
  }

  .contact-info {
    padding: clamp(3.125rem, 3.125vw, 3.125rem) 0; /* 50px */
  }

  .contact-details p {
    font-size: clamp(0.875rem, 1vw, 1rem); /* 1rem */
  }

  .socials {
    padding: clamp(3.125rem, 3.125vw, 3.125rem) 0; /* 50px */
  }

  .social-card {
    padding: clamp(1.25rem, 1.25vw, 1.25rem); /* 20px */
  }
}