/*
 * VerbNow Related & Author.
 *
 * Scoped to .vbr-* only. Nothing here sets width, max-width, float or position on any
 * element it does not own, so the content column, sidebar and wrapper stay exactly where
 * Trellis puts them and Mediavine ad slots do not move. Colours inherit from the theme
 * apart from one neutral border, so a theme restyle carries through automatically.
 */

.vbr-author,
.vbr-rel {
	margin: 2em 0 0;
	padding: 1.25em 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	text-align: left;
	clear: both;
}

/* ---------- author box ---------- */

.vbr-author {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.vbr-author__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

.vbr-author__avatar img {
	border-radius: 50%;
	height: auto;
}

.vbr-author__body {
	flex: 1 1 auto;
	min-width: 0;
}

.vbr-author p {
	margin: 0 0 0.35em;
}

.vbr-author__eyebrow {
	font-size: 0.8em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.vbr-author__name {
	font-size: 1.05em;
	font-weight: 700;
}

.vbr-author__bio {
	font-size: 0.95em;
	line-height: 1.55;
}

.vbr-author__links {
	font-size: 0.85em;
	opacity: 0.85;
}

/* ---------- related ---------- */

.vbr-rel__title {
	margin: 0 0 0.6em;
	font-size: 1.15em;
	line-height: 1.3;
}

.vbr-rel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vbr-rel__item {
	margin: 0;
	padding: 0.45em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	line-height: 1.45;
}

.vbr-rel__item:last-child {
	border-bottom: 0;
}

.vbr-rel__item--hub a {
	font-weight: 700;
}

.vbr-rel__note {
	margin-left: 0.5em;
	font-size: 0.82em;
	opacity: 0.65;
}

@media (min-width: 600px) {
	.vbr-rel__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5em;
	}

	/* The hub is the point of the block, so it keeps a full-width row of its own. */
	.vbr-rel__item--hub {
		grid-column: 1 / -1;
	}
}