/* ============================================================
   社团 / 小组（/group/*）
   ------------------------------------------------------------
   风格：清爽学术风 —— 变量全部取自 theme.css，
        白底 + 1px 细线 + 单一品牌青，无渐变、无投影，hover 只改颜色
   作用域：全部规则限定在 .gp-page 内
   结构：页头 + 「我的小组 / 发现」切换条 → 卡片网格
        详情页 = 左信息栏（简介 / 成员数 / 加入方式 / 操作）+ 右作业与成员表
   ============================================================ */

.gp-page {
    padding: 22px 0 10px;
}

/* ---------------------------------------------------------------- 页头 */
.gp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}

.gp-title {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .2px;
}

.gp-sub {
    max-width: 700px;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--ink-3);
}

/* -------------------------------------------------------------- 切换条 */
.gp-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.gp-tab {
    display: inline-block;
    padding: 10px 14px 9px;
    font-size: 13px;
    color: var(--ink-3);
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.gp-tab:hover {
    color: var(--brand);
    text-decoration: none;
}

.gp-tab.is-active {
    color: var(--brand);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

.gp-tabs-count {
    margin-left: auto;
    padding-bottom: 9px;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 卡片网格 */
.gp-list,
.gp-list .list-view {
    margin: 0;
    padding: 0;
}

.gp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.gp-card {
    display: flex;
    flex-direction: column;
    min-height: 118px;
    padding: 16px 18px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: border-color .15s ease, background .15s ease;
}

.gp-card:hover {
    border-color: rgba(15, 92, 107, .45);
    background: #FCFDFC;
    text-decoration: none;
}

.gp-card-name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink);
    word-break: break-word;
}

.gp-card:hover .gp-card-name {
    color: var(--brand);
}

/* 简介最多三行，超出打点：小组简介经常是一整段话，不截断会把卡片撑成长短不一 */
.gp-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-3);
    word-break: break-word;
}

.gp-card-desc.is-empty {
    color: var(--muted);
    font-style: normal;
}

.gp-card-more {
    display: block;
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    color: var(--muted);
}

.gp-card:hover .gp-card-more {
    color: var(--brand);
}

.gp-empty {
    padding: 40px 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.gp-empty a {
    color: var(--brand);
}

.gp-empty.is-inline {
    padding: 20px 0;
    border: 0;
    background: transparent;
}

/* ============================================================ 邀请 / 申请页 */
.gp-solo {
    max-width: 720px;
    margin: 0 auto;
}

.gp-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.gp-cta-note {
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ============================================================ 详情页两栏 */
.gp-layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.gp-aside {
    flex: 0 0 320px;
    min-width: 0;
}

.gp-main {
    flex: 1 1 auto;
    min-width: 0;
}

.gp-box {
    padding: 18px 20px 20px;
    margin-bottom: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.gp-box-top {
    margin-bottom: 8px;
}

.gp-view-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    word-break: break-word;
}

/* 简介正文（markdown 渲染后是一堆裸标签） */
.gp-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink-2);
    word-break: break-word;
}

.gp-desc > :first-child {
    margin-top: 0;
}

.gp-desc > :last-child {
    margin-bottom: 0;
}

.gp-desc p {
    margin: 0 0 8px;
}

.gp-desc ul,
.gp-desc ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.gp-desc h1, .gp-desc h2, .gp-desc h3 {
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
}

.gp-desc code {
    padding: 1px 5px;
    font-size: 12px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 2px;
}

/* ------------------------------------------------------------ 属性列表 */
.gp-meta {
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--line-soft);
}

.gp-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.gp-meta-row dt {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

.gp-meta-row dd {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gp-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

/* ================================================================== 按钮 */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 13px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.gp-btn:hover,
.gp-btn:focus {
    color: var(--brand);
    border-color: var(--brand);
    text-decoration: none;
}

.gp-btn-primary {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.gp-btn-primary:hover,
.gp-btn-primary:focus {
    color: #fff;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.gp-btn-danger {
    color: var(--danger);
}

.gp-btn-danger:hover,
.gp-btn-danger:focus {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.gp-btn-block {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
}

.gp-btn-block:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------- 角色 / 状态小标 */
.gp-role,
.gp-role-chip,
.gp-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.gp-role.is-leader,
.gp-role-chip.is-leader {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: #CFE0DE;
}

.gp-role.is-manager,
.gp-role-chip.is-manager {
    color: var(--brand);
    background: var(--paper);
    border-color: rgba(15, 92, 107, .3);
}

.gp-role.is-member,
.gp-role-chip.is-member {
    color: var(--ink-3);
    background: #F2F4F2;
    border-color: var(--line);
}

.gp-role-chip.is-pending {
    color: var(--warn);
    background: #FBF4E8;
    border-color: #EEDFC4;
}

.gp-status.is-running {
    color: var(--ok);
    background: #F1F7EF;
    border-color: #D8E7D2;
}

.gp-status.is-pending {
    color: var(--warn);
    background: #FBF4E8;
    border-color: #EEDFC4;
}

.gp-status.is-ended {
    color: var(--ink-3);
    background: #F2F4F2;
    border-color: var(--line);
}

.gp-status.is-joined {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: #CFE0DE;
}

/* ================================================================ 区块 */
.gp-sec {
    padding-bottom: 16px;
}

.gp-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--line);
}

.gp-sec-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ink);
}

.gp-sec-note {
    font-size: 11.5px;
    color: var(--muted);
}

/* ================================================================== 表格 */
.gp-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-table {
    width: 100%;
    border-collapse: collapse;
}

.gp-table > thead > tr > th {
    padding: 9px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
}

.gp-table > tbody > tr > td {
    padding: 10px;
    font-size: 13px;
    color: var(--ink-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
}

.gp-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.gp-table > tbody > tr:hover > td {
    background: #FAFBFA;
}

.gp-table .c-status {
    width: 132px;
    white-space: nowrap;
}

.gp-table .c-time {
    width: 156px;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.gp-table .c-count {
    width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.gp-table .c-sep {
    margin: 0 4px;
    color: var(--muted);
}

.gp-table .c-title a {
    color: var(--ink);
}

.gp-table .c-title a:hover {
    color: var(--brand);
}

.gp-table .c-role {
    width: 84px;
}

.gp-table .c-act {
    width: 108px;
    white-space: nowrap;
    text-align: right;
}

.gp-table .c-name-main {
    color: var(--ink);
    font-weight: 500;
}

.gp-table .c-name-main:hover {
    color: var(--brand);
}

.gp-table .c-name-main.is-gone {
    color: var(--muted);
    font-weight: 400;
}

.gp-table .c-name-sub {
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--muted);
}

/* 表格里的小链接（报名 / 管理 / 移除） */
.gp-mini {
    display: inline-block;
    padding: 1px 2px;
    font-size: 12px;
    color: var(--brand);
}

.gp-mini:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

.gp-mini-danger {
    margin-left: 8px;
    color: var(--danger);
}

.gp-mini-danger:hover {
    color: var(--danger);
}

.gp-mini.is-muted {
    margin-left: 8px;
    color: var(--line);
}

/* ================================================================== 分页 */
/* Bootstrap 3 给 .pagination > li > a 设了 float:left，浮动元素不受
   text-align 影响 —— 只写 text-align:center 页码会一直贴在左边。
   这里用 flex 居中，并把 li / a 上的 float 全部复位。 */
.gp-page .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 22px 0 0;
    padding: 0;
    border-radius: 0;
}

.gp-page .pagination > li {
    display: block;
    float: none;
}

.gp-page .pagination > li > a,
.gp-page .pagination > li > span {
    float: none;
    /* 去掉 float 后 <a> 会退回 inline，上下 padding 不撑行盒，
       按钮高度会塌到 22px —— 必须显式 block。 */
    display: block;
    padding: 5px 11px;
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-2);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

.gp-page .pagination > li > a:hover,
.gp-page .pagination > li > a:focus {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand);
}

.gp-page .pagination > .active > a,
.gp-page .pagination > .active > a:hover,
.gp-page .pagination > .active > span {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.gp-page .pagination > .disabled > span,
.gp-page .pagination > .disabled > a {
    color: var(--muted);
    background: var(--paper);
    border-color: var(--line);
}

/* ================================================================ 响应式 */
@media (max-width: 1199px) {
    .gp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .gp-layout {
        flex-direction: column;
        /* 同 wiki.css：列方向要 stretch，否则子项按内容宽度撑开 */
        align-items: stretch;
    }

    .gp-aside {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .gp-page {
        padding: 16px 0 6px;
    }

    .gp-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    .gp-title {
        font-size: 18px;
    }

    .gp-grid {
        grid-template-columns: 1fr;
    }

    .gp-box {
        padding: 15px 15px 16px;
    }

    /* 窄屏表格：隐藏起止时间，作业名和状态优先 */
    .gp-table .c-time {
        display: none;
    }

    .gp-table .c-status {
        width: auto;
    }

    .gp-table .c-act {
        width: 76px;
    }

    .gp-table > thead > tr > th,
    .gp-table > tbody > tr > td {
        padding: 9px 6px;
    }

    .gp-table .c-name-sub {
        display: block;
        margin: 2px 0 0;
    }
}