/* Salpim Showcase: deliberately minimal. Inherits fonts/colors from the theme; logical properties keep it RTL-ready. */
.salpim-showcase { --salpim-gap: 1.25rem; margin-block: 1.5rem; }

.salpim-showcase__grid {
	display: grid;
	grid-template-columns: repeat(var(--salpim-cols, 3), minmax(0, 1fr));
	gap: var(--salpim-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 960px) { .salpim-showcase__grid { grid-template-columns: repeat(min(var(--salpim-cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .salpim-showcase__grid { grid-template-columns: minmax(0, 1fr); } }

.salpim-card {
	display: flex;
	flex-direction: column;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 0.5rem;
	overflow: hidden;
	background: color-mix(in srgb, currentColor 2%, transparent);
}
.salpim-card__media { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.salpim-card__media a, .salpim-card__media img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.salpim-card__media img { object-fit: cover; }

.salpim-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; flex: 1; }
.salpim-card__body > p { margin: 0; }
.salpim-card__eyebrow { font-size: 0.8125rem; opacity: 0.7; }
.salpim-card__title { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.salpim-card__title a { color: inherit; text-decoration: none; }
.salpim-card__title a:hover, .salpim-card__title a:focus-visible { text-decoration: underline; }
.salpim-card__provider, .salpim-card__meta, .salpim-card__note { font-size: 0.875rem; opacity: 0.8; }
.salpim-card__price { font-weight: 600; margin-block-start: 0.25rem; }
.salpim-card__vat { font-weight: 400; font-size: 0.8125rem; opacity: 0.7; white-space: nowrap; }
.salpim-card__cta { align-self: flex-start; margin-block-start: auto; text-decoration: none; }
/* Whatever comes before the button keeps a gap from it, and the button stays at the bottom of every card in the row. */
.salpim-card__body > :has(+ .salpim-card__cta) { margin-block-end: 0.75rem; }