/* =========================================================
   СТРАНИЦА "РЕКЛАМА НА САЙТЕ" — стили, специфичные для страницы.
   Hero, .section-head, .cta-strip и строка уведомлений — общие
   компоненты сайта, здесь не описаны.

   Раньше стили этой страницы жили прямо в style.css и в четырёх
   местах использовали полупрозрачную зелёную заливку (карточки
   форматов, блоки контактов, иконки) — здесь её нет вообще: акцент
   только сплошным цветом (иконки) или вовсе без заливки (волосяные
   линии для блока преимуществ — тот же язык, что у "Принципов"
   на странице "О нас" и у "Почему выбирают Neorank" в каталоге).
   ========================================================= */

/* =========================================================
   АУДИТОРИЯ — 4 карточки персон, 2×2 на среднем экране
   ========================================================= */

.ad-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* 2×2 до 1099 px, а не до 991: от 992 px слева встаёт сайдбар (300 px), и
   четырём карточкам в оставшемся столбце не хватает места — самые длинные
   слова не переносятся, колонки не сжимаются уже своего содержимого
   (≈645 px вместе с отступами), и последняя карточка вылезала за край
   окна, давая горизонтальную прокрутку на ширине 992–1027 px */
@media (max-width: 1099px) { .ad-audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .ad-audience-grid { grid-template-columns: 1fr; } }

.ad-audience-card {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ad-audience-card:hover {
  border-color: rgba(29, 217, 122, 0.35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.ad-audience-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #06231a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 16px -6px rgba(29, 217, 122, 0.45);
}

.ad-audience-card h3 { font-size: 15.5px; line-height: 1.3; margin-bottom: 8px; }
.ad-audience-card p { font-size: 13.5px; line-height: 1.6; color: var(--color-muted); margin: 0; }

/* =========================================================
   ПРЕИМУЩЕСТВА — волосяные линии, сплошная иконка с прицельным
   свечением. Тот же язык, что у блока "Принципы" ("О нас") и
   "Почему выбирают Neorank" (каталог инструментов) — один
   визуальный приём для содержимого одного типа по всему сайту.
   ========================================================= */

.ad-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  margin-top: 8px;
}
@media (max-width: 899px) { .ad-benefits { grid-template-columns: 1fr; } }

.ad-benefit { padding-top: 26px; border-top: 1px solid rgba(43, 47, 51, 0.1); }
.ad-benefit:first-child { border-top: none; padding-top: 0; }
/* На десктопе все три блока стоят в один ряд (3 колонки) — переноса
   строк нет, значит верхней линии не должно быть ни у одного из них,
   а не только у первого. На мобильном (одна колонка) линия остаётся
   разделителем между блоками — там правило выше уже верное. */
@media (min-width: 900px) {
  .ad-benefit { border-top: none; padding-top: 0; }
}

.ad-benefit i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-accent);
  color: #06231a;
  font-size: 17px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px -6px rgba(29, 217, 122, 0.55);
}
.ad-benefit h3 { font-size: 16px; margin-bottom: 8px; }
.ad-benefit p { font-size: 14px; line-height: 1.65; color: var(--color-muted); margin: 0; }

/* =========================================================
   ФОРМАТЫ — ровно два реальных слота (сайдбар и мобильная лента
   из кода сайта), каждый со своей точной технической подписью, не
   общими словами.
   ========================================================= */

.ad-formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 767px) { .ad-formats { grid-template-columns: 1fr; } }

.ad-format {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.ad-format-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 18px;
}

.ad-format h3 { font-size: 17px; margin-bottom: 8px; }
.ad-format-spec {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.ad-format p { font-size: 14px; line-height: 1.7; color: var(--color-muted); margin: 0; }

/* =========================================================
   КОНТАКТЫ — сплошная нейтральная панель без градиентной
   заливки под контактными блоками
   ========================================================= */

.ad-contacts {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-lg);
}
@media (max-width: 767px) {
  .ad-contacts { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
}

.ad-contacts-left { display: flex; flex-direction: column; gap: 16px; }

.ad-contact-block {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.ad-contact-block h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: var(--color-text-strong); }
.ad-contact-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
}
.ad-contact-link {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.ad-contact-link:hover { color: var(--color-accent); }

.ad-contacts-right p { font-size: 14.5px; line-height: 1.75; color: var(--color-text); margin: 0; }