/*
 * Оформление блога, которое на старом сайте лежало в style.css шаблонов компонента
 * (news/blogredesign_toys/bitrix/news.list/.default и .../news.detail/.default) и
 * подключалось Битриксом автоматически. Наша страница компонент не вызывает, поэтому
 * стили перенесены сюда — тойс не должен зависеть от шаблона гулливера.
 *
 * Перенесено только то, что использует наша разметка: правила под классы, которых у нас
 * нет (content_row, wrapSidebar, mobile_hide, дефолтные news-list/news-detail), опущены.
 */

/* ++ рубрики ++ */

.metas {
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 8px;
	max-width: 1200px;
	margin: 0 auto 25px;
}

.metas .btnBrd {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	border-radius: 20px;
	text-decoration: none;
	text-transform: uppercase;
}

/* -- рубрики -- */

/* ++ поля страницы ++ */

/* Список идёт почти от края, как в старом блоге: боковое поле равно зазору между карточками.
   Статье это не касается: там поле остаётся контейнерным — строка в одну линию с «Меню» и крошками. */
.blog-page--list {
	padding-left: 20px;
	padding-right: 20px;
}

.blog-page--list .card-article {
	padding-left: 0;
	padding-right: 0;
}

/* -- поля страницы -- */

/* ++ сетка списка ++ */

.content_row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* половина ширины за вычетом половины зазора — две карточки в ряд */
.content_row .card-article {
	flex: 0 1 calc(50% - 10px);
	box-sizing: border-box;
}

.content_row .card-article .h3,
.content_row .card-article__info,
.content_row .d-block {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.content_row .card-article__info .boxInfoText {
	margin: 0;
}

@media (max-width: 990px) {
	.content_row .card-article {
		flex: 1 1 100%;
	}
}

/* -- сетка списка -- */

/* ++ карточка списка ++ */

.wrap-img img {
	border-radius: 6px;
	overflow: hidden;
}

.bages-container {
	display: flex;
	position: relative;
}

/* рубрика поверх картинки, у нижнего края */
.bage-absolute {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
}

/* дату и время чтения прижимаем к низу карточки, чтобы у соседей они были на одной линии */
.bottom-class {
	margin-top: auto;
	display: flex;
	color: #807C79;
}

.bottom-class .boxInfoText {
	display: flex;
	margin-top: 30px;
}

.bottom-class .boxInfoText:nth-child(2) {
	margin-left: 25px;
}

/* -- карточка списка -- */

/* ++ номера страниц ++ */

/* список и номера страниц шли вплотную — в старом списке между ними есть воздух */
.wrap-card-article ~ .pagination-page {
	margin-top: 60px;
}

/* -- номера страниц -- */

/* ++ баннеры под списком ++ */

/* слайдер идёт от края до края, как в старом списке — гасим поля страницы */
.wrapArticleBottomSlider {
	margin-left: -20px;
	margin-right: -20px;
	width: auto;
}

.articleBottomSlider .swiper-slide img {
	width: 100%;
	display: block;
}

/* -- баннеры под списком -- */

/* ++ крупная карточка: текст слева, картинка справа ++ */

.top_block {
	display: flex;
	margin-bottom: 25px;
	align-items: stretch;
}

/* Плашка и картинка делят строку поровну — так в старом списке. Доли задаём здесь, а не
   сеткой бутстрапа: её на тойсе нет вовсе, а классы `col-md-*` в разметке ничего не делают. */
.top_block .card-article__text {
	display: flex;
	flex-direction: column;
	flex: 0 0 50%;
	background: #EEE4DD;
	padding: 20px;
}

.top_block .card-article__picture {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.top_block .card-article__img {
	display: flex;
	width: 100%;
}

.top_block .btnBrd {
	display: inline-block;
}

/* Граница с дробью, а не ровно 1023: при дробном DPR (1.5, ноутбуки и режим устройства
   в DevTools) ширина viewport дробная — на «1023» браузер видит 1023.33, и `max-width: 1023px`
   уже не срабатывает. Тот же приём использует сам бутстрап в своих брейкпойнтах. */
@media (max-width: 1023.98px) {
	/* крупная карточка распирается на всю ширину экрана, как в старом списке: поля
	   страницы ей не достаются, остальные карточки их сохраняют */
	.blog-page--list .card-article.col-12 {
		margin-left: -20px;
		margin-right: -20px;
	}
}

@media (max-width: 990px) {
	/* на узком экране картинка уходит наверх, текст под неё */
	.top_block {
		flex-direction: column-reverse;
	}

	.wrap-img img {
		width: 100%;
	}
}

/* -- крупная карточка -- */

/* ++ статья ++ */

.min-section {
	width: 80%;
	margin: 0 auto;
}

/* Отступ текста плавающий (по 10% с каждой стороны) и держится до планшета включительно: так
   содержимое статьи не выравнивается с краями верхней карточки, как и в старом блоге. На телефоне
   эти 10% съедают слишком много строки — там текст идёт по ширине контейнера (решение владельца). */
@media (max-width: 575.98px) {
	.min-section {
		width: 100%;
	}
}

.article-detailed-text {
	margin: 30px 0;
}

.article-detailed-text h2 {
	font-family: AGOpusHRC;
	font-weight: 400;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: 8%;
	text-transform: uppercase;
}

.article-detailed-text h3 {
	font-weight: 500;
	font-size: 20px;
	line-height: 142%;
}

.article-detailed-text__wrapper a {
	color: #525665;
	text-decoration: underline;
	text-decoration-color: rgba(82, 86, 101, 0.3);
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.article-detailed-text__wrapper a:hover {
	color: #000;
	text-decoration-color: #7dbbd1;
}

.article-detailed-text__wrapper b {
	font-weight: 700;
}

.article-detailed-text__wrapper ul {
	list-style: none;
	padding: 0;
	margin: 24px 0;
}

.article-detailed-text__wrapper ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.article-detailed-text__wrapper ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(255, 154, 158, 0.3);
}

.article-detailed-text__wrapper ul li:hover::before {
	transform: scale(1.2);
	transition: transform 0.2s ease;
}

blockquote {
	background-color: #eee4dd;
	border-radius: 15px;
	padding: 30px 40px;
	margin: 40px 0;
	color: #444;
	font-size: 16px;
	line-height: 1.6;
	font-style: normal;
	border: none;
	position: relative;
}

blockquote a {
	color: #2c3e50;
	text-decoration: none;
	font-weight: 600;
	padding-bottom: 1px;
	border-bottom: 2px solid rgba(255, 184, 0, 0.3);
	transition: all 0.2s ease;
}

blockquote a:hover {
	color: #FFB800;
	border-bottom-color: #FFB800;
}

blockquote::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 30px;
	bottom: 30px;
	width: 3px;
	background-color: #f3ece7;
	border-radius: 2px;
}

/* ++ товары в статье ++ */

/* В статье карточки крупнее, чем в листинге каталога: две в ряд на ширину текста и по центру —
   иначе одинокий товар висит маленьким квадратом у левого края. Сама карточка общая с каталогом,
   меняется только сетка вокруг неё. */
.articleGoods {
	/* на проде блок товаров прижат к следующему абзацу — здесь отбиваем, читается заметно лучше */
	margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 16px;
	/* сетка каталога тянет свою ширину и отступы — в статье товары идут ровно по ширине текста */
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.articleGoods .lcard {
	flex: 0 0 calc(50% - 8px);
	max-width: calc(50% - 8px);
}

@media (max-width: 767.98px) {
	.articleGoods .lcard {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* -- товары в статье -- */

/* ++ «Читайте также» ++ */

.articleRelated {
	margin-top: 80px;
}

.articleRelated__title {
	font-size: 40px;
	text-align: center;
	margin-bottom: 1.25rem;
}

/* -- «Читайте также» -- */

/* -- статья -- */