/* ============================================================   Стили шаблона статей (цикл «Процессоры и Mainboard»).   Подключается в includes/article_tpl.html.   Всё изолировано под .article / .art_*, чтобы не конфликтовать   с глобальными правилами style00.css (шапка, меню, подвал).   Меню и его поведение (фиксированное, прячется при скролле)   остаются на style00.css + mobile00.js — здесь не трогаются.   ============================================================ */:root{	--accent:#196369;	--accent-dark:#12494e;	--accent-soft:#e8f1f1;	--ink:#21302f;	--muted:#5d6e6e;	--line:#dde5e5;	--bg-soft:#f5f9f9;	/* Псевдоним: контент статей иногда приходит с инлайн-стилем color:var(--text-secondary) */	--text-secondary:#5d6e6e;	--radius:12px;	--shadow:0 1px 3px rgba(20,60,64,.08), 0 8px 24px rgba(20,60,64,.06);	--maxw:1320px;	--nav-h:46px;}.art_wrap, .art_wrap *{box-sizing:border-box;}.art_wrap{	max-width:var(--maxw);	margin:0 auto;	padding:calc(var(--nav-h) + 24px) 18px 56px;	display:grid;	grid-template-columns:minmax(0,1fr) 300px;	gap:36px;	align-items:start;	background:transparent;}.article{	min-width:0;	background:#fff;	border:1px solid var(--line);	border-radius:var(--radius);	box-shadow:var(--shadow);	padding:32px 36px 40px;	color:var(--ink);	font-size:17px;	line-height:1.72;	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;	-webkit-font-smoothing:antialiased;}.article h1{	font-size:2rem;	line-height:1.22;	color:var(--accent-dark);	margin:0 0 .5em;	letter-spacing:-.01em;}.article h2{	font-size:1.45rem;	color:var(--accent);	margin:1.9em 0 .6em;	padding-bottom:.32em;	border-bottom:2px solid var(--line);}.article h3{	font-size:1.16rem;	color:var(--accent-dark);	margin:1.5em 0 .5em;}.article p{margin:0 0 1.05em;}.article ul,.article ol{margin:0 0 1.15em;padding-left:1.4em;}.article li{margin:.35em 0;}.article strong{color:var(--ink);}.article a{	color:#15727a;	text-decoration:none;	border-bottom:1px solid rgba(21,114,122,.35);	transition:color .15s ease,border-color .15s ease;}.article a:hover{color:var(--accent-dark);border-color:var(--accent-dark);}.article hr{	border:0;	border-top:1px solid var(--line);	margin:2.2em 0;}/* Код: инлайн-фрагменты (регистры, строки прошивки) и блоки (дамп/ассемблер) */.article code{	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;	font-size:.88em;	background:var(--accent-soft);	color:var(--accent-dark);	padding:.12em .42em;	border-radius:5px;	word-break:break-word;}.article pre{	background:var(--bg-soft);	border:1px solid var(--line);	border-radius:10px;	padding:14px 16px;	margin:1.4em 0;	overflow-x:auto;	-webkit-overflow-scrolling:touch;	font-size:.9rem;	line-height:1.5;}.article pre code{	background:none;	color:var(--ink);	padding:0;	border-radius:0;	font-size:.95em;	white-space:pre;	word-break:normal;}/* Иллюстрация процессора/платы — аккуратный блок, без обтекания (чтобы не накладываться на таблицы) */.article img{	max-width:100%;	height:auto;	display:block;	margin:1.2em 0;	border:1px solid var(--line);	border-radius:10px;}@media (min-width:760px){	.article > img{max-width:360px;}}/* Несколько картинок в ряд: оберните их в <div class="img_row">…</div> (класс на обёртке, не на img) */.article .img_row{	display:flex;	flex-wrap:wrap;	gap:12px;	margin:1.2em 0;	align-items:flex-start;}.article .img_row img{	display:block;	margin:0;	flex:1 1 200px;	max-width:calc(50% - 6px);}.article .img_row_sm {	display:flex;	flex-wrap:wrap;	gap:12px;	margin:1.2em 0;	align-items:flex-start;}.article .img_row_sm img{	display:block;	margin:0;	width:30px;}@media (max-width:600px){	.article .img_row img{		flex-basis:100%;		max-width:100%;	}}/* Таблицы характеристик / распиновки */.article table{	width:100%;	border-collapse:collapse;	margin:1.6em 0;	font-size:.95rem;	box-shadow:0 0 0 1px var(--line);	border-radius:10px;}.article th,.article td{	padding:11px 14px;	text-align:left;	border-bottom:1px solid var(--line);	vertical-align:top;}.article thead th{	background:var(--accent);	color:#fff;	font-weight:600;	border-bottom:0;}.article tbody tr:nth-child(even){background:var(--bg-soft);}.article tbody tr:hover{background:var(--accent-soft);}/* Выноски (используются в контенте: .highlight, .note, .tech-block) */.article .highlight{	background:#fff8e6;	border-left:4px solid #f4b740;	padding:14px 18px;	border-radius:8px;	margin:1.6em 0;}.article .note{	background:#e9f5ee;	border-left:4px solid #3fa776;	padding:14px 18px;	border-radius:8px;	margin:1.6em 0;}.article .tech-block{	background:var(--bg-soft);	border:1px solid var(--line);	border-radius:var(--radius);	padding:24px 28px;	margin:2.2em 0;}.article .tech-block h2{margin-top:0;border-bottom:0;}.article small{color:var(--muted);}/* Хлебные крошки внизу статьи (совпадают с микроразметкой BreadcrumbList).   ВАЖНО: глобальный style00.css задаёт для тега <nav> position:fixed; top:0,   из-за чего крошки «улетали» наверх под меню. Возвращаем нормальный поток. */.art_crumbs{	position:static;	width:auto;	top:auto;	z-index:auto;	transition:none;	display:flex;	flex-wrap:wrap;	align-items:center;	gap:.45em;	font-size:.85rem;	color:var(--muted);	margin:0 0 1.4em;}.art_crumbs a{	color:var(--accent);	text-decoration:none;	border:0;	border-bottom:0;}.art_crumbs a:hover{	color:var(--accent-dark);	text-decoration:none;	border-bottom:0;}.art_crumbs .sep{color:#aebcbc;}.art_crumbs .cur{color:var(--muted);}.art_feedback{	text-align:center;	color:var(--muted);	font-size:.95rem;	margin-top:2em;}/* Блок «Читайте также» — перелинковка статей цикла */.art_related{	margin:2.6em 0 0;	padding:18px 22px;	background:var(--bg-soft);	border:1px solid var(--line);	border-radius:var(--radius);}.art_related h2{	margin:0 0 .5em;	padding:0;	border-bottom:0;	font-size:1.12rem;	color:var(--accent-dark);}.art_related ul{margin:0;padding-left:1.2em;}.art_related li{margin:.4em 0;}/* Правая колонка с рекламой (липкая — мягко остаётся в поле зрения, без скачков) */.art_sidebar{position:sticky;top:calc(var(--nav-h) + 24px);}.art_ad{	background:#fff;	border:1px solid var(--line);	border-radius:var(--radius);	padding:12px;	box-shadow:var(--shadow);	min-height:250px;}.art_ad_label{	display:block;	font:600 11px/1.4 -apple-system,"Segoe UI",sans-serif;	letter-spacing:.08em;	text-transform:uppercase;	color:#9aa8a8;	margin:0 0 8px 2px;}/* Якоря заголовков не должны прятаться под фиксированным меню при переходе из оглавления */html{scroll-behavior:smooth;}.article h2, .article h3{scroll-margin-top:calc(var(--nav-h) + 18px);}/* Левое оглавление (TOC). По умолчанию скрыто — показывается только на широких экранах,   чтобы на 1366/планшетах/мобильных раскладка оставалась прежней. Наполняется скриптом из шаблона. */.art_toc{	display:none;	position:sticky;	top:calc(var(--nav-h) + 24px);	align-self:start;	max-height:calc(100vh - var(--nav-h) - 48px);	overflow:auto;	font-size:.9rem;	line-height:1.4;	color:var(--muted);}.art_toc_title{	font-weight:700;	text-transform:uppercase;	letter-spacing:.06em;	font-size:.72rem;	color:#9aa8a8;	margin:0 0 10px 12px;}.art_toc ul{list-style:none;margin:0;padding:0;}.art_toc li{margin:0;}.art_toc a{	display:block;	padding:5px 12px;	color:var(--muted);	text-decoration:none;	border:0;	border-left:2px solid transparent;	transition:color .15s ease,border-color .15s ease;}.art_toc a:hover{color:var(--accent-dark);}.art_toc .toc_sub a{padding-left:26px;font-size:.86rem;}.art_toc a.active{	color:var(--accent-dark);	border-left-color:var(--accent);	font-weight:600;}/* Планшет/мобильный — одна колонка, реклама уходит вниз */@media (max-width:900px){	.art_wrap{		grid-template-columns:1fr;		gap:24px;		padding:calc(var(--nav-h) + 12px) 12px 40px;	}	.article{padding:22px 18px 28px;border-radius:10px;}	.article h1{font-size:1.6rem;}	.article h2{font-size:1.28rem;}	.art_sidebar{position:static;}	.article > img{max-width:100%;}}/* Широкие таблицы на узких экранах — горизонтальная прокрутка вместо переполнения */@media (max-width:600px){	.article table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}}/* Широкие мониторы (от ~1500px): задействуем пустующее левое поле под оглавление.   Контейнер расширяется, поэтому колонка с текстом не сужается, а заполняется свободное место слева. */@media (min-width:1500px){	.art_wrap{		max-width:1600px;		grid-template-columns:230px minmax(0,1fr) 300px;	}	.art_toc{display:block;}}