/**
 * Баннер «Заповнити бриф» .brief-cta (2026-10-29). Разметка: template-parts/blocks/brief-cta.php.
 * ТЗ: reports/new-design-tasks/brief-cta/TASK-brief-cta.md. Подключается глобально (functions.php).
 * Блоговая CTA (.blog-cta) живёт в styles.css отдельно — здесь её не трогаем.
 * Ширина — сетка сайта: 1400px, на ≤1400 — 90%, на ≤767 — поля 16px.
 */

.brief-cta { padding: 64px 0; }

/* соседние блоки со своими большими отступами — гасим только рядом с баннером (итог ~64 / ~40) */
#cena-sayta + .brief-cta { padding-top: 0; }
.brief-cta + .wa-stages { padding-top: 0; }

.brief-cta .brief-cta-inner {
	position: relative;
	box-sizing: border-box;
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	padding: 44px 48px;
	border-radius: 28px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	text-align: left;
	overflow: hidden;
	color: #fff;
	/* фирменный синий основой + мягкое зелёное свечение справа */
	background:
		radial-gradient(ellipse 45% 120% at 92% 50%, rgba(125, 201, 27, .85) 0%, rgba(125, 201, 27, .35) 45%, rgba(125, 201, 27, 0) 75%),
		linear-gradient(120deg, #1a72a8 0%, #2b8bc6 60%, #2f93c9 100%);
}

/* точечная текстура, как в херо */
.brief-cta .brief-cta-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}

.brief-cta .brief-cta-text,
.brief-cta .brief-cta-image { position: relative; }

.brief-cta .brief-cta-text { max-width: 760px; }

.brief-cta .brief-cta-text h3 {
	margin: 0 0 12px;
	padding: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #fff;
	text-transform: none;
	text-shadow: none;
}

.brief-cta .brief-cta-text p {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .92);
	opacity: 1;
}

.brief-cta .brief-cta-button {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 52px;
	padding: 0 24px;
	border-radius: 14px;
	background: #fff;
	color: #14233a;
	font-family: Montserrat, Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(10, 40, 70, .18);
	transition: transform .2s, box-shadow .2s;
}

.brief-cta .brief-cta-button:hover {
	color: #14233a;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(10, 40, 70, .24);
}

.brief-cta .brief-cta-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.brief-cta .brief-cta-button .wa-icon { flex: none; }

.brief-cta .brief-cta-image {
	flex: none;
	display: flex;
	align-items: center;
}

.brief-cta .brief-cta-image img {
	display: block;
	width: 200px;
	height: auto;
	aspect-ratio: 200 / 170;
	object-fit: contain;
}

@media (max-width: 1439px) {
	.brief-cta .brief-cta-inner { padding: 40px; }
	.brief-cta .brief-cta-text h3 { font-size: 26px; }
	.brief-cta .brief-cta-image img { width: 160px; }
}

/* ширина контента 1400; ниже 1440 — поля 20px, ниже 1024 — 16px (края всех блоков совпадают, 2026-10-29) */
@media (max-width: 1439px) {
	.brief-cta .brief-cta-inner { width: calc(100% - 40px); }
}
@media (max-width: 1023px) {
	.brief-cta .brief-cta-inner { width: calc(100% - 32px); }
}

/* ---------- мобилка ≤767: иллюстрация сверху, кнопка на всю ширину ---------- */
@media (max-width: 767px) {
	.brief-cta { padding: 40px 0; }
	#cena-sayta + .brief-cta { padding-top: 0; }

	.brief-cta .brief-cta-inner {
		width: auto;
		margin: 0 16px;
		padding: 28px 22px;
		border-radius: 22px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		background:
			radial-gradient(ellipse 90% 60% at 85% 100%, rgba(125, 201, 27, .85) 0%, rgba(125, 201, 27, .35) 45%, rgba(125, 201, 27, 0) 75%),
			linear-gradient(120deg, #1a72a8 0%, #2b8bc6 60%, #2f93c9 100%);
	}
	.brief-cta .brief-cta-inner::before {
		-webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 100%);
		mask-image: linear-gradient(180deg, transparent 35%, #000 100%);
	}
	.brief-cta .brief-cta-image { order: -1; }
	.brief-cta .brief-cta-image img { width: 120px; }
	.brief-cta .brief-cta-text { max-width: none; width: 100%; }
	.brief-cta .brief-cta-text h3 { font-size: 23px; }
	.brief-cta .brief-cta-text p { font-size: 15px; }
	.brief-cta .brief-cta-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.brief-cta .brief-cta-button { transition: none; }
	.brief-cta .brief-cta-button:hover { transform: none; }
}