/* ==========================================================================
   Blog Author Strip + Inline Share Buttons
   ========================================================================== */

/* @critical-start context: blog */
.blog-author-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	padding-bottom: var(--spacing-4);
	margin-bottom: var(--spacing-6);
	border-bottom: 1px solid var(--color-neutral-200);
}

/* Author info (avatar + name) */
.blog-author-strip-info {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
}

.blog-author-strip-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.blog-author-strip-details {
	display: flex;
	flex-direction: column;
}

.blog-author-strip-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-neutral-700);
	text-decoration: none;
	line-height: var(--line-height-tight);
}

.blog-author-strip-name:hover {
	color: var(--color-primary);
}

.blog-author-strip-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	font-size: var(--font-size-xs);
	color: var(--color-neutral-500);
	line-height: var(--line-height-tight);
}

.blog-author-strip-meta a {
	color: var(--color-neutral-500);
	text-decoration: none;
}

.blog-author-strip-meta a:hover {
	color: var(--color-brand-600);
	text-decoration: underline;
}

.blog-author-strip-separator {
	color: var(--color-neutral-400);
}
/* @critical-end */

/* Inline share buttons */
.blog-share-inline {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	position: relative;
}

.blog-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-neutral-100);
	color: var(--color-neutral-600);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.blog-share-btn svg {
	width: 16px;
	height: 16px;
}

.blog-share-btn:hover {
	color: var(--color-white);
}

.blog-share-btn--whatsapp:hover {
	background: var(--color-share-whatsapp);
}

.blog-share-btn--facebook:hover {
	background: var(--color-share-facebook);
}

.blog-share-btn--twitter:hover {
	background: var(--color-share-twitter);
}

.blog-share-btn--pinterest:hover {
	background: var(--color-share-pinterest);
}

.blog-share-btn--email:hover {
	background: var(--color-neutral-700);
}

.blog-share-btn--copy:hover {
	background: var(--color-neutral-700);
}

/* Copy tooltip */
.blog-share-tooltip {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: var(--spacing-1);
	padding: var(--spacing-1) var(--spacing-2);
	font-size: var(--font-size-xs);
	color: var(--color-white);
	background: var(--color-neutral-800);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	pointer-events: none;
}

/* Mobile: stack vertically */
@media (max-width: 599px) {
	.blog-author-strip {
		flex-wrap: wrap;
	}

	.blog-share-inline {
		width: 100%;
		justify-content: flex-start;
	}
}