/**
 * Author box.
 *
 * Aligned to the post content column like .cs-entry__footer, and built on the
 * parent theme's CSS variables so it follows light/dark schemes.
 */
.cs-author-box {
	display: grid;
	grid-template-columns: minmax(0, var(--cs-entry-content-width));
	justify-content: center;
	margin-top: 2.5rem;
}

.cs-author-box__inner {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.5rem;
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-layout-elements-border-radius);
}

.cs-author-box__avatar {
	flex: 0 0 96px;
}

.cs-author-box__avatar a,
.cs-author-box__avatar img {
	display: block;
}

.cs-author-box__avatar img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--cs-avatar-border-radius);
}

.cs-author-box__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

/* Same typography as the "By" / "Updated on" post meta labels. */
.cs-author-box__label,
.cs-author-box__more {
	font-family: var(--cs-font-post-meta-family), sans-serif;
	font-size: var(--cs-font-post-meta-size);
	line-height: var(--cs-font-post-meta-line-height);
	font-weight: var(--cs-font-post-meta-weight);
	font-style: var(--cs-font-post-meta-style);
	letter-spacing: var(--cs-font-post-meta-letter-spacing);
	text-transform: var(--cs-font-post-meta-text-transform);
}

.cs-author-box__label {
	color: var(--cs-color-secondary);
}

/* Same typography as the post content headings. */
.cs-author-box__name {
	margin: 0;
	font-family: var(--cs-font-headings-family), sans-serif;
	font-weight: var(--cs-font-headings-weight);
	font-style: var(--cs-font-headings-style);
	line-height: var(--cs-font-headings-line-height);
	letter-spacing: var(--cs-font-headings-letter-spacing);
	text-transform: var(--cs-font-headings-text-transform);
	font-size: 1.5rem;
}

.cs-author-box__name a {
	color: var(--cs-color-primary);
	text-decoration: none;
}

.cs-author-box__name a:hover {
	color: var(--cs-color-accent);
}

/* Post content font and colour, at the smaller base size. */
.cs-author-box__bio {
	color: var(--cs-color-primary);
	font-family: var(--cs-font-post-content-family), sans-serif;
	font-size: var(--cs-font-base-size);
	font-weight: var(--cs-font-post-content-weight);
	letter-spacing: var(--cs-font-post-content-letter-spacing);
	line-height: var(--cs-font-post-content-line-height);
}

[data-scheme=light] .cs-author-box__bio {
	color: var(--cs-color-entry-content, #343434);
}

.cs-author-box__bio p {
	margin: 0;
}

.cs-author-box__bio p + p {
	margin-top: 0.75rem;
}

.cs-author-box__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

.cs-author-box__more {
	color: var(--cs-color-primary);
	text-decoration: none;
}

.cs-author-box__more:hover {
	color: var(--cs-color-accent);
}

@media (max-width: 575.98px) {
	.cs-author-box__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.25rem;
	}

	.cs-author-box__footer {
		flex-direction: column;
		justify-content: center;
	}
}