/* /contacts — сетка 2×2 из информационных карточек.
   Современный CSS Grid вместо 12-колоночной row/col-системы.
   Типографика только через классы UI-kit (.text-h3, .text-body-l) —
   font-size / line-height / letter-spacing зашиты там по брейкпоинтам. */

/* Hero background — capsule pattern (single SVG, scales across breakpoints
   via cover<1024 / contain≥1024 in hero-2026 component). */
.page-contacts .hero-2026 {
  --hero-bg-image: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-sm: url("/images/contacts/v2/hero-bg.svg");
  --hero-bg-image-lg: url("/images/contacts/v2/hero-bg.svg");
}

/* Hero gradient blob — green → yellow */
.page-contacts .hero-2026-gradient {
  left: 35.76%;
  top: 18.71%;
  width: 84.03%;
  height: 87.14%;
  background: linear-gradient(71.76deg, #5fd47f 20.38%, #ffc323 90.22%);
  opacity: 0.4;
  filter: blur(150px);
}

/* Контент-секция получает такую же вертикальную шкалу spacing,
   как margin-bottom у .articles-hero (40 → 48@576 → 56@768 → 60@1024). */
.contacts-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

@media (min-width: 576px) {
  .contacts-section {
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

@media (min-width: 768px) {
  .contacts-section {
    margin-top: 56px;
    margin-bottom: 56px;
  }
}

@media (min-width: 1024px) {
  .contacts-section {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .contacts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .contacts-grid {
    gap: 32px;
  }
}

.contacts-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--gray-100);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Подложка-сетка — у каждой карточки своя, в духе hero-бэкграундов
   /index, /business, /pricing. Лежит в углу карточки в натуральном
   размере; overflow обрезает то, что не входит. */
.contacts-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: 0;
  pointer-events: none;
}

.contacts-card > * {
  position: relative;
  z-index: 1;
}

.contacts-card:nth-child(1)::before {
  background-image: url("/images/index/v2/hero-bg.svg");
  background-size: 1920px 700px;
}

.contacts-card:nth-child(2)::before {
  background-image: url("/images/business/v2/hero-bg.svg");
  background-size: 1440px 700px;
}

.contacts-card:nth-child(3)::before {
  background-image: url("/images/index/v2/business-bg-grid.svg");
  background-size: 1920px 488px;
}

.contacts-card:nth-child(4)::before {
  background-image: url("/images/pricing/v2/card-bg-grid.svg");
  background-size: 1216px 902px;
}

@media (min-width: 768px) {
  .contacts-card {
    padding: 32px;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .contacts-card {
    padding: 40px;
    gap: 24px;
  }
}

.contacts-card__title {
  margin: 0;
}

.contacts-card__body {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-weight: 400;
}

@media (min-width: 768px) {
  .contacts-card__body {
    gap: 16px;
  }
}

.contacts-card__body p {
  margin: 0;
}

.contacts-card__body a {
  font-weight: 500;
}

.contacts-card__socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

@media (min-width: 768px) {
  .contacts-card__socials {
    gap: 12px;
  }
}

.contacts-social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  background-color: var(--brand-white, #fff);
  color: var(--text-default);
  font-family: "Onest", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.contacts-social:hover {
  background-color: var(--brand-black, #111);
  color: var(--brand-white, #fff);
  text-decoration: none;
}

.contacts-social__icon {
  font-size: 22px !important;
  line-height: 1;
}

.contacts-social__label {
  display: inline-block;
}