.c-visit-resources {
	--sh-title: var(--color-navy);

	position: relative;
	background: var(--vr-bg);
	isolation: isolate;
}

.c-visit-resources__media,
.c-visit-resources__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.c-visit-resources__image,
.c-visit-resources__image img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.c-visit-resources__overlay {
	background: rgb(0 0 0 / 0.3);
}

.c-visit-resources__inner {
	display: flex;
	align-items: center;
	gap: var(--spacing-page);
	padding-block: var(--block-spacing-top, var(--spacing-xl)) var(--block-spacing-bottom, var(--spacing-xl));
}

.c-visit-resources__intro {
	flex: 0 0 360px;
	gap: var(--spacing-sm);
}

.c-visit-resources--on-dark {
	--sh-title: var(--color-text-on-accent);
	--sh-text: var(--color-text-on-accent);
}

.c-visit-resources--image {
	--sh-title: var(--color-beige);
	--sh-text: var(--color-beige);
}

.c-visit-resources__list {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-col);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 2 or 4 cards would leave a gap in a 3-column grid */
@media (width >= 768px) {
	.c-visit-resources__list:has(> :nth-child(2):last-child),
	.c-visit-resources__list:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.c-visit-resources--on-dark .c-resource-card {
	--card-surface: var(--color-white);
	--card-text: var(--color-navy);
	--badge-color: var(--color-text-on-accent);
}

.c-visit-resources--on-dark .c-resource-card--download {
	--badge-bg: var(--color-green-mid);
}

.c-visit-resources--on-dark .c-resource-card--read {
	--badge-bg: var(--color-yellow-deep);
}

.c-visit-resources--on-dark .c-resource-card--watch {
	--badge-bg: var(--color-orange-deep);
}

@media (width < 1100px) {
	.c-visit-resources__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-lg);
	}

	.c-visit-resources__intro {
		flex: 0 0 auto;
	}
}

@media (width < 768px) {
	.c-visit-resources__list {
		grid-template-columns: minmax(0, 1fr);
	}
}