/*
 * Post teaser — the blog card.
 * Loaded on every page (see functions.php enqueue()): the home page's blog row
 * and the blog index show the same card.
 *
 * Reference: prod at 1920px — 411 tall whatever the column width: a 180px
 * picture, the category, a two-line headline, the 100px hairline and three
 * lines of excerpt, 16px apart inside 24px of padding.
 */

/* ── Card ──────────────────────────────────────────────────────────────── */
.post-teaser {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    height:         100%;
    padding:        24px;
}

.post-teaser__media {
    display:  block;
    overflow: hidden;
}

.post-teaser__image {
    display:    block;
    width:      100%;
    height:     180px;
    object-fit: cover;
    transition: transform .4s ease;
}

.post-teaser:hover .post-teaser__image {
    transform: scale(1.04);
}

.post-teaser__category {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    300;
    font-size:      12px;
    /* The line box is taller than the 12px text on prod — it inherits the
       card's line height — and everything below it hangs off that 22px. */
    line-height:    22px;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.post-teaser__category a {
    color:           inherit;
    text-decoration: none;
}

.post-teaser__category a:hover,
.post-teaser__category a:focus-visible {
    color: var(--color-accent);
}

.post-teaser__title {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   20px;
    line-height: 1.2;
    color:       var(--color-text);
    /* Two lines, as the design shows — the headlines vary a lot in length and
       a ragged row of cards reads as a bug. */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}
.post-teaser__title a {
    color:           inherit;
    text-decoration: none;
}

.post-teaser__title a:hover,
.post-teaser__title a:focus-visible {
    color: var(--color-accent);
}

.post-teaser__excerpt {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 1.143;
    color:       var(--color-muted);
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* The hairline every card and heading block on the site ends with. */
.post-teaser__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .post-teaser {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .post-teaser__image {
        transition: none;
    }
}