.bpt-content-grid__item {
	display: flex;
	flex-direction: column;
}

.bpt-content-grid__item--linked {
	cursor: pointer;
}

.bpt-content-grid__card-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.bpt-content-grid__card-link:hover {
	color: inherit;
}

.bpt-content-grid .bpt-card.bpt-content-grid__item--linked:is(:hover, :focus-within) {
	border-color: var(--bpt-color-primary);
	box-shadow: var(--bpt-shadow-lg);
}

.bpt-content-grid__card-link:focus-visible {
	outline-color: var(--bpt-color-primary);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
	.bpt-content-grid .bpt-card.bpt-content-grid__item--linked:is(:hover, :focus-within) {
		transform: translateY(-3px);
	}
}

@media (min-width: 1024px) {
	.bpt-content-grid > .bpt-grid[data-cols="4"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bpt-content-grid__media {
	aspect-ratio: var(--content-grid-media-ratio, 4 / 3);
	background: var(--bpt-color-surface-alt);
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.bpt-content-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* An item image standing in for an icon: sized like the icon and contained rather than
   cover-cropped.

   The tile colour is driven by a custom property rather than by a competing `background`
   declaration. Both selectors are single-class, so whichever came last in the file used to
   win regardless of intent — which is exactly how the accent square survived behind images
   in the first place. A custom property set on the element itself cannot lose that race. */
.bpt-content-grid__icon--image {
	width: var(--content-grid-icon-size, 3.25rem);
	height: var(--content-grid-icon-size, 3.25rem);
	border-radius: 0;
	--content-grid-icon-bg: none;
}

.bpt-content-grid__icon--image img,
.bpt-content-grid__icon--image picture > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bpt-content-grid__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--bpt-space-sm);
	padding: var(--bpt-space-lg);
}

.bpt-content-grid__body > * {
	margin: 0;
}

.bpt-content-grid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bpt-space-xs);
}

.bpt-content-grid__meta .bpt-eyebrow {
	margin: 0;
}

.bpt-content-grid__badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	border: var(--bpt-border-thin) solid var(--section-border);
	border-radius: var(--bpt-radius-pill);
	padding: 0.2rem 0.55rem;
	background: var(--section-card-bg);
	color: var(--section-card-fg);
	font-size: var(--bpt-text-xs);
	font-weight: var(--bpt-weight-semibold);
	line-height: 1;
}

.bpt-content-grid__icon {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--content-grid-icon-bg, var(--section-accent));
	color: var(--section-bg);
	border-radius: var(--bpt-radius-sm);
	font-weight: var(--bpt-weight-semibold);
}

.bpt-content-grid__item h3 {
	font-size: var(--bpt-text-lg);
}

.bpt-content-grid__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 100%;
	min-height: 2.75rem;
	margin-top: auto;
	padding: var(--bpt-space-sm) var(--bpt-space-lg);
	background: transparent;
	border: var(--bpt-border-medium) solid color-mix(in srgb, var(--bpt-color-primary) 65%, var(--section-card-fg));
	border-radius: var(--bpt-btn-radius, var(--bpt-radius-sm));
	color: var(--section-card-fg);
	font-weight: var(--bpt-weight-semibold);
	line-height: var(--bpt-leading-snug);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--bpt-duration-fast) var(--bpt-ease-standard),
		border-color var(--bpt-duration-fast) var(--bpt-ease-standard),
		color var(--bpt-duration-fast) var(--bpt-ease-standard);
}

.bpt-content-grid__card-link:is(:hover, :focus-visible) .bpt-content-grid__link {
	background: var(--bpt-color-primary);
	border-color: var(--bpt-color-primary);
	color: var(--bpt-color-on-primary);
}

.bpt-content-grid--feature .bpt-content-grid__item {
	border-top: 0.25rem solid var(--section-accent);
}

.bpt-content-grid--editorial .bpt-grid {
	gap: 0 var(--bpt-space-2xl);
}

.bpt-content-grid--editorial .bpt-content-grid__item {
	background: transparent;
	border: 0;
	border-top: var(--bpt-border-thin) solid var(--section-border);
	border-radius: 0;
	box-shadow: none;
}

.bpt-content-grid--editorial .bpt-content-grid__body {
	padding: var(--bpt-space-lg) 0;
}

.bpt-content-grid--editorial .bpt-card.bpt-content-grid__item {
	border-radius: 0;
}

/* Icon background control (section setting).
   auto   = accent behind icons, bare behind images (the defaults above)
   accent = force the accent tile, including behind images
   none   = no tile anywhere */
.bpt-content-grid--icon-bg-none .bpt-content-grid__icon {
	--content-grid-icon-bg: none;
}

.bpt-content-grid--icon-bg-accent .bpt-content-grid__icon--image {
	--content-grid-icon-bg: var(--section-accent);
	border-radius: var(--bpt-radius-sm);
	padding: 0.4rem;
}