/* Plot single — "Look at more homes" (Figma frame 36:225, Task 12).
   LAST section inside the sticky zone (see the --vl-sticky-stop block at
   the file's foot).

   Pixel reads:
     36:355 heading "Look at more homes"  x=651 y=6764 w=618 h=74, Omnes
                     70px/74px leading, text-align centre (heading centre
                     651+618/2=960 = container centre 160+800=960, exact).
                     Two spans: "Look at " Regular, "more homes" SemiBold —
                     BOTH upright (get_design_context: neither span carries
                     an italic font family) — same "upright SemiBold <em>"
                     local reuse already established by gallery-carousel.css's
                     "Explore the property in detail" heading on this same
                     template (contrast plot-intro.css's <em>, which IS
                     italic for ITS OWN node — component files stay
                     independent per CLAUDE.md's "one file per component").
                     → --vl-text-display (70px, exact match); line-height
                     forced to 1 (= font-size), sitewide big-heading rule
                     (Liam, 2026-07-23).
     37:1045 band "Rectangle 38"  x=0 y=6675 w=1920 h=1739 — nominal fill
                     cornflower, and the launch build took that at face
                     value. CORRECTED at live review 2026-07-28 (Liam:
                     "wrong background colour"): the rect does NOT render
                     as this band. Pixel-sampling the frame's actual render
                     puts the whole more-homes region (y6700–7520) at
                     #EEE9DE = --vl-cream exactly (the intro band's colour);
                     cornflower (#A5BAFA) only begins at the newsletter rect
                     (36:817, y7580). Rendered frame beats a buried node's
                     nominal fill — same "the render decides" principle as
                     every other read.
     37:1090+ cards: standard 513×572 plot cards (dev-plots.css/card-plot.php)
                     — confirmed NOT restyled here: card-left edges 160/704/
                     1248, each 513 wide, gaps 704-673=31≈30 and 1248-1217=31
                     ≈30 (both ≈30px, brief's own instruction), summing to
                     the 1600px container (3×513+2×30=1599).

   Section paddings — band-delta method, same as every other section on this
   template (plot-intro.css/gallery-carousel.css/plot-floorplans.css):
     band top (6675) → heading top (6764)            = 89px (padding-top;
       same 89px read as every other first-in-band section on this template
       family — not a coincidence worth fighting, kept as its own literal).
     heading bottom (6764+74=6838) → card row top (6908) = 70px (head→grid
       gap; same nominal value used sitewide).
     card row bottom (6908+572=7480) → newsletter band top (footer.css'
       own rect, y=7580)                                = 100px (padding-
       bottom; this section's OWN boundary, not Rectangle 38's, since the
       rect visually continues into the newsletter band — see file-top note).
       Matches the sitewide bottom-padding convention everywhere else on
       this template. */

.vl-plot-morehomes {
    background: var(--vl-cream); /* frame renders #EEE9DE here — see corrected 37:1045 note above */
    padding-block: 89px 100px;
}

.vl-plot-morehomes__heading {
    margin: 0 0 70px;
    text-align: center;
    color: var(--vl-black); /* node fill #000000, same convention as every other heading on this template */
    font-size: var(--vl-text-display); /* 70px, node-exact */
    font-weight: var(--vl-weight-regular);
    line-height: 1; /* = font-size at every breakpoint (Liam, 2026-07-23: big headings line-height equals size) */
}

/* Template-local <em> reuse: THIS node's accent is upright SemiBold, not
   italic (contrast plot-intro.css's <em>, which IS italic for its own node)
   — font-style reset required so <em>'s default italic doesn't leak
   through. Same precedent as gallery-carousel.css's heading <em>. */
.vl-plot-morehomes__heading em {
    font-style: normal;
    font-weight: var(--vl-weight-semibold);
}

.vl-plot-morehomes__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* node-read, see file-top card-gap deltas; matches vl-dev-related__grid/vl-plot-grid */
}

/* ── Responsive: no Figma coverage below desktop (frame is desktop-only per
   CLAUDE.md). Ported VERBATIM from card-development.css's `.vl-dev-related__
   grid` carousel block (Liam's related-developments snap-carousel pattern,
   2026-07-24) — same full-bleed snap mechanics, renamed to this grid's scope.
   Card component itself (.vl-plot-card) is untouched, styled entirely by
   dev-plots.css — this file only ever targets the GRID's flex/scroll rules. */
/* ── Small desktop / tablet / mobile: cards in an x-axis snap carousel
   (ported verbatim from card-development.css; the 1025–1280 2-col static
   grid that used to sit here is gone — Liam's live-review ruling
   2026-07-28 runs the carousel through small desktop too, 3-col grid only
   ≥1281). Cards snap centred, so on card N the
   edges of N−1 and N+1 peek in from the screen edges. 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
   .vl-edge/.vl-container rules intact.
   ⚠️ full-bleed + sticky zone: this section sits INSIDE the sticky zone
   (vl_sticky_zone_open()/close() in single-hbp_plots.php), and this rule's
   `margin-inline: calc(50% - 50vw)` full-bleed trick depends on NOTHING
   between it and the viewport clipping overflow-x — checked card-
   development.css's own usage (Development single's "Related developments"
   section, NOT inside any sticky zone there — dev singles have the sticky
   tab off entirely, same as this template) and grepped every ancestor of
   .vl-sticky-zone (base.css, header.css, single-hbp_plots.php's own
   wrappers): none set `overflow-x: hidden`, so the same full-bleed math
   works unchanged here. Per CLAUDE.md's own rule, this must stay true for
   every ancestor forever — do not introduce an `overflow-x: hidden` upstream
   of .vl-sticky-zone.
   Two-up from 900 up to the 1280 grid switch, one-up below 900. ── */
@media (max-width: 1280px) {
    .vl-plot-morehomes__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-plot-morehomes__grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge */
    }

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

/* Two-up band (ported verbatim, 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-plot-morehomes__grid .vl-plot-card {
        flex-basis: 44%;
    }
}

@media (max-width: 767px) {
    .vl-plot-morehomes {
        /* Top/bottom both 60px — sitewide mobile section-padding convention
           (CLAUDE.md), same as every other section on this template. */
        padding-block: 60px 60px;
    }

    .vl-plot-morehomes__heading {
        margin-bottom: 40px; /* scaled down from the 70px desktop read, same convention as gallery-carousel.css's own mobile heading-gap rule */
    }
}

/* ── Sticky-tab zone props (CLAUDE.md rule: --vl-sticky-wait = first
   section's top padding, --vl-sticky-stop = last section's bottom padding).
   This section is now the LAST in the zone (Tasks 8–12 built out plot-intro
   → floorplans → gallery → walkthrough → site-plan → this one), so
   --vl-sticky-stop moves HERE from plot-intro.css (which owned the whole
   block only because it used to be both first AND last — see that file's
   own comment, now updated to point here). --vl-sticky-wait stays plot-
   intro.css's OWN value (89px / 60px, unchanged, that section is still
   first) — kept as a separate literal in each file rather than a shared
   variable, same "one file per component" precedent plot-intro.css itself
   documents for its own 89/100 read.
   The tab is OFF for both Development and Plot singles regardless
   (inc/sticky-contact.php's vl_show_sticky_contact() excludes both post
   types — the anchor bar's own Contact-us pill replaces it), so these props
   currently have ZERO visible effect; set anyway per the written convention,
   future-proofing if the tab is ever re-enabled here. Scoped via the body
   class WordPress already adds for a `hbp_plots` single. */
body.single-hbp_plots .vl-sticky-zone {
    --vl-sticky-wait: 89px; /* = plot-intro.css's own padding-top, duplicated literal (see above) */
    --vl-sticky-stop: 100px; /* = THIS section's own padding-bottom */
}

@media (max-width: 767px) {
    body.single-hbp_plots .vl-sticky-zone {
        --vl-sticky-wait: 60px;
        --vl-sticky-stop: 60px;
    }
}

/* ── 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-plot-morehomes__grid:has(> .vl-plot-card:first-child:nth-last-child(2)),
    .vl-plot-morehomes__grid:has(> .vl-plot-card:only-child) {
        display: grid;
        margin-inline: 0;
        padding-inline: 0;
    }

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

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

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