/* ============================================================
   post-card — the shared card: photo, title, excerpt, arrow.
   Figma: related products 1407:65592, case studies 1407:65257,
   Home news 1407:99220, T14 1331:154091 / 1331:154163.

   385 wide in the three-up desktop row, 319 on tablet and mobile.
   Hover and focus are undesigned: the arrow nudges, and the focus
   ring is the site's.
   ============================================================ */

.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: 12px;
}
a.post-card:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.post-card__media { display: block; }
.post-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;   /* the frames' 385x289 and 319x239 */
    object-fit: cover;
    border-radius: 12px;
}
/* A logo rather than a photo (the Somerset Bridge card, T14 card 2: FIT in
   the frame): shown whole, not cropped */
.post-card--contain .post-card__image {
    object-fit: contain;
    background: var(--color-surface);
}

/* The text sits straight under the photo; the arrow at the foot of the
   card, so the arrows line up when a neighbour's text runs longer */
.post-card__body {
    display: flex;
    gap: 8px;
    padding: 12px;
    flex: 1;
}
.post-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.post-card__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-secondary);
}
.post-card__excerpt {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text-muted);
}
.post-card__arrow {
    align-self: flex-end;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-text);
    transition: transform var(--transition-base);
}
a.post-card:hover .post-card__arrow,
a.post-card:focus-visible .post-card__arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
    .post-card__title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}

/* T14 grid, mobile (1331:154347): a full-width card, the photo 353x220
   and the text with no side padding */
@media (max-width: 767px) {
    .post-card--grid .post-card__image { aspect-ratio: 353 / 220; }
    .post-card--grid .post-card__body { padding: 10px 0 0; }
}