/* ------------------------------ */
/* КАРТОЧКА - ВЕРТИКАЛЬНЫЙ БАННЕР */
/* ------------------------------ */

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

Вариант 1 - с описанием:
vertical-banner-text-card-

Вариант 2 - без описания:
vertical-banner-card-

*/

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

:root {
	
	/* 1. Закругление баннера */
	--radius-vertical-banner-card: 25px;
	
	/* 2. Толщина рамки баннера */
	--width-border-vertical-banner-card: 0px;
	
	/* 3. Цвет рамки баннера */
	--color-border-vertical-banner-card: #9100ff;
	
	/* 4. Фон описания */
	--color-text-bg-vertical-banner-card: #ffffff;

	/* 5. Цвет текста описания */
	--color-text-vertical-banner-card: #000;
	
	/* 6. Фон блока индикаторов */
	--color-indikator-bg-vertical-banner-card: #ffffff;

	/* 7. Цвет текста индикаторов */
	--color-indikator-vertical-banner-card: #000;
	
	/* 8. Цвет иконки описания */
	--color-icon-vertical-banner-card: #65BF49;

}

/* 1. Раскомментировать, чтобы отключить ТЕНЬ при наведении на карточку */

.folders-row .col-lg-3 > a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"]:hover,
.folders-row .col-lg-3 > a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"]:hover {
	/* filter: none; */
}

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

.col-lg-3:has(a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"]),
.col-lg-3:has(a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"]) {
	display: block!important;
	z-index: 501!important;
	/* 3 карточки в ряду на больших экранах */
    width: calc(100%/3)!important;
}

/* ВАРИАНТ 2 - БАННЕР СПРАВА */
/* Только на большом экране */
/* Баннер ОБТЕКАЮТ остальные карточки с левой стороны */

@media (min-width: 1400px) {

.col-lg-3:has(a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"]),
.col-lg-3:has(a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"]) {
	/* float: right; */
}
}

/* 2 карточки в ряду на средних экранах */

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

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

/* 1 карточка в ряду на мобильных */

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

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

/* --------------------------------------- */
/* ЗАКРУГЛЕНИЕ карточки + внутренняя РАМКА */
/* Общие настройки */

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	
margin-top: 0px!important;
margin-bottom: 0;
background: var(--color-bg-vertical-banner-card);
border-radius: calc(var(--radius-vertical-banner-card) - var(--width-border-vertical-banner-card));
box-shadow: 0px 0px 0px var(--width-border-vertical-banner-card) var(--color-border-vertical-banner-card) inset;
-webkit-box-shadow: 0px 0px 0px var(--width-border-vertical-banner-card) var(--color-border-vertical-banner-card) inset;
-moz-box-shadow: 0px 0px 0px var(--width-border-vertical-banner-card) var(--color-border-vertical-banner-card) inset;
}

/* Растягиваем карточку на всю ширину кабинета */
/* Кроме мобильных экранов */

@media (min-width: 768px) {
	
a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	width: 100%!important;
}
}

/* Высота БАННЕРА на разных экранах */

@media (min-width: 1400px) {

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	height: 729px!important;
}
}

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

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	height: 654px!important;
}
}

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

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	height: 579px!important;
}
}

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

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
    height: 638px!important;
}
}

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

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
    height: 632px!important;
}
}

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

a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	height: 642px!important;
}
}

/* ---------------------- */
/* СТИКЕР НА ВСЕХ ЭКРАНАХ */

a[href*="wpm-category/vertical-banner-text-card-"] .label,
a[href*="wpm-category/vertical-banner-card-"] .label {
    font-weight: bold;
    font-size: 21px;
	border-radius: 15px;
    text-transform: none;
    line-height: 1.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 6px 15px;
	max-width: calc(80% - var(--radius-vertical-banner-card)/6 - var(--width-border-vertical-banner-card));
	top: calc(13px + var(--radius-vertical-banner-card)/6 + var(--width-border-vertical-banner-card));
    right: calc(13px + var(--radius-vertical-banner-card)/4 + var(--width-border-vertical-banner-card));
	/* white-space: normal; */
}

/* Размер текста СТИКЕРА на мобильных */

@media (min-width: 320px) and (max-width: 1199px) {
	
a[href*="wpm-category/vertical-banner-text-card-"] .label,
a[href*="wpm-category/vertical-banner-card-"] .label {   
	font-size: 17px;
}
}

/* ---------------------- */
/* БЛОК ОПИСАНИЯ КАРТОЧКИ */

a[href*="wpm-category/vertical-banner-text-card-"] > .folder-content {
    width: 100%;
    bottom: 0;
	background: none;
}

/* ВАРИАНТ 2 - БЕЗ ОПИСАНИЯ И ИНДИКАТОРОВ */

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

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

/* Фон и цвет текста описания */

.folders-row .col-xs-12 > a[href*="wpm-category/vertical-banner-text-card-"] > .folder-content .title {
	background: var(--color-text-bg-vertical-banner-card);
	color: var(--color-text-vertical-banner-card)!important;
	padding: 12px 18px 12px;
}

/* Фон и цвет текста процента прогресса */

.folders-row .col-xs-12 > a[href*="wpm-category/vertical-banner-text-card-"] > .folder-content .course-progress-wrap .progress-count {
	background: var(--color-indikator-bg-vertical-banner-card)!important;
	color: var(--color-indikator-vertical-banner-card)!important;
}

/* ---------------- */
/* БЛОК ИНДИКАТОРОВ */

/* Закругление блока с индикаторами */

.folders-row .col-xs-12 a[href*="wpm-category/vertical-banner-text-card-"] .folder-content .bottom-icons {
	
	background: var(--color-indikator-bg-vertical-banner-card)!important;
	color: var(--color-indikator-vertical-banner-card)!important;
	
    border-radius: 0 0 calc(var(--radius-vertical-banner-card) - var(--width-border-vertical-banner-card) - 2px) calc(var(--radius-vertical-banner-card) - var(--width-border-vertical-banner-card) - 2px)!important;
	
	padding-left: calc(7px + var(--radius-vertical-banner-card)/2);
    padding-right: calc(-3px + var(--radius-vertical-banner-card)/2);

	height: auto;
}

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

.folders-row a[href*="wpm-category/vertical-banner-text-card-"] .bottom-icons .course-progress-wrap .progress {
	position: relative;
	width: 78%;
    height: 15px;
    margin: 0;
	margin-right: 5px;
    top: 2px;
    border-radius: 10px; 
}

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

.folders-row a[href*="wpm-category/vertical-banner-text-card-"] .bottom-icons .course-progress-wrap .progress {
    width: 70%;
}
}

/* ------ */
/* ИКОНКА */
/* меняется в файле iconscard.css */

.folders-row .col-xs-12 > a[href*="wpm-category/vertical-banner-text-card-"] > .folder-content .title:before {
	color: var(--color-icon-vertical-banner-card);
	font-size: 17px;
    margin-right: 5px;
}

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

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

a[href*="wpm-category/vertical-banner-text-card-"] > .folder-front,
a[href*="wpm-category/vertical-banner-card-"] > .folder-front,

a[href*="wpm-category/vertical-banner-text-card-"] > .folder-sub-front,
a[href*="wpm-category/vertical-banner-card-"] > .folder-sub-front {
	/* Баннер поверх описания */
	/* z-index: 2; */
	width: 100%!important;
	height: 100%!important;
    top: 0px;
	border-radius: var(--radius-vertical-banner-card)!important;
}

/* ОБРЕЗКА - ЗАКРУГЛЕНИЕ БАННЕРА на всех экранах */
/* Чтобы видна была рамка карточки */

a[href*="wpm-category/vertical-banner-text-card-"] > .folder-front,
a[href*="wpm-category/vertical-banner-card-"] > .folder-front,

a[href*="wpm-category/vertical-banner-text-card-"] > .folder-sub-front,
a[href*="wpm-category/vertical-banner-card-"] > .folder-sub-front {
	
	clip-path: inset(var(--width-border-vertical-banner-card) round calc(var(--radius-vertical-banner-card) - var(--width-border-vertical-banner-card) * 2));
	
	-webkit-clip-path: inset(var(--width-border-vertical-banner-card) round calc(var(--radius-vertical-banner-card) - var(--width-border-vertical-banner-card) * 2));
}

/* ------------------------------------------------- */
/* БАННЕР для карточки с МАТЕРИАЛАМИ на всех экранах */

a[href*="wpm-category/vertical-banner-text-card-"] .folder-front pattern image,
a[href*="wpm-category/vertical-banner-card-"] .folder-front pattern image

{
    transform: translate(67px, 16px);
    width: 110px;
    height: auto;
	/* можно анимировать для увеличения */
	/* height: 173px; */
}

/* ------------------------------------------------- */
/* БАННЕР для карточки с КАРТОЧКАМИ на всех экранах */

a[href*="wpm-category/vertical-banner-text-card-"] .folder-sub-front  pattern image,
a[href*="wpm-category/vertical-banner-card-"] .folder-sub-front  pattern image

{
	transform: translate(87px, 45px);
    width: 123px;
    height: auto;
	/* можно анимировать для увеличения */
	/* height: 173px; */
}

/* ------------------- */
/* ЭФФЕКТЫ ДЛЯ БАННЕРА */

/* Тонировка */

a[href*="wpm-category/vertical-banner-text-card-"] .folder-front pattern image,
a[href*="wpm-category/vertical-banner-text-card-"] .folder-sub-front pattern image,

a[href*="wpm-category/vertical-banner-card-"] .folder-front pattern image,
a[href*="wpm-category/vertical-banner-card-"] .folder-sub-front pattern image 

{
	/* filter: opacity(0.5) drop-shadow(0 0 0 #7CEC5A); */
	/* transition: all .18s; */
}

/* При наведении */

a[href*="wpm-category/vertical-banner-text-card-"]:hover .folder-sub-front pattern image,
a[href*="wpm-category/vertical-banner-text-card-"]:hover .folder-front pattern image,

a[href*="wpm-category/vertical-banner-card-"]:hover .folder-sub-front pattern image,
a[href*="wpm-category/vertical-banner-card-"]:hover .folder-front pattern image 

{
	filter: none;
}

/* -------------------------------------------------------------------------------- */
/* КОРРЕКЦИЯ РАЗМЕРА И ПОЛОЖЕНИЯ БАННЕРА для карточки с МАТЕРИАЛАМИ на всех экранах */

a[href*="wpm-category/vertical-banner-card-"] .folder-front use[fill^="url"],
a[href*="wpm-category/vertical-banner-text-card-"] .folder-front use[fill^="url"] {
	transform: translate(0px, -18px) scale(1.1);
}

/* ------------------------------------------------------------------------------- */
/* КОРРЕКЦИЯ РАЗМЕРА И ПОЛОЖЕНИЯ БАННЕРА для карточки с КАРТОЧКАМИ на всех экранах */

a[href*="wpm-category/vertical-banner-card-"] .folder-sub-front use[fill^="url"],
a[href*="wpm-category/vertical-banner-text-card-"] .folder-sub-front use[fill^="url"] {
    transform: translate(0px, -25px) scale(1.11);
}

/* ФОН верхней части карточки - она же подложка */

a[href*="wpm-category/vertical-banner-text-card-"] .folder-front use[fill^="#"],
a[href*="wpm-category/vertical-banner-text-card-"] .folder-sub-front use[fill^="#"],

a[href*="wpm-category/vertical-banner-card-"] .folder-front use[fill^="#"],
a[href*="wpm-category/vertical-banner-card-"] .folder-sub-front use[fill^="#"]

{
	fill: none;
}