/* News card — node 39:2508 (frame 39:2175). Image 513.33×342.22 (exact 3:2)
   radius 20; image → title 25px (node 24.78); title 24/28 INK (#32383b node
   fill — not black), Omnes Regular, unitless 1.1667 so the token's mobile
   24→20 step keeps the ratio. Grid columns live with each CALLER
   (updates-listing.css / update-single.css) — this file is the card only. */

.vl-update-card__link {
    display: block;
    color: var(--vl-ink);
    text-decoration: none;
}

.vl-update-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    margin-bottom: 25px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--vl-cornflower); /* empty-featured-image fallback panel — spec's ruling: cards with no photo get the cornflower panel (cream was invisible against the cream page/#f5f0e8 Recent band, final review 2026-07-30) */
}

.vl-update-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hover zoom — the dev-card media treatment (card-development.css:128),
       the sitewide "card is interactive" cue. */
    transition: transform 0.35s ease;
}

.vl-update-card__link:hover .vl-update-card__img {
    transform: scale(1.05);
}

.vl-update-card__title {
    display: block;
    font-size: var(--vl-text-card-title);
    font-weight: var(--vl-weight-regular);
    line-height: 1.1667;
}

.vl-update-card__link:hover .vl-update-card__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--vl-brick); /* sitewide link-hover convention */
}

.vl-update-card__link:focus-visible {
    outline: 2px solid var(--vl-cornflower);
    outline-offset: 2px;
    border-radius: 20px;
}