/* Shared resource and city knowledge-graph lanes. */
/* ── The knowledge-graph block ──────────────────────────────────────
   Branded once, at the top. Below it every relation the graph holds
   for this page is a lane hanging off a hairline spine, each lane
   marked by a node where it meets it. That is the whole device: one
   node, its edges, what sits at the end of each. It stays legible at
   two lanes and at six, so people, news and a personal feed can be
   added later without a second badge or a redesign.

   Subtlety is the point — the spine is --border-light, the nodes are
   --eyebrow at 15px, and nothing here competes with the analysis it
   sits under. */
.kg { max-width: 1180px; margin: 3rem auto 0; padding: 2rem 2rem 0; border-top: 1px solid var(--border-light); }
.kg[hidden] { display: none; }
.kg-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.6rem;
    margin-bottom: 0;
}
.kg-mark { display: inline-flex; color: var(--eyebrow); }
.kg-mark svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.kg-mark svg circle { fill: currentColor; stroke: none; }
.kg-title {
    font-family: var(--font-display);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--eyebrow); margin: 0;
}
/* The sentence sits under the label, aligned to it rather than to the
   mark, so the mark reads as the block's sigil and not as a bullet. */
.kg-sub {
    grid-column: 2; grid-row: 2;
    margin: 0.15rem 0 0;
    font-size: 0.95rem; color: var(--text-light); line-height: 1.4;
}

/* The spine. Lanes are indented past it; each lane head puts a node on
   it. One border does the whole drawing. */
/* margin-left puts the spine under the centre of the mark above it, so
   the lanes read as edges descending from that one node. */
.kg-lanes {
    border-left: 1px solid var(--border-light);
    padding-left: 1.75rem;
    /* The spine runs up through this padding to just under the header,
       so it descends from the mark rather than starting in mid-air. */
    padding-top: 1.5rem;
    margin-left: 0.47rem;
}
.kg-lane { position: relative; padding-bottom: 2.25rem; }
.kg-lane[hidden] { display: none; }
.kg-lane:last-child { padding-bottom: 0; }
.kg-lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.kg-lane-head h3 {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; margin: 0;
}
/* The node: a filled dot centred on the spine, level with the heading.
   Ringed in the page background so the spine appears to pass behind it
   rather than through it. */
.kg-lane-head::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: 0.72rem;
    width: 7px; height: 7px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--eyebrow);
    /* Ringed in the page's own canvas so the spine reads as passing
       behind the node. --chart-canvas is what this page paints. */
    box-shadow: 0 0 0 4px var(--kg-canvas, var(--chart-canvas));
}
@media (max-width: 720px) {
    .kg { padding: 1.5rem 1.1rem 0; }
    .kg-lanes { padding-left: 1.15rem; margin-left: 0.2rem; }
    .kg-lane-head::before { left: -1.15rem; top: 0.6rem; }
    .kg-lane-head h3 { font-size: 1.25rem; }
    /* Side by side, the "see all" link squeezed the heading into three
       lines. Stack them. */
    .kg-lane-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-bottom: 0.9rem; }
}
.related-all { color: var(--blue-ink, var(--blue)); text-decoration: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.related-all:hover { text-decoration: underline; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.rc-card {
    display: flex; flex-direction: column; text-decoration: none;
    border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden;
    background: var(--navy); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rc-card:hover { border-color: var(--border-mid); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Thumbnail backdrop is the card's own surface (var(--navy): a light
   tile in light mode, a raised navy panel in dark) — NOT --chart-canvas.
   Most chart artifacts paint a transparent body (they inherit their
   host's canvas on the real /resources/<id>/ page), so in this rail the
   backdrop shows straight through the preview iframe. Backing it with the
   card surface makes every thumbnail read as one clean, opaque panel
   instead of the page's --chart-canvas tint, flush with the title strip
   below in both themes. */
.rc-preview { position: relative; height: 172px; overflow: hidden; background: var(--navy); border-bottom: 1px solid var(--border-light); }
.rc-preview iframe {
    position: absolute; top: 0; left: 0;
    width: 320%; height: 320%; border: 0;
    transform: scale(0.3125); transform-origin: top left;
    pointer-events: none;
}
.rc-title { padding: 0.85rem 0.95rem; font-size: 0.92rem; font-weight: 600; color: var(--white); line-height: 1.3; }
/* Cards for graph neighbours the charts manifest has no preview for
   (reports, hub pages): a committed thumbnail when the catalog carries
   one, otherwise the kind word on the card surface. */
.rc-preview--flat { display: flex; align-items: center; justify-content: center; }
/* contain, not cover: a report's thumbnail is its cover card, and the
   cover carries the headline and the partner logos as pixels. It is
   768x431 against a tile nearer 4:3, so cover ate a third of the width
   and sliced the sentence ("The UK has become the world's ...test tech
   hub"). The whole card, on the card surface, reads. */
.rc-preview--flat img { width: 100%; height: 100%; object-fit: contain; }
.rc-preview picture { display: block; width: 100%; height: 100%; background: var(--chart-canvas); }
.rc-preview picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rc-flat-kind { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-lighter); }

/* City profile canvas and existing data cards, inside the same graph lanes. */
.kg-location { --kg-canvas: var(--navy); max-width: 1140px; }
.kg-location .kg-lane-head h3 { color: var(--white); }
.kg-location .rdr-all { font-size: 0.85rem; }
@media (max-width: 720px) {
    .kg-location .related-grid, .kg-location .rdr-grid { grid-template-columns: minmax(0, 1fr); }
}