/* ==========================================================================
   内页样式：栏目列表页 / 文章详情页
   ========================================================================== */

/* ---------- 内页小banner ---------- */
.page-banner {
    position: relative;
    height: 240px;
    background: url("../assets/img/page-head.jpg") center/cover no-repeat;
}

.page-banner .mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35));
}

.page-banner .txt {
    position: relative;
    z-index: 2;
    width: var(--w);
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-banner h1 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #fff;
}

.page-banner p {
    margin-top: 10px;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--gold);
}

/* ---------- 面包屑 ---------- */
.crumb {
    border-bottom: 1px solid #262d34;
    background: var(--bg-3);
}

.crumb .wrap {
    display: flex;
    align-items: center;
    height: 48px;
    font-size: 13px;
    color: var(--t3);
}

.crumb a:hover {
    color: var(--gold);
}

.crumb .sep {
    margin: 0 8px;
    color: #4b5259;
}

/* ---------- 两栏布局 ---------- */
.inner-layout {
    display: flex;
    gap: 40px;
    padding: 40px 0 0;
}

.inner-layout .side {
    flex: 0 0 240px;
}

.inner-layout .main {
    flex: 1;
    min-width: 0;
}

/* 侧栏 */
.side .side-head {
    padding: 16px 20px;
    background: var(--brand);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
}

.side .side-nav {
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--bg-3);
}

.side .side-nav a {
    display: block;
    padding: 13px 20px;
    font-size: 14px;
    color: var(--t1);
    border-bottom: 1px solid #262d34;
}

.side .side-nav a:last-child {
    border-bottom: 0;
}

.side .side-nav a:hover {
    color: var(--gold);
}

.side .side-nav a.on {
    color: var(--gold);
    background: rgba(185, 156, 80, .08);
    box-shadow: inset 3px 0 0 var(--gold);
}

.side .side-box {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-2);
    border: 1px solid var(--line);
}

.side .side-box h3 {
    padding-bottom: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #fff;
    border-bottom: 1px solid var(--line);
}

.side .side-box li {
    margin-bottom: 9px;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.6;
}

.side .side-box li b {
    color: var(--gold);
    font-weight: 400;
}

/* ---------- 栏目基本信息表（如「学校简介」） ---------- */
.col-info {
    padding: 24px 28px;
    margin-bottom: 22px;
    background: var(--bg-2);
    border: 1px solid var(--line);
}

.col-info:empty {
    display: none;
}

.col-info h3 {
    padding-bottom: 12px;
    margin-bottom: 18px;
    font-size: 17px;
    color: #fff;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--line);
}

.col-info dl {
    display: grid;
    grid-template-columns: 100px 1fr 100px 1fr;
    gap: 11px 14px;
}

.col-info dt {
    font-size: 14px;
    color: var(--t3);
}

.col-info dd {
    margin: 0;
    font-size: 14px;
    color: var(--t1);
}

/* ---------- 列表 ---------- */
.art-list li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 4px;
    border-bottom: 1px solid #262d34;
}

.art-list li:hover {
    background: rgba(255, 255, 255, .02);
}

.art-list .no {
    flex: 0 0 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 15px;
    font-family: Georgia, serif;
    color: var(--t3);
    border: 1px solid var(--line);
}

.art-list li:nth-child(-n+3) .no {
    color: var(--gold);
    border-color: var(--gold-soft);
}

.art-list .body {
    flex: 1;
    min-width: 0;
}

.art-list .body a {
    font-size: 16px;
    line-height: 1.6;
    color: var(--t1);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.art-list li:hover .body a {
    color: var(--gold);
}

.art-list .body .meta {
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--t3);
}

.art-list .body .meta span {
    margin-right: 16px;
}

.art-list .date {
    flex: 0 0 auto;
    padding-left: 20px;
    font-size: 13px;
    color: var(--t3);
    font-family: Georgia, serif;
}

/* ---------- 分页 ---------- */
.pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 36px 0 0;
}

.pager a,
.pager span {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    line-height: 34px;
    text-align: center;
    font-size: 13px;
    color: var(--t1);
    background: var(--bg-4);
    border: 1px solid var(--line);
}

.pager a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.pager .on {
    color: #1e1e1e;
    background: var(--gold);
    border-color: var(--gold);
}

.pager .disabled {
    color: #5b626a;
    cursor: not-allowed;
}

/* ==========================================================================
   详情页
   ========================================================================== */
.article-head {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.article-head h1 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
}

.article-head .meta {
    margin-top: 14px;
    font-size: 13px;
    color: var(--t3);
}

.article-head .meta span {
    margin: 0 12px;
}

.article-body {
    padding: 30px 0 10px;
    font-size: 15.5px;
    line-height: 2.1;
    color: var(--t1);
}

.article-body p {
    margin-bottom: 18px;
    text-indent: 2em;
}

.article-body h3 {
    margin: 26px 0 14px;
    font-size: 17px;
    color: var(--gold);
}

.article-body ul,
.article-body ol {
    margin: 0 0 18px 2em;
}

.article-body ul li {
    list-style: disc;
    margin-bottom: 8px;
}

.article-body ol li {
    list-style: decimal;
    margin-bottom: 8px;
}

.article-body img {
    display: block;
    max-width: 100%;
    margin: 22px auto;
}

.article-body table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.article-body th,
.article-body td {
    padding: 10px 14px;
    border: 1px solid var(--line);
    text-align: left;
}

.article-body th {
    background: var(--bg-2);
    color: #fff;
}

.article-body blockquote {
    margin: 20px 0;
    padding: 14px 20px;
    background: var(--bg-2);
    border-left: 3px solid var(--gold);
    color: var(--t2);
}

.article-foot {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 22px 0;
    margin-top: 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.article-foot a:hover {
    color: var(--gold);
}

.article-back {
    padding: 26px 0 0;
    text-align: center;
}

.article-back a {
    display: inline-block;
    padding: 9px 30px;
    font-size: 14px;
    color: var(--t1);
    border: 1px solid var(--line-2);
}

.article-back a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ==========================================================================
   社团活动：总览页（卡片网格）+ 单个社团页（名片 + 动态）
   ========================================================================== */

/* ---------- 社团总览 ---------- */
.club-overview {
    padding: 40px 0 0;
}

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

.club-card {
    display: block;
    background: var(--bg-2);
    border: 1px solid var(--line);
    transition: border-color .25s;
}

.club-card .pic {
    height: 196px;
    overflow: hidden;
    background: #14181d;
}

.club-card .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}

.club-card:hover .pic img {
    transform: scale(1.06);
}

.club-card .info {
    position: relative;
    padding: 22px 22px 24px;
}

/* 分类标签骑在图片和文字的交界处 */
.club-card .info .tag {
    position: absolute;
    top: -13px;
    left: 22px;
    padding: 3px 10px;
    font-size: 12px;
    color: var(--gold);
    background: var(--bg-2);
    border: 1px solid var(--gold-soft);
}

.club-card .info h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.club-card .info p {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--t2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.club-card .info .go {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--t3);
    transition: color .25s;
}

.club-card:hover {
    border-color: var(--gold);
}

.club-card:hover .info h3,
.club-card:hover .info .go {
    color: var(--gold);
}

.club-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--t3);
}

/* ---------- 社团名片 ---------- */
.club-profile {
    display: flex;
    gap: 26px;
    padding: 24px;
    background: var(--bg-2);
    border: 1px solid var(--line);
}

.club-profile .pic {
    flex: 0 0 320px;
    height: 214px;
    overflow: hidden;
    background: #14181d;
}

.club-profile .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-profile .txt {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.club-profile .txt .tag {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    color: var(--gold);
    border: 1px solid var(--gold-soft);
}

.club-profile .txt h1 {
    margin-top: 12px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
}

.club-profile .txt .desc {
    margin-top: 10px;
    font-size: 14px;
    color: var(--gold);
}

.club-profile .txt .intro {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--t2);
    border-top: 1px dashed var(--line);
}

/* 名片下面紧跟的区块标题留出间距 */
.club-profile + .sec-head {
    margin-top: 36px;
}