/* SarvTheme stories.css — built from modules. Edit modules + run npm run build */

/* --- stories.css --- */
/**
 * Stories strip — circles row.
 */

.st-stories {
	--st-stories-desktop: 8;
	--st-stories-mobile: 4;
	--st-stories-gap: 12px;
	--st-stories-ring-1: #f5576c;
	--st-stories-ring-2: #f093fb;
	--st-stories-size: 72px;
	width: 100%;
	direction: rtl;
}

.st-stories__empty {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9rem;
}

.st-stories__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--st-stories-gap);
	list-style: none;
	margin: 0;
	padding: 4px 2px 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.st-stories__item {
	flex: 0 0 calc((100% - (var(--st-stories-desktop) - 1) * var(--st-stories-gap)) / var(--st-stories-desktop));
	max-width: 96px;
	min-width: 64px;
}

.st-stories__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.st-stories__ring {
	display: grid;
	place-items: center;
	width: var(--st-stories-size);
	height: var(--st-stories-size);
	border-radius: 50%;
	padding: 3px;
	box-sizing: border-box;
}

.st-stories--gradient .st-stories__ring {
	background: linear-gradient(135deg, var(--st-stories-ring-1), var(--st-stories-ring-2));
}

.st-stories--solid .st-stories__ring {
	background: var(--st-stories-ring-1);
}

.st-stories--outline .st-stories__ring {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--st-stories-ring-1);
	padding: 4px;
}

.st-stories__avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 2px #fff;
}

.st-stories__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.st-stories__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 100%;
	font-size: 0.75rem;
	line-height: 1.25;
	text-align: center;
	color: var(--st-stories-title-color, inherit);
}

@media (max-width: 767px) {
	.st-stories {
		--st-stories-size: 64px;
	}

	.st-stories__item {
		flex-basis: calc((100% - (var(--st-stories-mobile) - 1) * var(--st-stories-gap)) / var(--st-stories-mobile));
	}
}