/* ── Development card (SHARED component) ──────────────────────────────────
   Figma read: node 36:95 "Group 133" (one card sampled fully — 36:10 shell,
   36:13 image mask, 36:24 name, 36:27 location, 36:30–36:33/36:49 CTA).
   Reused verbatim by the Development-single "Related developments" section
   (this file, Task 9), the Developments listing (Phase 4c — no Figma frame,
   repurposes this card), and Home (Phase 5). Card shows image/name/location/
   CTA only — no beds or price fields in this node (unlike the plot card at
   35:713), confirmed against 36:95 during the read.

   Card metrics: 513×533, radius 20px, ink fill — same radius token and
   background as the plot card (dev-plots.css), image area shares the exact
   513×342 aspect ratio too (node 36:13: 513.33×342.22). Body padding is a
   uniform 30px on every edge (node deltas: image-bottom 7329+342=7671 →
   name-top 7701 = 30; card-left 160 → name-left 190 = 30; CTA-bottom
   7792+40=7832 → card-bottom 7862 = 30). */

.vl-dev-card {
    position: relative;
    border-radius: 20px; /* node 36:10 */
    overflow: hidden; /* clips media to the card's rounded corners */
    background: var(--vl-ink); /* node 36:10 fill #32383b */
    /* Renmore lift recipe (Liam, 2026-07-23) — see dev-plots.css. */
    box-shadow: 0 4px 16px rgba(50, 56, 59, 0.10);
}

.vl-dev-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.vl-dev-card__link:focus-visible {
    outline: 2px solid var(--vl-cornflower);
    outline-offset: -2px;
}

.vl-dev-card__media {
    position: relative;
    flex-shrink: 0;
    aspect-ratio: 513 / 342; /* node 36:13 mask proportions */
    /* min-height: 0 — without it a squarer-than-box source photo inflates
       the box: aspect-ratio is only a PREFERRED height and the flex item's
       content-based minimum wins (bug caught live 2026-07-23, Whistle Bell
       Court's 660×486 photo rendered a taller card). */
    min-height: 0;
    overflow: hidden;
}

.vl-dev-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vl-dev-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* Same rhythm as .vl-plot-card__body (Liam review 2026-07-23): 12px
       between text rows, button's extra margin tops its gap up to 30px. */
    gap: 12px;
    padding: 30px; /* node-derived, see file header */
}

.vl-dev-card__name {
    margin: 0;
    color: var(--vl-white);
    font-size: var(--vl-text-input); /* 30px, node 36:24 */
    font-weight: var(--vl-weight-regular);
    line-height: 1.067; /* node ratio 32/30, unitless so the mobile token size scales it */
}

.vl-dev-card__location {
    /* node "Omnes:Italic" layer name = Regular weight, italic style — same
       shifted-numbering convention already established for the plot card's
       building-type line (dev-plots.css .vl-plot-card__building). */
    margin: 0; /* row rhythm from the body's 12px gap (plot-card parity, Liam 2026-07-23) */
    color: var(--vl-white);
    font-style: italic;
    font-weight: var(--vl-weight-regular);
    font-size: var(--vl-text-nav); /* 18px, node 36:27 */
    line-height: 22px;
}

.vl-dev-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* established sitewide CTA text/icon gap (vl-plot-card__cta) */
    width: 209px; /* node 36:31 */
    height: 40px;
    margin-top: 18px; /* + the body's 12px gap = 30px above the button (plot-card parity) */
    border-radius: var(--vl-radius-pill);
    background: var(--vl-brick); /* node 36:31 fill #ce9761, exact token match */
    color: var(--vl-white);
    font-size: var(--vl-text-nav); /* 18px — established CTA-pill label size */
    font-weight: var(--vl-weight-semibold);
    white-space: nowrap;
}

.vl-dev-card__cta::after {
    content: '';
    display: inline-block;
    width: 24px; /* node svgexport-13 1, matches plot card's arrow asset */
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("../assets/icon-arrow-right.svg") no-repeat center / contain;
    mask: url("../assets/icon-arrow-right.svg") no-repeat center / contain;
    transition: transform 0.2s ease;
}

/* Hover lift + arrow slide, same interaction language as the plot cards
   (Liam review 2026-07-23). The card is already a whole-card link. */
.vl-dev-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vl-dev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(50, 56, 59, 0.35);
}

/* Gentle photo zoom, same values as the plot cards (Liam, 2026-07-23). */
.vl-dev-card__media img {
    transition: transform 0.35s ease;
}

.vl-dev-card:hover .vl-dev-card__media img {
    transform: scale(1.05);
}

.vl-dev-card:hover .vl-dev-card__cta::after {
    transform: translateX(10px);
}

/* ── "Related developments" section (Development single, Task 9) ─────────
   Figma reads: heading 5:1494 (centred, x=621 w=678 on the 1920 canvas —
   (1920-678)/2=621, confirms centre alignment unlike the page's other
   left-aligned section headings), card row 36:95 (Group 133, 1599×533,
   spanning the same 160–1759 content edges as --vl-container).
   Vertical rhythm: previous section (dev-living, bg rect 5:1387 ends at
   6089+1007=7096) → heading-top(7185) = 89px (matches the sitewide top-
   padding convention, dev-plots.css); heading-bottom(7259) → card-row-top
   (7329) = 70px; card-row-bottom(7862) → footer bg (36:103, y=7962) = 100px
   (matches the sitewide bottom-padding convention). No section background
   rect exists for this range — sits on the plain page (cream) background. */

.vl-dev-related {
    padding-block: 89px 100px;
}

.vl-dev-related__heading {
    margin: 0 0 70px;
    text-align: center;
    color: var(--vl-black); /* node fill is literally #000000, matches dev-plots.css convention */
    font-size: var(--vl-text-display); /* 70px, node 5:1494 */
    font-weight: var(--vl-weight-regular);
    line-height: 1; /* = font-size at every breakpoint (Liam, 2026-07-23: big headings line-height equals size) */
}

.vl-dev-related__heading em {
    /* Node spans: "Related" is SemiBold, " developments" is Regular — the
       emphasised word here is the FIRST word, not the last (opposite of the
       "Available <em>homes</em>" / "Living at <em>…</em>" pattern elsewhere
       on this template), read directly off the node's two spans. */
    font-style: normal;
    font-weight: var(--vl-weight-semibold);
}

.vl-dev-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* node card-row deltas: 703-160-513 / 1246-703-513, both 30 — matches vl-plot-grid gap */
}

/* ── Responsive: no Figma coverage below desktop (frame is desktop-only per
   CLAUDE.md). The 3-col grid holds ≥1281; everything below is the snap
   carousel — Liam's live-review ruling 2026-07-28 extended the carousel
   through SMALL DESKTOP too (1025–1280 was a 2-col static grid before;
   that block is gone, superseded).
   ── Small desktop / tablet / mobile: cards in an x-axis snap carousel
   (Liam, 2026-07-24). Cards snap centred, so on card N the edges of N−1
   and N+1 peek in from the screen edges (card 1 clamps flush to the
   content start with card 2 peeking right). The scroller is full-bleed so
   the peeks reach the real viewport edges; scroll-padding re-aligns the
   SNAPPED card with the content gutters, keeping the container rules
   intact. Scoped to the related grid — the card component itself is
   reused elsewhere. Two-up from 900 up to the grid switch, one-up below
   900 (the 88%/44% bands, next blocks). ── */
@media (max-width: 1280px) {
    .vl-dev-related__grid {
        display: flex;
        gap: 30px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc(50vw - 50%);
        scroll-padding-inline: calc(50vw - 50%);
        scrollbar-width: none; /* Firefox */
    }

    .vl-dev-related__grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge */
    }

    .vl-dev-related__grid .vl-dev-card {
        flex: 0 0 88%; /* < 100% of the content width = the neighbour peek */
        scroll-snap-align: center;
    }
}

/* Two-up band (Liam, 2026-07-24; upper edge 1024 → 1280 with the
   small-desktop extension, 2026-07-28): same carousel, two cards per
   view — 2 × 44% + 30px gap ≈ 91% of the content width, leaving the next
   card's edge peeking in. Below 900 the base 88% one-up takes over. */
@media (max-width: 1280px) and (min-width: 900px) {
    .vl-dev-related__grid .vl-dev-card {
        flex-basis: 44%;
    }
}

@media (max-width: 767px) {
    .vl-dev-related {
        padding-block: 60px 60px;
    }

    .vl-dev-related__heading {
        margin-bottom: 40px;
    }

    .vl-dev-card__body {
        padding: 30px 20px; /* matches .vl-plot-card__body mobile (Liam, 2026-07-24) */
    }
}

/* Brick-button hover (Liam, 2026-07-23) — mirrors the plot card CTA. */
.vl-dev-card__cta {
    transition: background-color 0.2s ease;
}

.vl-dev-card:hover .vl-dev-card__cta {
    background: var(--vl-brick-dark);
}

/* Status badge — Developments LISTING opt-in only (spec 2026-07-28; the
   partial renders it solely when show_status_badge is passed, so related-
   devs and Home never show it). Construction mirrors the plot card's badge
   (dev-plots.css .vl-plot-card__badge, lines 364–379) — position/size/
   radius/shadow/type values copied verbatim so the two badge families
   match; only background/color differ per variant below. */
.vl-dev-card__badge {
    position: absolute;
    top: 15px;   /* dev-plots.css .vl-plot-card__badge: node 35:733 */
    right: 15px; /* dev-plots.css .vl-plot-card__badge: node 35:733 */
    /* Same construction as the plot badge (dev-plots.css :421-430, Liam
       2026-08-05 / 2026-08-20). Node 36:13 is a fixed 100px pill with the
       label centred and no padding of its own, so the short designed labels
       merely LOOK padded — they are short enough to leave slack. "Coming
       soon" is longer and filled the pill edge to edge. min-width keeps the
       designed 100px for the short labels, which render identically, while a
       longer label grows and keeps real side space. 14px matches the plot
       badge and .vl-siteplan-card__badge. */
    min-width: 100px;
    padding-inline: 14px;
    box-sizing: border-box;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vl-radius-pill);
    box-shadow: 4px 4px 4px rgba(50, 56, 59, 0.15); /* = --vl-ink at 15%, node shadow */
    font-size: var(--vl-text-badge);
    font-weight: var(--vl-weight-semibold);
    line-height: 16px;
    white-space: nowrap;
}

.vl-dev-card__badge--coming-soon {
    background: var(--vl-cornflower);
    color: var(--vl-black);
    /* Optical centring, same reason as the plot badge (dev-plots.css :473-479):
       flex centres the LINE BOX, not the ink, so every label shares a baseline.
       "Coming soon" is the only label here with a descender (the g), which
       fills the space below the baseline that the other labels leave empty, so
       it reads low. With the fixed 24px height and border-box already set, 2px
       of bottom padding shrinks the content box to 22px and lifts the line 1px. */
    padding-bottom: 2px;
}

.vl-dev-card__badge--past {
    background: var(--vl-ink);
    color: var(--vl-white);
}

/* ── No-peek fallback (Liam sitewide ruling, 2026-07-31): a snap carousel
   only earns its keep when the card count EXCEEDS the band's per-view
   count — otherwise there is nothing to peek and the 44%/88% slides leave
   a dead band at the right. Quantity queries flip the scroller back to a
   filled grid: ≤2 cards in the 2-per-view band (900–1280), a lone card in
   the 1-per-view band (<900). Full-bleed margins/padding zero with it.
   Same rule applied to every snap surface the same day (card-development /
   plot-morehomes / update-single / home). ── */
@media (max-width: 1280px) and (min-width: 900px) {
    .vl-dev-related__grid:has(> .vl-dev-card:first-child:nth-last-child(2)),
    .vl-dev-related__grid:has(> .vl-dev-card:only-child) {
        display: grid;
        margin-inline: 0;
        padding-inline: 0;
    }

    .vl-dev-related__grid:has(> .vl-dev-card:first-child:nth-last-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vl-dev-related__grid:has(> .vl-dev-card:only-child) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 899px) {
    .vl-dev-related__grid:has(> .vl-dev-card:only-child) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin-inline: 0;
        padding-inline: 0;
    }
}