/* =========================================================
   About page — PDF p4 "Strategic Role" + p5 "Infrastructure
   Readiness Framework". Shared components live in site.css;
   this file only adds the page-specific role-layout grid.
   ========================================================= */


/* ---------- Strategic Role (PDF p4): lead top-right, then
   image | (body + card-grid) row underneath ---------- */
.role-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  grid-template-areas:
    ".      lead"
    "media  content";
  column-gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  row-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
  margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
}
.role-layout__lead { grid-area: lead; margin: 0; }
.role-layout__media { grid-area: media; margin: 0; border-radius: 2px; overflow: hidden; }
.role-layout__content { grid-area: content; }
.role-layout__content > .card-grid:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .role-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "media"
      "content";
    row-gap: 1.6rem;
  }
}