/* ECO Service — страница «Контакты» (page-templates/landing-contacts.php).
   Источник вёрстки: eco-service-landing/contacts.html.

   Подключается по мете страницы `eco-css` = `tpl-contacts` (header.php),
   поверх общего landing.css. Здесь лежит ТОЛЬКО то, чего в landing.css нет:
   герой страницы и карточки контактов. FAQ (`.faq-list` / `.faq-item` /
   `.faq-question` / `.faq-answer`), `.btn-whatsapp` с шиммером, крошки,
   `.section`, `.eyebrow`, `.section-title` уже есть в landing.css ровно в том
   же виде — дублировать их значило бы завести вторую копию, которая разъедется
   с первой при следующей правке лендинга.

   Правила namespace'ятся под `.contacts-page`: своих классов с такими именами
   в landing.css сейчас нет, но страница — не единственный владелец слова
   «contact», и обёртка держит её правила при себе. */

/* ═══════ CONTACTS HERO ═══════ */
.contacts-page .contacts-hero { padding: 60px 0 100px; }
.contacts-page .contacts-hero .container { text-align: center; }
.contacts-page .contacts-hero-text .section-title { margin-bottom: 20px; }
.contacts-page .contacts-hero-desc {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.contacts-page .contacts-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════ CONTACT INFO CARDS — сетка 2×2 ═══════ */
.contacts-page .contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contacts-page .contact-info-card {
  padding: 32px 28px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: all 600ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.contacts-page .contact-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-btn);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.contacts-page .contact-info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}
.contacts-page .contact-info-card:hover::before { opacity: 1; }
.contacts-page .contact-info-card-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--accent); font-size: 24px;
  transition: all 500ms var(--ease-out);
}
.contacts-page .contact-info-card:hover .contact-info-card-icon {
  background: var(--accent);
  color: var(--white);
}
.contacts-page .contact-info-card h3 {
  font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px;
}
.contacts-page .contact-info-card p,
.contacts-page .contact-info-card a {
  font-size: 16px; color: var(--text); line-height: 1.7;
}
.contacts-page .contact-info-card a {
  color: var(--accent); font-weight: 600;
  transition: opacity 300ms;
}
.contacts-page .contact-info-card a:hover { opacity: 0.7; }
.contacts-page .contact-info-card .phone-list {
  display: flex; flex-direction: column; gap: 6px;
}
/* Приписка под основной строкой карточки — в макете это был инлайновый style. */
.contacts-page .contact-info-card .card-note {
  margin-top: 8px; font-size: 16px; color: var(--text-muted);
}

@media (max-width: 768px) {
  .contacts-page .contacts-hero { padding: 32px 0 60px; }
  .contacts-page .contact-cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .contacts-page .contact-info-card { padding: 24px 20px; }
  .contacts-page .contacts-hero-desc { font-size: 16px; }
}