/* Cards page specific styles (lean; reuse base variables) */
.cards-hero-media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }

/* Filters */
#cards-filters { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(4px) saturate(110%); }
#cards-filters .form-row label { font-family: var(--font-sans); font-weight: 600; }
#cards-filters fieldset { border: 0; padding: 0; margin: 0; }
#cards-filters legend { font-family: var(--font-sans); font-weight: 700; margin-bottom: var(--space-2); }
#cards-filters .cards-count { font-family: var(--font-sans); color: var(--gray-700); margin-top: var(--space-3); }

/* Grid of cards */
.cards-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.card-item figure { border-radius: var(--radius-md); overflow: hidden; }
.card-item img { width: 100%; height: auto; object-fit: cover; }
.card-item .card-subtitle { display: flex; gap: var(--space-2); align-items: center; }

/* Card types grid */
.card-types { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .card-types { grid-template-columns: repeat(3, 1fr); } }

/* Artwork gallery */
.artwork-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .artwork-grid { grid-template-columns: repeat(2, 1fr); } }
.artwork-item { background: var(--color-surface); border: 1px solid rgba(50,50,50,0.08); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-4); }
.artwork-item img { border-radius: var(--radius-md); }

/* Minor spacing for lists */
#slownik dl { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
#slownik dt { font-weight: 700; font-family: var(--font-sans); }
#slownik dd { margin-left: 0; color: var(--gray-800); }

/* Improve callout links */
.callout a { color: var(--color-accent); font-weight: 600; }
.callout a:hover { text-decoration: underline; }