/* Vivly Living — Land for Sale page (Phase 7).
   No Figma frame (derive-from-components page) — every value below is derived
   from settled site conventions, sourced per rule; the whole page is flagged
   for Liam's live review. Spec:
   docs/superpowers/specs/2026-07-31-land-for-sale-design.md.
   Markup consumed: template-land.php. Form styling lives in
   css/form-embed.css (shared with Contact) — nothing WPForms-scoped belongs
   in this file. */

.vl-land {
    padding-block: 89px 100px; /* template-family band padding (contact.css .vl-contact, dev-listing.css) */
}

.vl-land__cols {
    display: grid;
    /* 40/60 copy/form, 150px gap (Liam live review 2026-07-31 — revised from
       the brief's original 50/50 + 100px). Proportional tracks with
       minmax(0, …), never fixed pixels — contact.css's own 2026-07-29 lesson
       (fixed 500px/1000px columns overflowed every viewport under ~1780px);
       minmax(0, …) also guards the WPForms min-size-auto trap from the track
       side. Tracks resolve to ~588px / ~882px in the full 1600 container. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 130px; /* 150 -> 130 (Liam live review 2026-07-31) */
    align-items: start;
}

/* Items shrink inside the tracks (min-width: auto, the other direction of the
   same trap — belt-and-braces as contact.css; the embed's own copy lives in
   form-embed.css). */
.vl-land__cols > * {
    min-width: 0;
}

/* Display-heading construction (contact.css .vl-contact__form-heading) —
   minus its -1.75px tracking, which was a node-exact read from Contact's
   frame; this page has no frame, so no tracking read exists. Flagged for
   live review. The form column had its own heading ("Tell us about your
   land") until Liam removed it at live review 2026-07-31 — the form now
   top-aligns with this heading opposite. */
.vl-land__heading {
    /* Bottom gap: display title directly above running body copy — the
       token's exact case (45px desktop+tablet / 35px mobile; steps by
       itself). */
    margin: 0 0 var(--vl-gap-title-body);
    color: var(--vl-black);
    font-size: var(--vl-text-display); /* 70px */
    font-weight: var(--vl-weight-regular);
    line-height: 1; /* = font-size (Liam, 2026-07-23: big headings) */
}

.vl-land__heading strong {
    font-weight: var(--vl-weight-semibold);
}

.vl-land__body {
    color: var(--vl-black);
    font-size: var(--vl-text-body); /* 18px */
    font-weight: var(--vl-weight-regular);
    line-height: 22px; /* 18/22 body convention (feature-row.css) */
}

.vl-land__body p {
    margin: 0 0 22px; /* paragraph rhythm = one line-height (feature-row.css) */
}

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

.vl-land__body strong {
    font-weight: var(--vl-weight-semibold);
}

/* ── Sticky-zone props (CLAUDE.md rule: wait = first band's top padding,
   stop = last band's bottom padding, per breakpoint — one band here, so its
   own two values). The sitewide Contact tab SHOWS on this page (only
   Contact/Confirmation/dev/plot suppress it). Body-class form and reasoning:
   dev-listing.css's sticky-zone block. ── */
body.page-template-template-land-php .vl-sticky-zone {
    --vl-sticky-wait: 89px;
    --vl-sticky-stop: 100px;
}

/* ── Small desktop (1025–1280): display headings in HALF-WIDTH columns step
   to 52px (Liam sitewide ruling, 2026-07-31 — same rule in feature-row.css,
   home.css, plot-intro.css). The copy column qualifies: at 40% minus its
   gap share it is ~350–450px through this band. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
    .vl-land__heading {
        font-size: 52px; /* = the token's own tablet step */
    }
}

/* ── Tablet (≤1024): columns stack, copy first — DOM order, no `order` swap.
   Deliberately the opposite call to Contact (whose form jumps a
   reference-info card once stacked): here the copy is the pitch that
   motivates the form, so it leads (spec §5). ── */
@media (max-width: 1024px) {
    .vl-land__cols {
        grid-template-columns: 1fr;
        gap: 80px; /* Contact's settled stacked gap (Liam, 2026-07-29) */
    }
}

/* ── Mobile (≤767) ── */
@media (max-width: 767px) {
    .vl-land {
        padding-block: 60px; /* sitewide mobile section-padding standard (CLAUDE.md) */
    }

    .vl-land__cols {
        gap: 50px; /* Contact's settled mobile stacked gap (Liam, 2026-07-29) */
    }

    body.page-template-template-land-php .vl-sticky-zone {
        --vl-sticky-wait: 60px; /* tracks .vl-land's own mobile padding above */
        --vl-sticky-stop: 60px;
    }
}