/* The post card: a white surface with a green stripe on the left as the eye's
   anchor. The stripe is a border, so it follows the rounded corners. The whole card
   is the link and fills its list cell, so the cards of a row are equally tall.
   Hover = stronger shadow, nothing moves. */
.post-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--transition);
}

.post-card:hover {
    box-shadow: var(--shadow-hover);
    color: var(--color-text);
}

/* Icon and date on one line. The icon belongs to Icon's own scope, so it is
   reached through ::deep. */
.post-date {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.post-date ::deep .icon {
    color: var(--color-accent-dark);
}

.post-title {
    color: var(--color-brand);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Cut after three lines, so cards of a row stay close in height whatever the
   editor wrote. The featured card lifts the limit (see below). */
.post-teaser {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: 0.95rem;
}

/* margin-top: auto pushes the link line to the bottom, so it sits on one level
   across a row of cards with teasers of different length. */
.post-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-1);
    color: var(--color-brand);
    font-size: 0.9rem;
    font-weight: 700;
}

/* The newest post on the posts page: more room, a larger title and the full
   teaser. */
.post-card-featured {
    padding: var(--space-4) var(--space-5);
}

.post-card-featured .post-title {
    font-size: var(--font-size-h3);
}

@media (min-width: 48rem) {
    .post-card-featured .post-title {
        font-size: 1.5rem;
    }
}

.post-card-featured .post-teaser {
    display: block;
    font-size: 1rem;
}