/* static/css/clock.css */

/* --- 时钟与信息区样式 --- */
.clock-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 40px 0 60px 0;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; /* 在小屏幕上换行 */
}

.clock-container {
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clock-face {
    width: 100%;
    height: 100%;
    position: relative;
    border: 3px double var(--border-color);
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
}

.hand {
    width: 40%;
    height: 3px;
    background: var(--primary-text);
    position: absolute;
    top: 50%;
    transform-origin: 100%; /* 设置旋转中心在右端 */
    transform: rotate(90deg); /* 初始指向12点方向 */
    transition: transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
    border-radius: 2px;
}

.hour-hand {
    width: 28%;
    left: 22%;
    background: var(--primary-text);
    height: 4px;
}

.minute-hand {
    height: 3px;
}

.second-hand {
    width: 45%;
    left: 5%;
    height: 1px;
    background: var(--accent-color); /* 秒针用主题红色 */
}

.clock-number {
    position: absolute;
    font-family: var(--font-serif-en);
    color: #9e8a7e;
    font-size: 1.2em;
}
.twelve { top: 10px; left: 50%; transform: translateX(-50%); }
.three { top: 50%; right: 10px; transform: translateY(-50%); }
.six { bottom: 10px; left: 50%; transform: translateX(-50%); }
.nine { top: 50%; left: 10px; transform: translateY(-50%); }

.current-hour-info {
    text-align: center;
    border-left: 2px solid var(--border-color);
    padding-left: 40px;
}

.info-title {
    font-size: 0.9em;
    color: #9e8a7e;
    letter-spacing: 1px;
}

.info-hour {
    font-family: var(--font-serif-en);
    font-size: 2.2em;
    font-weight: bold;
    color: var(--primary-text);
    margin: 5px 0;
}

.info-author {
    font-size: 1.2em;
    color: var(--primary-text);
    margin-bottom: 15px;
}

.info-link {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid var(--hover-accent);
    color: var(--hover-accent);
    border-radius: 20px;
    font-size: 0.9em;
    transition: all 0.3s ease;
}
.info-link:hover {
    background: var(--hover-accent);
    color: var(--bg-color);
}

/* --- 卡片高亮效果 --- */
.hour-card.current-hour-highlight {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(158, 66, 66, 0.5);
    transform: translateY(-5px) scale(1.03);
    background-color: rgba(158, 66, 66, 0.15);
}