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

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

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

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

*/

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

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

.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: drop-shadow(6px 12px 8px var(--shadow-color-vertical-banner-card));
	-webkit-filter: drop-shadow(6px 12px 8px var(--shadow-color-vertical-banner-card));
}

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

.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: 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;
}
}

/* ВНЕШНИЕ ОТСТУПЫ БАННЕРА */
/* ----------------------- */

.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"]) {
	margin-bottom: 28px;
    margin-top: 0px;
}

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

.folders-row a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
.folders-row 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) {
	
.folders-row a[href*="wpm-category/vertical-banner-text-card-"][class*="folder-wrap"],
.folders-row a[href*="wpm-category/vertical-banner-card-"][class*="folder-wrap"] {
	width: 100%!important;
}
}

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

@media (min-width: 1400px) {

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

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

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

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

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

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

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

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

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

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

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

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

.folders-row a[href*="wpm-category/vertical-banner-text-card-"] .label,
.folders-row 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) {
	
.folders-row a[href*="wpm-category/vertical-banner-text-card-"] .label,
.folders-row a[href*="wpm-category/vertical-banner-card-"] .label {   
	font-size: 17px;
}
}

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

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

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

.folders-row 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 {
	font-size: 17px;
    margin-right: 5px;
}

.folders-row .col-xs-12 > a[href*="wpm-category/vertical-banner-text-card-"] > .folder-content .title:before,
.row-key-categories .col-xs-12 > a[href*="wpm-category/vertical-banner-text-card-"] > .folder-content .title:before {
	content: var(--icon-vertical-banner-card);
	color: var(--color-icon-vertical-banner-card);
}

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

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

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

.folders-row a[href*="wpm-category/vertical-banner-text-card-"] > .folder-sub-front,
.folders-row 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;
}

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

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

.folders-row a[href*="wpm-category/vertical-banner-text-card-"] > .folder-sub-front,
.folders-row 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));
	
	/* исправляем глюк с закруглением (для clip-path) для Сафари */
	transform: translateZ(0);
    will-change: transform;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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