/**
 * WHERE THIS LIVES: assets/css/author-blurb.css
 *
 * Styling for the "About the Author" callout rendered by
 * inc/author-blurb.php's gw_render_author_blurb_html() at the end of a
 * single Article or Photo Gallery. Only enqueued on those two templates
 * (functions.php's gratefulweb_assets()). Uses the site's existing
 * --red/--grey* custom properties (assets/css/style.css :root) rather than
 * introducing a new palette.
 */

.author-blurb {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin: 40px 0;
	padding: 24px;
	background: var(--white);
	border: 1px solid #e6e6e6;
	border-left: 4px solid var(--red);
	border-radius: 4px;
}

.author-blurb-avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.author-blurb-avatar img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
}

.author-blurb-body {
	flex: 1 1 auto;
	min-width: 0;
}

.author-blurb-kicker {
	font-family: 'Work Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 4px;
}

.author-blurb-name {
	font-family: 'Work Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.author-blurb-name a {
	color: var(--grey3);
}

.author-blurb-name a:hover {
	color: var(--red);
}

.author-blurb-text {
	color: var(--grey2);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 575px) {
	.author-blurb {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}