/*
 * Layout for the reference overview. The hover behaviour and colours come from the
 * theme's .bb-card rules (Udseende -> Editor -> Stilarter), so the cards match the
 * ones on the front page. Only the grid and the image framing live here.
 */

.bb-ref-grid {
	display: grid;
	grid-template-columns: repeat(var(--bb-ref-cols, 3), minmax(0, 1fr));
	gap: 2rem;
}

@media (max-width: 900px) {
	.bb-ref-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bb-ref-grid {
		grid-template-columns: 1fr;
	}
}

/* Cover-block basics, so the card does not depend on core's cover stylesheet. */
.bb-ref-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 1rem;
	overflow: hidden;
	border-radius: 4px;
}

.bb-ref-card .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: 0;
	margin: 0;
	padding: 0;
}

.bb-ref-card .wp-block-cover__background {
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--sort, #1a1a1a);
	opacity: 0.4;
}

.bb-ref-card .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	color: var(--wp--preset--color--hvid, #fff);
}

.bb-ref-card h3 {
	margin: 0;
	color: var(--wp--preset--color--hvid, #fff);
}

.bb-ref-card h3 a {
	color: inherit;
	text-decoration: none;
}

.bb-ref-card h3 a:hover {
	text-decoration: underline;
}