/* =========== © 2026 Centroarts - https://m1r.ru =========== */

:root {
	--card-title-fs: var(--fs-1);
	--card-author-fs: var(--fs-3);
	--card-meta-fs: var(--fs-3);
}

/* Cards */
.hscroll .card { max-width: var(--card-hscroll-mw); }
.card { position: relative; z-index: 1; min-width: var(--card-wmin); padding-bottom: 12px; }
.card .postid { position: absolute; left: 0; top: 0; z-index: 3; display: none; }
.card:hover .postid { display: block; }

.card-img { position: relative; margin-bottom: 12px; }
.card-img .cover { border-radius: var(--rd-card); z-index: -1; }
.card-img .ratingscore {
	position: absolute; bottom: 4px; height: 20px;
	font-size: var(--card-meta-fs); line-height: 16px; padding: 2px 4px;
	left: 4px;
}
.card-author {
	font-size: var(--card-author-fs); line-height: 16px; padding-right: 8px;
}
.card-author a .truncate { max-width: 100%; }
.card-author + .card-title { margin-top: 4px; }

.card-title {
	font-size: var(--card-title-fs); font-weight: bold; display: block; padding-right: 8px;
	transition: color .1s ease;
}
a.card-title:hover { color: hsl(var(--c-link-hover)); }
.card-title .text-clamp {
	--text-clamp-maxh: 40px;
	--text-clamp-h: 20px;
	--text-clamp-rows: 2;
}

/* Card Round / Set */
.card-round { text-align: center; }
.card-round .card-img { --rd-card: 50%; }
.card-round .card-img .cover { aspect-ratio: 1/1; }
.card-round .card-title { padding-left: 4px; padding-right: 4px; }
.card-setnum { display: block; font-size: var(--card-meta-fs); line-height: 16px; opacity: .6; margin-top: 4px; }

/* Card Scroll Height */
.sect-card-scroll { --card-height: 202px; }
@media (min-width: 576px) {
	.sect-card-scroll { --card-height: 240px; }
}
.sect-set-scroll { --card-height: var(--card-hscroll-mw); }
.sect-audio-scroll { --card-height: var(--card-hscroll-mw); }

.scroll-container .card-img .cover { height: var(--card-height); }

.card-more .card-img {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center;
	height: var(--card-height); margin-bottom: 0; padding: 20px;
	background-color: hsla(var(--c-primary),0.1); color: hsl(var(--c-primary));
	font-size: var(--card-title-fs); font-weight: bold; gap: 8px;
	border-radius: var(--rd-card);
	transition: background-color .2s ease;
}
.card-more .card-img:hover { background-color: hsla(var(--c-primary),0.15); }

/* Rate Nums */
.card-ratenum, .topcards .ratingscore { display: none; }
.topcards .card-ratenum {
	--nums-bg: hsl(var(--c-primary));
	--nums-bg-color: hsl(var(--c-body));
	--nums-img: url(../img/rate-num.svg);
	--nums-w: 126px;
	--nums-h: 112px;
	--nums-pos: 0;
	--nums-poscalc: calc((var(--nums-h)*var(--nums-pos))/-1);
	display: block;
	position: absolute; z-index: 2; left: 0; bottom: 0;
	max-width: var(--nums-w); min-width: var(--nums-w); height: var(--nums-h);
	user-select: none; pointer-events: none;
}
.topcards .card-ratenum::after, 
.topcards .card-ratenum::before {
	content: ""; display: block; position: absolute; inset: 0; flex-shrink: 0;
	width: inherit; height: inherit;
	mask-size: calc(var(--nums-w)*2) auto; -webkit-mask-size: calc(var(--nums-w)*2) auto;
	mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
	mask-image: var(--nums-img); -webkit-mask-image: var(--nums-img);
}
.topcards .card-ratenum::before {
	background-image: linear-gradient(180deg, hsla(var(--c-second),0.5) 0%, hsla(var(--c-primary),0.5) 100%);
	mask-position: left var(--nums-poscalc); -webkit-mask-position: left var(--nums-poscalc);
}
.topcards .card-ratenum::after {
	background-color: var(--nums-bg-color); z-index: 1;
	mask-position: right var(--nums-poscalc); -webkit-mask-position: right var(--nums-poscalc);
}

.topcards .card:nth-child(1) .card-ratenum { --nums-pos: 0; }
.topcards .card:nth-child(2) .card-ratenum { --nums-pos: 1; }
.topcards .card:nth-child(3) .card-ratenum { --nums-pos: 2; }
.topcards .card:nth-child(4) .card-ratenum { --nums-pos: 3; }
.topcards .card:nth-child(5) .card-ratenum { --nums-pos: 4; }
.topcards .card:nth-child(6) .card-ratenum { --nums-pos: 5; }
.topcards .card:nth-child(7) .card-ratenum { --nums-pos: 6; }
.topcards .card:nth-child(8) .card-ratenum { --nums-pos: 7; }
.topcards .card:nth-child(9) .card-ratenum { --nums-pos: 8; }
.topcards .card:nth-child(10) .card-ratenum { --nums-pos: 9; }

/* Card Grid */
.card-grid {
	--cg-cols: 2;
	grid-template-columns: repeat(var(--cg-cols), 1fr);
}
@media (min-width: 480px) {
	.card-grid { --cg-cols: 3; }
}
@media (min-width: 768px) {
	.card-grid { --cg-cols: 4; }
}