/* Pathway grid — SINGLE SOURCE. tools/build-pathway-grid.py writes this file into a marked "GENERATED pathway-grid css" region in of every consumer and the grid itself into the host section (pathway-grid.json). The copy in a page is never edited by hand. A grid of DISTINCT, NON-SEQUENTIAL routes or categories (visa routes, eligibility pathways, who-a-service-is-for). Cards are informational: no hover lift, no border change, no focus ring unless the card carries a real link. No numbers unless the grid declares showStepNumber for a genuinely ordered workflow. Media is a compact landscape strip above the copy; a card without an approved image is the text variant — same border, same body, no empty media box. Dark is the base (every page's :root is dark); light hangs off :root[data-theme="light"]. */ .pg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; --pg-media-h: 145px; } .pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; --pg-media-h: 128px; } .pg-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card, var(--surface)); overflow: hidden; } .pg-media { margin: 0; position: relative; height: var(--pg-media-h); overflow: hidden; isolation: isolate; background: var(--bg-2, var(--surface)); } .pg-media-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pg-pos, center center); filter: saturate(0.62) contrast(0.9) brightness(0.74); } .pg-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,10,11,.02), rgba(8,10,11,.16)); } :root[data-theme="light"] .pg-media-img { filter: saturate(0.74) contrast(0.94) brightness(1.02); } :root[data-theme="light"] .pg-media::after { background: linear-gradient(180deg, rgba(248,246,239,.02), rgba(248,246,239,.10)); } .pg-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1 1 auto; } .pg-grid--4 .pg-body { padding: 18px 18px 20px; } /* 2026-09-06: 18 / 18 / 20 on four-column cards (About brief band 18–20 / 18–20 / 20–24) */ .pg-step { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); } .pg-card h3 { margin: 0; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; color: var(--text); } .pg-card h3 a { color: inherit; text-decoration: none; } .pg-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } .pg-card h3 a:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 3px; border-radius: 4px; } .pg-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .pg-evidence { margin: auto 20px 0; padding: 12px 0 20px; border-top: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.55; color: var(--muted); } .pg-grid--4 .pg-evidence { margin-inline: 18px; } .pg-evidence b { display: block; font-weight: 500; color: var(--text); margin-bottom: 2px; } .pg-grid--evidence .pg-body { padding-bottom: 14px; } /* evidence grid (2026-09-08, owner brief): every card is a subgrid of the row — media · summary (title + description) · evidence — so the three tracks are sized by the tallest card in the row and the divider above "Typical evidence" sits on ONE horizontal line across the row. No per-card heights, no spacers: the row derives the shared summary height from its own content, so a two-line title simply uses more of it. Single-column (mobile) rows hold one card, so each card flows naturally. */ .pg-grid--evidence .pg-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } .pg-grid--evidence .pg-body { flex: initial; } /* a phrase the intro must not strand across a line break (2026-09-07) */ .pg-note { margin: 22px 0 0; max-width: 72ch; color: var(--muted); font-size: 14px; line-height: 1.6; } .pg-cta { margin-top: 24px; } @media (max-width: 1000px) { .pg-grid--4, .pg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); --pg-media-h: 140px; } } @media (max-width: 640px) { .pg-grid, .pg-grid--4, .pg-grid--3 { grid-template-columns: 1fr; gap: 14px; --pg-media-h: 150px; } .pg-body { padding: 16px 18px 18px; } } /* closing row (2026-09-06): note left, CTA right-aligned to the grid's right edge, centred against the note; stacked under 720px */ .pg-close { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 32px; } .pg-close .pg-note { margin: 0; max-width: 62ch; } .pg-close .pg-cta { margin: 0; flex: none; } @media (max-width: 720px) { .pg-close { flex-direction: column; align-items: flex-start; gap: 22px; } }