/* === 文章列表页样式 === */

.article-grid, .article-grid * { margin: 0; padding: 0; box-sizing: border-box; }
.article-grid img { border: 0; max-width: 100%; }
.article-grid {
    width: 100%; max-width: 900px; margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
    display: flex; flex-direction: column; gap: 1.2rem;
}

/* === 顶部标题区 === */
.articles-hero {
    text-align: center;
    padding: 2rem 0 1rem;
    color: #5c5c5c;
}
.articles-hero-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-style: italic;
    letter-spacing: 0.18em;
    color: #b8b8b8;
    margin-bottom: 0.75rem;
}
.articles-hero-sub::before,
.articles-hero-sub::after {
    content: '✦';
    font-style: normal;
    font-size: 0.7rem;
    color: #c8c8c8;
}
.articles-hero-line {
    width: 28px; height: 1px;
    background: linear-gradient(90deg, transparent, #d0d0d0, transparent);
    margin: 0 auto 0.9rem;
}
.articles-hero-title {
    font-size: clamp(1.8rem, 5.5vw, 2.8rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #2c2c2c;
    line-height: 1.5;
    font-family: 'STSong', 'SimSun', 'Noto Serif SC', 'Source Han Serif SC', serif;
}

/* === 卡片入场动画 === */
.card-item { animation: articleIn 0.45s ease both; }
.card-item:nth-child(1){animation-delay:0s}.card-item:nth-child(2){animation-delay:.06s}
.card-item:nth-child(3){animation-delay:.12s}.card-item:nth-child(4){animation-delay:.18s}
.card-item:nth-child(5){animation-delay:.24s}.card-item:nth-child(6){animation-delay:.3s}
@keyframes articleIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 卡片主体 === */
.card-item {
    --accent: #ccc;
    display: flex; align-items: stretch; text-decoration: none; color: #fff;
    border-radius: 24px; overflow: hidden;
    padding: clamp(22px, 4vw, 36px) clamp(18px, 3.5vw, 32px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2);
    cursor: pointer; position: relative;
    border: none;
    user-select: none !important;
    -webkit-user-select: none !important;
    contain: layout style paint;
}
/* 卡片微动 */
.card-item{animation:articleIn .45s ease both,cardFloat 5s ease-in-out infinite}
.card-item:nth-child(odd){animation-delay:0s,0s}.card-item:nth-child(even){animation-delay:.06s,1.5s}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* 光泽扫过 */
/* 光泽扫过——仅鼠标碰到时触发 */
.card-item::before{
    content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.08) 55%,transparent 60%);
    transform:translateX(-100%) rotate(25deg);z-index:1;pointer-events:none;opacity:0;
    transition:opacity .3s
}
.card-item:hover::before{opacity:1;animation:cardShine 1.8s ease-in-out forwards}
@keyframes cardShine{0%{transform:translateX(-100%) rotate(25deg)}100%{transform:translateX(100%) rotate(25deg)}}
.card-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 0 30px var(--accent);
    animation:articleIn .45s ease both;
}
.card-item:hover::after {
    transform: rotate(16deg) scale(1.25)!important;
    filter: brightness(1.6);
    transition: all .5s ease;
}
.card-item, .card-item * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* 颜色由 PHP 按帖子 ID 固定分配，背景和 --accent 内联在 HTML */

/* 火苗装饰 */
.card-item::after {
    content: '';
    position: absolute; right: -30px; bottom: -30px;
    width: 140px; height: 140px;
    background-color: var(--accent);
    filter: brightness(1.3);
    transform: rotate(12deg);
    pointer-events: none; z-index: 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
    mask-size: contain; -webkit-mask-size: contain;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-position: center; -webkit-mask-position: center;
}
.card-item:active,.card-item.pressed{transform:scale(.97);opacity:.9;transition:all .1s ease}

/* 水波 */
.card-item .ripple {
    position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0));
    transform:scale(0);animation:rippleAnim .6s ease-out forwards;
    pointer-events:none;z-index:2;
}
@keyframes rippleAnim{to{transform:scale(5);opacity:0}}

/* === 左侧日期栏 === */
.card-date-col {
    position: relative; z-index: 1;
    width: 90px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 0.2rem 0.5rem 0 0;
    border-right: 1px solid rgba(255,255,255,.18);
}
.card-day {
    font-size: 3rem; font-weight: 700; line-height: 1;
    color: #fff; letter-spacing: -0.04em;
}
.card-day-sep {
    width: 1px; height: 28px; background: rgba(255,255,255,.35);
    margin: 0.45rem 0;
}
.card-month-year {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.05rem;
    font-size: 0.72rem; font-weight: 500;
    color: rgba(255,255,255,.75); line-height: 1.3;
}
.card-days-count {
    position: absolute; top: 0; right: 0.6rem;
    font-size: 0.6rem; font-weight: 500;
    color: rgba(255,255,255,.55); letter-spacing: 0.05em;
}
.card-days-count strong {
    color: rgba(255,255,255,.85); font-weight: 700;
    margin-left: 0.15rem; font-size: 0.7rem;
}

/* === 右侧内容区 === */
.card-content-col {
    position: relative; z-index: 1;
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding-left: clamp(16px, 3vw, 24px);
    gap: 0.55rem;
}
.card-meta-line {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.72rem; color: rgba(255,255,255,.7);
    flex-wrap: wrap;
}
.card-time {
    display: inline-flex; align-items: center; gap: 0.2rem;
    white-space: nowrap;
}
.card-time i { font-size: 0.74rem; opacity: 0.85; }

/* === 心情 & 天气 徽章（图片版） === */
.mood-chip,.weather-chip{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:.15rem .5rem .15rem .15rem;
    background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.32);
    border-radius:1rem;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    line-height:1;
    transition:transform .3s ease,background .3s ease;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.mood-chip:hover,.weather-chip:hover{
    transform:translateY(-1px) scale(1.06);
    background:rgba(255,255,255,.32);
}
.chip-icon-wrap{
    width:1.35rem;height:1.35rem;
    border-radius:50%;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.15);
    overflow:hidden;
    transition:transform .25s ease;
}
.mood-img,.weather-img{
    width:100%;height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
    pointer-events:none;
}
.mood-chip:hover .chip-icon-wrap{transform:rotate(-8deg) scale(1.08);}
.weather-chip:hover .chip-icon-wrap{transform:rotate(10deg) scale(1.08);}
.card-item .chip-icon-wrap{transition:transform .12s ease}
.card-item:active .chip-icon-wrap,
.card-item.pressed .chip-icon-wrap{
    transform:scale(1.08)!important;
}
.card-item:active .mood-chip:hover .chip-icon-wrap,
.card-item.pressed .mood-chip:hover .chip-icon-wrap{
    transform:rotate(-8deg) scale(1.16)!important;
}
.card-item:active .weather-chip:hover .chip-icon-wrap,
.card-item.pressed .weather-chip:hover .chip-icon-wrap{
    transform:rotate(10deg) scale(1.16)!important;
}
.mood-text,.weather-text{
    font-size:.65rem;font-weight:600;
    color:rgba(255,255,255,.95);
    letter-spacing:.02em;
    white-space:nowrap;
}

/* === 正文 === */
.card-body { overflow: hidden; }
.card-title {
    font-size: 1.05rem; font-weight: 600; line-height: 1.45;
    margin-bottom: 0.25rem; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.card-desc {
    font-size: 0.8rem; color: rgba(255,255,255,.78); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}

/* === 底部：作者 + 操作 === */
.card-footer {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 0.35rem; margin-top: auto;
    overflow: hidden;
}
.card-author {
    display: flex; align-items: center; gap: 0.5rem;
    overflow: hidden; min-width: 0;
}
.card-author img {
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    object-fit: cover; background: rgba(255,255,255,.3);
    flex-shrink: 0; border: 2px solid rgba(255,255,255,.5);
}
.card-author .uname {
    font-size: 0.8rem; font-weight: 600; color: #fff;
    white-space: nowrap; flex-shrink: 0;
}
.card-author .uloc {
    font-size: 0.68rem; color: rgba(255,255,255,.65);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(255,255,255,.12); padding: 0.08rem 0.35rem;
    border-radius: 1rem;
}
.card-acts {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}

/* === 按钮 === */
.act-btn {
    display: inline-flex; align-items: center; gap: 0.18rem;
    background: none; border: none; cursor: pointer;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    padding: 0.2rem 0.25rem; color: rgba(255,255,255,.6);
    font-size: 0.72rem; font-family: inherit;
    transition: all .3s; outline: none; border-radius: 0.4rem;
    white-space: nowrap; position: relative; z-index: 2;
}
.act-btn:hover { color: rgba(255,255,255,.9); }
.act-btn.active { color: #fff; }
.act-btn.active .act-icon path { fill: #fff; stroke: #fff; }
.act-btn.pop { animation: btnPop .5s ease; }
@keyframes btnPop { 0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)} }
.action-count { font-weight: 600; font-size: 0.68rem; min-width: 1em; text-align: center; }

/* 空状态 */
.empty-state { text-align: center; padding: 4rem 2rem; color: #C5BFB8; font-size: 0.9rem; }

/* === 响应式 === */
@media(max-width:1024px){
    .article-grid { max-width: 760px; padding: 0 1rem 2.5rem; gap: 1rem; }
}
@media(max-width:640px){
    .article-grid { max-width: 100%; padding: 0 .75rem 2rem; gap: .75rem; }
    .card-item { border-radius: 18px; padding: clamp(16px, 5vw, 24px) clamp(12px, 4vw, 20px); }
    .card-item::after { right: -22px; bottom: -22px; width: 100px; height: 100px; }
    .card-date-col { width: 66px; padding-right: 0.35rem; }
    .card-day { font-size: 2.2rem; }
    .card-day-sep { height: 20px; margin: 0.3rem 0; }
    .card-month-year { font-size: 0.6rem; }
    .card-days-count { right: 0.3rem; font-size: 0.52rem; }
    .card-days-count strong { font-size: 0.58rem; }
    .card-content-col { padding-left: 0.85rem; gap: 0.4rem; }
    .card-title { font-size: 0.95rem; }
    .card-desc { font-size: 0.76rem; -webkit-line-clamp: 2; }
    .card-meta-line { gap: 0.4rem; font-size: 0.65rem; }
    .chip-icon-wrap { width: 1.15rem; height: 1.15rem; }
    .mood-text,.weather-text { font-size: 0.58rem; }
    .card-author img { width: 1.5rem; height: 1.5rem; }
    .card-author .uname { font-size: 0.74rem; }
    .card-author .uloc { font-size: 0.6rem; padding: 0.05rem 0.25rem; }
    .act-btn { padding: 0.35rem 0.4rem; font-size: 0.78rem; min-width: 38px; min-height: 38px; }
    .act-icon { width: 18px; height: 18px; }
    .action-count { font-size: 0.72rem; }
    .card-acts { gap: 0.3rem; }
}
@media(max-width:380px){
    .article-grid { padding: 0 .5rem 1.5rem; gap: .6rem; }
    .card-item { border-radius: 14px; padding: clamp(12px, 4vw, 18px) clamp(10px, 3vw, 14px); }
    .card-item::after { right: -16px; bottom: -16px; width: 75px; height: 75px; }
    .card-date-col { width: 56px; padding-right: 0.25rem; }
    .card-day { font-size: 1.8rem; }
    .card-content-col { padding-left: 0.6rem; }
    .card-title { font-size: 0.88rem; }
    .card-desc { font-size: 0.72rem; }
    .mood-chip,.weather-chip { padding: 0.12rem 0.4rem 0.12rem 0.12rem; }
    .chip-icon-wrap { width: 1rem; height: 1rem; }
    .mood-text,.weather-text { font-size: 0.55rem; }
    .act-btn { padding: 0.3rem 0.35rem; font-size: 0.72rem; }
}