/* =============================================================
   PIARNYA — Contact + Lead (объединённая секция главной)
   Светлый фон в стиле «Услуг»/«Кейсов»: секция #F7F6FA, белые
   карточки с рамкой, фирменный розовый — только в акцентах
   (иконки, кнопка отправки, hover). Форма использует базовые
   .lead-form__* из lead-form.css; здесь — точечные правки в
   скоупе .contact-lead (не задевают форму на других страницах).
   Зависит от: variables.css, base.css, lead-form.css
   ============================================================= */

.contact-lead {
	--ink: #17121F;
	--muted: #6F6A7E;
	--bg-section: #F7F6FA;
	--card-border: #E6E3EE;
	--accent: var(--brand-solid);
	background: var(--bg-section);
	padding-top: clamp(56px, 6vw, 100px); /* единый ритм с services/cases */
}

/* ── ШАПКА ──────────────────────────────────────────────────── */
.contact-lead__head {
	max-width: 640px;
	margin-bottom: var(--sp-10);
}

.contact-lead__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.contact-lead__subtitle {
	margin: 14px 0 0;
	font-size: var(--text-lg);
	line-height: 1.5;
	color: var(--muted);
}

.contact-lead__trust {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 22px 0 0;
	padding: 0;
}

.contact-lead__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
}

.contact-lead__trust-icon {
	flex-shrink: 0;
	color: var(--accent); /* фирменный акцент */
}

/* ── СЕТКА ──────────────────────────────────────────────────── */
.contact-lead__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--sp-12);
	align-items: start;
}

/* ── ЛЕВАЯ КОЛОНКА — КОНТАКТЫ ───────────────────────────────── */
.contact-lead__info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

/* WhatsApp — синяя кнопка (решение клиента) */
.contact-lead__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	align-self: flex-start;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 12px;
	background: #1877F2;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}

.contact-lead__wa:hover,
.contact-lead__wa:active { background: #0C63D4; }
.contact-lead__wa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Контактные строки — белая карточка, как в «Услугах» */
.contact-lead__rows {
	list-style: none;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 22px;
	background: #fff;
	border: 1px solid var(--card-border);
	border-radius: 16px;
}

.contact-lead__row {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 0;
	border-bottom: 1px solid #EFECF4;
}

.contact-lead__row:last-child { border-bottom: none; }

.contact-lead__row-label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent); /* фирменный акцент */
}

.contact-lead__row-value {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}

a.contact-lead__row-value:hover { color: var(--accent); }

/* Карта — светлая заглушка в стиле карточек */
.contact-lead__map {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--card-border);
	color: var(--muted);
	text-align: center;
}

.contact-lead__map svg { color: var(--accent); opacity: .55; }

.contact-lead__map p {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════
   ПРАВАЯ КОЛОНКА — ФОРМА в белой карточке
   ═════════════════════════════════════════════════════════════ */
.contact-lead__form-wrap {
	background: #fff;
	border: 1px solid var(--card-border);
	border-radius: 20px;
	padding: clamp(22px, 2.4vw, 32px);
}

/* Кнопка отправки — фирменная, самая заметная в секции */
.contact-lead .lead-form__submit {
	height: 54px;
	font-size: var(--text-base);
	font-weight: 700;
}

/* ── АДАПТИВ ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.contact-lead__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}
	/* Мобильный порядок: заголовок (вне grid) → форма → контакты → карта */
	.contact-lead__form-wrap { order: 1; }
	.contact-lead__info      { order: 2; }
}

@media (max-width: 768px) {
	.contact-lead .container { padding-inline: 16px; }
	.contact-lead__head { margin-bottom: var(--sp-8); }
	.contact-lead__title { font-size: clamp(26px, 7vw, 32px); }
	.contact-lead__subtitle { font-size: var(--text-base); }
	.contact-lead__wa { align-self: stretch; }
}