/* About page — value cards and the Previous projects band.
   Spec §7. Figma frame 38:1227.

   Pixel reads:
     values band   38:1586 "Rectangle 38", fill #32383b = --vl-ink exactly
                     → stays INK. It was briefly Vivly green (2026-08-25) on a
                       reading of the client's request that put the colour on
                       the band; reverted 2026-09-07 — Liam confirmed it is the
                       CARDS that are green, which is what the first deploy did.
                       The cream heading/lead therefore stay too: cream is
                       ~2.6:1 on that green (fails AA) but reads correctly on
                       this ink, which is why the band could not simply take
                       the colour.
     value card    38:1589/1590/1591, 513×225 at x160/703/1246 y1582
                     → 513×3 + 30×2 = 1599 ≈ the 1600 container: 30px gaps,
                       expressed as 1fr tracks
                     → cornflower fill (CHANGED 2026-08-25 to Vivly green
                       #00b388 at the client's request — the node read is
                       kept above as the design's own value), 2px ink
                       border, 20px radius,
                       30px padding (513 − 453 body width) / 2 = 30
     card title    65:2837 etc. 40px/44 SemiBold black, CENTRED — and here the
                     centring is REAL: each title's horizontal centre matches
                     its card's (416.5 / 959.5 / 1502.5). Contrast the contact
                     card, where Figma's text-center on an auto-width box was a
                     no-op. → --vl-text-value (40px), the token created from
                     node 39:1910, one of these very cards.
     card body     38:1603 etc. 18/22 Regular black, centred, 453px wide
     title→body    20px (card top 1582 → title 1621 = 39; title bottom 1665 →
                     body 1685 = 20)
     NOTE the frame's three titles sit at y1621/1627/1633 and bodies at
     1685/1696/1702 — drifted by up to 12px. NORMALISED to equal here.

     No min-height (Liam live review 2026-07-30 — the node's 225px was kept as
     a min-height at build, but short copy left a void under the text, worst
     at tablet where the full-width card wraps to few lines). Cards hug their
     content; on desktop the grid's default stretch still equalises all three
     in the row to the tallest. */

.vl-values {
    /* The node's ink. Do NOT move --vl-green here: that was tried on
       2026-08-25 and reverted on 2026-09-07 — the green belongs on the CARDS
       below, and this band's cream type depends on the dark fill (see the file
       header for the contrast figures). */
    background: var(--vl-ink);
    padding-block: 100px;
}

.vl-values__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vl-values__card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 2px solid var(--vl-ink);
    border-radius: 20px;
    background: var(--vl-green); /* Client request via Liam, 2026-08-25, and
                                    re-confirmed by him 2026-09-07 after a
                                    week on the band instead — the cards are
                                    the green surface. The Figma node fills
                                    these cornflower (see the file header).
                                    Black card type is unchanged and reads
                                    7.8:1 on this green. */
    text-align: center;
}

.vl-values__title {
    margin: 0 0 20px;
    color: var(--vl-black);
    font-size: var(--vl-text-value);
    font-weight: var(--vl-weight-semibold);
    line-height: 1.1; /* node 40/44 = 1.1; ratio so it tracks the 34px/28px steps */
    /* --vl-text-value holds at 40px down to 1025px, where each card's inner
       width is only ~224px (~11 characters at 40px) — a longer single word
       (e.g. "Sustainability") would paint straight out over the ink band
       with nothing in this theme to wrap it otherwise (cold review Fix 3). */
    overflow-wrap: break-word;
}

.vl-values__body {
    color: var(--vl-black);
    font-size: var(--vl-text-body);
    line-height: 22px;
}

/* The "As individual as you" heading is --vl-ink, not black (node 38:1644) —
   the only feature-row heading on either page that is. */
.vl-feature--about-individual .vl-feature__heading {
    color: var(--vl-ink);
}

/* ── Previous projects — cornflower band (node 65:2853, #a5bafa = the
   --vl-cornflower token; the older 38:1646 rect beneath it is superseded).
   Tile geometry, carousel and dots all come from gallery-carousel.css —
   About's tiles are pixel-identical to the plot page's. Only the band colour
   and the year lozenge are About's own. */

.vl-projects {
    background: var(--vl-cornflower);
    padding-block: 100px;
}

/* Year lozenge — construction copied verbatim from
   dev-plots.css .vl-plot-card__badge--sold (position/height/radius/shadow/
   type), so the two badge families stay visually identical. Claire's Figma
   note: "About page — date lozenge in pink" (docs/build-plan.md:78).

   ONE deliberate difference: auto width with horizontal padding instead of
   the badge's fixed 100px, because "Spring 2021" must fit where "Sold" did. */
.vl-projects__year {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    height: 24px;
    padding-inline: 14px;
    border-radius: var(--vl-radius-pill);
    background: var(--vl-pink);
    color: var(--vl-white); /* the only badge family with white text — node-read */
    box-shadow: 4px 4px 4px rgba(50, 56, 59, 0.15); /* = --vl-ink at 15%, node shadow */
    font-size: var(--vl-text-badge);
    font-weight: var(--vl-weight-semibold);
    line-height: 16px;
    white-space: nowrap;
    pointer-events: none; /* the tile beneath opens the lightbox */
}

/* gallery-carousel.css's shared default (outline: 2px solid --vl-cornflower)
   is correct on the plot page's #f5f0e8 band, but is invisible here — this
   band (.vl-projects, above) is filled with that exact same cornflower, so a
   keyboard user tabbing through Previous projects would get NO visible focus
   indicator at all (WCAG 2.4.7). Override colour only, for this caller only
   (cold review Fix 2). */
.vl-projects .vl-gallery__dot:focus-visible {
    outline-color: var(--vl-ink);
}

/* ── Tablet + mobile. One column, not two: three cards in a two-column grid
   leaves an orphan, which reads worse than a clean stack. MUST stay below the
   base rules. ── */
@media (max-width: 1024px) {
    /* Tablet keeps the frame's 100px band padding — sitewide standard (Liam,
       2026-07-30): desktop AND tablet use the frame value, mobile is 60px. */
    .vl-values__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .vl-values__card {
        padding: 30px 20px; /* Liam live review 2026-07-30 (desktop keeps 30px all round) */
    }
}

/* ── Sticky Contact tab zone (CLAUDE.md rule): the tab appears where content
   begins and retires where it ends. --vl-sticky-wait = the FIRST section's
   padding-top (the heritage feature row, top of page), --vl-sticky-stop =
   the LAST section's padding-bottom ("As individual as you", also a feature
   row) — both feature-row.css's own padding-block (100px desktop+tablet,
   60px mobile — sitewide standard, Liam 2026-07-30), restated here as
   the zone's props. This block owns no layout of its own: the sticky zone
   is a page-level concern, not the feature row part's business, so About
   gets its own rule rather than sharing one with Buying (CLAUDE.md).

   Selector form verified against dev-listing.css/contact.css's own sticky-
   zone blocks (search "-php` suffix below is REQUIRED"): WP core's
   body_class() derives `page-template-` + sanitize_html_class(str_replace(
   '.', '-', get_page_template_slug())) — for template-about.php that is the
   doubled `page-template-template-about-php`, not `page-template-about-php`. */
body.page-template-template-about-php .vl-sticky-zone {
    --vl-sticky-wait: 100px;
    --vl-sticky-stop: 100px;
}

@media (max-width: 767px) {
    body.page-template-template-about-php .vl-sticky-zone {
        --vl-sticky-wait: 60px;
        --vl-sticky-stop: 60px;
    }
}