﻿/* ============================================================
 * him-krep.ru — статьи: читаемая вёрстка, оглавление, CTA
 * Опирается на him-pages.css (кнопки .him-btn, формы .him-cform*).
 * Вся типографика статьи ограничена блоком .wpb_text_column,
 * чтобы НЕ затрагивать товарную сетку WooCommerce внутри контента.
 * ============================================================ */

/* ---------- читаемая колонка (на всю ширину контента) ---------- */
.him-article {
	--him-read: 100%;
	padding-left: 20px;
	padding-right: 20px;
}
.him-article .wpb_text_column {
	max-width: var(--him-read);
	margin-left: auto;
	margin-right: auto;
	font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: #222529;
}
.him-article > p { max-width: var(--him-read); margin: 0 auto 1.15em; }

/* ---------- абзацы ---------- */
.him-article .wpb_text_column p { margin: 0 0 1.15em; }
.him-article .wpb_text_column .wpb_wrapper > p:first-child { margin-top: 0; }

/* ---------- заголовки ---------- */
.him-article .wpb_text_column h2 {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 2em 0 .7em;
	padding-bottom: .35em;
	border-bottom: 2px solid #222529;
	letter-spacing: .005em;
	scroll-margin-top: 90px;
}
.him-article .wpb_text_column h3 {
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 1.6em 0 .55em;
	scroll-margin-top: 90px;
}
.him-article .wpb_text_column h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 1.3em 0 .45em;
}

/* ---------- списки ---------- */
.him-article .wpb_text_column ul,
.him-article .wpb_text_column ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.him-article .wpb_text_column li { margin: 0 0 .5em; }
.him-article .wpb_text_column ul li::marker { content: '▪ '; }
.him-article .wpb_text_column li::marker { color: #222529; }

/* ---------- ссылки и медиа ---------- */
.him-article .wpb_text_column a { color: #222529; text-decoration: none; border-bottom: 1px solid #c9c9c9; }
.him-article .wpb_text_column a:hover { border-bottom-color: #222529; }
.him-article .wpb_text_column img,
.him-article .wpb_text_column iframe { max-width: 100%; height: auto; }
.him-article .wpb_text_column strong { font-weight: 700; }

/* ---------- цитаты и врезки ---------- */
.him-article .wpb_text_column blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid #c9c9c9;
	color: #3a3f45;
	font-style: italic;
}
.him-article .wpb_text_column .note,
.him-article .wpb_text_column .him-note {
	background: #f7f7f8;
	border-left: 4px solid #222529;
	padding: 16px 20px;
	margin: 1.5em 0;
	font-size: .97rem;
	color: #3a3f45;
}

/* ---------- таблицы ---------- */
.him-article .wpb_text_column table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.6em;
	font-size: .95rem;
}
.him-article .wpb_text_column th,
.him-article .wpb_text_column td { border: 1px solid #e3e3e3; padding: 11px 13px; text-align: left; vertical-align: top; }
.him-article .wpb_text_column thead th {
	background: #222529; color: #fff; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
}
.him-article .wpb_text_column tbody tr:nth-child(even) { background: #f7f7f8; }
@media (max-width: 767px) {
	.him-article .wpb_text_column table { display: block; overflow-x: auto; }
}

/* ============================================================
 * Вводный абзац
 * ============================================================ */
.him-article .him-lead {
	max-width: var(--him-read);
	margin: 0 auto 1.6em;
	font-size: 1.12rem;
	line-height: 1.65;
	color: #3a3f45;
	border-left: 4px solid #222529;
	background: #f7f7f8;
	padding: 16px 20px;
}

/* ============================================================
 * Оглавление
 * ============================================================ */
.him-toc {
	max-width: var(--him-read);
	margin: 0 auto 2em;
	background: #f7f7f8;
	border: 1px solid #e3e3e3;
	border-left: 4px solid #222529;
	padding: 18px 22px 16px;
}
.him-toc__title {
	margin: 0 0 .7em;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #3a3f45;
}
.him-toc__list { margin: 0; padding-left: 1.35em; }
.him-toc__list li { margin: 0 0 .35em; font-size: .98rem; line-height: 1.5; }
.him-toc__lvl3 { list-style: circle; margin-left: 1.1em; font-size: .92rem; color: #3a3f45; }
.him-toc a { border-bottom: 1px solid transparent; }
.him-toc a:hover { border-bottom-color: #222529; }

/* ============================================================
 * CTA-блок «Оформить заказ / Заявка на консультацию»
 * ============================================================ */
.him-cta-block {
	max-width: var(--him-read);
	margin: 2.4em auto 1.4em;
	background: #222529;
	color: #fff;
	padding: 26px 28px;
	font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}
.him-cta-block__intro { margin: 0 0 18px; }
.him-cta-block__title {
	margin: 0 0 .35em;
	padding: 0;
	border: 0;
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.him-cta-block__text { margin: 0; color: #c8cacd; font-size: .97rem; line-height: 1.6; }
.him-cta-block__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.him-cta-block .him-btn { padding: 13px 26px; }

.him-btn--light { background: #fff; color: #222529; border-color: #fff; }
.him-btn--light:hover { background: transparent; color: #fff; }
.him-btn--outline { background: transparent; color: #fff; border-color: #fff; }
.him-btn--outline:hover { background: #fff; color: #222529; }

.him-areq-wrap { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 22px; }
.him-areq { background: #fff; color: #222529; padding: 24px 24px 20px; }
.him-areq .him-cfield > span { color: #3a3f45; }
.him-areq .him-cform__policy { color: #767b81; }

/* ============================================================
 * Иллюстрации статьи + дисклеймер о создании ИИ
 * ============================================================ */
.him-figure {
	position: relative;
	max-width: var(--him-read);
	margin: 1.9em auto;
}
.him-article .wpb_text_column .him-figure img {
	display: block;
	width: 100%;
	height: auto;
}
.him-figure .him-ai-note {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 6px 12px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: .74rem;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: .005em;
	max-width: none;
}

@media (max-width: 767px) {
	.him-article .wpb_text_column { font-size: 16px; }
	.him-article .wpb_text_column h2 { font-size: 1.38rem; }
	.him-cta-block { padding: 22px 20px; }
	.him-cta-block__actions { flex-direction: column; }
	.him-cta-block__actions .him-btn { width: 100%; text-align: center; }
	.him-areq { padding: 18px; }
}
