/* Plot single — Floorplans section (Figma frame 36:225).

   Pixel reads:
     36:968  "Rectangle 44"  band  x=0 y=1585 w=1920 h=1195, fill #32383b
                             → EXACT match --vl-ink (NOT cream/white as the
                             brief's own wording guessed — read decides per
                             CLAUDE.md; this is a dark ink band, unlike the
                             cream/white bands elsewhere on this page).
     37:1209 heading  "Floorplans"  x=160 y=1674 w=333 h=74, Omnes SemiBold,
                       70px/74px leading, fill white.
                       → --vl-text-display (70px, exact match), SemiBold
                       (unlike plot-intro's Regular display heading — this
                       one really is solid SemiBold, no mixed weights).
                       line-height forced to 1 (= font-size), NOT the node's
                       74px leading — sitewide big-heading rule (Liam,
                       2026-07-23), same treatment as plot-intro.css.
                       Colour: white (--vl-white) — band is dark ink, so the
                       heading needs its own colour override same pattern as
                       plot-intro's black-on-cream override, just inverted.
     37:1211 image slot "floor-plans-plot-27-dd 1"  x=160 y=1818 w=1600 h=792
                       — exact match to the brief's "1600×792" naming. The
                       node's own bitmap already bakes TWO floor plans
                       (ground/first) into one raster; content is provisional
                       (CLAUDE.md) so the section is built to accept N
                       $vl_floorplans entries, each rendered at this same
                       1600-wide slot size, stacked (brief's own framing).
     37:1208 pill "Rectangle 48"  x=1551 y=1691 w=209 h=40, fill/border BOTH
                       --vl-brick (#ce9761), 1px solid, radius 100 (pill).
                       → SOLID brick fill, NOT the anchor bar's transparent+
                       white-border treatment (dev-anchor.css .vl-dev-anchor__pill)
                       — this one node-matches header.css's
                       .vl-nav__contact-pill construction exactly (1px brick
                       border, brick fill, white semibold label) instead.
                       Confirms designer-notes "brick = CTA colour" directly
                       from the node, per brief's own steer.
     37:1215 label "Download brochure"  x=1576 y=1700 w=160 h=23, Omnes
                       SemiBold, 18px, centred, fill white.
                       → --vl-text-nav (18px, exact match) + --vl-weight-semibold,
                       same pairing as every other CTA-pill label sitewide
                       (.vl-nav__contact-pill, .vl-dev-anchor__pill).

   Head row (heading + pill) — vertical centring proven by the node math:
   heading occupies y1674–1748 (mid 1711); pill occupies y1691–1731 (mid
   1711) — identical midpoint, so `.vl-plot-floorplans__head` is a flex row,
   align-items: center, NOT baseline. Heading sits at the container's left
   edge (x160); pill's right edge (1551+209=1760) is exactly the container's
   right edge (160+1600=1760) — space-between, not a fixed gap.

   Section paddings — band deltas, same method as dev-plots.css/plot-intro.css:
     band top (1585) → heading top (1674)                = 89px (padding-top;
       matches plot-intro.css's own 89px read for the equivalent first-line
       slot — not a coincidence worth fighting, kept as a separate literal
       here per CLAUDE.md's "one file per component" rule).
     head row bottom (heading's own bottom, the taller of the two: 1748)
       → image top (1818)                                 = 70px (head→image gap)
     image bottom (1818+792=2610) → band bottom (1585+1195=2780)
                                                            = 170px (padding-bottom)
   RESOLVED at live review 2026-07-28 (both former flags): the three small
   unlabelled groups are 5-DOT CAROUSEL INDICATORS, and Liam confirmed the
   floorplans are a carousel (one slide at a time), retiring the launch
   build's stacked-images reading and its invented 70px between-image gap.
     37:1008 "Group 3"   x890 y2660 — WHITE dots centred under the floorplan
                         image on the ink band → built below (this file +
                         carousel.js).
     37:1039 "Group 138" x890 y3663 — the same indicator in INK inside the
                         gallery section's y-range → gallery carousel,
                         decision #3 on Liam's list (not built here).
     37:990  "Group 3"   x1327 y2504 — ink dots sitting ON the floorplan
                         raster, off-centre; reads as a stray/duplicate the
                         designer left behind → deliberately ignored. */

.vl-plot-floorplans {
    background: var(--vl-ink);
    padding-block: 89px 170px;
}

.vl-plot-floorplans__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px; /* no node read for a stacked/overflow gap (heading is
                  auto-width, pill is fixed 209px, row never wraps at
                  desktop widths) — same nominal gap size used for other
                  same-row heading+control pairings on this template family
                  (.vl-plot-card__toprow, dev-plots.css) rather than
                  inventing a new number; flagged as derived. */
    margin-bottom: 70px; /* node: head row bottom → image top */
}

.vl-plot-floorplans__heading {
    margin: 0;
    color: var(--vl-white); /* node fill is literally white — band is dark ink */
    font-size: var(--vl-text-display); /* 70px, node-exact */
    font-weight: var(--vl-weight-semibold); /* node: solid SemiBold, no mixed weights here */
    line-height: 1; /* = font-size at every breakpoint (Liam, 2026-07-23: big headings line-height equals size) */
}

/* Pill (37:1208/1215): solid brick — node-confirmed CTA treatment, matches
   header.css .vl-nav__contact-pill's construction exactly (not the anchor
   bar's transparent-with-white-border style). New class per the brief's own
   markup rather than sharing .vl-nav__contact-pill (different width: 209px
   here vs 200px there, and a template-local component per CLAUDE.md's
   "one file per component" rule). */
.vl-plot-floorplans__brochure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 209px; /* node 37:1208 */
    height: 40px;
    border: 1px solid var(--vl-brick);
    border-radius: var(--vl-radius-pill); /* exact match, node radius 100 */
    background: var(--vl-brick);
    color: var(--vl-white);
    font-size: var(--vl-text-nav); /* 18px, node-exact */
    font-weight: var(--vl-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover: deepen the brick — established solid-brick-CTA convention sitewide
   (header.css .vl-nav__contact-pill, dev-siteplan.css .vl-siteplan-zoom__btn),
   not shown in the static frame. */
.vl-plot-floorplans__brochure:hover {
    background: var(--vl-brick-dark);
    border-color: var(--vl-brick-dark);
}

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

/* ── Carousel (live review 2026-07-28) ── Figma group 37:1008 read: the
   floorplans are ONE slide at a time with a centred dot indicator below —
   dots 20px circles, 30px pitch (10px gap), white on the ink band, active =
   solid fill / inactive = 1px outline. Geometry: image bottom (2610) → dots
   top (2660) = 50px; dots bottom (2680) → band bottom (2780) = 100px — so
   the carousel variant trades the plain section's 170px padding-bottom for
   100px + the dots block (50 + 20 + 100 = same 170 total below the image).
   This retires the file-top "stacked images, 70px gap" flag: stacking was
   the launch-build reading, the carousel is Liam's live-review correction.
   Auto-scroll added same review (Liam's call, not a frame read) — pause on
   hover/touch, manual nav resets the timer; see carousel.js. */

.vl-plot-floorplans--carousel {
    padding-bottom: 100px; /* node: dots bottom → band bottom */
}

.vl-plot-floorplans__viewport {
    /* clip, not hidden (cold review 2026-07-28): an overflow:hidden box is
       still programmatically scrollable — tabbing to a lightbox-tabindexed
       image in an off-screen slide scrolled the viewport and desynced the
       track transform. clip cannot scroll. */
    overflow: clip;
}

.vl-plot-floorplans__track {
    display: flex;
    align-items: flex-start; /* mixed-height plans top-align; band ink shows below shorter slides */
    transition: transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
    .vl-plot-floorplans__track {
        transition: none;
    }
}

.vl-plot-floorplans__image {
    display: block;
    flex: 0 0 100%;
    min-width: 0; /* flex min-size-auto guard: a plan's intrinsic width must never widen its slide past the viewport (same fix as gallery-carousel.css) */
    width: 100%;
    height: auto;
}

.vl-plot-floorplans__dots {
    display: flex;
    justify-content: center; /* node: dot run x890–1030, centred on 960 */
    gap: 10px; /* node: 30px pitch − 20px dot */
    margin-top: 50px; /* node: image bottom (2610) → dots top (2660) */
}

/* Arrow row (css/carousel-nav.css): the dot run's 50px clearance moves here.
   WHITE, not ink — this band is --vl-ink, which is why these dots are white
   too. The chevron therefore flips to ink when the circle fills. */
.vl-plot-floorplans .vl-carousel-nav {
    margin-top: 50px;
    color: var(--vl-white);
    --vl-carousel-arrow-on: var(--vl-ink);
}

.vl-plot-floorplans__dot {
    width: 20px; /* node 37:1009–1013 */
    height: 20px;
    padding: 0;
    border: 1px solid var(--vl-white);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Active state rides aria-current (single source, set by carousel.js;
   PHP stamps the first dot) — no class to keep in sync. */
.vl-plot-floorplans__dot[aria-current="true"] {
    background: var(--vl-white);
}

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

/* ── Mobile only (≤767) ── Liam's live-review ruling 2026-07-28 (same call
   as the title band's): TABLET KEEPS THE DESKTOP ROW — heading left,
   brochure pill right, vertically centred; "Floorplans" + a 209px pill fit
   comfortably at 768+. Only mobile stacks the head (left-aligned), where
   the pair genuinely can't share a row. */
@media (max-width: 767px) {
    .vl-plot-floorplans__head {
        flex-direction: column;
        align-items: center; /* heading + pill both centred (Liam live review 2026-07-28) */
        gap: 30px; /* was 24 (Liam, same pass) */
    }

    .vl-plot-floorplans__heading {
        text-align: center; /* wrapped heading lines centre too */
    }
}

@media (max-width: 767px) {
    .vl-plot-floorplans {
        /* Top/bottom both 60px — sitewide mobile section-padding convention
           (CLAUDE.md), same as plot-intro.css's own mobile rule. */
        padding-block: 60px 60px;
    }

    .vl-plot-floorplans__head {
        margin-bottom: 40px; /* scaled down from the 70px desktop read alongside the 60px mobile pad convention */
    }

    /* Carousel variant keeps the plain 60px mobile padding-bottom (the
       100px desktop trade-off doesn't scale below the 60px convention);
       dots gap scaled 50→30 alongside the other mobile gap scalings —
       derived, no mobile frame (flagged for live review like the rest). */
    .vl-plot-floorplans--carousel {
        padding-bottom: 60px;
    }

    .vl-plot-floorplans .vl-carousel-nav {
        margin-top: 30px;
    }

    /* Pill drops its fixed width so it doesn't force horizontal overflow
       alongside the stacked heading — same mechanic as dev-anchor.css's
       own mobile pill rule (.vl-dev-anchor__pill width:auto). */
    .vl-plot-floorplans__brochure {
        width: auto;
        padding-inline: 24px;
    }
}