/**
 * Sarakhon Core — Author Card
 * Visually the same as author-bar.css but kept as its own file/class
 * namespace (.sarakhon-author-card) so it can be customized
 * independently of [sarakhon_author_bar] going forward. Uses
 * !important throughout for the same reason as share.css: this
 * renders inside the theme's content area, where generic a/span/div
 * selectors can otherwise strip our colors and sizing.
 */

.sarakhon-author-card {
	all: revert;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 16px 0 !important;
}

.sarakhon-author-card * {
	box-sizing: border-box !important;
}

.sarakhon-author-card__avatar {
	all: unset !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	border: 2px solid var( --sarakhon-avatar-color, #e0212b ) !important;
	background: #f5f5f5 !important;
	background: color-mix( in srgb, var( --sarakhon-avatar-color, #e0212b ) 12%, white ) !important;
	cursor: pointer !important;
}

.sarakhon-author-card__initials {
	all: unset !important;
	display: block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var( --sarakhon-avatar-color, #e0212b ) !important;
	text-transform: uppercase !important;
}

.sarakhon-author-card__info {
	all: unset !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
}

.sarakhon-author-card__name {
	all: unset !important;
	display: inline-block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #1a1a1a !important;
	cursor: pointer !important;
}

.sarakhon-author-card__name:hover,
.sarakhon-author-card__name:focus {
	color: #e0212b !important;
	text-decoration: underline !important;
}

.sarakhon-author-card__meta {
	all: unset !important;
	display: block !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #767676 !important;
}

@media (max-width: 480px) {
	.sarakhon-author-card__avatar {
		width: 38px !important;
		height: 38px !important;
	}

	.sarakhon-author-card__name {
		font-size: 13px !important;
	}

	.sarakhon-author-card__meta {
		font-size: 11px !important;
	}
}