/**
 * SEO-текст «wa-prop» (#property, 2026-11-02): шапка по центру, 4 плитки-факта, белая карточка на всю ширину 1400 (Саша 2026-11-02; в макете 920) с текстом .wa-prose, сворачивание.
 * Разметка: template-parts/blocks/property.php, JS: assets/js/wa-prop.js. Макет: reports/new-design-tasks/Property task (PropFold.dc.html).
 */

.wa-prop {
	--wa-prop-ink: #14233a;
	--wa-prop-blue: #1a72a8;
	--wa-prop-line: #e3e9ef;
	--wa-prop-head: Montserrat, Arial, sans-serif;
	padding: 80px 0;
	margin: 0;
	background: #f5f8fb;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
	clear: both;
}
.wa-prop *,
.wa-prop *::before,
.wa-prop *::after { box-sizing: border-box; }

.wa-prop__wrap {
	width: 1400px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
}

/* ---------- шапка ---------- */
.wa-prop__head {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.wa-prop__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eaf4fa;
	color: #1a5f8c;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}
.wa-prop .wa-prop__title {
	margin: 14px 0 0;
	padding: 0;
	font: 700 40px/1.15 var(--wa-prop-head);
	letter-spacing: -.01em;
	color: var(--wa-prop-ink);
	text-transform: none;
	text-align: center;
}

/* ---------- плитки ---------- */
.wa-prop .wa-prop__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.wa-prop .wa-prop__fact {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--wa-prop-line);
	border-radius: 18px;
	background: #fff;
	list-style: none;
	min-width: 0;
}
.wa-prop__fact::before { content: none; }
.wa-prop__fi {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 13px;
}
.wa-prop__fi--blue  { background: #eaf4fa; color: #1a72a8; }
.wa-prop__fi--green { background: #eef8e2; color: #3f7a0a; }
.wa-prop__fi--ink   { background: #e9edf2; color: #14233a; }
.wa-prop__ft { min-width: 0; }
.wa-prop__ft b {
	display: block;
	font: 700 16px/1.3 var(--wa-prop-head);
	color: var(--wa-prop-ink);
}
.wa-prop__ft span {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: #5b6472;
}

/* ---------- карточка ---------- */
.wa-prop__card {
	/* 2026-11-02: по просьбе Саши на всю ширину 1400, как остальные секции (в макете было 920) */
	max-width: none;
	margin: 24px 0 0;
	padding: 48px 64px 40px;
	border: 1px solid var(--wa-prop-line);
	border-radius: 28px;
	background: #fff;
}
.wa-prop__body {
	position: relative;
}
.wa-prop__fade,
.wa-prop__toggle-wrap { display: none; }

/* состояние — ставит JS (.wa-prop--js на секции) */
.wa-prop--js .wa-prop__body { overflow: hidden; transition: max-height .5s ease; }
.wa-prop--js .wa-prop__body.is-open { overflow: visible; }
.wa-prop__body.is-collapsed { max-height: 460px; }
.wa-prop__body.is-collapsed .wa-prop__fade {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
	pointer-events: none;
}
.wa-prop--foldable .wa-prop__toggle-wrap {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.wa-prop__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 50px;
	padding: 0 22px;
	border: 1px solid #b9cfdf;
	border-radius: 14px;
	background: #fff;
	font: 600 15px/1 var(--wa-prop-head);
	color: var(--wa-prop-ink);
	cursor: pointer;
	transition: border-color .25s ease;
}
.wa-prop__toggle:hover { border-color: var(--wa-prop-blue); }
.wa-prop__toggle:focus-visible { outline: 2px solid var(--wa-prop-blue); outline-offset: 2px; }
.wa-prop__toggle svg { color: var(--wa-prop-blue); transition: transform .3s ease; flex: none; }
.wa-prop__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- типографика текста ---------- */
.wa-prose {
	font-size: 17px;
	line-height: 1.75;
	color: #36404f;
	text-align: left;
	column-count: 1;
	overflow-wrap: break-word;
}
.wa-prose > :first-child { margin-top: 0; }
.wa-prose > :last-child { margin-bottom: 0; }
.wa-prose p { margin: 0 0 16px; font-size: inherit; line-height: inherit; color: inherit; }
.wa-prose > p:first-child { font-size: 19px; line-height: 1.65; color: #1d2433; }
.wa-prose h2,
.wa-prose h2.prop-title {
	margin: 40px 0 16px;
	padding: 0;
	font: 700 26px/1.25 var(--wa-prop-head);
	color: var(--wa-prop-ink);
	text-transform: none;
	text-align: left;
	scroll-margin-top: 90px;
}
.wa-prose h3,
.wa-prose h4 {
	margin: 28px 0 12px;
	padding: 0;
	font: 700 20px/1.3 var(--wa-prop-head);
	color: var(--wa-prop-ink);
	text-transform: none;
	text-align: left;
	scroll-margin-top: 90px;
}
.wa-prose h2 strong, .wa-prose h2 b,
.wa-prose h3 strong, .wa-prose h3 b { font-weight: inherit; color: inherit; }
.wa-prose > h2:first-child,
.wa-prose > h3:first-child { margin-top: 0; }
.wa-prose strong,
.wa-prose b { font-weight: 600; color: var(--wa-prop-ink); }
.wa-prose a {
	color: var(--wa-prop-blue);
	text-decoration: underline;
	text-decoration-color: rgba(26, 114, 168, .35);
	text-underline-offset: 3px;
}
.wa-prose a:hover { color: var(--wa-prop-blue); text-decoration-color: currentColor; }
.wa-prose a:focus-visible { outline: 2px solid var(--wa-prop-blue); outline-offset: 2px; border-radius: 3px; }

.wa-prose ul,
.wa-prose ol {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.wa-prose li {
	margin: 0;
	list-style: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.wa-prose ul > li {
	position: relative;
	padding-left: 34px;
}
.wa-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: #eef8e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f7a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.wa-prose ol { counter-reset: wa-prose-n; }
.wa-prose ol > li {
	counter-increment: wa-prose-n;
	position: relative;
	min-height: 60px;
	padding: 14px 18px 14px 62px;
	border-radius: 14px;
	background: #f5f8fb;
}
.wa-prose ol > li::before {
	content: counter(wa-prose-n, decimal-leading-zero);
	position: absolute;
	left: 16px;
	top: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--wa-prop-blue);
	color: #fff;
	font: 700 13px/1 var(--wa-prop-head);
}
.wa-prose li > ul,
.wa-prose li > ol { margin: 10px 0 0; }

.wa-prose blockquote,
.wa-prose .note {
	margin: 24px 0 16px;
	padding: 20px 22px;
	border: 0;
	border-left: 4px solid #7dc91b;
	border-radius: 0 14px 14px 0;
	background: #f5f8fb;
	color: var(--wa-prop-ink);
	font-style: normal;
}
.wa-prose blockquote p:last-child { margin-bottom: 0; }
.wa-prose img { max-width: 100%; height: auto; border-radius: 16px; }

/* ---------- планшет ---------- */
@media (max-width: 1023px) {
	.wa-prop__wrap { max-width: calc(100% - 32px); }
	.wa-prop .wa-prop__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wa-prop__card { max-width: none; padding: 36px 36px 30px; }
}

/* ---------- мобилка ---------- */
@media (max-width: 767px) {
	.wa-prop { padding: 48px 0; }
	.wa-prop .wa-prop__title { font-size: 27px; }
	.wa-prop .wa-prop__facts { gap: 10px; margin-top: 24px; }
	.wa-prop .wa-prop__fact { padding: 14px; gap: 10px; }
	.wa-prop__fi { width: 38px; height: 38px; border-radius: 11px; }
	.wa-prop__fi svg { width: 19px; height: 19px; }
	.wa-prop__ft b { font-size: 14px; }
	.wa-prop__ft span { font-size: 12px; }
	.wa-prop__card { padding: 26px 20px 24px; border-radius: 20px; margin-top: 16px; }
	.wa-prop__body.is-collapsed { max-height: 380px; }
	.wa-prose { font-size: 16px; }
	.wa-prose > p:first-child { font-size: 17px; }
	.wa-prose h2,
	.wa-prose h2.prop-title { font-size: 22px; margin-top: 32px; }
	.wa-prose h3,
	.wa-prose h4 { font-size: 18px; }
	.wa-prose ol > li { padding-left: 54px; }
	.wa-prose ol > li::before { left: 12px; }
	.wa-prop__toggle { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-prop--js .wa-prop__body,
	.wa-prop__toggle svg { transition: none; }
}

/* 2026-11-03: тот же компонент для SEO-текста услуг #main-plot. Отступ от предыдущего блока (там тоже серый фон — блог). */
.wa-prop--main-plot { margin-top: var(--wa-page-gap, 24px); }
/* старые тексты: пустые абзацы и двойные переносы не дают лишних пустот */
.wa-prose p:empty { display: none; }
.wa-prose br + br { display: none; }

/* «Чому ми» #about-more (2026-11-03): тот же компонент, отступ от предыдущего блока */
.wa-prop--about-more { margin-top: var(--wa-page-gap, 24px); }