/* Updates listing — NO frame (derived; CLAUDE.md). Cards on the cream page
   ground; grid columns = the Recent-updates band's node geometry (30px
   columns, 3-up = the 1600 container exactly). Row gap 60px desktop
   (Liam live review 2026-07-30 — settled the build's 70px derivation),
   50px tablet, 40px mobile.
   Column ladder = dev-listing/plot-grid parity (Liam, 2026-07-30):
   3-up ≥1281, 2-up ≤1280, 1-up ≤899. Section padding: 100/100
   desktop+tablet, 60 mobile (sitewide standard). */

.vl-updates {
    padding-block: 100px;
}

.vl-updates__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px 30px; /* row gap 70 → 60 (Liam live review 2026-07-30) */
}

.vl-updates__empty {
    margin: 0;
    color: var(--vl-black);
    font-size: var(--vl-text-card-title);
    line-height: 1.1667;
    text-align: center;
}

/* Sticky zone (CLAUDE.md rule): wait/stop = this single section's padding. */
body.page-template-template-updates-php .vl-sticky-zone {
    --vl-sticky-wait: 100px;
    --vl-sticky-stop: 100px;
}

/* Column ladder = the dev-listing/plot-grid rules (Liam live review
   2026-07-30): 3-up ≥1281 → 2-up ≤1280 → 1-up ≤899 (dev-listing.css:536/546
   — the 899 switch keeps large mobile off a cramped 2-up, Liam 2026-07-28).
   Row-gap steps stay on their own breakpoints (60/50/40, Liam today). */
@media (max-width: 1280px) {
    .vl-updates__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .vl-updates__grid {
        gap: 50px 30px;
    }
}

@media (max-width: 899px) {
    .vl-updates__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .vl-updates {
        padding-block: 60px; /* sitewide mobile section-padding convention (CLAUDE.md) */
    }

    .vl-updates__grid {
        gap: 40px; /* 50 → 40 (Liam live review 2026-07-30); 1-col since 899 above */
    }

    body.page-template-template-updates-php .vl-sticky-zone {
        --vl-sticky-wait: 60px;
        --vl-sticky-stop: 60px;
    }
}