/* project_proof.css — real delivered-work evidence.

   The credibility layer of the Signal & Systems design: real ProManaged client
   deliverables (approved for public naming) presented as visual proof inside the
   existing bento system. Photographic captures of the PUBLIC customer-facing
   sites — never admin screens, never customer records, never login surfaces.

   BUILT ON .block, NOT BESIDE IT. A proof card is a `.block` with an extra class,
   which means it already inherits the twelve-column spans, the surface tokens, the
   focus ring and the Building Blocks reveal, because js/main.js animates
   `.grid > .block`. Nothing here needs a new JS hook.

   MOBILE FIRST: one column, shorter wells; wider viewports earn taller wells. Same
   tokens, same radii, same ink as every other chapter. */

/* ---------- Shot wells ----------
   Fixed aspect ratios rather than fixed heights, so a card spanning five columns
   and one spanning eight both keep a deliberate proportion. The ratios match the
   native captures so object-fit:cover trims nothing that matters. */
.proof-shot {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    background: var(--color-stone);
}

.proof-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Public hero captures: 1425x900 (Rosalyn's) and 1425x800 (Liwonde). */
.proof-shot--hero { aspect-ratio: 16 / 10 }
/* The live booking widget (1241x467) and the room-availability view (1393x576):
   both are wide feature strips, so one well covers both with a near-native crop. */
.proof-shot--feature { aspect-ratio: 12 / 5 }

/* Letterbox caps, the same device .evidence-media uses: a fixed ratio can invent an
   ever-taller box as a card widens, so the well is capped while the image fills it. */
@media (min-width: 900px) {
    .proof-shot--hero { max-height: 430px }
    .proof-shot--feature { max-height: 340px }
}

@media (min-width: 1440px) {
    .proof-shot--hero { max-height: 480px }
    .proof-shot--feature { max-height: 380px }
}

/* ---------- Delivery tag ----------
   The visible distinction between real delivered work and illustrative UI:
   a factual chip that says what the card actually is. Same construction as the
   project tag on the software page, defined here so every page can carry it. */
.proof-tag {
    display: inline-block;
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    background: var(--color-accent-earth-soft);
    color: var(--color-accent-earth-hover);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    border-radius: var(--radius-full);
}

.block--graphite .proof-tag,
.block--graphite-soft .proof-tag,
.block--earth .proof-tag {
    background: rgba(247, 243, 236, 0.16);
    color: var(--color-text-on-dark);
}

/* ---------- Surface: a softer graphite card inside graphite chapters ----------
   The proof chapter sits on a graphite section; a second, slightly lifted
   graphite surface keeps card variation without introducing a new colour (the
   token already exists). Same text treatment as .block--graphite. */
.block--graphite-soft {
    background: var(--color-graphite-soft);
    border-color: transparent;
    color: var(--color-text-on-dark);
}

.block--graphite-soft p,
.block--graphite-soft li,
.block--graphite-soft .list li { color: var(--color-text-on-dark-muted) }
.block--graphite-soft h2,
.block--graphite-soft h3,
.block--graphite-soft h4 { color: var(--color-text-on-dark) }
.block--graphite-soft .list li::before { background: var(--color-accent-earth-soft) }

/* ---------- Cards ---------- */
/* A proof card is a .block that devotes its torso to a shot and closes on copy.
   In a stacked card the gap echoes .evidence-card so the two systems sit beside
   each other without rhythm drift; a row card keeps the shared .block--row gap. */
.proof-card {
    overflow: hidden;
}

.proof-card:not(.block--row) {
    gap: var(--space-5);
}

.proof-copy { display: flex; flex-direction: column; gap: var(--space-2) }
.proof-copy h3 { margin: 0 }
.proof-copy p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted) }
.block--graphite .proof-copy p,
.block--graphite-soft .proof-copy p,
.block--earth .proof-copy p { color: var(--color-text-on-dark-muted) }

@media (min-width: 900px) {
    .proof-copy p { font-size: var(--text-base) }
}

/* Links inside a graphite chapter's caption rail: the stock brand blue is too
   dark against graphite, so the rail uses the chapter's own quiet ink instead. */
.section--graphite .evidence-rail a {
    color: var(--color-text-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Row banners: the evidence shot rides in the aside beside the copy. The shot
   needs its own width in the flex row — otherwise the aspect ratio has nothing
   to measure against. The headline takes the display face, the same treatment
   every dominant .block--row banner on the site already gets. */
.block--row.proof-card h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--display-3);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
}

/* The banner rows need their aside constrained, or the shot claims the whole card
   and the copy column collapses. A share of the card, not a viewport share, so the
   copy keeps a readable measure at every rail width. */
@media (min-width: 900px) {
    .block--row.proof-card > .block__aside {
        width: 44%;
    }
}

/* ---------- The lead beat ----------
   BUILD_PLAN §2B asks the homepage proof chapter to open on ONE image and one brand
   line. With no supporting paragraph to carry it, that line has to be the display
   face or the card reads as a caption under a photograph rather than as the chapter's
   statement. */
.proof-card--lead .proof-copy h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--display-3);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
}

/* Once these cards sit SIDE BY SIDE, `.grid`'s stretch alignment gives them a shared
   height that neither one's content asked for. Left on a fixed aspect ratio the wells
   go wrong in both directions: the lead (one brand line) strands dead space under its
   image, and the supporting card's paragraph pushes past the shared height and
   SHRINKS its well instead — measured at 900px, the supporting shot collapsed to
   120px against the lead's 380px, which crops a 1425x800 hero to a letterbox strip.

   So the wells absorb the difference rather than the copy fighting them: each grows
   into whatever slack its card has (`flex-grow: 1`) and none may be compressed below
   its floor (`flex-shrink: 0`). The image already fills the well via height:100% +
   object-fit:cover, so the extra height crops rather than distorts.

   Only from 900px. Below that the cards are stacked and full width, nothing is being
   stretched, and the native ratio is the right shape. */
@media (min-width: 900px) {
    #proof .proof-card .proof-shot--hero {
        flex: 1 0 auto;
        aspect-ratio: auto;
        min-height: 260px;
        max-height: none;
    }

    /* The lead beat carries the larger image; it is the chapter's first statement. */
    #proof .proof-card--lead .proof-shot--hero { min-height: 380px }
}

/* ---------- Tablet art direction for the homepage chapter ----------
   The shared tablet stage puts .block--8 across the row and .block--4 into a half
   row, which in a three-block chapter leaves the second card sitting beside nothing.
   Every block here takes the full row instead, so the tablet reads as a deliberate
   vertical sequence rather than a grid with a hole in it. */
@media (min-width: 600px) and (max-width: 899px) {
    #proof .grid > .block { grid-column: 1 / -1 }
}

/* ---------- Compact proof strip (get-started / learn-more) ----------
   A small evidence moment before a conversion point: copy, one genuine interface
   shot and a CTA. One intake-sized card rather than a full chapter, because it must
   never compete with the conversion surface that follows it. Its children register
   with the shared motion system via `.proof-strip > *` in js/main.js. */
.proof-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6);
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.proof-strip-copy h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-2xl);
}

.proof-strip-copy p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.proof-strip-action { display: flex; }

@media (min-width: 900px) {
    .proof-strip {
        grid-template-columns: minmax(0, 4.5fr) minmax(0, 6fr) auto;
        gap: var(--space-10);
        padding: var(--space-8);
    }

    .proof-strip-copy h3 { font-size: var(--text-3xl) }
    .proof-strip-copy p { font-size: var(--text-base) }
}