/* Brand Stories — Instagram-style horizontal scrollable brand icons */
.empyra-brand-stories {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 16px 4px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
	mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

.empyra-brand-stories::-webkit-scrollbar {
	display: none;
}

/* Single brand item */
.empyra-brand-stories__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	scroll-snap-align: start;
	width: 76px;
}

/* Gradient ring wrapper */
.empyra-brand-stories__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(135deg, var(--emp-coral), var(--emp-mustard));
}

/* Brand avatar image */
.empyra-brand-stories__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--emp-bg-card);
}

/* Initial letter fallback */
.empyra-brand-stories__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--emp-bg-card);
	background: var(--emp-coral-light);
	color: var(--emp-charcoal);
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
}

/* Brand name */
.empyra-brand-stories__name {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--emp-charcoal);
	text-align: center;
	max-width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hover */
.empyra-brand-stories__item:hover .empyra-brand-stories__ring {
	background: linear-gradient(135deg, var(--emp-coral-dark, #B85C38), var(--emp-mustard));
}

.empyra-brand-stories__item:hover .empyra-brand-stories__name {
	color: var(--emp-coral);
}