/**
 * GD Blog — стили раздела статей.
 *
 * Родительская тема topshop про блог ничего не знает, вся вёрстка здесь.
 * Всё живёт внутри .gd-blog-page (класс body ставит gd-blog.php) или внутри
 * собственных классов блоков: правила темы перебиваем специфичностью
 * селекторов, !important не используем нигде.
 */

/* ---------------------------------------------------------------------------
 * 1. Переменные и ширина колонки
 * ------------------------------------------------------------------------- */

/*
 * Переменные объявлены на .gd-blog-page, а не на :root: блог — это ~100 страниц
 * из тысячи, и его палитра не должна протекать в остальной сайт.
 */
.gd-blog-page,
.gd-blog-home {
	--gd-yellow: #ffcc00;
	--gd-yellow-2: #f6d044;
	--gd-yellow-deep: #e6b800;
	--gd-dark: #2e2e2e;
	--gd-dark-2: #4a4744;
	--gd-grey: #f5f3f3;
	--gd-muted: #8a8580;
	--gd-border: #e6e2de;
	--gd-radius: 10px;
	--gd-font: 'Ubuntu', Arial, Helvetica, sans-serif;
}

/*
 * Шапка темы открывает #content с классом content-has-sidebar, а шаблоны блога
 * сайдбар не рисуют: без сброса колонка осталась бы 75% и справа зияла дыра.
 * Тема задаёт ширину селектором .content-area (0,1,0) — три класса ниже
 * перебивают её честной специфичностью, без !important.
 */
.gd-blog-page #primary.content-area,
.gd-blog-page #content.content-has-sidebar #primary.content-area {
	width: 100%;
	float: none;
	padding: 0 0 20px;
}

/* Сайдбара нет — подвал не должен подтягиваться под плавающую колонку. */
.gd-blog-page #content.content-has-sidebar::after {
	content: "";
	display: table;
	clear: both;
}

.gd-blog-page .breadcrumbs {
	margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
 * 2. Список статей: шапка и фильтр разделов
 * ------------------------------------------------------------------------- */

.gd-blog {
	color: var(--gd-dark);
}

.gd-blog__head {
	margin: 0 0 22px;
}

/* Тема красит .entry-title из header.entry-header — бьём тем же весом + свой класс. */
.gd-blog-page header.entry-header .entry-title.gd-blog__title {
	margin: 0 0 12px;
	color: var(--gd-dark);
	font-family: var(--gd-font);
	font-size: 32px;
	line-height: 1.22;
	font-weight: 700;
}

.gd-blog__intro {
	max-width: 760px;
	margin: 0;
	color: var(--gd-dark-2);
	font-size: 16px;
	line-height: 1.65;
}

.gd-blog__intro p {
	margin: 0 0 12px;
}

.gd-blog__intro p:last-child {
	margin-bottom: 0;
}

.gd-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.gd-blog-filter__btn {
	padding: 9px 18px;
	border: 1px solid var(--gd-border);
	border-radius: 999px;
	background: #fff;
	color: var(--gd-dark);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.gd-blog-filter__btn:hover,
.gd-blog-filter__btn:focus-visible {
	border-color: var(--gd-yellow);
	background: #fffae3;
}

.gd-blog-filter__btn.is-active {
	border-color: var(--gd-yellow);
	background: var(--gd-yellow);
	color: var(--gd-dark);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 3. Сетка карточек
 * ------------------------------------------------------------------------- */

.gd-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 32px;
}

/*
 * ЛОВУШКА: фильтр разделов ставит карточке атрибут hidden, но браузерное
 * правило [hidden]{display:none} слабее нашего display:flex у .gd-card —
 * без строчки ниже кнопки разделов нажимались, а карточки оставались на месте.
 */
.gd-blog-grid .gd-card[hidden] {
	display: none;
}

.gd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius);
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gd-card:hover {
	transform: translateY(-4px);
	border-color: #ecd9a0;
	box-shadow: 0 14px 30px rgba(46, 46, 46, .13);
}

.gd-card__img {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--gd-grey);
}

/* Картинка по ТЗ не ссылка — ни курсора-руки, ни подчёркивания тут быть не должно. */
.gd-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: none;
	transition: transform .35s ease;
}

.gd-card:hover .gd-card__img img {
	transform: scale(1.06);
}

/* --- Плашка вместо обложки ------------------------------------------------
 * Обложек у статей нет ни у одной, поэтому пустой прямоугольник выглядел бы
 * поломкой. Рисуем фирменную плашку с названием раздела: оттенки жёлтого и
 * тёмно-серого — одна семья, а не пять случайных цветов.
 */
.gd-card__img--ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: linear-gradient(135deg, var(--gd-grey) 0%, #e8e4e0 100%);
	text-align: center;
}

/* Диагональная штриховка поверх заливки — чтобы плашка читалась как приём. */
.gd-card__img--ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, .28) 0,
		rgba(255, 255, 255, .28) 2px,
		transparent 2px,
		transparent 12px
	);
}

.gd-card__img--ph span {
	position: relative;
	max-width: 100%;
	color: var(--gd-dark);
	font-family: var(--gd-font);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.gd-card__img--ph[data-section="avtoshkola"] {
	background: linear-gradient(135deg, var(--gd-yellow) 0%, var(--gd-yellow-2) 100%);
}

.gd-card__img--ph[data-section="ekzamen"] {
	background: linear-gradient(135deg, var(--gd-dark) 0%, #57534e 100%);
}

.gd-card__img--ph[data-section="ekzamen"] span {
	color: var(--gd-yellow);
}

.gd-card__img--ph[data-section="vozhdenie"] {
	background: linear-gradient(135deg, #fdf1c4 0%, var(--gd-yellow-2) 100%);
}

.gd-card__img--ph[data-section="pdd-shtrafy"] {
	background: linear-gradient(135deg, #6b6560 0%, #3d3a37 100%);
}

.gd-card__img--ph[data-section="pdd-shtrafy"] span {
	color: #ffe89a;
}

.gd-card__img--ph[data-section="avtomobil"] {
	background: linear-gradient(135deg, #fffdf2 0%, #ded9d2 100%);
}

/* --- Текстовая часть карточки --------------------------------------------- */

.gd-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
}

.gd-card__badge {
	align-self: flex-start;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--gd-grey);
	color: var(--gd-dark-2);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .02em;
}

.gd-card__title {
	margin: 0;
	font-family: var(--gd-font);
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
}

/* Тема даёт ссылкам свой цвет и подчёркивание — перекрываем через свой класс. */
.gd-card__title a {
	color: var(--gd-dark);
	text-decoration: none;
	transition: color .18s ease;
}

.gd-card:hover .gd-card__title a,
.gd-card__title a:hover {
	color: var(--gd-yellow-deep);
}

.gd-card__desc {
	margin: 0;
	color: var(--gd-dark-2);
	font-size: 14px;
	line-height: 1.55;
}

.gd-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--gd-muted);
	font-size: 13px;
}

.gd-card--small .gd-card__body {
	padding: 14px 16px 16px;
}

.gd-card--small .gd-card__title {
	font-size: 16px;
}

/* --- Метаданные: время чтения и просмотры ---------------------------------
 * Иконки — svg-маской, чтобы красились текущим цветом текста и не требовали
 * отдельных картинок.
 */
.gd-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gd-meta::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.gd-meta--time::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1-13h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1-13h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E");
}

.gd-meta--views::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.6 1.5 12c1.2 2.4 5 7 10.5 7s9.3-4.6 10.5-7C21.3 9.6 17.5 5 12 5zm0 12c-4 0-7.1-3.2-8.3-5C4.9 10.2 8 7 12 7s7.1 3.2 8.3 5c-1.2 1.8-4.3 5-8.3 5zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.6 1.5 12c1.2 2.4 5 7 10.5 7s9.3-4.6 10.5-7C21.3 9.6 17.5 5 12 5zm0 12c-4 0-7.1-3.2-8.3-5C4.9 10.2 8 7 12 7s7.1 3.2 8.3 5c-1.2 1.8-4.3 5-8.3 5zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
 * 4. Пустой список, пагинация, заявка
 * ------------------------------------------------------------------------- */

.gd-blog__empty {
	padding: 32px 0;
	color: var(--gd-muted);
	font-size: 16px;
}

/* paginate_links( type => list ) отдаёт <nav><ul><li><a class="page-numbers">. */
.gd-blog-pager ul,
.gd-blog-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.gd-blog-pager li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-blog-pager li::before {
	content: none;
}

.gd-blog-pager .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0 13px;
	border: 1px solid var(--gd-border);
	border-radius: 8px;
	background: #fff;
	color: var(--gd-dark);
	font-size: 14px;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}

.gd-blog-pager .page-numbers.current,
.gd-blog-pager a.page-numbers:hover {
	border-color: var(--gd-yellow);
	background: var(--gd-yellow);
	color: var(--gd-dark);
	font-weight: 700;
}

.gd-blog-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Заявка: своей формы нет, кнопка открывает сайтовый попап .zppp —
   поэтому и вид у неё тот же, что у кнопки в блоке цен. */
.gd-blog-cta {
	margin: 36px 0 10px;
	padding: 26px 24px;
	border-radius: var(--gd-radius);
	background: var(--gd-grey);
	text-align: center;
}

.gd-blog-cta__text {
	max-width: 620px;
	margin: 0 auto 16px;
	color: var(--gd-dark);
	font-size: 16px;
	line-height: 1.55;
}

.gd-blog-cta__btn {
	display: inline-block;
	padding: 13px 32px;
	border: 2px solid var(--gd-yellow);
	border-radius: 50px;
	background: var(--gd-yellow);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.gd-blog-cta__btn:hover {
	border-color: var(--gd-yellow-deep);
	background: var(--gd-yellow-deep);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 5. Страница статьи: шапка, оглавление, автор
 * ------------------------------------------------------------------------- */

.gd-article {
	color: var(--gd-dark);
}

/* Комфортная длина строки — около 720 px текста плюс поля блоков. */
.gd-article__inner,
.gd-related {
	max-width: 760px;
	margin: 0 auto;
}

.gd-blog-page .gd-article__title {
	margin: 0 0 16px;
	color: var(--gd-dark);
	font-family: var(--gd-font);
	font-size: 34px;
	line-height: 1.22;
	font-weight: 700;
	text-align: left;
}

.gd-article__lead {
	margin: 0 0 24px;
	padding-left: 16px;
	border-left: 3px solid var(--gd-yellow);
	color: var(--gd-dark-2);
	font-size: 18px;
	line-height: 1.6;
}

.gd-article__cover {
	margin: 0 0 28px;
	overflow: hidden;
	border-radius: var(--gd-radius);
}

.gd-article__cover img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: none;
}

.gd-article__top {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 22px;
	margin: 0 0 24px;
	align-items: start;
}

.gd-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gd-border);
	color: var(--gd-muted);
	font-size: 13px;
}

.gd-toc {
	padding: 20px 22px;
	border-radius: var(--gd-radius);
	background: var(--gd-grey);
}

.gd-toc__title {
	margin-bottom: 12px;
	font-family: var(--gd-font);
	font-size: 16px;
	font-weight: 700;
}

/*
 * Маркер — точка, а не номер: в текстах заголовки часто уже пронумерованы
 * руками, и вторая нумерация читалась бы как «2. 3. Экзамен».
 */
.gd-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-toc li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 16px;
	font-size: 15px;
	line-height: 1.45;
	list-style: none;
}

.gd-toc li:last-child {
	margin-bottom: 0;
}

.gd-toc li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gd-yellow);
}

.gd-toc a {
	color: var(--gd-dark);
	text-decoration: none;
	border-bottom: 1px solid rgba(46, 46, 46, .25);
	transition: color .18s ease, border-color .18s ease;
}

.gd-toc a:hover {
	color: var(--gd-yellow-deep);
	border-bottom-color: var(--gd-yellow);
}

.gd-author {
	padding: 20px 22px;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius);
	background: #fff;
}

.gd-author__label {
	margin-bottom: 12px;
	color: var(--gd-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.gd-author__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gd-author__photo {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: none;
}

.gd-author__info {
	min-width: 0;
}

.gd-author__name {
	font-family: var(--gd-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.gd-author__position {
	margin-top: 3px;
	color: var(--gd-muted);
	font-size: 13px;
	line-height: 1.4;
}

.gd-author__bio {
	margin: 12px 0 0;
	color: var(--gd-dark-2);
	font-size: 14px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * 6. Тело статьи: типографика
 * ------------------------------------------------------------------------- */

.gd-article__body {
	margin: 0;
	color: var(--gd-dark);
}

/*
 * Заголовки внутри статьи не наследуют оформление темы (оно завязано на .zag
 * и шаблоны школ) — задаём свою шкалу. scroll-margin-top держит заголовок под
 * липкой шапкой при переходе из оглавления.
 */
.gd-article__body h2 {
	margin: 36px 0 14px;
	color: var(--gd-dark);
	font-family: var(--gd-font);
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	scroll-margin-top: 100px;
}

.gd-article__body h3 {
	margin: 28px 0 12px;
	color: var(--gd-dark);
	font-family: var(--gd-font);
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
	scroll-margin-top: 100px;
}

.gd-article__body h4 {
	margin: 24px 0 10px;
	font-family: var(--gd-font);
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
}

.gd-article__body > :first-child {
	margin-top: 0;
}

.gd-article__body p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.7;
}

.gd-article__body strong,
.gd-article__body b {
	font-weight: 700;
}

.gd-article__body em,
.gd-article__body i {
	font-style: italic;
}

.gd-article__body a {
	color: var(--gd-dark);
	text-decoration: underline;
	text-decoration-color: var(--gd-yellow);
	text-underline-offset: 3px;
	transition: color .18s ease;
}

.gd-article__body a:hover {
	color: var(--gd-yellow-deep);
}

.gd-article__body ul,
.gd-article__body ol {
	margin: 0 0 20px;
	padding-left: 0;
	list-style: none;
}

.gd-article__body ul > li,
.gd-article__body ol > li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 28px;
	font-size: 17px;
	line-height: 1.6;
	list-style: none;
}

.gd-article__body ul > li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gd-yellow);
}

.gd-article__body ol {
	counter-reset: gd-ol;
}

.gd-article__body ol > li {
	counter-increment: gd-ol;
}

.gd-article__body ol > li::before {
	content: counter(gd-ol) ".";
	position: absolute;
	left: 4px;
	color: var(--gd-yellow-deep);
	font-weight: 700;
}

.gd-article__body li > ul,
.gd-article__body li > ol {
	margin: 10px 0 0;
}

.gd-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gd-radius);
	box-shadow: none;
}

.gd-article__body figure {
	margin: 0 0 20px;
}

.gd-article__body figcaption {
	margin-top: 8px;
	color: var(--gd-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* --- Таблицы ---------------------------------------------------------------
 * Тема красит границы ячеек чёрным (.entry-content table td) — перебиваем
 * своим классом-родителем, иначе таблица в статье выглядит как в 2010-м.
 */
.gd-article__body table,
.gd-article__body.entry-content table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	background: #fff;
	font-size: 15px;
}

.gd-article__body table th {
	padding: 12px 14px;
	border: 1px solid #e3ddd4;
	background: var(--gd-yellow);
	color: var(--gd-dark);
	text-align: left;
	font-weight: 700;
}

.gd-article__body.entry-content table td,
.gd-article__body table td {
	padding: 12px 14px;
	border: 1px solid #e3ddd4;
	color: var(--gd-dark);
	vertical-align: top;
}

.gd-article__body table tr:nth-child(even) td {
	background: var(--gd-grey);
}

/* --- Цитата ---------------------------------------------------------------- */

.gd-article__body blockquote,
.gd-quote {
	position: relative;
	margin: 0 0 24px;
	padding: 24px 26px 24px 60px;
	border: 0;
	border-left: 3px solid var(--gd-yellow);
	border-radius: var(--gd-radius);
	background: var(--gd-grey);
	color: var(--gd-dark);
	font-size: 18px;
	line-height: 1.6;
	font-style: normal;
}

.gd-article__body blockquote::before,
.gd-quote::before {
	content: "“";
	position: absolute;
	top: 8px;
	left: 20px;
	color: var(--gd-yellow);
	font-size: 54px;
	line-height: 1;
	font-family: Georgia, serif;
}

.gd-article__body blockquote p:last-child,
.gd-quote__text p:last-child {
	margin-bottom: 0;
}

.gd-quote__author {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
}

.gd-quote__author cite {
	font-style: normal;
}

.gd-quote__role {
	display: block;
	color: var(--gd-muted);
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * 7. Блоки-шорткоды внутри статьи
 * ------------------------------------------------------------------------- */

/* --- Картинка + текст ------------------------------------------------------ */

.gd-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	margin: 0 0 24px;
}

.gd-media--right .gd-media__fig {
	order: 2;
}

.gd-media--full {
	grid-template-columns: minmax(0, 1fr);
}

.gd-media--boxed {
	padding: 20px;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius);
	background: var(--gd-grey);
}

.gd-media__fig {
	margin: 0;
}

.gd-media__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gd-radius);
	box-shadow: none;
}

.gd-media__caption {
	margin-top: 8px;
	color: var(--gd-muted);
	font-size: 13px;
	line-height: 1.45;
}

.gd-media__text p:last-child {
	margin-bottom: 0;
}

/* --- Плюсы и минусы -------------------------------------------------------- */

.gd-proscons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 24px;
}

.gd-proscons__col {
	padding: 20px 22px;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius);
	background: #fff;
}

.gd-proscons__col--pros {
	border-top: 3px solid #1f9d55;
}

.gd-proscons__col--cons {
	border-top: 3px solid #c0392b;
}

.gd-proscons__title {
	margin-bottom: 12px;
	font-family: var(--gd-font);
	font-size: 17px;
	font-weight: 700;
}

.gd-proscons__body > :last-child {
	margin-bottom: 0;
}

.gd-article__body .gd-proscons ul,
.gd-proscons ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-article__body .gd-proscons li,
.gd-proscons li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.55;
}

.gd-article__body .gd-proscons li:last-child,
.gd-proscons li:last-child {
	margin-bottom: 0;
}

/*
 * Общее правило списка статьи рисует жёлтую точку через ::before — здесь она
 * должна стать знаком «+»/«−», поэтому размеры и фон точки сбрасываем явно.
 */
.gd-article__body .gd-proscons__col--pros li::before,
.gd-proscons__col--pros li::before {
	content: "+";
	position: absolute;
	top: -1px;
	left: 4px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: #1f9d55;
	font-size: 18px;
	font-weight: 700;
}

.gd-article__body .gd-proscons__col--cons li::before,
.gd-proscons__col--cons li::before {
	content: "–";
	position: absolute;
	top: -1px;
	left: 4px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: #c0392b;
	font-size: 18px;
	font-weight: 700;
}

/* --- Врезки «Важно» / «Полезно знать» -------------------------------------- */

.gd-callout {
	position: relative;
	margin: 0 0 24px;
	padding: 20px 22px 20px 56px;
	border-left: 3px solid var(--gd-yellow);
	border-radius: var(--gd-radius);
	background: #fffae6;
}

.gd-callout::before {
	content: "!";
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gd-yellow);
	color: var(--gd-dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

/* Базовый вид врезки — это и есть «Важно»; селектор оставлен явно, чтобы
   правка типа не требовала искать, где задан жёлтый вариант. */
.gd-callout--important {
	border-left-color: var(--gd-yellow);
	background: #fffae6;
}

/* «Полезно знать» — спокойнее по цвету и с другим значком, чтобы две врезки
   не путались между собой на одной странице. */
.gd-callout--useful {
	border-left-color: var(--gd-dark);
	background: var(--gd-grey);
}

.gd-callout--useful::before {
	content: "i";
	background: var(--gd-dark);
	color: var(--gd-yellow);
	font-family: Georgia, serif;
	font-style: italic;
}

.gd-callout__title {
	margin-bottom: 8px;
	font-family: var(--gd-font);
	font-size: 17px;
	font-weight: 700;
}

.gd-callout__text p:last-child {
	margin-bottom: 0;
}

/* --- Источник -------------------------------------------------------------- */

.gd-source {
	margin: -6px 0 24px;
	padding: 10px 14px;
	border-left: 2px solid var(--gd-border);
	background: var(--gd-grey);
	color: var(--gd-muted);
	font-size: 14px;
	line-height: 1.5;
}

.gd-source__label {
	font-weight: 700;
	color: var(--gd-dark-2);
}

.gd-article__body .gd-source__link,
.gd-source__link {
	color: var(--gd-dark-2);
	word-break: break-word;
}

.gd-source__link:hover {
	color: var(--gd-yellow-deep);
}

/* --- Вкладки --------------------------------------------------------------- */

.gd-tabs {
	margin: 0 0 24px;
	overflow: hidden;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius);
}

/* На узком экране ряд вкладок листается вбок, а не ломает ширину страницы. */
.gd-tabs__nav {
	display: flex;
	overflow-x: auto;
	background: var(--gd-grey);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gd-tabs__nav::-webkit-scrollbar {
	display: none;
}

.gd-tabs__btn {
	flex: 0 0 auto;
	padding: 13px 20px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--gd-dark-2);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.gd-tabs__btn:hover {
	color: var(--gd-dark);
}

.gd-tabs__btn.is-active {
	border-bottom-color: var(--gd-yellow);
	background: #fff;
	color: var(--gd-dark);
	font-weight: 700;
}

/*
 * ЛОВУШКА: неактивные панели приходят из PHP с атрибутом hidden, а скрипт
 * переключает только класс is-active и hidden не снимает. Поэтому панели
 * прячем сами, а показываем по классу — правило .is-active идёт ПОСЛЕ правила
 * с [hidden] (вес одинаковый, 0-2-0), и открытая панель побеждает.
 */
.gd-tabs__panels {
	background: #fff;
}

.gd-tabs__panel {
	display: none;
	padding: 20px 22px;
}

.gd-tabs__panel[hidden] {
	display: none;
}

.gd-tabs__panel.is-active {
	display: block;
}

.gd-tabs__panel > :last-child,
.gd-tabs__panel p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 8. Вопросы и ответы
 * ------------------------------------------------------------------------- */

.gd-faq {
	margin: 40px 0 32px;
}

.gd-blog-page .gd-faq__title,
.gd-blog-page .gd-related__title {
	margin: 0 0 18px;
	color: var(--gd-dark);
	font-family: var(--gd-font);
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	text-align: left;
}

.gd-faq__item {
	margin-bottom: 10px;
	overflow: hidden;
	border: 1px solid var(--gd-border);
	border-radius: var(--gd-radius);
	background: #fff;
	transition: border-color .18s ease;
}

.gd-faq__item.is-open {
	border-color: var(--gd-yellow);
}

.gd-faq__q {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border: 0;
	background: transparent;
	color: var(--gd-dark);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.gd-faq__q:hover {
	background: #fffae6;
}

.gd-faq__q[aria-expanded="true"] {
	color: var(--gd-dark);
	font-weight: 700;
}

/* Плюс/минус собран из двух полосок: вертикальную гасим в открытом состоянии. */
.gd-faq__ic {
	position: relative;
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
}

.gd-faq__ic::before,
.gd-faq__ic::after {
	content: "";
	position: absolute;
	background: var(--gd-yellow-deep);
}

.gd-faq__ic::before {
	top: 6px;
	left: 0;
	width: 14px;
	height: 2px;
}

.gd-faq__ic::after {
	top: 0;
	left: 6px;
	width: 2px;
	height: 14px;
	transition: opacity .2s ease, transform .2s ease;
}

.gd-faq__q[aria-expanded="true"] .gd-faq__ic::after,
.gd-faq__item.is-open .gd-faq__ic::after {
	opacity: 0;
	transform: scaleY(0);
}

/*
 * Раскрытие: скрипт ставит инлайновый max-height по высоте содержимого.
 * Отступы держим на абзаце, а не на контейнере — при max-height:0 они бы
 * оставили полоску пустоты под закрытым вопросом.
 */
.gd-faq__a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .28s ease;
}

.gd-faq__a p {
	margin: 0;
	padding: 0 20px 18px;
	color: var(--gd-dark-2);
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 9. «Поделиться» и «Также читайте»
 * ------------------------------------------------------------------------- */

.gd-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--gd-border);
}

.gd-share__label {
	margin-right: 4px;
	color: var(--gd-muted);
	font-size: 14px;
}

.gd-share__btn {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--gd-border);
	border-radius: 50%;
	background: #fff;
	color: var(--gd-dark);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.gd-share__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.gd-share__btn:hover,
.gd-share__btn:focus-visible {
	border-color: var(--gd-yellow);
	background: var(--gd-yellow);
	color: var(--gd-dark);
}

.gd-share__btn--vk:hover {
	border-color: #0077ff;
	background: #0077ff;
	color: #fff;
}

.gd-share__btn--tg:hover {
	border-color: #29a9eb;
	background: #29a9eb;
	color: #fff;
}

.gd-share__btn--wa:hover {
	border-color: #25d366;
	background: #25d366;
	color: #fff;
}

.gd-share__btn--copy:hover {
	border-color: var(--gd-dark);
	background: var(--gd-dark);
	color: var(--gd-yellow);
}

.gd-share__done {
	color: #1f9d55;
	font-size: 13px;
}

/* Сообщение «Ссылка скопирована» скрипт прячет атрибутом hidden — та же
   ловушка, что и с карточками: у элемента свой display. */
.gd-share .gd-share__done[hidden] {
	display: none;
}

.gd-related {
	margin-top: 40px;
	margin-bottom: 8px;
}

.gd-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* ---------------------------------------------------------------------------
 * 10. Адаптив
 * ------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.gd-blog-grid,
	.gd-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gd-article__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.gd-blog-page header.entry-header .entry-title.gd-blog__title,
	.gd-blog-page .gd-article__title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.gd-blog-grid,
	.gd-related__grid,
	.gd-proscons,
	.gd-media {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* В одну колонку «картинка справа» теряет смысл — возвращаем её наверх. */
	.gd-media--right .gd-media__fig {
		order: 0;
	}

	/* Фильтр разделов листается вбок: в столбик кнопок он занимал пол-экрана. */
	.gd-blog-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-bottom: 22px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.gd-blog-filter::-webkit-scrollbar {
		display: none;
	}

	.gd-blog-filter__btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.gd-blog-page header.entry-header .entry-title.gd-blog__title,
	.gd-blog-page .gd-article__title {
		font-size: 24px;
	}

	.gd-article__lead {
		font-size: 16px;
	}

	.gd-article__body p,
	.gd-article__body ul > li,
	.gd-article__body ol > li {
		font-size: 16px;
	}

	.gd-article__body h2 {
		margin-top: 28px;
		font-size: 22px;
	}

	.gd-article__body h3 {
		font-size: 18px;
	}

	/*
	 * Широкая таблица не должна растягивать страницу: обёртки в разметке нет,
	 * поэтому прокручиваем саму таблицу — display:block превращает её в
	 * собственный контейнер прокрутки.
	 */
	.gd-article__body table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.gd-article__body blockquote,
	.gd-quote {
		padding: 20px 18px 20px 46px;
		font-size: 16px;
	}

	.gd-article__body blockquote::before,
	.gd-quote::before {
		left: 14px;
		font-size: 44px;
	}

	.gd-callout,
	.gd-proscons__col,
	.gd-toc,
	.gd-author {
		padding-right: 18px;
		padding-left: 18px;
	}

	.gd-callout {
		padding-left: 50px;
	}

	.gd-callout::before {
		left: 16px;
	}

	.gd-tabs__panel {
		padding: 18px;
	}

	.gd-blog-cta {
		padding: 22px 18px;
	}

	.gd-blog-cta__btn {
		width: 100%;
		padding: 13px 14px;
		font-size: 13px;
	}
}

@media (max-width: 400px) {
	.gd-card__body {
		padding: 16px 16px 18px;
	}

	.gd-share__btn {
		width: 38px;
		height: 38px;
	}

	.gd-author__row {
		gap: 12px;
	}

	.gd-author__photo {
		width: 54px;
		height: 54px;
		flex: 0 0 54px;
	}
}

/* ---------------------------------------------------------------------------
 * 11. Бережный режим анимации
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gd-card,
	.gd-card__img img,
	.gd-card__title a,
	.gd-blog-filter__btn,
	.gd-blog-pager .page-numbers,
	.gd-faq__item,
	.gd-faq__ic::after,
	.gd-faq__a,
	.gd-share__btn,
	.gd-tabs__btn,
	.gd-blog-cta__btn,
	.gd-toc a,
	.gd-article__body a {
		transition: none;
	}

	.gd-card:hover {
		transform: none;
	}

	.gd-card:hover .gd-card__img img {
		transform: none;
	}

}


/* ---------------------------------------------------------------------------
 * Блок «Полезные статьи» на главной
 *
 * Карточки те же, что в списке статей (класс .gd-card не привязан к
 * .gd-blog-page), поэтому здесь только обёртка: заголовок в стиле остальных
 * секций главной, сетка на три колонки и кнопка «Все статьи».
 * ------------------------------------------------------------------------- */

.gd-blog-home {
	padding: 40px 0 50px;
	background: #fff;
	font-family: var(--gd-font);
}

.gd-blog-home__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 26px;
}

/* Карточки на главной ниже: это анонс раздела, а не сам раздел. */
.gd-blog-home .gd-card__img {
	height: 150px;
}

.gd-blog-home__more {
	margin-top: 30px;
	text-align: center;
}

.gd-blog-home__btn {
	display: inline-block;
	padding: 14px 34px;
	border-radius: 30px;
	background: var(--gd-yellow);
	color: var(--gd-dark);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease;
}

.gd-blog-home__btn:hover,
.gd-blog-home__btn:focus {
	background: var(--gd-yellow-2);
	color: var(--gd-dark);
	text-decoration: none;
}

@media (max-width: 1000px) {
	.gd-blog-home__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.gd-blog-home__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gd-blog-home__btn {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
 * Текст страницы под списком
 *
 * Это старое поисковое описание раздела. Сверху оно закрывало собой карточки,
 * поэтому шаблон выводит его последним — здесь просто приглушаем, чтобы оно
 * читалось как подпись к разделу, а не как начало страницы.
 * ------------------------------------------------------------------------- */

.gd-blog__seo {
	margin-top: 46px;
	padding-top: 28px;
	border-top: 1px solid var(--gd-border);
	color: var(--gd-dark-2);
	font-size: 15px;
	line-height: 1.7;
}

.gd-blog__seo p {
	margin: 0 0 14px;
}

/* Картинка в этом тексте обтекается и на узком экране ломает колонку. */
.gd-blog__seo img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.gd-blog__seo img.alignright,
	.gd-blog__seo img.alignleft {
		float: none;
		display: block;
		margin: 0 0 16px;
	}
}


/* ---------------------------------------------------------------------------
 * Клик по всей карточке
 *
 * Клиент просил, чтобы статья открывалась нажатием в любое место карточки, а не
 * только по заголовку (в первоначальном ТЗ было наоборот — «картинка не
 * кликабельна»). Растягиваем невидимую область ссылки-заголовка на всю карточку
 * вместо того, чтобы оборачивать карточку в <a>: так в разметке остаётся ОДНА
 * ссылка на статью, картинка ссылкой не становится, а поисковику и читалке
 * экрана по-прежнему виден нормальный текстовый заголовок.
 * ------------------------------------------------------------------------- */

.gd-card {
	cursor: pointer;
}

.gd-card__title a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Колонка статьи по центру
 *
 * Тема задаёт article { margin: 0 0 25px } и её правило оказывается в каскаде
 * позже нашего — «margin: 0 auto» не срабатывал, и текст прижимался к левому
 * краю, оставляя справа пустое поле. Перебиваем специфичностью, не !important.
 * ------------------------------------------------------------------------- */

.gd-blog-page .gd-article .gd-article__inner,
.gd-blog-page .gd-article .gd-related,
.gd-blog-page .gd-article .gd-share {
	margin-left: auto;
	margin-right: auto;
}


/* ---------------------------------------------------------------------------
 * Крошки на странице статьи
 *
 * Сначала их зажали в колонку текста (760 px), и длинная цепочка ломалась на
 * две строки, а последний пункт уезжал под первый — выглядело неопрятно.
 * Оставляем крошкам всю ширину, как на остальном сайте, и даём строкам воздуха.
 * ------------------------------------------------------------------------- */

.gd-blog-page .breadcrumbs {
	margin-bottom: 18px;
	line-height: 1.7;
}


/* ---------------------------------------------------------------------------
 * Воздух в тексте статьи
 *
 * Клиент просил увеличить межстрочный интервал: 1,7 на длинных абзацах читается
 * плотно. Ставим 1,85 и чуть увеличиваем расстояние между абзацами, чтобы
 * строки внутри абзаца и сами абзацы не сливались.
 * ------------------------------------------------------------------------- */

.gd-blog-page .gd-article__body,
.gd-blog-page .gd-article__body p,
.gd-blog-page .gd-article__body li {
	line-height: 1.85;
}

.gd-blog-page .gd-article__body p {
	margin-bottom: 20px;
}

.gd-blog-page .gd-article__body li + li {
	margin-top: 10px;
}

.gd-blog-page .gd-article__lead {
	line-height: 1.75;
}