/*
 * Layout only. Everything a site owner would want to change — fonts, colors,
 * spacing, borders — is left to Bricks' own controls and global classes.
 */

.brs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.brs-list--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brs-item {
	position: relative;
	display: flex;
	gap: 12px;
	min-width: 0;
}

/* Without an image the body is the only child, so the row/column choice only
   matters when there is one. */
.brs-item--image-left {
	flex-direction: row;
}

.brs-item--image-right {
	flex-direction: row-reverse;
}

.brs-item--image-top {
	flex-direction: column;
}

.brs-item-image {
	flex: 0 0 120px;
	max-width: 100%;
}

.brs-item--image-top .brs-item-image {
	flex-basis: auto;
}

.brs-item-image img {
	display: block;
	width: 100%;
	height: auto;
}

.brs-item-body {
	display: flex;
	flex-direction: column;
	gap: inherit;
	min-width: 0;
	flex: 1 1 auto;
}

.brs-item-title {
	margin: 0;
}

.brs-item-excerpt {
	margin: 0;
}

.brs-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.brs-item-more {
	align-self: flex-start;
}

/*
 * The whole-item link is an overlay rather than a wrapper: the text stays
 * selectable and links inside the item keep working, because they sit above it.
 */
.brs-item-cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.brs-item a:not(.brs-item-cover),
.brs-root a:not(.brs-item-cover) {
	position: relative;
	z-index: 2;
}

.brs-root {
	position: relative;
}

.brs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}