/* GroupBoards card redesign ("gb" = Group Boards, page-scoped prefix) - same approach as the Explore
   Groups redesign: new classes only, no changes to the shared .group-item/.group-left-item/
   .group-right-item/.group-name/.group-desc family in Site.css, since those are also rendered by
   Explore Groups, GroupHome, Admin's Group Management, Group Settings, and Archived Questions. The
   outer .group-item.section-item.archived-item shell (including the whole-card clickable/hover
   behavior) and .group-image are still reused as-is - only the inner layout changes. */

.gb-card { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.gb-avatar-holder { flex: 0 0 auto; width: 76px; height: 76px; }
.gb-avatar { display: block; width: 100%; height: 100%; }

.gb-body { flex: 1 1 240px; min-width: 0; }
.gb-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gb-name { font-size: 18px; font-weight: 700; color: #34363E; color: var(--body-text-color); }
.gb-last-post-date { margin-left: auto; font-size: 12px; opacity: 0.6; white-space: nowrap; }

.gb-meta { font-size: 13px; opacity: 0.65; margin-top: 6px; }

.gb-preview { font-size: 13px; opacity: 0.85; margin-top: 8px; word-break: break-word; }

/* Below ~640px, side-by-side gets too cramped - rather than forcing a full column stack (which fights
   the shared .group-item.section-item .section-padding rule below and flex-basis/align-items axis
   flips), let the row wrap: the avatar drops to its own line via flex-wrap, sized up a bit and nudged
   with margin, and the header collapses to block so the name/date always stack under it. */
@media screen and (max-width: 640px) {
    /* Site.css zeroes out .section-padding's top/left/right padding at this width for the OLD
       .group-left-item/.group-right-item float layout, which compensated with its own padding.
       Keep it mostly zeroed and compensate with margins on the inner pieces instead, matching the
       site's existing convention rather than restoring the full padding. */
    #main-container .group-item.section-item .section-padding { padding: 0 0 10px 0 !important; }
    .gb-avatar-holder { margin-bottom: 12px; margin-top: 10px; margin-left: 10px; width: 84px; height: 84px; }
    .gb-header { display: block; padding-top: 14px; }
    .gb-last-post-date { margin-left: 0; }
}

@media screen and (max-width: 440px) {
    .gb-card { display: block; }
    .gb-avatar-holder { display: block; clear: both; flex: none; }
    .gb-body { display: block; clear: both; padding-left: 15px; flex: none; }
    .gb-header { padding-top: 0; }
}