/* Components/Shared/Card.razor — image + heading + body card.
 *
 * Global rather than scoped, so the selectors are qualified with the `article`
 * the component renders: `card` and `card-body` are common enough to occur in
 * the stored page HTML ContentPage emits verbatim, and an unqualified
 * `.card img { width: 100% }` landing on that markup would be plainly visible.
 *
 * The var() declarations resolve to nothing — see the note in button.css. */

article.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

article.card img {
    display: block;
    width: 100%;
    height: auto;
}

article.card .card-body {
    padding: var(--space-4);
}

article.card .card-body h3 {
    margin-top: 0;
    margin-bottom: var(--space-2);
}