/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Материал как описание 8'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "../wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Дизайн №8 - описание с фоном.'; */

/* ----------------------------------------- */
/* ДОПОЛНЕНИЕ - МАТЕРИАЛ В ФОРМАТЕ ЗАГОЛОВКА */
/* ----------------------------------------- */
/* ДИЗАЙН - ОПИСАНИЕ - С ФОНОМ               */
/* ----------------------------------------- */

/* Добавить в начало ярлыка:

mat-like-title-8-

*/

/* ----------------- */
/* ПАНЕЛЬ УПРАВЛЕНИЯ */
/* ----------------- */

:root {


/* ОТСТУПЫ ОПИСАНИЯ */
/* ---------------- */

	/* ПЕРВЫЙ ПО СЧЁТУ */
	/* --------------- */

		/* Нижний отступ первого */
		--margin-bottom-first-mat-like-title-8: 51px;
		
		/* Нижний отступ первого - на мобильных */
		--margin-bottom-mobile-first-mat-like-title-8: 51px;

		/* Верхний отступ первого */
		/* Подсказка: "0px" - оптимально, если первый заголовок ПЕРЕД всеми материалами */
		--margin-top-first-mat-like-title-8: 0px;
		
		/* Верхний отступ первого - на мобильных */
		/* Подсказка: "0px" - оптимально, если первый заголовок ПЕРЕД всеми материалами */
		--margin-top-mobile-first-mat-like-title-8: 0px;
	
	/* ВСЕ ОСТАЛЬНЫЕ ПО СЧЁТУ */
	/* ---------------------- */
	
		/* Нижний отступ остальных */
		--margin-bottom-all-mat-like-title-8: 51px;
		
		/* Нижний отступ остальных - на мобильных */
		--margin-bottom-mobile-all-mat-like-title-8: 51px;

		/* Верхний отступ остальных */
		/* Подсказка: "21px" - оптимально. Задайте своё значение, если к заголовку визуально липнут материалы сверху */
		--margin-top-all-mat-like-title-8: 21px;
		
		/* Верхний отступ остальных - на мобильных */
		/* Подсказка: "21px" - оптимально. Задайте своё значение, если к заголовку визуально липнут материалы сверху */
		--margin-top-mobile-all-mat-like-title-8: 21px;
	
/* ВЫРАВНИВАНИЕ ОПИСАНИЯ */
/* --------------------- */

	/* Ширина блока */
	/* Подсказка: "100%" - займёт всю ширину страницы, "fit-content" - ширина = ширине описания */
	--width-mat-like-title-8: fit-content;
	
	/* Выравнивание блока */
	/* Актуально только, если выше задано "fit-content" */
	/* Подсказка: left - слева, center - центр, right - справа */
	--align-mat-like-title-8: center;	
	
	/* Выравнивание описания внутри блока */
	/* Подсказка: left - слева, center - центр, right - справа */
	--align-content-mat-like-title-8: center;
	
	/* Выравнивание описания внутри блока - на мобильных */
	--align-content-mobile-mat-like-title-8: center;

/* НАСТРОЙКИ ДИЗАЙНА ОПИСАНИЯ */
/* -------------------------- */
	
	/* Цвет фона-градиента 1 */
	--gradient-bg-1-mat-like-title-8: #ffffff;
	
	/* Цвет фона-градиента 2 */
	--gradient-bg-2-mat-like-title-8: #ffffff;

	/* Закругление фона */
	--radius-mat-like-title-8: 25px;

	/* Толщина рамки фона */
	--border-width-mat-like-title-8: 0px;

	/* Цвет рамки фона */
	--border-color-mat-like-title-8: #999999;
	
	/* Размер тени фона */
	--shadow-size-mat-like-title-8: 30px;
	
	/* Цвет тени фона */
	--shadow-color-mat-like-title-8: rgba(0, 0, 0, 0.2);
	
	/* ОПИСАНИЕ */
	/* -------- */
	
		/* Размер описания */
		--desc-size-mat-like-title-8: 1.9rem;
		
		/* Размер описания - на мобильных */
		--desc-size-mobile-mat-like-title-8: 1.9rem;
		
		/* Цвет описания */
		--desc-color-mat-like-title-8: #000000;
		
		/* Жирность описания */
		--desc-weight-mat-like-title-8: 400;
		
		/* Шрифт описания */
		--desc-font-mat-like-title-8: "PT Sans", sans-serif;
		
		/* Перенос слов в описании через дефис */
		/* Подсказка: auto - переносить слова, none - НЕ переносить слова */
		--desc-hyphens-mat-like-title-8: auto;

}

/* ------------------ */
/* БЛОК ВСЕЙ КАРТОЧКИ */
/* ------------------ */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]),
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) {
    display: block !important;
	/* количество карточек в ряду */
	width: 100%;
	/* Отступы */
	padding-right: 15px;
    padding-left: 15px;
	/* Нижний и верхний отступы */
	margin: var(--margin-top-all-mat-like-title-8) 0px var(--margin-bottom-all-mat-like-title-8) 0px;
	/* убираем кликабельность */
	cursor: default;
    pointer-events: none;
	/* убираем возможный счётчик (от других форматов из Космического) */
	/* нужно, чтобы счётчик материала после заголовка начинался с "1" или логично продолжался */
	counter-increment: none;
	/* counter-increment: material-counter 0; */
	float: unset;
}

/* Нижний и верхний отступы - на мобильных */

@media (min-width: 320px) and (max-width: 767px) {

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]),
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) {
	margin: var(--margin-top-mobile-all-mat-like-title-8) 0px var(--margin-bottom-mobile-all-mat-like-title-8) 0px;
}
}

/* ОТСТУПЫ ПЕРВОГО ПО СЧЁТУ БЛОКА */
/* ------------------------------ */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]):first-child,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]):first-child {
	/* Нижний и верхний отступы */
	margin: var(--margin-top-first-mat-like-title-8) 0px var(--margin-bottom-first-mat-like-title-8) 0px;
}

/* Нижний и верхний отступы - Первого по счёту блока - на мобильных */

@media (min-width: 320px) and (max-width: 767px) {

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]):first-child,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]):first-child {
	margin: var(--margin-top-mobile-first-mat-like-title-8) 0px var(--margin-bottom-mobile-first-mat-like-title-8) 0px;
}
}

/* Убираем возможные иконки внутри блока всей карточки - ДО (например, из формата "Список") */

.site-content .materials-row .container .col-md-6:has(a[href*="/mat-like-title-8-"]):before,
.site-content .materials-row.one-in-line .container .row .col-md-12:has(a[href*="/mat-like-title-8-"]):before {
	display: none !important;
}

/* --------------- */
/* БЛОК - КАРТОЧКА */
/* --------------- */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item {
	display: flex;
	/* выравниваем весь блок */
    justify-self: var(--align-mat-like-title-8);
	position: relative;
	/* ширина блока */
	width: var(--width-mat-like-title-8);
	/* Цвет фона-градиента */
	background: linear-gradient(90deg, var(--gradient-bg-1-mat-like-title-8), var(--gradient-bg-2-mat-like-title-8));
    border-radius: var(--radius-mat-like-title-8);
	border: var(--border-width-mat-like-title-8) solid var(--border-color-mat-like-title-8);
	/* border: none; */
	/* отступы */
	margin: 0;
	padding: 16px 21px 16px 21px;
	/* тень */
	-webkit-box-shadow: 0px 0px var(--shadow-size-mat-like-title-8) -20px var(--shadow-color-mat-like-title-8);
	-moz-box-shadow: 0px 0px var(--shadow-size-mat-like-title-8) -20px var(--shadow-color-mat-like-title-8);
	box-shadow: 0px 0px var(--shadow-size-mat-like-title-8) -20px var(--shadow-color-mat-like-title-8);
	/* box-shadow: none; */
	transition: none !important;
	overflow: visible;
}

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item:hover,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item:hover {
	/* тень */
	-webkit-box-shadow: 0px 0px var(--shadow-size-mat-like-title-8) -20px var(--shadow-color-mat-like-title-8);
	-moz-box-shadow: 0px 0px var(--shadow-size-mat-like-title-8) -20px var(--shadow-color-mat-like-title-8);
	box-shadow: 0px 0px var(--shadow-size-mat-like-title-8) -20px var(--shadow-color-mat-like-title-8);
	/* box-shadow: none; */
}

/* Убираем возможные иконки внутри блока карточки заголовка - ДО (например, из формата "Список") */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item:before,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item:before {
	display: none !important;
}

/* ------------- */
/* БЛОК - ССЫЛКА */
/* ------------- */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item a,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item a {
	display: flex;
	/* нужно, чтобы расширить родительский flex на всю ширину страницы */
	width: 100%;
	height: auto;
	flex-flow: column;
	padding: 0;
    margin: 0;
	/* выравниваем базово слева */
	align-items: start;
	justify-content: start;
	transition: none !important;
	animation: none;
	/* убираем фон блока ссылки */
	background: none;
    background-color: transparent;
}

/* Убираем возможный счётчик (от других форматов из Космического) */
/* нужно, чтобы счётчик вообще не отображался в заголовках */

.site-content .materials-row .container .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap:after,
.site-content .materials-row.one-in-line .container .row .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap:after {
	display: none !important;
}

/* Убираем возможные иконки внутри блока ссылки - ДО (например, из формата "Список") */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item a:before,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item a:before {
	display: none !important;
}

/* --------------------------------- */
/* БЛОК - ОБЛОЖКА (+ ВСЕ ИНДИКАТОРЫ) */
/* --------------------------------- */

/* Убираем блок обложки */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-thumb,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-thumb {
	display: none !important;
}

/* -------------- */
/* БЛОК - КОНТЕНТ */
/* -------------- */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content {
	display: flex !important;
	width: 100%;
	/* width: auto; */
	height: auto;
	border: none;
	position: relative;
	border-radius: 0;
	background: none !important;
	top: 0;
	left: 0px;
    right: 0px;
	align-self: unset;
    opacity: 1;
	transition: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	z-index: unset;
	box-shadow: none;
	transform: none;
}

/* ----------------------- */
/* БЛОК - ОБЁРТКА КОНТЕНТА */
/* ----------------------- */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap {
	display: flex !important;	
	width: 100%;
    flex-flow: column;
    gap: 15px;
    align-items: start;
	align-self: normal;
	position: relative;
	margin: 0;
	padding: 0;
	/* padding: 5px 10px 10px 10px; */
	text-align: var(--align-content-mat-like-title-8);
	/* Нижняя рамка, которая обрезает торчащие буквы в описании */
	border: none;
	overflow: hidden;
	opacity: 1;
    transition: none;
}

/* Выравнивание заголовка и описания - на мобильных */

@media (min-width: 320px) and (max-width: 767px) {
	
.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap {
	text-align: var(--align-content-mobile-mat-like-title-8);
}
}

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item:hover .flex-wrap .col-content .content-wrap,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item:hover .flex-wrap .col-content .content-wrap {
	opacity: 1 !important;
}

/* Убираем кнопку "Смотреть" при наведении */
/* потому что она встречается в некоторых форматах Космического */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .content-overlay,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .content-overlay,

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item.material-opened:hover .content-overlay,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item.material-opened:hover .content-overlay,

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item.material-closed:hover .content-overlay,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item.material-closed:hover .content-overlay,

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item.material-locked:hover .content-overlay,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item.material-locked:hover .content-overlay {
    display: none !important;
}

/* Убираем возможные иконки внутри обёртки контента - ПЕРЕД (например, из формата "Паззл") */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap:before,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap:before {
	display: none !important;
}

/* Убираем возможные иконки внутри обёртки контента - ПОСЛЕ (например, из формата "Скользящие") */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap:after,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .col-content .content-wrap:after {
	display: none !important;
}

/* ---------------- */
/* БЛОК - ЗАГОЛОВОК */
/* ---------------- */

/* Убираем заголовок */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .content-wrap .title,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .content-wrap .title {
	display: none !important;
}

/* --------------- */
/* БЛОК - ОПИСАНИЕ */
/* --------------- */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .content-wrap .description,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .content-wrap .description {
	display: block !important;
	width: 100%;
	margin: 0;
    padding: 0;
	font-size: var(--desc-size-mat-like-title-8);
	font-family: var(--desc-font-mat-like-title-8);
	font-weight: var(--desc-weight-mat-like-title-8);
	color: var(--desc-color-mat-like-title-8)!important;
}

/* Блок описания на мобильных */

@media (min-width: 320px) and (max-width: 767px) {

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .content-wrap .description,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .content-wrap .description {
	font-size: var(--desc-size-mobile-mat-like-title-8);
}
}

/* Описание (абзац, тег <p>) */

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .content-wrap .description > p,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) .material-item .flex-wrap .content-wrap .description > p {
    display: block !important;
	height: auto;
	/* количество строк */
    -webkit-line-clamp: none !important;
	line-clamp: none !important;
	/* перенос текста */
    hyphens: var(--desc-hyphens-mat-like-title-8);
	margin: 0;
	/* убираем разные влияния */
	overflow: unset;
    -webkit-box-orient: unset;
}

/* ------------- */
/* ОСОБЫЕ ПРАВКИ */
/* ------------- */

/* ПРАВКИ ТОЛЬКО ДЛЯ ФОРМАТА "ТАБЛИЦА - ДИЗАЙН 2" ИЗ КОСМИЧЕСКОГО */
/* -------------------------------------------------------------- */

/* Нужно, чтобы сохранить закругление первого материала, который идёт после заголовка */

/* ГАЛЯ, ОТМЕНА. ПОТОМУ ЧТО ЭТИ СТИЛИ ПОВЛИЯЮТ НА ВСЕ ФОРМАТЫ КОСМИЧЕСКОГО */

/* РЕШЕНИЕ - ЕСЛИ НУЖНА ЭТА ПРАВКА, ТО ВЫНЕСТИ ДВА НИЖНИХ СТИЛЯ В СКРИПТЫ НУЖНОЙ РУБРИКИ, */
/* ГДЕ ЕСТЬ ФОРМАТ "ТАБЛИЦА - ДИЗАЙН 2". ТОГДА С ЗАКРУГЛЕНИЕМ ТАБЛИЦЫ ВСЁ БУДЕТ ОК */

/* АЛЬТЕРНАТИВА - СДЕЛАТЬ ОТДЕЛЬНЫЙ ФОРМАТ ЗАГОЛОВКА ЧИСТО ДЛЯ СТРАНИЦЫ, ГДЕ МАТЕРИАЛЫ В ВИДЕ ТАБЛИЦЫ */

/* На больших экранах - сохраняем закругление слева вверху и справа вверху */

/* .site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) + .col-md-6 .material-item,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) + .col-md-12 .material-item {
	overflow: auto;
	border-radius: var(--radius-panel-14) var(--radius-panel-14) 0 0;
} */

/* На маленьких экранах - сохраняем закругление только справа вверху */

/* @media (min-width: 320px) and (max-width: 991px) {

.site-content .materials-row .col-md-6:has(a[href*="/mat-like-title-8-"]) + .col-md-6 .material-item,
.site-content .materials-row.one-in-line .col-md-12:has(a[href*="/mat-like-title-8-"]) + .col-md-12 .material-item {
	overflow: auto;
	border-radius: 0 var(--radius-panel-14) 0 0;
}
} */