/* Real legacy makes .memberBox cards equal-height per row via inline JS (post-render height
   measurement, Math.max() across each group of 3, see the now-removed memberbox-equalize.js
   attempt) -- explicitly rejected per developer instruction ("an equalize js is not acceptable").
   Rebuilt as true CSS Grid instead: grid's default align-items:stretch makes every card in a row
   equal height natively, no JS, no post-render measurement. .memberBox's real float/width/margin
   (content.css, verbatim legacy) are neutralized here since a grid item ignores float anyway but
   still carries the real width/margin unless overridden -- overridden explicitly for clarity, not
   left to rely on grid silently ignoring float.

   auto-fill/minmax (not a hardcoded repeat(3, ...)) gives a responsive column count instead of
   real legacy's separate fixed-3-then-mobile.css-override approach -- same uniform-grid look at
   normal widths, degrades cleanly instead of needing another breakpoint-specific hack. */
.memberGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
    gap: 1em;
    align-items: stretch;
}

.memberGrid > .memberBox {
    float: none;
    width: auto;
    margin: 0;
}

/* Real legacy (content.css) gives .highlightMember a fixed width: 74em, wide enough for the
   30%-info/65%-ad split beside it -- meaningless as a plain width on a CSS Grid item, which is
   constrained to its own column track regardless. grid-column: 1 / -1 is the real equivalent
   here: an advertiser's card spans the full row instead of being squeezed into one ~22em column,
   giving the 30/65 split enough real room to actually show the ad legibly. */
.memberGrid > .memberBox.highlightMember {
    grid-column: 1 / -1;
    width: auto;
}