/* 年月历文章归档卡片样式 */

.card-year-archives {
    padding: 0.8rem 0.5rem !important;
}

/* 头部区域 */
.card-archive-calendar-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

.card-archive-calendar-head button {
    height: 30px;
    width: 30px;
    color: var(--heo-fontcolor);
    background: var(--heo-card-bg);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-archive-calendar-head button:hover {
    background: var(--heo-main);
    color: var(--heo-card-bg);
}

.card-archive-calendar-head button.no-event {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* 年份中心区域 */
.card-archive-calendar-center {
    height: 30px;
    width: 120px;
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
    background: var(--heo-card-bg);
    border-radius: 8px;
}

.card-archive-calendar-years {
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease;
}

.card-archive-calendar-year-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 30px;
    text-decoration: none;
    color: var(--heo-fontcolor);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.card-archive-calendar-year-item:hover {
    background: var(--heo-main);
    color: var(--heo-card-bg);
}

.card-archive-calendar-year {
    font-weight: bold;
    font-size: 14px;
}

.card-archive-calendar-year-count {
    margin-left: 5px;
    font-size: 12px;
    font-weight: bold;
    opacity: 0.6;
}

/* 月份区域 */
.card-archive-calendar-body {
    width: 100%;
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
    padding: 5px 0;
}

.card-archive-calendar-pages {
    display: flex;
    flex-direction: row;
    transition: transform 0.3s ease;
}

.card-archive-calendar-page {
    width: calc(100% - 10px);
    min-width: 240px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 5px;
}

.card-archive-calendar-month-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((100% - 24px) / 4);
    height: 50px;
    cursor: pointer;
    background: var(--heo-card-bg);
    border-radius: 8px;
    text-decoration: none;
    color: var(--heo-fontcolor);
    transition: all 0.3s ease;
}

.card-archive-calendar-month-item:hover {
    background: var(--heo-main);
    color: var(--heo-card-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--heo-main-rgb), 0.3);
}

.card-archive-calendar-month-item.no-link {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.card-archive-calendar-month-item.no-link:hover {
    background: var(--heo-card-bg);
    color: var(--heo-fontcolor);
    transform: none;
    box-shadow: none;
}

.card-archive-calendar-month {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
}

.card-archive-calendar-month-count {
    font-size: 11px;
    font-weight: bold;
    opacity: 0.6;
    line-height: 1.3;
}

/* 深色模式适配 */
[data-theme="dark"] .card-archive-calendar-head button,
[data-theme="dark"] .card-archive-calendar-center,
[data-theme="dark"] .card-archive-calendar-month-item {
    background: var(--heo-secondbg);
}

[data-theme="dark"] .card-archive-calendar-head button:hover,
[data-theme="dark"] .card-archive-calendar-year-item:hover,
[data-theme="dark"] .card-archive-calendar-month-item:hover {
    background: var(--heo-main);
}