/* post-card.css — a link to another post, shown as a card with a thumbnail.
 *
 * Yours: edit it, or delete the file.
 *
 * The first rule matters more than it looks. This card sits inside your article
 * styles, so whatever you have said about h3, p and a in a post would otherwise
 * land on the card's title and text and make it look like body copy that
 * happens to have a border. Resetting to inherit lets the rules below decide.
 */

.velocity-post-card {
    width: 100%;
}

.velocity-post-card h3,
.velocity-post-card p,
.velocity-post-card span {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.velocity-post-card a {
    font-weight: inherit;
}

.velocity-post-card-link {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease-in-out;
}

.velocity-post-card-link:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    text-decoration: none;
}

.velocity-post-card-content {
    display: flex;
    align-items: stretch;
}

.velocity-post-card-thumbnail {
    flex-shrink: 0;
    width: 140px;
    object-fit: cover;
    background: var(--paper-soft);
}

/* min-width: 0 so a long unbroken title can shrink rather than pushing the
   thumbnail off the card — flex items refuse to go below their content width
   without it. */
.velocity-post-card-info {
    flex: 1;
    min-width: 0;
    padding: 1.25rem;
}

.velocity-post-card-category {
    display: inline-block;
    margin: 0 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent);
}

/* Clamped to two lines: cards sit in a column and one long title should not
   make its card twice the height of its neighbours. */
.velocity-post-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
}

.velocity-post-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.625rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-faint);
}

@media (max-width: 500px) {
    .velocity-post-card-thumbnail {
        width: 70px;
    }

    .velocity-post-card-info {
        padding: 0.75rem;
    }

    .velocity-post-card-title {
        font-size: 1rem;
    }

    .velocity-post-card-description {
        font-size: 0.75rem;
    }
}