/* Gallery Page Styles */

/* Inter 字体 */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* 瀑布流布局 */
.masonry {
    column-count: 1;
    column-gap: 1.5rem;
    orphans: 1;
    widows: 1;
}

@media (min-width: 640px) {
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .masonry {
        column-count: 3;
    }
}

@media (min-width: 1024px) {
    .masonry {
        column-count: 4;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 顺滑加载动画 */
.smooth-fade-in {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-fade-in.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 图片加载动画 */
img:not(.loaded) {
    filter: blur(5px);
    transition: filter 0.3s ease;
}

img.loaded {
    filter: blur(0);
}

/* 卡片悬停效果 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 按钮样式 */
.btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* 文本截断 */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 加载动画 */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* 可访问性改进 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .card-hover {
        border: 2px solid;
    }
    
    .btn-primary {
        border: 2px solid #1d4ed8;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .smooth-fade-in,
    .card-hover,
    .fade-in {
        animation: none;
        transition: none;
    }
}

/* 焦点样式 */
.focus-visible:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading状态改进 */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Dark mode loading skeleton */
.dark .loading-skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* 固定卡片尺寸响应式处理 */
@media (max-width: 767px) {
    /* 移动设备上取消固定宽度，保持响应式 */
    .fixed-card-size {
        width: 100% !important;
        max-width: 388px;
        margin: 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* 平板设备上保持固定尺寸但允许适应 */
    .fixed-card-size {
        width: min(388px, 100%);
        margin: 0 auto;
    }
}

/* 该规则已合并到下面的统一规则中，删除重复 */

/* 图片悬停放大效果 - 增强特异性和效果 */
.image-hover-zoom {
    overflow: hidden !important;
    cursor: pointer;
}

.image-hover-zoom img,
.masonry-item .image-hover-zoom img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    transform-origin: center center;
}

.image-hover-zoom:hover img,
.masonry-item:hover .image-hover-zoom img,
.masonry-item .image-hover-zoom:hover img {
    transform: scale(1.08) !important;
}

/* 瀑布流图片悬停效果 - 直接应用到卡片图片 */
.masonry-item .bg-white img,
.masonry-item .dark\\:bg-gray-800 img,
.masonry-item img[src*="picsum"] {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    transform-origin: center center;
}

.masonry-item:hover .bg-white img,
.masonry-item:hover .dark\\:bg-gray-800 img,
.masonry-item:hover img[src*="picsum"] {
    transform: scale(1.08) !important;
}

/* 相册卡片图片悬停效果 - 增强特异性 */
.album-image-hover {
    overflow: hidden !important;
}

.album-image-hover img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    transform-origin: center center;
}

.album-image-hover:hover img {
    transform: scale(1.12) !important;
}

/* 专门针对画廊图片的悬停放大效果 */
.image-hover-zoom > img,
.image-hover-zoom img[src*="picsum"],
.masonry-item .image-hover-zoom > img,
.masonry-item img[loading="lazy"],
div[role="gridcell"] .image-hover-zoom > img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    transform-origin: center center !important;
    cursor: pointer !important;
}

.image-hover-zoom:hover > img,
.image-hover-zoom:hover img[src*="picsum"],
.masonry-item:hover .image-hover-zoom > img,
.masonry-item:hover img[loading="lazy"],
div[role="gridcell"]:hover .image-hover-zoom > img {
    transform: scale(1.08) !important;
}

/* 通用图片悬停放大效果 - 确保所有画廊图片都有悬停效果 */
.masonry-item img,
div[role="gridcell"] img,
[x-data="galleryPage()"] .masonry img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    transform-origin: center center;
    cursor: pointer;
}

.masonry-item:hover img,
div[role="gridcell"]:hover img,
[x-data="galleryPage()"] .masonry-item:hover img {
    transform: scale(1.08) !important;
}

/* 减少动画偏好时禁用放大效果 */
@media (prefers-reduced-motion: reduce) {
    .image-hover-zoom img,
    .masonry-item img,
    .album-image-hover img,
    div[role="gridcell"] img,
    [x-data="galleryPage()"] .masonry img {
        transition: none !important;
        will-change: auto !important;
    }
    
    .image-hover-zoom:hover img,
    .masonry-item:hover img,
    .album-image-hover:hover img,
    div[role="gridcell"]:hover img,
    [x-data="galleryPage()"] .masonry-item:hover img {
        transform: none !important;
    }
}

/* 杰出贡献者卡片内容布局修复 */
.contributor-card {
    display: flex;
    flex-direction: column;
    /* 不设置height，让card-fixed-388控制 */
}

.contributor-card .contributors-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
    /* 确保不会超出卡片高度 */
    min-height: 0;
}

.contributor-card .statistics-section {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(156, 163, 175, 0.6);
    flex-shrink: 0;
}

.dark .contributor-card .statistics-section {
    border-top-color: rgba(75, 85, 99, 0.6);
}

/* 排名徽章可见性增强 */
.rank-badge {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #6b7280 0%, #374151 100%) !important;
    color: white !important;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
    color: white !important;
}

.rank-badge.rank-4 {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%) !important;
    color: white !important;
}

/* 确保所有固定尺寸卡片都有相同的样式 */
.card-fixed-388.contributor-card {
    width: 388px !important;
    min-height: 421px !important; /* 改为最小高度，允许扩展 */
    max-height: none !important;   /* 移除最大高度限制 */
    padding: 1.5rem; /* 24px，与Tailwind的p-6一致 */
    /* 允许内容正常显示 */
    overflow: visible;
    position: relative;
    /* 确保卡片大小一致性 */
    box-sizing: border-box;
    flex-shrink: 0;
}

.card-fixed-388:not(.contributor-card) {
    width: 388px !important;
    height: 421px !important;
    padding: 1.5rem;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .card-fixed-388.contributor-card {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        overflow: visible;
    }
    .card-fixed-388:not(.contributor-card) {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        overflow: visible;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .card-fixed-388.contributor-card {
        width: min(388px, 100%) !important;
        min-height: 421px !important;
        height: auto !important;
        overflow: visible;
    }
    .card-fixed-388:not(.contributor-card) {
        width: min(388px, 100%) !important;
        height: 421px !important;
        overflow: hidden;
    }
}