/**
 * Блок консультации #call-now (2026-11-01): тёмная карточка с водяным знаком-атомом.
 * Разметка: template-parts/blocks/call-now.php. Макет: reports/new-design-tasks/Call now task (CallDark.dc.html).
 * Подключается на всех страницах (блок есть в ~30 шаблонах).
 */

.wa-cn {
	--wa-cn-head: Montserrat, Arial, sans-serif;
	padding: 64px 0;
	background: #fff;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
	clear: both;
}
.wa-cn *,
.wa-cn *::before,
.wa-cn *::after { box-sizing: border-box; }

.wa-cn__wrap {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
}

.wa-cn__card {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px 300px;
	gap: 40px;
	align-items: center;
	padding: 44px 48px;
	background: #14233a;
	border-radius: 28px;
}

/* ---------- декор ---------- */
.wa-cn__deco {
	position: absolute;
	right: 640px;
	top: 50%;
	width: 520px;
	height: 520px;
	margin-top: -260px;
	pointer-events: none;
	animation: waCnSpin 90s linear infinite;
}
.wa-cn__orb {
	position: absolute;
	inset: 0;
	border: 1.5px solid rgba(255, 255, 255, .09);
	border-radius: 50%;
	transform: scaleY(.38);
}
.wa-cn__orb:nth-child(1) { transform: rotate(60deg) scaleY(.38); }
.wa-cn__orb:nth-child(2) { transform: rotate(-60deg) scaleY(.38); }
.wa-cn__core {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border-radius: 50%;
	background: rgba(125, 201, 27, .35);
}
@keyframes waCnSpin { to { transform: rotate(360deg); } }
.wa-cn__glow {
	position: absolute;
	left: -120px;
	bottom: -160px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(26, 114, 168, .45), rgba(26, 114, 168, 0));
	pointer-events: none;
}
.wa-cn__content,
.wa-cn__actions,
.wa-cn__cta { position: relative; min-width: 0; }

/* ---------- текст ---------- */
.wa-cn__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(125, 201, 27, .14);
	color: #a6e05a;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.wa-cn__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #7dc91b; }
.wa-cn .wa-cn__title {
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--wa-cn-head);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	text-transform: none;
	text-align: left;
	color: #fff;
	background: none;
	overflow-wrap: break-word;
}
.wa-cn .wa-cn__text {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
}

/* ---------- строки-кнопки ---------- */
.wa-cn__actions { display: flex; flex-direction: column; gap: 10px; }
.wa-cn .wa-cn__act {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px 0 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	font-family: var(--wa-cn-head);
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	transition: background-color .25s, border-color .25s, transform .25s;
}
.wa-cn .wa-cn__act small {
	margin-left: auto;
	font-weight: 500;
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
}
.wa-cn__ico {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.wa-cn__ico--phone { background: rgba(255, 255, 255, .12); }
.wa-cn__ico--tg { background: #29a9eb; }
.wa-cn__ico--viber { background: #7360f2; }
.wa-cn__phone { font-weight: 700; font-size: 17px; white-space: nowrap; }

/* ---------- заявка ---------- */
.wa-cn__cta { display: flex; flex-direction: column; gap: 12px; }
.wa-cn .wa-cn__btn {
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 14px;
	background: #7dc91b;
	color: #0e2a06;
	font-family: var(--wa-cn-head);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .25s, transform .25s;
}
.wa-cn__btn svg { width: 16px; height: 16px; flex: none; }
.wa-cn .wa-cn__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .6);
}
.wa-cn .wa-cn__mail {
	align-self: center;
	font-family: var(--wa-cn-head);
	font-weight: 600;
	font-size: 14px;
	color: #8cc7ec;
	text-decoration: none;
}
.wa-cn .wa-cn__mail:hover { color: #b5dcf5; text-decoration: underline; }

.wa-cn__act:focus-visible,
.wa-cn__btn:focus-visible,
.wa-cn__mail:focus-visible { outline: 2px solid #8cc7ec; outline-offset: 3px; }

@media (hover: hover) {
	.wa-cn .wa-cn__act:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); color: #fff; transform: translateY(-2px); }
	.wa-cn .wa-cn__btn:hover { background: #8bd626; color: #0e2a06; transform: translateY(-2px); }
}

/* ---------- ширина: 1400 + поля 20px ниже 1440 ---------- */
@media (max-width: 1439px) {
	.wa-cn__wrap { width: calc(100% - 40px); }
}
@media (max-width: 1279px) {
	.wa-cn__card { grid-template-columns: minmax(0, 1fr) 320px 260px; gap: 28px; padding: 40px; }
	.wa-cn .wa-cn__title { font-size: 26px; }
	.wa-cn__deco { right: 520px; }
}

/* ---------- планшет 768–1023: текст сверху, ниже две колонки ---------- */
@media (max-width: 1023px) {
	.wa-cn__wrap { width: calc(100% - 32px); }
	.wa-cn__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 36px; align-items: start; }
	.wa-cn__content { grid-column: 1 / -1; }
	.wa-cn__deco { right: -80px; width: 380px; height: 380px; margin-top: -190px; }
}

/* ---------- мобилка ≤767 ---------- */
@media (max-width: 767px) {
	.wa-cn { padding: 40px 0; }
	.wa-cn__card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 20px; border-radius: 22px; }
	.wa-cn .wa-cn__title { font-size: 23px; }
	.wa-cn .wa-cn__text { font-size: 15px; }
	.wa-cn__deco { top: -70px; right: -110px; width: 300px; height: 300px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-cn__deco { animation: none; }
	.wa-cn .wa-cn__act,
	.wa-cn .wa-cn__btn { transition: none; }
	.wa-cn .wa-cn__act:hover,
	.wa-cn .wa-cn__btn:hover { transform: none; }
}