/* ==========================================================================
   Homepage "bridge" prototype (home-bridge.html only). Loaded after proto.css
   and scoped under .bridge. It keeps the spacing scale, ruled numbers and
   native-proportion images from proto.css and adds what the inspiration board
   and Emil's guidelines point at:

   - a hierarchical 12-column grid (cards take 3, 4 or 6 columns by weight)
   - colour as flat blocks: a red manifesto panel, a yellow open-call panel
   - dotted rules (the board's dot-matrix grid posters)
   - centred captions on the grid, as in Emil's website page
   ========================================================================== */
.bridge .phead { border-top: 2px dotted var(--black); }

/* ---- hierarchical grid ---- */
.bridge .bgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s2);
  row-gap: var(--s4);
  align-items: start;
}
.bridge .span-3 { grid-column: span 3; }
.bridge .span-4 { grid-column: span 4; }
.bridge .span-6 { grid-column: span 6; }
.bridge .bgrid > :nth-child(3) { margin-top: var(--s4); }
.bridge .bgrid > :nth-child(4) { margin-top: var(--s3); }
.bridge .bgrid > :nth-child(6) { margin-top: var(--s4); }
.bridge .bgrid > :nth-child(8) { margin-top: var(--s3); }
.bridge .bgrid.is-flat > * { margin-top: 0; }

/* centred captions under the image; number and section stay at the edges */
.bridge .pcard .card-title,
.bridge .pcard .card-excerpt,
.bridge .pcard .badge-open-call { text-align: center; }
.bridge .pcard .badge-open-call { display: table; margin-inline: auto; margin-bottom: var(--s1); }
.bridge .pcard .card-title { text-transform: uppercase; }
.bridge .span-6 .card-title { font-size: 1.5rem; }
.bridge .span-6 .card-excerpt { font-size: 1rem; max-width: 52ch; margin-inline: auto; }

/* ---- colour as flat blocks ---- */
.bridge .bpanel { padding-block: var(--s5); margin-top: var(--s5); }
.bridge .bpanel .phead { margin-top: 0; }

.bridge .bpanel--red { background: var(--accent); color: var(--accent-ink); margin-top: 0; padding-block: var(--s4); }
.bridge .bpanel--red .manifesto { padding-block: 0; }
.bridge .bpanel--red .manifesto-list,
.bridge .bpanel--red .manifesto-list li { border-color: var(--accent-ink); }
.bridge .bpanel--red .manifesto-list .idx { color: var(--accent-ink); opacity: 0.8; }
.bridge .bpanel--red .manifesto-copy { color: var(--accent-ink); }
.bridge .bpanel--red .text-link { color: var(--accent-ink); border-color: var(--accent-ink); }

/* Yellow stays reserved for the open call and is never mixed with red. */
.bridge .bpanel--yellow { background: var(--accent-open-call); color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow .phead { border-top-color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow .phead-no,
.bridge .bpanel--yellow .pcard-cat,
.bridge .bpanel--yellow .pcard-no { color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow .pcard-no { opacity: 0.7; }
.bridge .bpanel--yellow .pcard-cap { border-top-color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow .badge-open-call { display: none; }
.bridge .bpanel--yellow .card-excerpt,
.bridge .bpanel--yellow .body-copy p { color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow .text-link { color: var(--accent-open-call-ink); border-color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow .split { padding-block: 0 var(--s4); }
.bridge .bpanel--yellow .eyebrow { color: var(--accent-open-call-ink); }
.bridge .bpanel--yellow h2 { font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 0.95; margin-top: 14px; }

.bridge .themes { margin-top: 0; }

@media (max-width: 900px) {
  .bridge .bgrid { grid-template-columns: repeat(2, 1fr); row-gap: var(--s3); }
  .bridge .span-6 { grid-column: 1 / -1; }
  .bridge .span-3, .bridge .span-4 { grid-column: span 1; }
  .bridge .bgrid > * { margin-top: 0; }
  .bridge .bgrid > :nth-child(odd):not(.span-6) { margin-top: 0; }
  .bridge .bgrid > :nth-child(2n):not(.span-6) { margin-top: var(--s3); }
  .bridge .bpanel { padding-block: var(--s4); margin-top: var(--s4); }
}