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

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

banner-card-1-

*/

/* ----------------- */
/* БЫСТРЫЕ НАСТРОЙКИ */
/* ----------------- */

/* Анимация карточки при наведении - ТЕНЬ */

.folders-row .col-lg-3 > a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"]:hover {
	filter: drop-shadow(6px 12px 8px var(--shadow-color-banner-card-1));
	-webkit-filter: drop-shadow(6px 12px 8px var(--shadow-color-banner-card-1));
}

/* Раскомментировать, чтобы отключить ЗАЛИВКУ обложки */
/* Вынес эту настройку в переменные в json */

/* .folders-row a[href*="wpm-category/banner-card-1-"] > .folder-content {
	background: none!important;
} */

/* ---------------------------- */
/* ПРЕВРАЩАЕМ КАРТОЧКУ В БАННЕР */
/* ---------------------------- */

/* Переносим КАРТОЧКУ на новую строку */

.col-lg-3:has(a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"]) {
	display: block!important;
	width: 100%!important;
}

/* ---------------------- */
/* БЛОК - ССЫЛКА КАРТОЧКИ */
/* ---------------------- */

/* Растягиваем КАРТОЧКУ на всю ширину кабинета */

@media (min-width: 768px) {

.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	width: 100%!important;
}
}

/* Убираем рамку - ТЕНЬ вокруг карточки */

.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	border: none;
	box-shadow: none;
	border-radius: 0;
	background: none;
	/* временный фон карточки */
    /* background: #000;  */
}

/* Высота блока ссылки на разных экранах */

@media (min-width: 1400px) {
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	height: 328px;
}
}

@media (min-width: 1200px) and (max-width: 1399px) {
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	height: 279px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	height: 230px;
}
}

@media (min-width: 768px) and (max-width: 991px) {
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
    height: 176px;
}
}

@media (min-width: 460px) and (max-width: 767px) {
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	height: 83px;
}
}

@media (min-width: 320px) and (max-width: 459px) {
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] {
	height: 87px;
}
}

/* ------------------- */
/* ИЗОБРАЖЕНИЕ ОБЛОЖКИ */
/* ------------------- */

/* Общие настройки для ОБЛОЖКИ */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front pattern image,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front  pattern image {
	height: auto!important;
	width: 100%;
}

/* --------------- */
/* ЭФФЕКТЫ ОБЛОЖКИ */
/* --------------- */

/* Тонировка обложки */
/* Убираем эффект от классической карточки */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front pattern image {
	/* эффекты */
	filter: none;
	-webkit-filter: none;
}

/* Осветление и Яркость - при наведении */

.folders-row a[href*="wpm-category/banner-card-1-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/banner-card-1-"]:hover .folder-front pattern image {
	/* эффекты */
	filter: opacity(var(--opacity-cover-effect-hover-banner-card-1)) drop-shadow(0 0 0 #DFECE0) brightness(var(--brightness-cover-effect-hover-banner-card-1));
	-webkit-filter: opacity(var(--opacity-cover-effect-hover-banner-card-1)) drop-shadow(0 0 0 #DFECE0) brightness(var(--brightness-cover-effect-hover-banner-card-1));
}

/* ------------------------------ */
/* ОБЛОЖКА КАРТОЧКИ С МАТЕРИАЛАМИ */
/* ------------------------------ */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front pattern image {
    transform: translate(0px, 68.6px) !important;
}

/* ----------------------------- */
/* ОБЛОЖКА КАРТОЧКИ С КАРТОЧКАМИ */
/* ----------------------------- */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front  pattern image {
	transform: translate(27px, 104.3px) !important;
}

/* Убираем коррекцию стилей от классической карточки */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front use[fill^="url"],
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front use[fill^="url"] {
	transform: none;
}

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

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front use[fill^="#"],
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front use[fill^="#"] {
	display: none;
}

/* ------ */
/* СТИКЕР */
/* ------ */

/* Общие настройки */

.folders-row a[href*="wpm-category/banner-card-1-"] .label {
	position: inherit;
	font-size: 21px;
    text-align: center;
	padding: 6px 15px;
	border-radius: 15px;
	font-weight: bold;
	text-transform: none;
	line-height: 1.9rem;
	top: 30px;
	left: calc(20px + var(--round-corner-banner-card-1)/2)!important;
}

/* ПОЛОЖЕНИЕ СТИКЕРА на разных экранах на Страницах и в Активации */

@media (min-width: 768px) and (max-width: 991px) {
	
.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] .label {
	left: calc(20px + var(--round-corner-banner-card-1)/3)!important;
}
}

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

.folders-row a[href*="wpm-category/banner-card-1-"][class*="folder-wrap"] .label {
	top: 17px;
    font-size: 17px;
	padding: 4px 10px;
	left: calc(12px + var(--round-corner-banner-card-1)/7)!important;
}
}

/* ------------------- */
/* СОДЕРЖАНИЕ КАРТОЧКИ */
/* ------------------- */

/* Растягиваем СОДЕРЖАНИЕ на всю ширину кабинета */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content {
	width: 100%!important;
}

/* УБИРАЕМ ОПИСАНИЕ КАРТОЧКИ */
/* ------------------------- */

.folders-row a[href*="wpm-category/banner-card-1-"] > .folder-content .title {
	display: none;
}

/* ИКОНКА возле описания */

.folders-row .col-xs-12 > a[href*="wpm-category/banner-card-"] > .folder-content .title:before {
	display: none;
}

/* ------------------------------------------ */
/* Блок содержания в КАЧЕСТВЕ ЗАЛИВКИ ОБЛОЖКИ */
/* ------------------------------------------ */

/* Общие настройки */

.folders-row a[href*="wpm-category/banner-card-1-"] > .folder-content {
	/* выравниваем содержание по высоте */
	bottom: 0!important;
    height: 100%;
	/* закругление краёв заливки, чтобы совпадало с закруглением обложки */
	border-radius: var(--round-corner-banner-card-1)!important;
	/* цвет заливки обложки */
	background: linear-gradient(90deg, var(--color-fill-1-banner-card-1) 0%, var(--color-fill-2-banner-card-1) 25%, var(--color-fill-3-banner-card-1) 50%, var(--color-fill-4-banner-card-1) 75%, var(--color-fill-5-banner-card-1) 100%);
}

/* Закругление заливки на мобильных - уменьшаем в 2 раза */

@media (max-width: 767px) {

.folders-row a[href*="wpm-category/banner-card-1-"] > .folder-content {
    border-radius: calc(var(--round-corner-banner-card-1) /2)!important;
}
}

/* ---------- */
/* ИНДИКАТОРЫ */
/* ---------- */

/* Общие настройки */

.folders-row .col-xs-12 a[href*="wpm-category/banner-card-1-"] > .folder-content > .bottom-icons {
    background: none!important;
    bottom: 10px;
    position: absolute;
    width: inherit;
	height: auto;
	color: #000!important;
	padding-top: 10px;
	padding-bottom: 6px;
    padding-left: calc(20px + var(--round-corner-banner-card-1)/2)!important;
    padding-right: calc(20px + var(--round-corner-banner-card-1)/3)!important;
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/banner-card-1-"] > .folder-content > .bottom-icons {
	padding-left: calc(20px + var(--round-corner-banner-card-1)/3)!important;
    padding-right: calc(20px + var(--round-corner-banner-card-1)/3)!important;
}
}

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

.folders-row a[href*="wpm-category/banner-card-1-"] > .folder-content > .bottom-icons {
	padding-top: 0px!important;
	padding-bottom: 0px!important;
	padding-left: calc(12px + var(--round-corner-banner-card-1)/7)!important;
    padding-right: calc(12px + var(--round-corner-banner-card-1)/7)!important;
	bottom: 3px;
}
}

/* КОММЕНТАРИИ И ПРОСМОТРЫ */
/* ----------------------- */

/* Общие настройки */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .views
 {
	background: var(--color-bg-indikator-banner-card-1)!important;
    color: var(--color-indikator-banner-card-1)!important;
    padding: 7px;
    border-radius: 10px;
}

/* Скрываем комментарии и просмотры на мобильных */

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

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .comments,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .views
 {
	display: none;
}
}

/* СТАТУС */
/* ------ */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
    margin: 0;
	background: #fff;
    padding: 0px 7px;
    border-radius: 10px;
    position: absolute;
    font-size: 27px;
    bottom: 260px;
	right: calc(20px + var(--round-corner-banner-card-1)/2);
}

@media (min-width: 768px) and (max-width: 991px) {
	
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
	right: calc(20px + var(--round-corner-banner-card-1)/3);
}
}

@media (min-width: 320px) and (max-width: 767px) {
	
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
	right: calc(12px + var(--round-corner-banner-card-1)/7);
}
}

/* Правка положения ОТКРЫТОЙ и ПОЛУОТКРЫТОЙ иконки */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status .icon-unlock,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status .icon-unlock-alt {
    top: 2px;
    position: relative;
}

/* Положение СТАТУСА на разных экранах */

@media (min-width: 1200px) and (max-width: 1399px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
    bottom: 211px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
    bottom: 162px;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
    bottom: 108px;
}
}

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

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
    bottom: 42px;
    font-size: 1.8rem;
}
}

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

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .status {
    bottom: 46px;
    font-size: 1.8rem;
}
}

/* ПРОГРЕСС */
/* -------- */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap {
    display: inline-flex;
    flex-direction: row-reverse;
    column-gap: 15px;
    align-items: center;
    width: 80%;
    float: none;    
	margin-left: auto;
    margin-right: 0;
}

@media (min-width: 768px) and (max-width: 991px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap {
    width: 60%;
}
}

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

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap {
    flex-direction: initial;
	column-gap: 5px;
}
}

/* Шкала прогресса */

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap .progress {
    background-color: #e8ebee!important;
    width: 100%;
    height: 15px;
}

/* Количество процентов */

.folders-row .col-xs-12 a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap .progress-count {
	background: var(--color-bg-indikator-banner-card-1)!important;
    color: var(--color-indikator-banner-card-1)!important;
    padding: 7px;
    border-radius: 10px;
}

@media (min-width: 320px) and (max-width: 767px) {
	
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap .progress-count {
    padding: 3px 7px;
	bottom: 5px;
}
}

/* Вставляем текст рядом с процентами для больших экранов */

@media (min-width: 768px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-content .bottom-icons .course-progress-wrap .progress-count:before {
	font-family: "PT Sans", sans-serif!important;
	content: "вы прошли:";
	font-size: 16px;
	color: var(--color-indikator-banner-card-1)!important;
	margin-right: 5px;
	margin-left: 5px;
}
}

/* -------------------------- */
/* Закругление краёв КАРТОЧКИ */
/* -------------------------- */

/* на больших экранах */

@media (min-width: 768px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front {
	border-radius: var(--round-corner-banner-card-1)!important;
	/* убираем обрезку */
	clip-path: none;
	-webkit-clip-path: none;
	/* исправляем глюк с закруглением (для clip-path) для Сафари */
	transform: translateZ(0);
    will-change: transform;
}
}

/* на мобильных (уменьшаем в 2 раза) */

@media (max-width: 767px) {

.folders-row a[href*="wpm-category/banner-card-1-"] .folder-sub-front,
.folders-row a[href*="wpm-category/banner-card-1-"] .folder-front {
    border-radius: calc(var(--round-corner-banner-card-1) /2)!important;
	/* убираем обрезку */
	clip-path: none;
	-webkit-clip-path: none;
	/* исправляем глюк с закруглением (для clip-path) для Сафари */
	transform: translateZ(0);
    will-change: transform;
}
}