/* Vivly Living — Contact + Confirmation (Phase 4d, task brief 2026-07-28).
   Figma frame 39:1913 (Contact); Confirmation has no frame (derived, spec
   doc docs/superpowers/specs/2026-07-28-contact-page-design.md §6).
   Covers TWO templates in one file (spec's own call: the confirmation page
   is a heading + paragraph + CTA, too small for its own file).
   Markup consumed: template-contact.php, template-confirmation.php,
   template-parts/contact-card.php — read alongside this file.
   Form-embed styling (Block 4) moved to css/form-embed.css at Phase 7 (2026-07-31).
   Contact-card styling (Block 2) moved to css/contact-card.css at Phase 8 (2026-07-31). */

/* ── Block 1: Section + columns (Contact page) ──────────────────────────
   Frame: card x160 w500, form block x760 w1008 -> right edge 1768, an 8px
   overshoot past the 1600px container. Per Liam's plot-intro precedent
   (plot-intro.css, 2026-07-27: a Figma group overshoot is not
   authoritative), 500 / 100 gap / 1000 is used instead — it also happens to
   land EXACTLY on the container (500+100+1000=1600), unlike the frame's own
   1008-wide form block. */
.vl-contact {
    padding-block: 89px 100px; /* template-family band padding, same as dev-listing.css/plot-intro.css */
}

.vl-contact__cols {
    display: grid;
    /* PROPORTIONAL, not the frame's literal pixels (fixed 2026-07-29 after
       Liam hit it at 1280px). This was `500px 1000px` with a 100px gap — two
       FIXED columns demanding 1600 + 100 = 1700px, which cannot shrink, so
       every viewport below ~1780 overflowed and the form hung off the right
       edge of the screen.
       500:1000 is exactly 1:2, so 1fr 2fr reproduces the frame precisely at
       full width ((1600−100)/3 = 500 and 1000) and then shrinks with the
       container, which is what the container rules require below 1680.
       minmax(0, …) rather than a bare fr: grid tracks otherwise take their
       items' automatic minimum size, and the form's inputs would refuse to
       shrink past their intrinsic width — the same min-size-auto trap that
       broke the plot gallery's tiles (css/gallery-carousel.css). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 100px;
    align-items: start;
}

/* The minmax(0, …) above lets the TRACKS shrink; these let the ITEMS shrink
   inside them. Grid items default to min-width: auto, so a wide-content child
   (the WPForms container and its inputs) can still push past its track and
   overflow — belt-and-braces against the same trap from the other direction. */
.vl-contact__cols > * {
    min-width: 0;
}

/* ── Block 3: Form column ────────────────────────────────────────────────
   Heading (67:2866): 545x88, --vl-text-display (70px), line-height 1 per
   the sitewide big-heading rule. No mixed-weight callout in the frame (no
   table row splits it like plot-intro's heading does) and no colour given
   — following the established display-heading convention used elsewhere
   on the site (plot-intro.css, dev-plots.css): solid black, Regular. */
.vl-contact__form-heading {
    /* Gap to the first field row: the node y-reads give 57px (heading y663
       h88 -> bottom 751; first label y808), but Liam set it to 70px live
       (2026-07-29) — which also lands on the sitewide 70px heading→content
       gap used by gallery-carousel.css, plot-floorplans.css and dev-listing.css,
       so this page now shares that rhythm instead of carrying a one-off 57.
       Tablet/mobile steps are in the responsive blocks at the foot. */
    margin: 0 0 70px;
    color: var(--vl-black);
    /* MIXED weight, not a solid semibold: node 67:2866 is Regular "Send us a "
       + SemiBold "message" — only the final word (Liam, 2026-07-29; corrected
       after I first applied semibold to the whole heading). <strong> in the
       template carries it, so no font-style reset is needed — unlike the
       <em>-based accents on gallery-carousel.css/plot-morehomes.css headings. */
    font-weight: var(--vl-weight-regular);
    font-size: var(--vl-text-display); /* 70px, node-exact */
    letter-spacing: -1.75px; /* node-exact (67:2866) — tighter tracking at this
                                 size; the other display headings carry no
                                 tracking read, so this stays local */
    line-height: 1; /* = font-size (Liam, 2026-07-23: big headings line-height equals size) */
}

.vl-contact__form-heading strong {
    font-weight: var(--vl-weight-semibold); /* node 67:2866: the final word only */
}

/* ── Block 5: Confirmation page (no Figma frame — derived, spec §6) ──────── */
.vl-confirmation {
    padding-block: 89px 100px; /* same template-family band padding as .vl-contact/dev-listing.css */
    text-align: center;
}

/* Heading now lives in the BODY, not a hero (Liam live review 2026-07-29 —
   the photo hero was too heavy for a transactional page and cost a full-size
   image download for nothing). Display token + the sitewide big-heading
   line-height rule, same treatment the hero itself used, so the page reads
   the same weight without the band. <strong> carries the mixed weight, as
   in the hero partial. */
.vl-confirmation__heading {
    margin: 0 0 50px; /* heading -> message. 30 -> 50px (Liam, 2026-07-29:
                          open up the row gaps); derived, no frame */
    color: var(--vl-black);
    font-size: var(--vl-text-display); /* 70px, steps down with the token at tablet/mobile */
    font-weight: var(--vl-weight-regular);
    line-height: 1; /* = font-size (Liam, 2026-07-23: big headings) */
}

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

/* "Much bigger" (Liam live review 2026-07-29): the size iterated
   18px -> 30px (--vl-text-input) -> 24px (--vl-text-card-title, the value
   actually declared below) — --vl-text-input read too big live, so the
   token was stepped down one notch. --vl-text-card-title steps to 20px on
   mobile automatically, so nothing further is needed at that breakpoint.
   (A cornflower panel was tried at Liam's suggestion and rejected on sight
   the same review — plain on the section ground it is.) max-width keeps the
   line length readable rather than letting it span the full 1600px
   container: 750 -> 1000 -> 800px, settled live (Liam, 2026-07-29). */
.vl-confirmation__message {
    max-width: 800px;
    margin-inline: auto;
    font-size: var(--vl-text-card-title); /* 24px, steps to 20px on mobile */
    font-weight: var(--vl-weight-regular);
    line-height: 1.2; /* unitless so it scales with the mobile token step */
}

.vl-confirmation__message p {
    margin: 0;
}

/* Same solid-brick pill construction as the Send button above (and
   header.css .vl-nav__contact-pill) — sitewide CTA treatment, not a node
   read (no frame for this page). */
.vl-confirmation__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px; /* message -> CTA. 30 -> 50px, matching the heading gap
                          above so the three rows share one rhythm (Liam,
                          2026-07-29); derived, no node read */
    padding: 0 32px;
    height: 50px;
    border: 1px solid var(--vl-brick);
    border-radius: var(--vl-radius-pill);
    background: var(--vl-brick);
    color: var(--vl-white);
    font-weight: var(--vl-weight-semibold);
    font-size: var(--vl-text-nav);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vl-confirmation__cta:hover {
    background: var(--vl-brick-dark);
    border-color: var(--vl-brick-dark);
}

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

/* ── Sticky-zone props (Contact + Confirmation) ──────────────────────────
   Not one of the brief's six blocks, but required by CLAUDE.md's binding
   rule: --vl-sticky-wait must equal the first section's top padding and
   --vl-sticky-stop the last section's bottom padding, per template.
   The Contact page's own tab has been off since Phase 4d (hidden by
   vl_show_sticky_contact(), inc/sticky-contact.php — its sticky anchor bar
   doesn't exist here, but the page still isn't meant to carry the sitewide
   tab). UPDATE (Liam, 2026-07-28): the Confirmation page's tab is hidden
   too — vl_show_sticky_contact() gained a template-based exclusion for
   template-confirmation.php, because inviting someone to contact you on the
   page confirming their message arrived reads wrong. Both sets of props
   below are therefore INERT today, and are kept deliberately: the written
   convention says set them per template regardless (the plot templates do
   the same while their tab is off), so each page is correct the moment its
   tab is ever re-enabled. Body-class form and reasoning: dev-listing.css's
   own sticky-zone block (search "-php` suffix below is REQUIRED"). */
body.page-template-template-contact-php .vl-sticky-zone {
    --vl-sticky-wait: 89px; /* .vl-contact's own top padding, Block 1 */
    --vl-sticky-stop: 100px; /* .vl-contact's own bottom padding, Block 1 */
}

body.page-template-template-confirmation-php .vl-sticky-zone {
    --vl-sticky-wait: 89px;
    --vl-sticky-stop: 100px;
}

/* ── Block 6: Responsive ──────────────────────────────────────────────────
   No non-desktop frame for either template — every value below is derived,
   flagged for Liam's live review (brief's own instruction).
   ⚠️ PLACEMENT IS LOAD-BEARING (same cascade trap as dev-listing.css): these
   media queries sit AFTER every base rule they override — media queries add
   no specificity, so an identical-specificity base rule later in the file
   would win regardless of the query. */
@media (max-width: 1024px) {
    .vl-contact__cols {
        grid-template-columns: 1fr; /* single column — derived */
        gap: 80px; /* 50 -> 80px (Liam, 2026-07-29) once the two stack */
    }

    /* FORM FIRST, card second once stacked (Liam, 2026-07-29): the form is
       what someone came here to do, so it should not sit below a long
       opening-hours card on a phone. Done with grid `order` rather than
       reordering the template, so the desktop layout (card left, form right)
       and the markup both stay untouched.
       a11y note: this makes DOM order (card, form) differ from visual order
       (form, card) at these widths, so keyboard focus reaches the card's
       phone/email links before the form. Judged acceptable — both are
       reachable, nothing is hidden or trapped, and the alternative (flipping
       the template and re-ordering on desktop instead) just moves the same
       mismatch onto desktop. */
    .vl-contact__form {
        order: 1;
    }

    /* Heading gap 70 -> 50px (Liam, 2026-07-29): the display token steps
       70 -> 52px here, so the gap steps with it. */
    .vl-contact__form-heading {
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .vl-contact {
        padding-block: 60px; /* sitewide mobile section-padding convention (CLAUDE.md) — derived */
    }

    /* Form -> card gap 80 -> 50px on mobile only (Liam, same review): 80px
       between two stacked blocks eats a lot of a phone screen. Tablet keeps
       the 80px set in the ≤1024 block. */
    .vl-contact__cols {
        gap: 50px;
    }

    .vl-confirmation {
        padding-block: 60px; /* same convention, extended by analogy — .vl-confirmation shares
                                 .vl-contact's desktop 89/100 reading, so it follows the same
                                 mobile step-down; not explicitly named in the brief, flagged */
    }

    body.page-template-template-contact-php .vl-sticky-zone {
        --vl-sticky-wait: 60px; /* tracks .vl-contact's own mobile padding, above (60px both sides) */
        --vl-sticky-stop: 60px;
    }

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

    /* Heading SIZE steps down automatically — variables.css's
       --vl-text-display overrides apply to .vl-contact__form-heading and
       .vl-page-hero__title alike; nothing to declare for that.
       The heading's GAP does need declaring: 40px here, matching the sitewide
       mobile heading→content gap (gallery-carousel.css:363,
       plot-floorplans.css:234, both stepping their own 70px desktop read down
       to 40). Liam suggested 50 for tablet AND mobile; 50 is right at tablet
       (below), but at mobile the display token is only 34px, so a 50px gap
       reads disproportionate to the heading above it — and every other
       section on the site uses 40 here. Flagged for his call. */
    .vl-contact__form-heading {
        margin-bottom: 40px;
    }
}