/* Plot single — title band content (Figma frame 36:225, band cluster).

   The band SHELL is css/dev-titleband.css (ink fill #32383b = node 36:226,
   200px min-height, 20px block padding, and the h1 rule) — this file only
   lays out the plot-specific two-cluster CONTENT inside it.

   ⚠ Specificity: the shell styles the band's container as
   `.vl-dev-titleband .vl-container` (0,2,0) — a bare `.vl-plot-band` (0,1,0)
   would LOSE to its `flex-direction: column`. Every container-level rule here
   is therefore written as `.vl-dev-titleband .vl-plot-band`: equal
   specificity, later source order (the enqueue depends on vl-dev-titleband),
   so it wins.

   Pixel reads (all from frame 36:225):
     36:226  band rect      1920×200 at y880 · fill #32383b     → --vl-ink (shell)
     36:917  title          Omnes SemiBold 90/95, white,
                            "The" span Omnes Regular            → --vl-text-hero (shell h1)
     36:919  price          Omnes SemiBold 70/75, white         → --vl-text-display
     36:945  "Detached"     Omnes Italic 30/34, white           → --vl-text-input
     36:914  "Plot 4"       Omnes Regular 30/34, white          → --vl-text-input
     36:957  beds/baths     numbers Omnes Regular 30/34, white;
                            bed icon 45×31, bath icon 32.94×31
   Geometry: title x160 y912 · price right edge 1760 · both clusters' second
   row y1018–1052 (they BOTTOM-align — hence align-items: flex-end below). */

.vl-dev-titleband .vl-plot-band {
    /* One shared 2-row grid for all four items (Liam, 2026-07-27 live review:
       "Semi-detached" and the Plot/beds/baths row must sit on the SAME level —
       both on y1018 in the frame). The clusters were previously two separate
       bottom-aligned flex columns, which let each second row's position be
       driven by its own first row's text box (90px title vs 70px price);
       a shared grid row makes level-alignment structural, not incidental.
       The cluster wrappers become display: contents at desktop so the four
       items place directly onto the grid. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* title column flexes, price column shrink-wraps (node: title x160, price right edge 1760) */
    align-items: end;   /* row 1: title & price bottoms level; row 2: both 34px line boxes level */
    column-gap: 40px;   /* min breathing space if a long house type nears the price */
    row-gap: 30px;      /* Liam, 2026-07-27 live review (was 20, the dev-band rhythm) */
    width: 100%; /* flex/grid-item .vl-container shrink-wrap gotcha (docs/container-rules.md) */
}

/* h1: node 36:917 reads Omnes SemiBold 90/95 white with "The" in Regular —
   identical to the development band's title node (120:19), so the shared
   `.vl-dev-titleband h1` + `.vl-title-quiet` rules already implement it.
   Deliberately NOT restated here: one source for the band title. */

.vl-plot-band__left,
.vl-plot-band__right {
    display: contents; /* items place directly onto the shared grid at EVERY breakpoint (the old ≤1024 stacked-cluster block is gone — Liam 2026-07-28: two-column grid everywhere; mobile only remaps cells below) */
}

.vl-plot-band__left h1 {
    grid-column: 1;
    grid-row: 1;
}

.vl-plot-band__building {
    grid-column: 1;
    grid-row: 2;
}

.vl-plot-band__price {
    grid-column: 2;
    grid-row: 1;
    justify-self: end; /* node: right-aligns to x1760 */
}

.vl-plot-band__meta {
    grid-column: 2;
    grid-row: 2;
    justify-self: end; /* node: right-aligns to x1760 */
}

.vl-plot-band__building {
    margin: 0;
    /* Node 36:945 "Detached": Omnes Italic 30/34, white. Italic at
       --vl-weight-regular (500) = the kit's i5 face (Adobe's shifted
       numbering: 400-italic would be LIGHT italic). */
    color: var(--vl-white);
    font-size: var(--vl-text-input); /* 30px, node-exact */
    font-style: italic;
    font-weight: var(--vl-weight-regular);
    line-height: 1.133; /* node ratio 34/30, unitless so the mobile token size scales it */
}

.vl-plot-band__price {
    margin: 0;
    /* Node 36:919: Omnes SemiBold 70/75, white. */
    color: var(--vl-white);
    font-size: var(--vl-text-display); /* 70px, node-exact */
    font-weight: var(--vl-weight-semibold);
    line-height: 1; /* = font-size (Liam ruling 2026-07-23: big headings) */
    text-align: right;
}

.vl-plot-band__meta {
    display: flex;
    align-items: center;
    gap: 50px; /* node: "Plot 4" right edge 1510 → facts start 1559 (49px, ±1 text side-bearing) */
}

.vl-plot-band__plotno {
    margin: 0;
    /* Node 36:914: Omnes Regular 30/34, white. */
    color: var(--vl-white);
    font-size: var(--vl-text-input); /* 30px, node-exact */
    font-weight: var(--vl-weight-regular);
    line-height: 1.133; /* node ratio 34/30 */
}

/* Beds/baths — node 36:957. Same two assets as the plot card, sized for the
   band (see the cross-reference comment in single-hbp_plots.php). */
.vl-plot-band__facts {
    display: flex;
    align-items: center;
    gap: 50px; /* node: bed group end 1641 → bath group start 1691 */
}

.vl-plot-band__fact {
    display: flex;
    align-items: center;
    gap: 20px; /* node: icon end → number start, both groups (1604→1624, 1723.9→1744) */
    color: var(--vl-white);
    font-size: var(--vl-text-input); /* 30px — node 36:948/36:953 */
    font-weight: var(--vl-weight-regular);
    line-height: 1.133; /* node ratio 34/30 */
}

.vl-plot-band__fact::before {
    content: '';
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Icon sizes in em (not px) so they track --vl-text-input when it steps down
   to 20px on mobile — em maths is the node's own px over its 30px text. */
.vl-plot-band__fact--beds::before {
    width: 1.5em;    /* node no_of_bedrooms_icon 36:949: 45×31 → 45/30 */
    height: 1.033em; /* 31/30 */
    -webkit-mask-image: url("../assets/icon-bed.svg");
    mask-image: url("../assets/icon-bed.svg");
}

.vl-plot-band__fact--baths::before {
    width: 1.1em;    /* node no_of_bathrooms_icon 36:951: 32.94×31 → 33/30 */
    height: 1.033em; /* 31/30 */
    -webkit-mask-image: url("../assets/icon-shower.svg");
    mask-image: url("../assets/icon-shower.svg");
}

/* ── No stacked variant at ANY breakpoint ──────────────────────────────────
   Liam's live-review rulings 2026-07-28 (two passes, closing this file's
   own responsive flag): tablet AND mobile keep the desktop two-column grid
   — title | price on row 1, building | plot/beds/baths on row 2. The
   stepped-down tokens make room, and the title column's minmax(0,1fr)
   wraps a long house type before it can collide with the price. The band
   grows past its 200px min-height as needed and the fold absorbs it
   (dev-hero.css measures the band, no calc()). Only the gap scaling below
   changes on mobile. */

/* Mobile: --vl-text-input drops 30→20px, so the node's 50/20px gaps (set at
   30px text) are scaled by the same ⅔ — derived, flagged for live review.
   Mobile arrangement (Liam live review 2026-07-28, settled via annotated
   screenshot): title | PLOT NUMBER on row 1, building | BEDS+BATHS on row
   2, PRICE alone on row 3 (its own line — long house types can't collide
   with it). The meta wrapper goes display:contents so its two children
   take grid cells individually; tablet up keeps the desktop grid where
   the pair rides together in the right column. */
@media (max-width: 767px) {
    .vl-dev-titleband .vl-plot-band {
        row-gap: 20px; /* 30 → 20 on mobile (Liam live review 2026-07-28) */
    }

    .vl-plot-band__meta {
        display: contents;
    }

    .vl-plot-band__plotno {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .vl-plot-band__facts {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        margin-top: 5px; /* nudge below the building-type baseline (Liam live review 2026-07-28) */
    }

    .vl-plot-band__price {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
        text-align: left;
    }

    .vl-plot-band__facts {
        gap: 30px;
    }

    .vl-plot-band__fact {
        gap: 12px;
    }
}