/*
 * Row layout. Four cards to a row, sized off the track so they land on the
 * content column's own edges; written here rather than as utilities because
 * the gap is a custom property the tracks share.
 */
.nomon-case-grid--row .nomon-case-grid__track {
	--nomon-case-gap: clamp(0.5rem, 1vw, 0.875rem);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nomon-case-gap);
}

@media (min-width: 48rem) {
	.nomon-case-grid--row .nomon-case-grid__track {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.nomon-case-grid--row .nomon-case-grid__track + .nomon-case-grid__track {
	margin-block-start: var(--nomon-case-gap);
}

.nomon-case-grid__card {
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nomon-case-grid__card:hover,
.nomon-case-grid__card:focus-visible {
	transform: scale(0.985);
}

/* main.css paints the arrows ink-on-hover; on the ink band that is invisible. */
.nomon-case-grid--ink .nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next):hover,
.nomon-case-grid--ink .nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next):focus-visible {
	border-color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.nomon-case-grid--ink .nomon-dots {
	--swiper-pagination-color: var(--wp--preset--color--paper);
	--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--paper);
}

.nomon-case-grid--ink .nomon-dots .swiper-pagination-bullet:focus-visible {
	outline-color: var(--wp--preset--color--paper);
}