/* Development single — walkthrough video (click-to-load nocookie embed).
   Figma read: node 5:1374 "image 5" (x=160, y=5098, w=1600, h=891) — inset
   to the standard --vl-container width (x=160 matches the sitewide content
   start, not full-bleed like the site-plan section's Rectangle 38). No
   corner radius on the node (design-context emits rounded-[Npx] classes for
   every other radiused rect on this page, e.g. the plot-card image mask
   3:890 → rounded-[20px]; this node got none, confirming square corners).
   No heading/background rect belongs to this node — unlike the Homes and
   Site-plan sections either side of it, the page tree has no text or
   Rectangle node between the site-plan section's bottom (4998) and this
   node, or between this node's bottom (5989) and the Living section's
   background rect (6089) — the video sits directly on the page's own
   background with 100px clear space each side (both gaps read 100px
   exactly, matching the established "100px bottom" convention already used
   in dev-plots.css / dev-siteplan.css).

   The node's own image content ("Double click to view" caption, cookie
   banner, browser-chrome artefacts) is a screenshotted THIRD-PARTY embed
   used as placeholder imagery, not a UI spec (task brief) — the facade
   below is our own design-language treatment: a real YouTube thumbnail
   (maxresdefault.jpg) with a single click-to-play button, no borrowed
   browser chrome. */

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

.vl-dev-video__facade {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 1600 / 891; /* node 5:1374 proportions, exact match */
    border: 0;
    padding: 0;
    background-color: var(--vl-ink); /* shows while the thumbnail loads */
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

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

.vl-dev-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 70px;
    transform: translate(-50%, -50%);
    border-radius: 20px; /* shares the sitewide card-radius convention (dev-plots.css, dev-siteplan.css) */
    background: var(--vl-brick); /* CTA colour, per the soft rule (CLAUDE.md: brick for CTAs) */
    box-shadow: 0 8px 24px rgba(50, 56, 59, 0.35); /* = --vl-ink shadow, matches .vl-siteplan-card__inner */
    pointer-events: none; /* the whole facade is the click target, not just the button */
}

.vl-dev-video__play::before {
    content: '';
    margin-left: 6px; /* optical centring for a right-pointing triangle */
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent var(--vl-white);
}

.vl-dev-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 1600 / 891;
    border: 0;
}

@media (max-width: 767px) {
    .vl-dev-video {
        padding-block: 60px; /* sitewide mobile section-padding convention (dev-plots.css, dev-siteplan.css) */
    }

    .vl-dev-video__play {
        width: 72px;
        height: 50px;
        border-radius: 14px;
    }

    .vl-dev-video__play::before {
        border-width: 10px 0 10px 16px;
    }
}

/* Brick-button hover (Liam, 2026-07-23): the play chip deepens when the
   facade (the real click target) is hovered. */
.vl-dev-video__play {
    transition: background-color 0.2s ease;
}

.vl-dev-video__facade:hover .vl-dev-video__play {
    background: var(--vl-brick-dark);
}