.groups-quick-links-dropdown-holder { margin-top: 0 !important; }
.group-item-buttons { clear: both; }

/* Explore Groups card redesign ("eg" = Explore Groups, page-scoped prefix) - deliberately new classes
   rather than touching .group-item/.group-left-item/.group-right-item/.group-username/.group-count/
   .group-type/.group-code in Site.css, since those are shared with GroupHome, Admin's Group Management,
   Group Boards, Group Settings, and Archived Questions. .group-item/.section-item/.top-color-section-
   item-bar (the outer card shell), .group-image, .link-button/.link-joingroup, .view-qr-code/
   .share-groupcode-btn, and .group-edit-btn-holder's icon-button look are all still reused as-is - only
   the inner layout (the old 25%/75% float split + "::before"-labeled field stack) is replaced. */

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

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

.eg-body { flex: 1 1 240px; min-width: 0; }
.eg-header { display: flex; align-items: center; gap: 8px; }
.eg-name { font-size: 18px; font-weight: 700; color: #34363E; color: var(--body-text-color); text-decoration: none !important; }
.eg-quicklinks { margin-left: auto; }

.eg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.eg-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: rgba(118, 107, 255, 0.15); color: #766BFF; color: var(--input-button-background-color); }
    .eg-badge[data-type="Personal"] { background: rgba(255, 107, 107, 0.15); color: #CB3333; }
.eg-badge-code { background: rgba(0, 166, 90, 0.15); color: #00A65A; text-transform: none; letter-spacing: normal; }

.eg-meta { font-size: 13px; opacity: 0.65; margin-top: 8px; margin-right: 15px; }

.eg-desc { font-size: 14px; opacity: 0.85; margin-top: 8px; word-break: break-word; }

.eg-actions { display: flex; align-items: center; flex-wrap: wrap; clear: both; padding-top: 10px; }
    .eg-actions .share-groupcode-btn { margin-left: auto; }

/* Below ~550px, side-by-side gets too cramped (avatar shrinking further, text squeezed into a narrow
   column) - stack the avatar above the content instead, with real spacing under it, rather than just
   shrinking everything to fit one row. flex-direction:column flips which axis "flex-basis"/"align-items"
   apply to - .eg-body's flex-basis:240px (a sensible minimum WIDTH for the row layout) becomes a forced
   minimum HEIGHT once stacked, which is what caused the tall card with empty space at the bottom; reset
   it to size by content instead, and stretch it to the card's full width. */
@media screen and (max-width: 640px) {
    .groups-quick-links-dropdown-holder { float: left !important; margin-left: 0 !important; margin-right: 15px; }
    .eg-avatar-holder { margin-bottom: 12px; margin-top: 10px; margin-left: 10px; width: 84px; height: 84px; }
    .eg-header { display: block; padding-top: 14px; }
    .group-item .group-name { float: none; clear: both; }
    .groups-quick-links-dropdown-holder { display: block !important; float: none !important; clear: both !important; margin-top: 10px !important; margin-bottom: 10px !important; }
    .eg-quicklinks { margin-left: 4px; }
    .eg-desc { padding-right: 15px; }
    #main-container .group-item.section-item .section-padding { padding: 0 0 10px 0 !important; }
}

@media screen and (max-width: 485px) {
    .group-item-buttons { display: block; padding-top: 10px !important; }
    .group-item .link-button.link-joingroup { width: 100% !important; }
}

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