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

:root {
	--short-pad: 16px;
	--short-pad-inv: -16px;
	--short-title-fs: 17px;
	--short-title-lh: 22px;
	--short-author-fs: var(--fs-1);
	--short-meta-fs: var(--fs-3);

	--sline-pad: 16px;
	--sline-img-s: 56px;
	--sline-img-rd: 12px;
}
.short {
	display: flex; position: relative; z-index: 1;
	padding: var(--short-pad); margin-left: var(--short-pad-inv); margin-right: var(--short-pad-inv);
	border-radius: var(--rd-box);
}
.short:not(:last-child)::after {
	content: ""; border-top: 1px solid var(--c-border); height: 0; display: block;
	position: absolute; left: var(--short-pad); right: var(--short-pad); bottom: 0;
}
.shortlist { margin-top: calc(var(--short-pad) / -2); }

.short .poster {
	--poster-mw: 92px; width: var(--poster-mw);
	background-color: hsla(var(--c-text),0.05);
}
.short-addon .poster { --poster-mw: 68px; }

.short-cont {
	display: flex; flex-direction: column;
	padding-left: var(--short-pad);
	padding-right: 8px;
	flex: 1 1 auto; align-self: center;
}

@media (min-width: 768px) {
	.short:hover { background-color: var(--c-body-tone); }
	.short:hover::after { opacity: 0; }
	.short-cont { padding-left: 24px; }
}

.short-title {
	font-size: var(--short-title-fs); font-weight: bold;
	transition: color .15s ease; max-width: 480px; order: -1;
}
@media (min-width: 992px) {
	.short-title a:hover { color: hsl(var(--c-link-hover)); }
}
.short-title .item-link > span {
	--text-clamp-maxh: calc(var(--text-clamp-h) * var(--text-clamp-rows));
	--text-clamp-h: var(--short-title-lh);
	--text-clamp-rows: 3;
	display: block; display: -webkit-box; overflow: hidden; word-break: break-word; line-height: var(--text-clamp-h);
	max-height: var(--text-clamp-maxh); -webkit-line-clamp: var(--text-clamp-rows); -webkit-box-orient: vertical;
}

.short-author { font-size: var(--short-author-fs); color: var(--c-text-mute); margin-top: 4px; }
.short-author a { position: relative; z-index: 2; }

.short-meta { display: flex; gap: 12px; font-size: var(--short-meta-fs); margin-top: 8px; white-space: nowrap; }
.meta { display: flex; align-items: center; gap: 4px; }
.meta .im { --i-size: 16px; }
.short-meta .ratingscore, .meta { opacity: .6; }
.short-meta .ratingscore { height: 20px; line-height: 16px; font-size: var(--short-meta-fs); padding: 0; box-shadow: none; }

.short-fav { align-self: center; flex-shrink: 0; }
.short-fav a { position: relative; z-index: 3; padding: 8px; width: 40px; height: 40px; display: flex; align-items: center; margin-right: -8px; }
@media (min-width: 992px) {
	.short-fav a:hover { color: hsl(var(--c-link-hover)); }
}

/* Sline */
.sline {
	display: flex; gap: var(--sline-pad); padding: var(--sline-pad) 0;
	border-top: 1px solid var(--c-border);
}
.sline-img { flex-shrink: 0; width: var(--sline-img-s); aspect-ratio: 1/1; position: relative; z-index: 1; border-radius: var(--sline-img-rd); }
.sline-img-set { border-radius: 50%; }
.sline-img .cover { position: absolute; inset: 0; border-radius: inherit; }
.sline-cont { flex: 1 1 auto; min-width: 0; align-self: center; }
.sline-subtitle { font-size: var(--fs-1); opacity: .7; }
.sline > .im { opacity: .3; align-self: center; }