/* 📞 Страница «Контакты»: герой, карточки каналов и карта присутствия. */
.contact-hero {
  padding: clamp(48px, 8vw, 96px) 0;
  background: radial-gradient(circle at 15% 20%, rgba(58, 123, 255, 0.25), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(51, 195, 124, 0.2), transparent 45%),
    var(--color-ui-50);
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.contact-hero__text {
  color: var(--color-text-secondary);
  max-width: 520px;
}

.contact-hero__panel {
  background: #fff;
  border-radius: 28px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(26, 26, 26, 0.05);
  box-shadow: 0 25px 70px rgba(15, 18, 26, 0.12);
}

.contact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin: 0;
}

.contact-stats dt {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.contact-stats dd {
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  font-weight: 700;
  color: var(--color-brand-600);
}

.contact-stats__note {
  margin: 16px 0 0;
  color: var(--color-text-secondary);
}

.contact-panels {
  padding: clamp(48px, 8vw, 80px) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Панели контактов перевели на мягкую палитру: базовый градиент и лёгкие бордеры, чтобы не перегружать взгляд. */
.contact-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.92));
  border-radius: 24px;
  padding: 26px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-card header {
  margin-bottom: 8px;
}

.contact-card--primary {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(234, 239, 255, 0.92));
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 26px 60px rgba(99, 102, 241, 0.15);
}

.contact-card--info {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 255, 0.94));
}

.contact-card--light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(253, 248, 244, 0.92));
  border-style: solid;
  border-color: rgba(251, 191, 36, 0.35);
}

.contact-card--offices {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.92));
  border-color: rgba(56, 189, 248, 0.2);
}

.contact-card__hint {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.contact-channel {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-channel .contact-link {
  font-size: 1.05rem;
  font-weight: 600;
}

.contact-details {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.contact-details dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.contact-details dd {
  margin: 0;
  font-weight: 600;
}

.contact-offices__list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-secondary);
}

.contact-offices {
  padding: clamp(32px, 6vw, 64px) 0;
  background: var(--color-ui-50);
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.contact-action-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  border: 1px solid rgba(26, 26, 26, 0.05);
  box-shadow: 0 18px 45px rgba(15, 18, 26, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-action-card--outline {
  background: transparent;
  border: 1px dashed rgba(58, 123, 255, 0.4);
  box-shadow: none;
}

.contact-map {
  padding: clamp(40px, 7vw, 80px) 0;
}

.contact-map__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.contact-map__panel {
  background: #fff;
  border-radius: 28px;
  padding: 24px;
  border: 1px solid rgba(26, 26, 26, 0.05);
  box-shadow: 0 18px 55px rgba(15, 18, 26, 0.08);
}

.contact-map__panel p {
  color: var(--color-text-secondary);
}

.contact-map__legend {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-map__legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-secondary);
}

.contact-map__legend span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
}

.contact-map__legend li:first-child span {
  background: var(--color-brand-500);
  box-shadow: 0 0 12px rgba(58, 123, 255, 0.6);
}

.contact-map__legend li:last-child span {
  background: var(--color-success-500);
  box-shadow: 0 0 12px rgba(51, 195, 124, 0.5);
}

.contact-map__figure {
  position: relative;
  border-radius: 32px;
  background: linear-gradient(135deg, #0f121a, #151d29);
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(220, 227, 239, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 25px 60px rgba(5, 7, 11, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  color: var(--color-dark-100);
}

.contact-map__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 35% 40%, rgba(58, 123, 255, 0.55), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(51, 195, 124, 0.4), transparent 45%);
  opacity: 0.65;
}

.contact-map__figure figcaption {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-link {
  color: var(--color-brand-600);
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .contact-card,
  .contact-action-card {
    padding: 20px;
  }

  .contact-map__figure {
    min-height: 220px;
  }
}