/* 历史页面样式 */
html, body {
    background-color: #000;
    color: #fff;
}

/* 标题样式 */
.section-title {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
}

/* 历史页面网格样式 - 移动端默认3列布局 */
.history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    gap: 12px;
}

/* 当只有一个项目时，使用1/3宽度 */
.history-grid.single-item {
    grid-template-columns: repeat(3, 1fr);
}

.history-grid.single-item .drama-card {
    grid-column: 1;
}

/* 当只有两个项目时 */
.history-grid.two-items {
    grid-template-columns: repeat(3, 1fr);
}

/* 当只有三个项目时 */
.history-grid.three-items {
    grid-template-columns: repeat(3, 1fr);
}

/* PC端响应式 - 使用auto-fill自动填充列，每列最小宽度约200px */
@media (min-width: 640px) {
    .history-grid,
    .history-grid.single-item,
    .history-grid.two-items,
    .history-grid.three-items {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .history-grid.single-item .drama-card {
        grid-column: auto;
    }
}

/* Drama Card 样式 (复用 home.css 的卡片样式) */
.drama-card {
    width: 100%;
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.drama-card:hover {
    opacity: 0.8;
    text-decoration: none;
    color: inherit;
}

.drama-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 110/154;
    overflow: hidden;
    border-radius: 10px;
}

.drama-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drama-title {
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.3;
    letter-spacing: 0%;
    margin-top: 8px;
    margin-bottom: 2px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drama-category {
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(9px, 2vw, 11px);
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.4;
    letter-spacing: 0%;
    opacity: 0.44;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 响应式调整 */
@media (min-width: 640px) {
    .drama-title {
        font-size: 12px;
        margin-top: 6px;
    }

    .drama-category {
        font-size: 11px;
    }
}

@media (min-width: 1024px) {
    .drama-title {
        font-size: 13px;
        margin-top: 8px;
    }

    .drama-category {
        font-size: 12px;
    }
}

/* ==================== RTL（阿拉伯语）适配 ====================*/
[dir="rtl"] body,
[lang="ar"] body {
    direction: rtl;
    text-align: right;
}

/* 历史网格 - RTL适配 */
[dir="rtl"] .history-grid,
[lang="ar"] .history-grid {
    direction: rtl;
}

/* 文本对齐 - RTL */
[dir="rtl"] .drama-title,
[lang="ar"] .drama-title,
[dir="rtl"] .drama-category,
[lang="ar"] .drama-category {
    text-align: right;
}

/* 标题对齐 */
[dir="rtl"] .section-title,
[lang="ar"] .section-title {
    text-align: right;
}

/* 空状态文本对齐 */
[dir="rtl"] .flex.flex-col.items-center,
[lang="ar"] .flex.flex-col.items-center {
    text-align: right;
}