/*
 * GameTecX SOCIAL — the hub landing (feed + friends + chats + activity).
 *
 * A social-media three-column grid: friends/profile rail (left), the feed (center),
 * chats/activity rail (right). Collapses to one column below lg. Tokens-only, theme-
 * aware (dark + data-theme="light"). Reuses gtx-card/gtx-btn; adds only social-scoped
 * pieces (avatar, feed post, compact lists, conversation rows) plus a --xs button size.
 */

.gtx-social {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    gap: var(--gtx-s5);
    align-items: start;
}

.gtx-social__side,
.gtx-social__aside {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s4);
    position: sticky;
    top: 76px; /* clear the sticky top navbar */
}

.gtx-social__main {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s4);
    min-width: 0;
}

/* --- Avatar (initial medallion) --- */
.gtx-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-accent-soft);
    color: var(--gtx-accent);
    font-weight: 700;
    font-size: var(--gtx-fs-ui);
    text-transform: uppercase;
    line-height: 1;
}

.gtx-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: var(--gtx-fs-h2);
}

/* Identity foundation (Wave A): additional size steps + real-image + presence dot.
   A rendered avatar keeps the .gtx-avatar box (border-radius, size) and fills it with
   the picture; the medallion fallback is unchanged. */
.gtx-avatar {
    position: relative;
    overflow: hidden;
}

.gtx-avatar--t {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
}

.gtx-avatar--sm {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.gtx-avatar--xl {
    width: 96px;
    height: 96px;
    font-size: var(--gtx-fs-h1, 2rem);
}

.gtx-avatar--img {
    background: var(--gtx-surface-2, var(--gtx-chrome));
}

.gtx-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}

/* The presence dot must escape the (clipped) avatar box, so allow overflow when it is
   present. */
.gtx-avatar:has(.gtx-avatar__presence) {
    overflow: visible;
}

.gtx-avatar__presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-idle, #9ca3af);
    border: 2px solid var(--gtx-chrome);
}

.gtx-avatar__presence.is-online {
    background: var(--gtx-ok, #34d399);
}

/* --- Profile page (identity foundation, Wave A) --- */
.gtx-profile__head {
    display: flex;
    align-items: center;
    gap: var(--gtx-s4);
    flex-wrap: wrap;
}

.gtx-profile__ident {
    flex: 1 1 12rem;
    min-width: 0;
}

.gtx-profile__name {
    margin: 0;
    font-family: var(--gtx-font-display);
    font-weight: 700;
}

.gtx-profile__presence {
    margin-top: var(--gtx-s1);
}

.gtx-profile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s3);
    margin-top: var(--gtx-s2);
    font-size: var(--gtx-fs-ui);
}

.gtx-profile__bio {
    border-top: 1px solid var(--gtx-border);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Instagram-like post grid: square tiles, image-cover, title overlay fallback. */
.gtx-postgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--gtx-s2);
}

.gtx-postgrid__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--gtx-r-md, 8px);
    background: var(--gtx-surface-2, var(--gtx-chrome));
    border: 1px solid var(--gtx-border);
    text-decoration: none;
    color: var(--gtx-text);
}

.gtx-postgrid__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gtx-postgrid__title {
    position: relative;
    width: 100%;
    padding: var(--gtx-s2);
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* When there is no cover image, the tile has no dark image behind the title — keep the
   title legible on the surface background. */
.gtx-postgrid__link:not(:has(.gtx-postgrid__img)) .gtx-postgrid__title {
    background: none;
    color: var(--gtx-text);
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* --- Left profile card --- */
.gtx-social-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gtx-s2);
    text-align: center;
}

.gtx-social-profile__name {
    font-family: var(--gtx-font-display);
    font-weight: 700;
    font-size: var(--gtx-fs-h3);
    color: var(--gtx-text);
}

.gtx-social-profile__stats {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
}

.gtx-social-profile__stats strong {
    color: var(--gtx-text);
}

/* --- Generic side blocks --- */
.gtx-social-block__title {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    margin: 0 0 var(--gtx-s3);
    font-size: var(--gtx-fs-h3);
}

.gtx-social-block__cta {
    width: 100%;
    justify-content: center;
}

.gtx-count {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
}

.gtx-count--accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-accent);
    color: var(--gtx-on-accent, #fff);
    font-size: 11px;
    font-weight: 700;
}

/* --- Compact people/list rows --- */
.gtx-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s1);
}

.gtx-social-list__item {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s1) var(--gtx-s1);
    border-radius: var(--gtx-r-s);
}

.gtx-social-list__item:hover {
    background: var(--gtx-surface-hover);
}

.gtx-social-list__label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--gtx-text);
}

.gtx-social-list__actions {
    display: inline-flex;
    gap: var(--gtx-s1);
    flex: 0 0 auto;
}

.gtx-social-list__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--gtx-text-dim);
    padding: var(--gtx-s1);
    border-radius: var(--gtx-r-s);
}

.gtx-social-list__go:hover {
    color: var(--gtx-accent);
    background: var(--gtx-surface-hover);
}

/* --- Conversation rows (right rail) --- */
.gtx-conv__link {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
}

.gtx-conv__name {
    font-weight: 600;
    color: var(--gtx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtx-conv__preview {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtx-conv.is-unread .gtx-conv__name {
    color: var(--gtx-text);
}

.gtx-conv.is-unread .gtx-conv__preview {
    color: var(--gtx-text);
}

.gtx-conv__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-accent);
    color: var(--gtx-on-accent, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* --- Feed post card --- */
.gtx-feed-post {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s3);
}

.gtx-feed-post__head {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
}

.gtx-feed-post__author {
    font-weight: 700;
    color: var(--gtx-text);
}

.gtx-feed-post__meta {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
}

.gtx-feed-post__title {
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h3);
    font-weight: 700;
    color: var(--gtx-text);
    text-decoration: none;
    line-height: 1.25;
}

a.gtx-feed-post__title:hover {
    color: var(--gtx-accent);
}

.gtx-feed-post__body {
    margin: 0;
    color: var(--gtx-text-dim);
    line-height: 1.6;
    white-space: pre-wrap;
}

.gtx-feed-post__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gtx-s3);
    padding-top: var(--gtx-s2);
    border-top: 1px solid var(--gtx-line);
}

.gtx-feed-post__likes {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s1);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
}

/* --- Extra-small button (compact list actions) --- */
.gtx-btn--xs {
    padding: 2px var(--gtx-s2);
    font-size: var(--gtx-fs-meta);
    min-height: 26px;
}

/* --- Responsive: fold the rails below the feed --- */
@media (max-width: 1100px) {
    .gtx-social {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .gtx-social__side {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
    }

    .gtx-social__side > * {
        flex: 1 1 240px;
    }
}

@media (max-width: 820px) {
    .gtx-social {
        grid-template-columns: minmax(0, 1fr);
    }

    .gtx-social__aside {
        position: static;
    }
}