/* Shared feature row — Figma About 38:1567 + 38:1642, Buying 39:2749 + 39:2912.
   Spec §4.

   Pixel reads (all four instances agree):
     columns   750px + 100px gap + 750px = 1600 (the container exactly)
                 → expressed as 1fr/1fr, never fixed px (a 750px track cannot
                   shrink and overflows every viewport under ~1780px — the
                   lesson from the Contact page's 500px/1000px grid)
     image     750×500 (3:2), 20px radius
     heading   70px (--vl-text-display), tracking −1.75px at 70px
                 → letter-spacing: -0.025em so it tracks the 52px/34px
                   responsive sizes (same approach as dev-living.css:170)
                 → line-height 1, NOT the node's leading-[normal] (~88px):
                   sitewide big-heading rule (Liam, 2026-07-23)
     heading → body gap  frame read 25px (38:1569 → 38:1570); overridden to
                         --vl-gap-title-body (45px, Liam 2026-07-30)
     body      18/22 (--vl-text-body)

   Vertical centring is node-verified: on all four instances the image's
   vertical centre and the text block's vertical centre coincide to within
   half a pixel (e.g. About row 1: image 681–1181 centre 931, text 798–1065
   centre 931.5). */

.vl-feature {
    padding-block: 100px;
}

.vl-feature--band-ink {
    background: var(--vl-ink);
}

.vl-feature--band-cornflower {
    background: var(--vl-cornflower);
}

.vl-feature__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 100px;
    align-items: center; /* node: both columns vertically centred */
}

/* min-width 0 on both children: the body copy and the photo's intrinsic
   dimensions must never widen a track past its share. */
.vl-feature__cols > * {
    min-width: 0;
}

.vl-feature__heading {
    /* Was the frame's 25px read — Liam live review 2026-07-30: title→body
       gap is 45px sitewide (token: 45 desktop+tablet, 35 mobile). */
    margin: 0 0 var(--vl-gap-title-body);
    color: var(--vl-black);
    font-size: var(--vl-text-display);
    font-weight: var(--vl-weight-regular);
    line-height: 1;
    letter-spacing: -0.025em;
    /* --vl-text-display holds at 70px down to 1025px, where the text column
       is only ~412px (~11 characters at 70px) — same overflow risk as
       .vl-values__title in about.css, milder only because current copy
       happens to fit (cold review Fix 3). */
    overflow-wrap: break-word;
}

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

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

.vl-feature__body p {
    margin: 0 0 22px;
}

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

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

.vl-feature__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2; /* node 750×500 */
    object-fit: cover;
    border-radius: 20px;
}

/* Cream type on the ink band (nodes 39:2914 heading, 39:2915 body). */
.vl-feature--band-ink .vl-feature__heading,
.vl-feature--band-ink .vl-feature__body {
    color: var(--vl-cream);
}

/* ── Small desktop (1025–1280): the display token holds 70px but the text
   column is half the container (~420–580px) — short headings wrapped
   awkwardly (Liam sitewide ruling, 2026-07-31: display headings in
   HALF-WIDTH columns step to 52px, the tablet size, through this band;
   full-width centred headings keep 70). Same rule in home.css
   (testimonial) and plot-intro.css. ── */
@media (min-width: 1025px) and (max-width: 1280px) {
    .vl-feature__heading {
        font-size: 52px; /* = the token's own tablet step */
    }
}

/* ── Tablet + mobile: single column, source order (= visual order, because
   the part emits media first on image-left rows). MUST stay below the base
   rules — media queries add no specificity. ── */
@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.
       (Replaced the 4e build's 50px-at-≤1024 invention.) */
    .vl-feature__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 70px; /* stacked copy↔image — matches dev-living.css's tablet gap
                      (Liam, 2026-07-30: 70/50 is the sitewide stacked rhythm;
                      was briefly 80 earlier the same review) */
    }
}

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

    .vl-feature__cols {
        gap: 50px; /* the 80px is tablet-only, same split as dev-living.css */
    }
}

/* ── Brick pill CTA (Home rows, node 3:457/2:184: 200×40, radius 100,
   label 18 SemiBold cream; 50px under the body). Only renders when the
   caller passes BOTH cta args (Liam) — About/Buying never do. ── */
.vl-feature__cta {
    /* align-self is a guard for any flex text column (the since-removed
       flush variant's flex column stretched the pill to the full 750px
       track, Liam live review 2026-07-31). Inert in block context. */
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 40px;
    padding-inline: 25px;
    margin-top: 50px; /* body→CTA (nodes 3273→3323 / 3829→3879) */
    border-radius: var(--vl-radius-pill);
    background: var(--vl-brick);
    color: var(--vl-cream);
    font-size: var(--vl-text-nav);
    font-weight: var(--vl-weight-semibold);
    text-decoration: none;
    transition: background-color 0.2s ease; /* brick hover convention */
}

.vl-feature__cta:hover {
    background: var(--vl-brick-dark);
}

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

/* ── Slim band variant (Home row 2 — CORRECTED at Liam's live review
   2026-07-31, replacing the launch build's "flush" misread: node 2:151's
   Rectangle 24 is a 750×500 MASK BACKING at band height, not the photo.
   The real geometry per the node render: 500px ink band = 63px padding +
   750×375 photo (2:1, radius 20 — base rule's rounding stands) + 62px
   padding; text column vertically centred (the base grid's align-items:
   center already does this — no flex machinery needed). Type is WHITE here
   per nodes 2:152/2:191, unlike the Buying ink band's cream (39:2914). ── */
.vl-feature--slim {
    padding-block: 63px 62px; /* band 500 = 63 + 375 + 62 (nodes 2:148/2:190) */
}

/* Slim image ratio: 3:2 like every other feature image — Liam live review
   2026-07-31, superseding the node's 750×375 2:1 read (a 2/1 override
   briefly lived here). The base .vl-feature__img rule provides the 3/2;
   the band simply grows to ~625px, the 63/62 padding rhythm unchanged. */

.vl-feature--slim.vl-feature--band-ink .vl-feature__heading,
.vl-feature--slim.vl-feature--band-ink .vl-feature__body {
    color: var(--vl-white); /* nodes read pure white, not cream */
}

@media (max-width: 767px) {
    /* Must sit AFTER the base ≤767 rule in source? No — this block is later
       in the file, so it wins the (0,1,0) tie: slim keeps the sitewide 60px
       mobile band padding rather than its 63/62 desktop values. */
    .vl-feature--slim {
        padding-block: 60px;
    }
}