/* ─────────────────────────────────────────────────────────────
   Projects archive

   Two treatments, deliberately unalike, so the page never has to
   explain which projects can still be bought:

   · current developments — a full-bleed photograph each, with a
     postcard of facts laid over its lower edge. The composition
     the home page opens with.
   · completed work — a close-packed mosaic of washed tiles.

   The card itself lives in blocks/projects/card/, which the home
   page shares.
   ───────────────────────────────────────────────────────────── */

/* ═══ Current developments ═══════════════════════════════════ */

.jm-dev-current {
    background: var(--bg-white);
    /* Clear of the fabric seam. The band laps down over the top of this
       section by --seam-overlap, so the visible gap between the cloth and
       the first mount is this figure minus that. */
    padding-top: clamp(54px, 6.4vw, 92px);
    padding-bottom: clamp(30px, 3.6vw, 58px);
}

.jm-dev + .jm-dev {
    margin-top: clamp(34px, 4.4vw, 72px);
}

/* The page gutter every panel on the site stands on. */
.jm-dev__frame {
    padding-inline: clamp(12px, 2.4vw, 28px);
}

/* A mount rather than a bleed. Full-bleed is the right treatment where a
   photograph IS the section — the hero, the home page's mission plate —
   but a current development is one object among several, and the panel is
   what says so: each project and its card read as a single thing laid on
   the page instead of a picture the page happens to pass through.
   .jm-panel supplies the pale ground, the accent hairline, the lit top
   edge and the drop; this adds the mount and the crop. */
.jm-dev__media {
    display: block;
    padding: 7px;
    overflow: hidden;
}

.jm-dev__shot {
    display: block;
    position: relative;
    /* The floor is set for phones: much under 320px and the postcard,
       once it overlaps, leaves almost no photograph showing. */
    height: clamp(320px, 42vw, 560px);
    /* The mount's own radius less its 7px padding, so the picture's
       corners run parallel to the panel's rather than tightening. */
    border-radius: 13px;
    overflow: hidden;
    background: var(--primary-dark);
}

.jm-dev__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    transition: transform 1.2s var(--ease);
}

/* A whisper of weight at the foot, where the card laps on. Any more and it
   reads as a scrim over a picture that has no text on it. */
.jm-dev__shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(18, 28, 33, 0) 62%,
        rgba(18, 28, 33, 0.18) 100%
    );
}

/* Three classes deep on purpose: the shared reveal sets `transform: none` on
   [data-reveal="media"].is-revealed img, which outranks a two-class hover
   rule and would leave this dead after the entrance animation ran. */
@media (hover: hover) and (pointer: fine) {
    .jm-dev__media:hover .jm-dev__shot .jm-dev__img { transform: scale(1.03); }
}

/* Pulled up over the photograph and left hanging past it onto the page.
   The overlap is what makes picture and card read as one composition
   rather than as an image with a caption beneath it. */
.jm-dev__overlay {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: clamp(-180px, -15vw, -108px);
    /* The panel gutter, not .jm-container's wider default, so these line
       up with every other panel on the site. */
    padding-inline: clamp(12px, 2.4vw, 28px);
}

.jm-dev--left  .jm-dev__overlay { justify-content: flex-start; }
.jm-dev--right .jm-dev__overlay { justify-content: flex-end; }

.jm-dev__card {
    width: 100%;
    max-width: 520px;
    flex: 0 1 520px;
    text-align: left;
}

/* Held in from the mount's edge, so the card's square corner lands on the
   panel's face rather than on its rounded one — flush, the two corners
   fight. Below 860px the card goes full width and the question does not
   arise. */
@media (min-width: 861px) {
    .jm-dev--left  .jm-dev__card { margin-left: clamp(16px, 2.8vw, 46px); }
    .jm-dev--right .jm-dev__card { margin-right: clamp(16px, 2.8vw, 46px); }
}

.jm-dev__eyebrow {
    margin-bottom: clamp(14px, 1.6vw, 20px);
}

.jm-dev__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jm-dev__title a {
    color: var(--text-primary);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .jm-dev__title a:hover { color: var(--primary); }
}

/* A hairline table of the facts an architecture page leads with. Same
   language as the spec bar on a project page, stacked two-up because
   this card is a column rather than a band. */
.jm-dev__spec {
    margin: clamp(20px, 2.4vw, 28px) 0 0;
    border-top: 1px solid var(--border-rule);
}

.jm-dev__row {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) 1fr;
    gap: var(--sp-4);
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-rule);
}

.jm-dev__label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.jm-dev__value {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--text-primary);
}

.jm-dev__cta {
    margin-top: clamp(22px, 2.6vw, 30px);
}

/* On a phone the card has nowhere to hang off to, so it centres and the
   overlap shortens — a deep overlap over a 320px photograph buries it. */
@media (max-width: 860px) {
    .jm-dev__overlay {
        justify-content: center;
        margin-top: clamp(-112px, -14vw, -68px);
    }

    .jm-dev__card {
        max-width: none;
        flex: 1 1 auto;
        /* Held in from the mount on both sides. Edge to edge with the
           photograph the two stop reading as a card ON a picture and start
           reading as two stacked blocks that happen to touch — the overlap
           only says "one object" while the card is visibly the narrower of
           the two. ~20px a side at 390. */
        margin-inline: clamp(16px, 5vw, 28px);
    }

    .jm-dev__row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

/* ═══ Completed work ═════════════════════════════════════════ */

.jm-dev-past {
    background: var(--bg-white);
    /* The foot is short because the acquisitions panel supplies its own top
       padding — together they make the same ~78px the home page settled on
       between its projects panel and that band. */
    padding: clamp(30px, 4vw, 62px) 0 clamp(28px, 3.4vw, 50px);
}

/* The panel gutter, not .jm-container's wider default. The opener sits
   directly on top of a full-width grid, so the two have to share a left
   edge — and that edge is then the same one the postcards above and the
   acquisitions panel below already stand on. */
.jm-dev-past > .jm-container {
    padding-inline: clamp(12px, 2.4vw, 28px);
}

/* Left-aligned, like every other opener on the site. The centred
   .jm-section-title is v1's language, not ours. */
.jm-dev-past__head {
    margin-bottom: clamp(24px, 3vw, 40px);
}

.jm-dev-past__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.jm-dev-past__note {
    margin: 0;
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: 1.75;
}