/* ТЗ-127 ч. 7 (26.09) — страница статьи и новости: одна колонка для чтения.
   Подключают news.tpl (статья) и novost.tpl (новость) ПОСЛЕ news.css и novosti.css: правила ниже перекрывают прежнюю
   раскладку «картинка слева, текст справа» и серые плашки ячеек таблиц. Вне колонки чтения (тексты разделов,
   справочник) ничего не меняется — все селекторы начинаются с .chtenie. */

.chtenie {
	max-width: 800px;
	margin: 0 auto;
}
.chtenie__shapka {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 24px;
}
.chtenie__zagolovok { margin: 0; }
.chtenie__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	font-size: 15px;
	line-height: 1.4;
	color: #6b6f76;
}
.chtenie__meta .article__rubrika { margin: 0; font-size: 15px; }
.chtenie__oblozhka {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 990 / 570;
	object-fit: cover;
	border-radius: 12px;
	background-color: #f5f5f6;          /* рисунки-плитки прозрачные — фон как у плиток каталога */
	margin: 0 0 32px;
}

/* текст: межстрочный ~1,6, крупнее кегль — это колонка для чтения, а не справочная таблица */
html .chtenie .content p,
html .chtenie .content li { font-size: 17px; line-height: 160%; }
.chtenie .content > :not(:last-child) { margin-bottom: 20px; }
.chtenie .content > h2:not(:first-child) { margin-top: 44px; }
.chtenie .content > h3:not(:first-child) { margin-top: 32px; }
.chtenie .content img { max-width: 100%; height: auto; border-radius: 12px; }

/* таблицы: шапка, тонкие линии между строками, зебра; широкая — прокручивается внутри своей рамки
   (обёртку .table-responsive ставит плагин tableResponsive) */
.chtenie .content .table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e1e5f0;
	border-radius: 12px;
}
.chtenie .content table {
	width: 100%;
	min-width: 420px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
	font-size: 15px;
	line-height: 1.4;
}
.chtenie .content .table-responsive > table { margin: 0; }
.chtenie .content table th,
.chtenie .content table td {
	width: auto;
	padding: 11px 16px;
	text-align: left;
	vertical-align: top;
	background: none;
	border: 0;
	border-bottom: 1px solid #e1e5f0;
	border-radius: 0;
	color: #333;
}
.chtenie .content table thead th,
.chtenie .content table thead td {
	background-color: #f0f3f9;
	color: #001960;
	font-weight: 600;
}
.chtenie .content table tbody tr:nth-child(even) td { background-color: #f8f9fb; }
.chtenie .content table tbody tr:last-child td { border-bottom: 0; }

/* «Вопросы и ответы» — аккордеон на <details> */
.faq-statya { margin: 48px 0 0; }
.faq-statya__zagolovok { margin: 0 0 12px; }
.faq-statya__punkt { border-bottom: 1px solid #e1e5f0; }
.faq-statya__punkt:first-of-type { border-top: 1px solid #e1e5f0; }
.faq-statya__vopros {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	color: #333;
	cursor: pointer;
	list-style: none;
}
.faq-statya__vopros::-webkit-details-marker { display: none; }
.faq-statya__vopros:hover { color: #001960; }
.faq-statya__vopros:focus-visible { outline: 2px solid #001960; outline-offset: 2px; }
.faq-statya__znak {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #f0f3f9;
}
.faq-statya__znak::before,
.faq-statya__znak::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background-color: #001960;
	transition: transform .2s;
}
.faq-statya__znak::after { transform: rotate(90deg); }
.faq-statya__punkt[open] .faq-statya__znak::after { transform: rotate(0deg); }
.faq-statya__otvet {
	padding: 0 44px 18px 0;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

/* подписка — на всю ширину колонки текста */
.chtenie__podpiska { margin: 48px 0 0; }
.chtenie__podpiska .podpiska { padding: 28px; }

@media (max-width: 992px) {
	html .chtenie .content p,
	html .chtenie .content li { font-size: 15px; }
	.chtenie .content > h2:not(:first-child) { margin-top: 32px; }
	.chtenie .content > h3:not(:first-child) { margin-top: 24px; }
	.chtenie__oblozhka { margin-bottom: 24px; }
	.faq-statya { margin-top: 36px; }
	.faq-statya__vopros { font-size: 15px; padding: 14px 0; }
	.faq-statya__otvet { font-size: 15px; padding-right: 0; }
	.chtenie__podpiska { margin-top: 36px; }
	.chtenie__podpiska .podpiska { padding: 20px; }
	.chtenie .content table { font-size: 14px; }
	.chtenie .content table th,
	.chtenie .content table td { padding: 9px 12px; }
}

/* ТЗ-127 ч. 12: рисунок в тексте с подписью (<figure class="chtenie__risunok">) — первый такой в статье о профнастиле.
   Рисунки в стиле плиток каталога прозрачные — фон как у обложки и плиток; подпись мельче и серее текста. */
html .chtenie .content .chtenie__risunok { margin: 24px 0 28px; }
html .chtenie .content .chtenie__risunok img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background-color: #f5f5f6;
}
html .chtenie .content .chtenie__risunok figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: #6b6f76;
}

/* ── ТЗ-128 (задача владельца 27.09): две колонки на ширину контейнера ─────────────────────────────────────────────
   Статья была узкой полосой 800 px по центру с пустыми полями. Теперь (.chtenie--kolonki, news.tpl и novost.tpl):
   ≥ 1200 px — заголовок и дата на всю ширину контейнера; ниже слева текст до 880 px (обложка, таблицы, «Вопросы и
   ответы» — на его ширину), справа липкая колонка 320 px: оглавление, «Нужна консультация?», подписка (chtenie_bok.tpl);
   уже — одна колонка до 800 px, как было: оглавление свёрнутым в начале текста, консультация и подписка после. */
/* общий .container (general.css) — overflow:hidden, а липкое внутри прокручиваемого/обрезающего предка не липнет
   (колонка уезжала вверх вместе с текстом). clip режет вбок так же, но контейнером прокрутки не становится. */
.container.container--chtenie { overflow: visible; overflow-x: clip; }
.chtenie--kolonki .chtenie__osnova { min-width: 0; }
.chtenie--kolonki .chtenie__bok { margin: 40px 0 0; }
.chtenie__lipkij { display: flex; flex-direction: column; gap: 20px; }
.chtenie--kolonki .chtenie__podpiska { margin: 0; }
.chtenie--kolonki .chtenie__podpiska .podpiska { padding: 24px; }
/* якоря оглавления — не под липкой шапкой */
.chtenie .content h2[id],
.chtenie .content h3[id] { scroll-margin-top: 96px; }

/* оглавление */
.oglavlenie { border-radius: 12px; background-color: #f5f5f6; }
.oglavlenie__zagolovok { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.3; color: #333; }
.oglavlenie__spisok { margin: 0; padding: 0; list-style: none; }
.oglavlenie__punkt { margin: 0; }
.oglavlenie__ssylka {
	display: block;
	padding: 7px 0 7px 12px;
	border-left: 2px solid #dfe3ec;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
	text-decoration: none;
}
.oglavlenie__punkt--vlozh .oglavlenie__ssylka { padding-left: 24px; font-size: 14px; color: #5c6169; }
.oglavlenie__ssylka:hover { color: #001960; text-decoration: underline; }
.oglavlenie__ssylka:focus-visible { outline: 2px solid #001960; outline-offset: 2px; }
.oglavlenie__ssylka.aktivno { border-left-color: #001960; color: #001960; font-weight: 600; }
.oglavlenie--bok { display: none; padding: 20px 20px 16px; }
.oglavlenie--bok .oglavlenie__zagolovok { margin-bottom: 10px; }
.oglavlenie--mob { margin: 0 0 24px; padding: 0 16px; }
.oglavlenie--mob .oglavlenie__zagolovok {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
}
.oglavlenie--mob .oglavlenie__zagolovok::-webkit-details-marker { display: none; }
.oglavlenie--mob .oglavlenie__zagolovok::after {
	content: '';
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid #001960;
	border-bottom: 2px solid #001960;
	transform: rotate(45deg) translateY(-3px);
	transition: transform .2s;
}
.oglavlenie--mob[open] .oglavlenie__zagolovok::after { transform: rotate(-135deg) translateY(-3px); }
.oglavlenie--mob .oglavlenie__zagolovok:focus-visible { outline: 2px solid #001960; outline-offset: 2px; }
.oglavlenie__schet {
	padding: 1px 8px;
	border-radius: 10px;
	background-color: #fff;
	font-weight: 500;
	font-size: 13px;
	color: #5c6169;
}
.oglavlenie--mob .oglavlenie__spisok { padding: 0 0 14px; }

/* «Нужна консультация?» — как у описания на карточке товара (kartochka.css, .opisanie__konsult) */
.chtenie__konsult {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: 12px;
	background-color: #f5f5f6;
}
.chtenie__konsult > * { margin: 0; }
.chtenie__konsult .chtenie__konsult-zagolovok { font-weight: 600; font-size: 20px; line-height: 1.3; color: #333; }
.chtenie__konsult .chtenie__konsult-tekst { font-size: 14px; line-height: 1.5; color: #5c6169; }
.chtenie__konsult-tel { font-weight: 600; font-size: 18px; color: #001960; text-decoration: none; }
.chtenie__konsult-tel:hover { text-decoration: underline; }
.chtenie__konsult-knopka { width: 100%; margin-top: 6px; }

@media (min-width: 1200px) {
	.chtenie--kolonki { max-width: none; }
	.chtenie--kolonki .chtenie__telo {
		display: grid;
		grid-template-columns: minmax(0, 880px) 320px;
		justify-content: space-between;
		column-gap: 48px;
	}
	.chtenie--kolonki .chtenie__bok { margin: 0; }
	/* колонка едет рядом с текстом под липкой шапкой (80 px); длиннее экрана — прокручивается сама */
	.chtenie__lipkij {
		position: sticky;
		top: 100px;
		max-height: calc(100vh - 116px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	.oglavlenie--bok { display: block; }
	.oglavlenie--mob { display: none; }
	/* колонка целиком в экран 1440×900: плотнее отступы, пояснение подписки — только под текстом на узком экране */
	.chtenie__lipkij { gap: 12px; }
	.oglavlenie--bok { padding: 16px 18px 12px; }
	.oglavlenie--bok .oglavlenie__ssylka { padding-top: 5px; padding-bottom: 5px; }
	.chtenie__konsult { padding: 20px; gap: 8px; }
	.chtenie--kolonki .chtenie__podpiska .podpiska { padding: 20px; }
	.chtenie--kolonki .chtenie__podpiska .podpiska__title { font-size: 18px; }
	.chtenie--kolonki .chtenie__podpiska .podpiska__text { display: none; }
}
@media (max-width: 1199px) {
	.chtenie--kolonki .chtenie__lipkij { max-width: 800px; }
}
@media (max-width: 992px) {
	.chtenie--kolonki .chtenie__bok { margin-top: 32px; }
	.chtenie--kolonki .chtenie__podpiska .podpiska,
	.chtenie__konsult { padding: 20px; }
	.oglavlenie--mob { margin-bottom: 20px; }
}