/* Development single — hero image (Figma node 5:1624) + fold sizing.
   Liam ruling (2026-07-23, extended to ALL breakpoints 2026-07-24): on load
   the header (in flow on HBP singles), hero image and ink title band
   together fill exactly 100svh. The .vl-dev-fold flex column makes that
   self-measuring: the band keeps its natural height (fixed 200px on
   desktop/tablet, content height on mobile where it may wrap) and the hero
   flexes to the exact remainder — no calc() arithmetic to break when a long
   development name wraps. svh (not vh) so mobile browser chrome doesn't
   push the band below the fold; the vh line is the older-engine fallback.
   `--fill` is only applied when a hero image exists (template) — the band
   alone must never be stretched to viewport height. */
.vl-dev-fold--fill {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--vl-header-h));
    min-height: calc(100svh - var(--vl-header-h));
}

.vl-dev-fold--fill .vl-dev-hero {
    flex: 1; /* basis 0 — height = exactly the space the band leaves, never
                the image's intrinsic height */
    min-height: 0;
}

.vl-dev-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Absolute, not height:100% — a percentage height inside a flex item that
   is sized by flex-grow against a min-height-only container is INDEFINITE
   (the image rendered at intrinsic height with dead space below — caught
   live 2026-07-24). Absolute % resolves against the section box always. */
.vl-dev-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}