/* ─────────────────────────────────────────────────────────────
   Home — projects, in a panel
   The cards themselves come from blocks/projects/card/.
   ───────────────────────────────────────────────────────────── */

.jm-home-projects {
    padding: clamp(18px, 2.4vw, 34px) 0 clamp(18px, 2.2vw, 32px);
    background: var(--bg-white);
    /* The same gutter the panels on a project page keep, so the panel is a
       sheet laid on the page rather than a band running off both edges.
       It has to sit on the section, not the panel: the panel is a
       .jm-container and needs to keep `margin-inline: auto` to stay centred
       once the viewport is wider than the container. */
    padding-inline: clamp(12px, 2.4vw, 28px);
}

/* Matches the gallery panel on a project page exactly, so the two read as
   the same object in two places. */
.jm-home-projects__panel {
    padding: clamp(26px, 3.6vw, 48px) clamp(16px, 3vw, 40px);
}

.jm-home-projects__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
}

@media (min-width: 700px) {
    .jm-home-projects__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4);
    }
}

@media (min-width: 1100px) {
    .jm-home-projects__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Portrait once there are four across. At 4/3 a quarter-width card is
       only ~200px tall, and the caption leaves almost none of the building
       showing — the tile stops being a photograph. */
    .jm-home-projects__grid .jm-project-card__media { aspect-ratio: 4 / 5; }
}

/* Three across the phone and tablet layouts, four only on the wide grid.
   The fourth card is rendered either way and hidden here rather than left
   out server-side — a single markup path, and the link is still crawlable. */
@media (max-width: 1099px) {
    .jm-home-projects__grid > :nth-child(n + 4) { display: none; }
}

/* A taller crop on the phone: one card per row at 4/3 looked like a banner
   rather than a building. */
@media (max-width: 699px) {
    .jm-home-projects__grid .jm-project-card__media { aspect-ratio: 3 / 2; }
}

.jm-home-projects__more {
    margin: clamp(28px, 4vw, 44px) 0 0;
    text-align: center;
}