/* Start:/proverka-protokola/style.css?179127787210227*/
/* /proverka-protokola/ на techexpertil.ru — использует реальные классы и токены
   шаблона "main" (см. local/templates/main/css/style.css): #267FB4 (акцент),
   #E4EEF5 (светло-голубой фон), #B42626 (ошибка), #06CC03/#CDFFCC (успех),
   .whiteBlock/.button/.blueSubtitle/.elementsBlock/.mark/.checkbox/.text/h1-h3.
   Здесь только то, для чего в шаблоне нет готового класса: двухколоночный
   хиро-грид, форматные подсказки под полями, статус-плашки результата, блок
   "ВАЖНО", honeypot. */

.hidden { display: none !important; }

/* ===== Отступы крошек на этой странице: 50px от хэдера до крошек, 30px от
   крошек до хиро-блока. `section:has(.breadcrumb)` и header — общие для всего
   шаблона (см. local/templates/main/css/style.css + media.css), поэтому не
   трогаем их напрямую — переопределяем только здесь, у этой страницы, через
   более специфичный селектор (`body section:has(...)` против голого
   `section:has(...)` у шаблона, который иначе бы победил — подключается позже).
   Высота хэдера разная на трёх брейкпоинтах шаблона (107.8/81/103px), отсюда
   разные margin-top. Отступ до хиро — через margin-top хиро, а не через
   margin-bottom крошек: стоит 30px на ВСЕХ брейкпоинтах, т.к. margin между
   соседними блоками схлопывается по большему значению, а margin-bottom у
   крошек на мобильном (700px) у шаблона всего 20px — 30px хиро гарантированно
   "перебивает" в любом случае. ===== */
body section:has(.breadcrumb) {
	margin-top: 158px;
}

/* ===== Хиро: тёмный градиентный блок (тот же токен, что и .whiteBlock.gray
   в шаблоне сайта — см. local/templates/main/css/style.css), внутри — интро на
   всю ширину сверху, затем карточка формы и фото в один ряд. На мобильных фото
   переносится под форму через grid-template-areas, без дублирования разметки
   и без JS. ===== */
.cp-hero {
	margin: 30px 0 100px;
	max-width: 100%;
	padding: 60px calc((100% - 1600px) / 2);
	box-sizing: border-box;
	background: linear-gradient(138.12deg, #1D2A34 0%, #567C9A 100%);
	color: #FFFFFF;
}
.cp-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	gap: 30px 40px;
	max-width: 1600px;
	margin: 0 auto;
}
/* Интро на всю ширину (как и раньше), чтобы заголовок не переносился на 2 строки.
   Фото размещено явными линиями (не через grid-template-areas) и перекрывает
   правую половину этой же строки — там у интро всё равно нет текста, он короче
   одной колонки, так что визуального наложения не возникает. */
.cp-hero__intro {
	grid-column: 1 / 3;
	grid-row: 1;
}
.cp-hero__intro h1 {
	color: #FFFFFF;
}
.cp-hero__intro .text.gray {
	color: #FFFFFF;
}
.cp-hero__right {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
}
.cp-hero__photo {
	grid-column: 2;
	grid-row: 1 / 3;
	min-height: 420px;
	/* Вылезает за нижний padding .cp-hero, чтобы низ фото был прижат к реальному
	   краю блока, а не к краю внутренней grid-ячейки (на 60px выше из-за padding). */
	margin-bottom: -60px;
}
/* Выше специфичности .photoBlock{background-size:cover;background-position:center}
   из шаблона (та же специфичность, но шаблонный CSS подключается позже и иначе бы
   победил). Фото показывается целиком без обрезки (contain), а не кадром "зумом"
   на лицо — и без скруглённой рамки-карточки, чтобы сливаться с градиентом хиро. */
.photoBlock.cp-hero__photo {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
	border-radius: 0;
}
/* .whiteBlock.gray красит свой текст в белый по наследованию (см. токен в
   шаблоне) — карточка формы/результата внутри хиро своя, белая, поэтому здесь
   явно возвращаем обычный чёрный текст (иначе заголовок/подписи/значения
   результата стали бы белыми на белом). */
.cp-hero__right .whiteBlock {
	color: #000000;
}
/* Шаблон сайта отдельно красит ссылки в белый для другого паттерна тёмных
   хиро-секций (`section.gray a{color:white}` в local/templates/main/css/
   style.css) — он случайно задевает и наши вложенные белые карточки, т.к.
   .cp-hero сама является <section class="... gray ...">. Возвращаем обычный
   чёрный подчёркнутый вид ссылок (согласие на обработку ПДн и т.п.) внутри них. */
.cp-hero__right .whiteBlock a {
	color: #000000;
}

/* ===== Карточка формы ===== */
.cp-form-card h3 {
	margin-top: 30px;
}
.cp-field-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.cp-field-row:last-of-type {
	margin-bottom: 0;
}
.cp-field-row.-three .cp-field {
	flex-basis: calc(33.333% - 11px);
}
.cp-field {
	flex: 1 1 calc(50% - 8px);
	min-width: 220px;
}
.cp-field label {
	display: block;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 8px;
}
.cp-field input {
	width: 100%;
	box-sizing: border-box;
}
.cp-submit {
	margin-top: 24px;
}
.cp-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 20px 0 8px;
}
.cp-consent input {
	margin-top: 3px;
	flex-shrink: 0;
}
.cp-form-note {
	margin: 0;
}
.cp-msg {
	margin-top: 12px;
	color: #B42626;
	font-weight: 500;
}
.cp-msg[hidden] { display: none; }

/* Honeypot-поле (см. index.php/#cp-website) — не display:none (часть ботов такие
   поля игнорирует специально), а увод за пределы экрана: визуально и по фокусу
   недоступно человеку, но остаётся обычным видимым для DOM/автозаполнения полем. */
.cp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cp-format-hint {
	font-size: 13px;
	font-weight: 500;
	margin-top: 6px;
}
.cp-format-hint.-ok { color: #06CC03; }
.cp-format-hint.-neutral { color: #00000080; }
.cp-format-hint.-fail { color: #B42626; }

/* ===== "Зачем проверять протокол испытаний" — один блок на всю ширину ===== */
.cp-about {
	margin: 0 auto 100px;
	max-width: 1600px;
}
.cp-important {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
	padding: 20px;
	border-radius: 15px;
	background: linear-gradient(102.34deg, #1D2A34 18.55%, #567C9A 81.45%);
	color: #FFFFFF;
	font-weight: 500;
}
.cp-important__badge {
	flex-shrink: 0;
	position: relative;
	padding: 8px 14px 8px 22px;
	border-radius: 20px;
	background: #FFFFFF1A;
	font-size: 14px;
	white-space: nowrap;
}
.cp-important__badge::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #00FF0D;
}

/* ===== FAQ ===== */
.cp-faq {
	margin: 0 auto 100px;
	max-width: 1600px;
}
.cp-faq__list {
	flex: 2;
}

/* ===== Результат проверки (найден/не найден/на проверке) — тот же whiteBlock,
   что и форма, просто с другим содержимым (см. app.js showResult). ===== */
.cp-result-rows {
	margin: 0 0 20px;
}
.cp-result-rows dt {
	color: #00000080;
	font-weight: 400;
	margin-top: 16px;
}
.cp-result-rows dt:first-child {
	margin-top: 0;
}
.cp-result-rows dd {
	margin: 4px 0 0;
	font-weight: 500;
}
.cp-badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: 500;
}
.cp-badge.-ok { background: #CDFFCC; color: #06CC03; }
.cp-badge.-fail { background: #FFE1DD; color: #B42626; }
.cp-badge.-pending { background: #E4EEF5; color: #267FB4; }

.cp-note-box {
	margin: 20px 0;
	padding: 20px;
	border-radius: 15px;
	background: #FDE6CF;
	color: #7A4B14;
	font-weight: 500;
}
.cp-btn-outline {
	background: #FFFFFF !important;
	color: #267FB4 !important;
	border: 1px solid #267FB4 !important;
	margin-top: 12px;
}

@media screen and (max-width: 1440px) {
	body section:has(.breadcrumb) {
		margin-top: 131px;
	}
	.cp-hero {
		margin: 30px 0 70px;
		padding: 40px;
	}
	.cp-hero__photo {
		margin-bottom: -40px;
	}
}

@media screen and (max-width: 700px) {
	body section:has(.breadcrumb) {
		margin-top: 153px;
	}
	.cp-hero {
		margin: 30px 0 50px;
		padding: 24px;
	}
	.cp-hero__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 24px;
	}
	.cp-hero__intro {
		grid-column: 1;
		grid-row: 1;
	}
	.cp-hero__right {
		grid-column: 1;
		grid-row: 2;
	}
	.cp-hero__photo {
		grid-column: 1;
		grid-row: 3;
		min-height: 260px;
		margin-bottom: 0;
	}
	.cp-field-row.-three .cp-field {
		flex-basis: 100%;
	}
	.cp-faq .elementsBlock {
		flex-direction: column;
	}
	.cp-faq .whiteBlock.title {
		min-width: 0;
	}
}

/* End */
/* /proverka-protokola/style.css?179127787210227 */