/* ==========================================================================
   About page (/about)
   --------------------------------------------------------------------------
   Built on the shared info-page pattern: breadcrumb, the .ph header from
   page-hero.css, then the .pol-* columns and .ip-* components from
   info-page.css, which loads before this file. Only what is particular to
   this page lives here.
   ========================================================================== */

/* Feature cards: icon and title share a row, the text runs full width
   below, so six cards stay compact in the content column */
.ab .ip-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    align-content: start;
    gap: 10px 12px;
}
.ab .ip-card .ip-card__icon { grid-column: 1; margin: 0; }
.ab .ip-card .ip-card__title { grid-column: 2; }
.ab .ip-card .ip-card__text { grid-column: 1 / -1; }

/* Team: the portraits are illustrations with the name drawn in, so they
   get a larger frame than the shared 64px, with the text beside them */
.ab .ip-member {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
        "avatar name"
        "avatar role"
        "avatar text";
    align-content: center;
    column-gap: 18px;
}
.ab .ip-member .ip-member__avatar { width: 112px; height: 112px; }
.ab .ip-member .ip-member__text { margin-top: 8px; }

/* Call to action: three buttons do not fit beside the text in the content
   column, so the band stacks here as the shared one does on tablets */
.ab .ip-cta { grid-template-columns: minmax(0, 1fr); scroll-margin-top: 130px; }
.ab .ip-cta > .ip-cta__body,
.ab .ip-cta > .ip-cta__actions { grid-column: 1; grid-row: auto; }
.ab .ip-cta .ip-cta__actions { justify-content: flex-start; margin-top: 12px; }

@media (max-width: 560px) {
    /* Phones: name and role beside the portrait, the text below both */
    .ab .ip-member {
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-areas:
            "avatar name"
            "avatar role"
            "text   text";
        column-gap: 14px;
    }
    .ab .ip-member .ip-member__avatar { width: 88px; height: 88px; }
    .ab .ip-member .ip-member__text { margin-top: 12px; }
}