/* 基础样式 */
/* 全局滚动条样式 - 强制显示滚动条占位，确保页面宽度一致 */
html {
    /* 为滚动条预留固定宽度，防止宽度变化 */
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #ffffff;
}

html::-webkit-scrollbar {
    width: 8px;
}

html::-webkit-scrollbar-track {
    background: #ffffff;
}

html::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* 图片容器样式 - 合并重复样式 */
.img-container-3-4,
.img-container-1-1,
.img-container-6-7 {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.img-container-3-4 {
    aspect-ratio: 3/4;
}

.img-container-1-1 {
    aspect-ratio: 1/1;
}

.img-container-6-7 {
    aspect-ratio: 6/7;
}

/* 图片容器内图片样式 - 合并重复样式 */
.img-container-3-4 img,
.img-container-6-7 img {
    max-width: 100%;
    max-height: 100%;
}

/* 项目卡片图片 - 强制1:1显示中间部分 - 优化选择器特异性避免使用!important */
.project-card .img-container-1-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 媒体卡片文字动画 */
.media-card {
    position: relative;
    overflow: hidden;
}

.media-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.media-card:hover .media-info {
    transform: translateY(0);
}

/* 项目卡片鼠标悬浮透明度效果 - 合并重复样式 */
.project-card .img-container-3-4 img,
.project-card .img-container-1-1 img {
    transition: opacity 0.3s ease;
}

.project-card:hover .img-container-3-4 img,
.project-card:hover .img-container-1-1 img {
    opacity: 0.7;
}

/* 项目详情页文字栏优化 */
#project-content {
    /* 优化字体和行距 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7; /* 增大行距，提高可读性 */
    letter-spacing: 0.02em; /* 微调字间距，使文字更舒展 */
    font-weight: 350; /* 减轻字体粗细 */
}

/* 标题样式优化 */
#project-content h1 {
    font-weight: 600; /* 保持标题的醒目性但不过粗 */
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

/* 段落样式优化 */
#project-content p {
    margin-bottom: 1rem;
    font-weight: 350;
}

/* 链接样式优化 - 修复链接与下方文字间距过小的问题 */
#project-content a {
    display: inline-block; /* 确保可以设置margin */
    margin-bottom: 0.5rem; /* 为链接添加底部margin，确保与下方文字有足够间距 */
    text-decoration: underline; /* 确保链接有下划线，提高可识别性 */
    color: #4b5563; /* 将链接颜色改为灰色，可根据设计需求调整 */
}

/* 访问过的链接保持相同颜色 */
#project-content a:visited {
    color: #4b5563;
}

/* 引用样式优化 */
#project-content blockquote {
    border-left: 2px solid #e5e7eb;
    padding-left: 1rem;
    font-style: italic;
    color: #4b5563;
    margin: 1rem 0;
}

/* 元数据区域样式优化 */
#project-content .mt-6 {
    margin-top: 2rem;
}

#project-content .space-y-2 {
    gap: 0.75rem;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    #project-content {
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    .media-info {
        transform: translateY(0);
    }
    
    /* 确保导航栏最小高度 */
    header {
        min-height: 60px;
        height: 60px;
    }

    /* 侧边栏菜单内容区域 */
    #mobile-menu nav.py-4 {
        padding-top: 0;
        padding-bottom: 2rem;
    }

    /* 确保导航链接之间的间距和分割线一致 - 避免与Tailwind冲突 */
    #mobile-menu [class*="flex-col"][class*="space-y-2"] {
        gap: 0;
    }
    
    /* 为所有导航链接设置统一的样式 */
    #mobile-menu a {
        margin-top: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* 确保最后一个导航链接没有底边框 */
    #mobile-menu a:last-child {
        border-bottom: none;
    }
}

/* 筛选栏动画 - 合并过渡效果 */
.filter-bar {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, overflow 0.5s ease;
}

.filter-bar.active {
    max-height: 500px;
}

/* 内容块操作按钮样式 */
/* 确保编辑按钮在正确位置 */
.edit-button {
    background-color: #4b5563;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-button:hover {
    background-color: #6b7280;
}

/* Studio页面卡片垂直间距调整 */
#studio-grid {
    /* 调整为更合适的间距值 */
    grid-row-gap: 1.5rem; /* 增大垂直间距，改善视觉体验 */
}

/* 第一排和第二排之间的特殊间距 - 只在大屏幕上应用 - 优化选择器特异性避免使用!important */
@media (min-width: 640px) {
    #studio-grid > *:first-child {
        margin-bottom: 4.5rem; /* 第一排底部额外增加3倍间距（1.5rem x 3） */
    }
}

/* Tailwind配置 - 这部分在HTML中保持内联，以便Tailwind CSS正确初始化 */