/*
 * Cards.
 *
 * A card is one self-contained unit of content on a raised surface. It is not a widget toolbox: a card
 * holds prose, and prose is what this application is mostly made of, so the rules here optimise for
 * reading rather than for cramming.
 *
 * A card is a `<div>`, not a `<section>` or an `<article>`: it only becomes an article once it is
 * meaningful on its own (a post, a profile), and that decision belongs to the phase that ships it.
 */

.card {
    background-color: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

/* A card that is itself a link. The whole surface responds, because a small link inside a large card is
   a target most people will miss. */
.card--linked {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--easing),
                box-shadow var(--duration-fast) var(--easing);
}

.card--linked:hover {
    border-color: var(--colour-primary);
    box-shadow: var(--shadow-md);
    color: inherit;
}

/* Only the title inside a linked card is underlined: it is the actual link text, and that is the
   affordance. Underlining the whole card would be a wall of lines. */
.card--linked .card__title {
    color: var(--colour-primary);
}

.card__title {
    margin-top: 0;
    font-size: var(--text-lg);
}

.card__body {
    margin-top: var(--space-2);
}

.card__body:first-child {
    margin-top: 0;
}

.card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--colour-border);
}

/* Muted variant for secondary information — a notice, a statistic. Sits one level down visually without
   losing the outline, because an outlineless box is invisible on the sunken page background. */
.card--quiet {
    background-color: var(--colour-surface-sunken);
    box-shadow: none;
}