/* Development single — "Living at…" flexible ACF tabs.
   Figma reads: section bg 5:1387 (Rectangle 41, x=1 y=6089 w=1920 h=1007,
   fill #32383b = --vl-ink exact match); heading 5:1377 ("Living at The
   Willows", x=647 y=6179 w=627 h=74 — CENTRED on the 1920 canvas, not
   left-aligned like the other section headings: (1920-627)/2 ≈ 647); tab
   row 5:1389 (Group 91, x=160 y=6334 w=1601 h=40 — 3 pills, each 527×40,
   10px gaps, spanning the full container width for THIS 3-tab state only,
   see note below); image 5:1391 (Mask group, 1010,6424,750×500, no
   rounded-[] class emitted → square corners, same convention as
   dev-video.css's node read) + copy 5:1394 (Group 23, 160,6544,750×261).

   Vertical rhythm read directly off the frame: section-top(6089)→heading-
   top(6179) = 90px; heading-bottom(6253)→tab-row-top(6334) = 81px; tab-row-
   bottom(6374)→panel-top(6424) = 50px; panel-bottom(image, the taller
   column, 6924)→section-bottom(7096) = 172px. That last figure doesn't
   match the sitewide "100px bottom" convention used elsewhere on this
   template (dev-plots.css, dev-video.css) — it's an exact read, not
   invented, but flag to Liam: it may simply be an artefact of this specific
   tab's content height rather than a deliberate section value.

   Two-column panel row: copy right edge (160+750=910) to image left
   (1010) = 100px gap; copy (h=261) sits vertically CENTRED against the
   taller image (h=500) — mid-points both land on 6674(.5). Columns are
   750/100/750 = 1600 = --vl-container, so a simple flex row with a fixed
   gap reproduces it losslessly.

   FLEXIBILITY NOTE: the frame shows exactly 3 tabs at a fixed 527px pill
   width that happens to fill the container (527*3 + 10*2 = 1601). The ACF
   repeater is add-a-row flexible (any number of tabs, any label length), so
   pills are built auto-width (content + padding) rather than hard-coded to
   527px — height/radius/colours/border-weights/font are all exact reads,
   only the width strategy is a deliberate deviation for a variable-length,
   variable-count control. Flag to Liam to confirm at live review.

   Per-tab heading (5:1395, "Great local transport links", 70px = the same
   --vl-text-display token as the section h2, tracking -1.75px) mixes THREE
   weights word-by-word in the frame (Omnes SemiBold / Light Italic / plain
   Regular) — but the `heading` ACF sub-field is a single plain-text input,
   so per-word styling can't be reproduced from admin-entered strings. Built
   as one consistent SemiBold weight (the frame's dominant/lead-word
   treatment). Flag to Liam: this is a CMS-field constraint, not a design
   read discrepancy — the frame genuinely shows mixed styling here. */

.vl-dev-living {
    padding-block: 90px 100px; /* bottom 172→150→100 (Liam, 2026-07-24 — same value at every viewport) */
    background: var(--vl-ink);
    color: var(--vl-white);
}

.vl-dev-living__heading {
    margin: 0 0 85px; /* Liam review 2026-07-23 (was 81) */
    text-align: center;
    font-size: var(--vl-text-display);
    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-living__heading em {
    font-style: normal;
    font-weight: var(--vl-weight-semibold); /* "Living" is SemiBold, "at {name}" is Regular — node 5:1377 spans */
}

/* Scroll-hint wrapper (gotcha §9.6): THIS element owns position + ::after;
   the scrolling element (.vl-dev-living__tabs) is a separate child — never
   combine position:relative + overflow-x:auto on the same node (dev-anchor.css
   uses the identical split). */
.vl-dev-living__tabwrap {
    position: relative;
    margin: 0 0 50px;
}

.vl-dev-living__tabs {
    display: flex;
    gap: 10px; /* node deltas: 697-160-527 = 10, 1234-697-527 = 10 */
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.vl-dev-living__tabs::-webkit-scrollbar {
    display: none;
}

.vl-dev-living__tabs li {
    /* Equal shares of the full row per the frame (527px thirds of 1600 with
       10px gaps) — Liam review 2026-07-23; replaces the build's auto-width
       pills. Scales to any tab count. */
    flex: 1 1 0;
    min-width: 0;
}

.vl-dev-living__tabs button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px; /* node 5:1379/5:1384/5:1385 */
    padding-inline: 16px;
    border-radius: var(--vl-radius-pill); /* node radius 100, exact match */
    font: inherit;
    font-size: var(--vl-text-nav); /* 18px, node text */
    font-weight: var(--vl-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Inactive (node 5:1384/5:1385 "Schools"/"Local facilities"): transparent
   fill, 2px cream border, cream text. */
.vl-dev-living__tabs button {
    border: 2px solid var(--vl-cream);
    background: transparent;
    color: var(--vl-cream);
}

.vl-dev-living__tabs button:hover {
    /* Deep-brick fill + border, black label — same hover language as the
       anchor bar pills (Liam review 2026-07-23, brick-dark token). */
    background: var(--vl-brick-dark);
    border-color: var(--vl-brick-dark);
    color: var(--vl-black);
}

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

/* Active (node 5:1379 "Transport"): brick fill, 1px ink border, black text —
   exact read, including the thinner 1px border on the active state only. */
.vl-dev-living__tabs button[aria-selected="true"] {
    border: 1px solid var(--vl-ink);
    background: var(--vl-brick);
    color: var(--vl-black);
}

.vl-dev-living__tabs button[aria-selected="true"]:hover {
    border-color: var(--vl-ink);
    color: var(--vl-black);
}

.vl-dev-living__panel {
    display: flex;
    align-items: center; /* copy vertically centred against the taller image column — node read */
    gap: 100px; /* node: image-left(1010) - copy-right(910) = 100 */
}

.vl-dev-living__panel[hidden] {
    display: none;
}

.vl-dev-living__copy {
    flex: 1 1 750px;
    min-width: 0;
}

.vl-dev-living__copy h3 {
    margin: 0 0 30px; /* Liam review 2026-07-23: design gap 30px (the earlier
                         19px node-delta read felt too tight live) */
    font-size: var(--vl-text-display); /* 70px — same token as the section h2, node 5:1395 */
    /* Client-controlled emphasis model (Liam review 2026-07-23, per the
       frame's "Great local transport links" read): base REGULAR; the
       WYSIWYG's Bold button = semibold, Italic = the kit's regular italic. */
    font-weight: var(--vl-weight-regular);
    letter-spacing: -0.025em; /* node tracking −1.75px at 70px, ratio-preserved so smaller token sizes track it */
    line-height: 1; /* = font-size at every breakpoint (Liam, 2026-07-23: big headings line-height equals size) */
}

.vl-dev-living__copy h3 strong,
.vl-dev-living__copy h3 b {
    font-weight: var(--vl-weight-semibold);
}

.vl-dev-living__copy h3 em,
.vl-dev-living__copy h3 i {
    font-style: italic;
    font-weight: var(--vl-weight-regular); /* i5 face — never synthetic bold-italic */
}

.vl-dev-living__body {
    font-size: var(--vl-text-body); /* 18px, node 5:1396, exact token match */
    line-height: 22px; /* node leading, exact token match */
}

.vl-dev-living__body p {
    margin: 0 0 22px;
}

.vl-dev-living__body p:last-child {
    margin-bottom: 0;
}

.vl-dev-living__media {
    flex: 1 1 750px;
    min-width: 0;
}

.vl-dev-living__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 500; /* node 5:1391, exact proportions */
    object-fit: cover;
    /* Rounded per the design (Liam review 2026-07-23): the mask node is
       typed rounded-rectangle (radius not machine-readable through the
       flattened mask) — 20px matches the plot cards' radius (node 35:715),
       the site's card-image convention. */
    border-radius: 20px;
}

/* ── Mobile / tablet: no Figma coverage below desktop (frame is desktop-only
   per CLAUDE.md) — provisional, Liam reviews live. Tab row keeps the
   scroll-hint fade (gotcha §9.6); panel stacks copy-over-media. ── */
@media (max-width: 1024px) {
    .vl-dev-living__tabwrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, transparent, var(--vl-ink));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .vl-dev-living__tabwrap.is-scrolled-end::after {
        opacity: 0;
    }

    /* Left-edge twin (Liam, 2026-07-24): shows once scrolled AWAY from the
       start — content also hides off the left edge then. dev-living.js
       toggles .is-scrolled-start. */
    .vl-dev-living__tabwrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to left, transparent, var(--vl-ink));
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.2s ease;
    }

    .vl-dev-living__tabwrap.is-scrolled-start::before {
        opacity: 0;
    }

    .vl-dev-living__panel {
        flex-wrap: wrap;
        gap: 70px; /* copy ↔ stacked image — sitewide stacked rhythm 70/50
                      (Liam, 2026-07-30; was 40 → 80 in the 2026-07-24 review,
                      now aligned with the feature rows) */
    }

    .vl-dev-living__copy,
    .vl-dev-living__media {
        flex-basis: 100%;
    }
}

@media (max-width: 767px) {
    .vl-dev-living {
        padding-block: 60px 100px; /* bottom fixed at 100px on every viewport (Liam, 2026-07-24) */
    }

    /* Mobile rhythm (Liam, 2026-07-24): title→tabs 55, tabs→tab-heading 50,
       copy→image 50. */
    .vl-dev-living__heading {
        margin-bottom: 55px;
    }

    .vl-dev-living__tabwrap {
        margin-bottom: 50px;
    }

    .vl-dev-living__panel {
        gap: 50px; /* the 70px copy↔image gap is tablet-only (Liam, 2026-07-24) */
    }

    /* Mobile only (Liam, 2026-07-24: tablet keeps the desktop equal-share
       fill): equal shares get too cramped at phone widths — back to
       auto-width pills in the scrollable row (fade hint above). */
    .vl-dev-living__tabs li {
        flex: 0 0 auto;
    }

    .vl-dev-living__tabs button {
        width: auto;
        padding-inline: 32px;
    }
}