/* 画廊专用样式 */

/* 图片卡片样式 */
.gallery-item { 
    @apply relative bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300;
    break-inside: avoid;
}

.gallery-item:hover {
    transform: translateY(-4px);
}

.gallery-item img { 
    @apply w-full h-auto object-cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-caption {
    @apply absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full transition-transform duration-300;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* 瀑布流布局 */
.masonry-grid {
    column-count: 2;
    column-gap: 1rem;
}

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

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

/* 分类标签 */
.category-nav-item {
    @apply px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 whitespace-nowrap;
}

.category-nav-item.active {
    @apply bg-cyan-500 text-white shadow-md;
}

.category-nav-item:not(.active) {
    @apply bg-white text-slate-600 hover:bg-cyan-50 hover:text-cyan-600;
}

/* 返回顶部按钮 */
.back-to-top {
    @apply fixed bottom-8 right-8 w-12 h-12 bg-cyan-500 text-white rounded-full shadow-lg flex items-center justify-center cursor-pointer transition-all duration-300 opacity-0 invisible;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    @apply bg-cyan-600 transform -translate-y-1;
}

/* 新标签 */
.new-tag {
    @apply absolute top-3 right-3 px-2 py-1 bg-green-500 text-white text-xs font-bold rounded-full shadow-md z-10;
}

/* 章节标题装饰 */
.section-header {
    @apply relative pb-4 mb-6;
}

.section-header::after {
    content: '';
    @apply absolute bottom-0 left-0 w-16 h-1 bg-gradient-to-r from-cyan-500 to-teal-400 rounded-full;
}

/* 方向B专用样式变体 */
.direction-b .category-nav-item.active {
    @apply bg-pink-500 text-white;
}

.direction-b .category-nav-item:not(.active) {
    @apply hover:bg-pink-50 hover:text-pink-600;
}

.direction-b .back-to-top {
    @apply bg-pink-500;
}

.direction-b .back-to-top:hover {
    @apply bg-pink-600;
}

.direction-b .section-header::after {
    @apply bg-gradient-to-r from-pink-500 to-purple-400;
}

/* 卡片样式 */
.direction-card { 
    @apply bg-white rounded-xl border border-slate-200 overflow-hidden cursor-pointer transition-all hover:shadow-lg hover:border-cyan-300;
}

.direction-card:hover .direction-img {
    @apply scale-105;
}

.direction-img {
    @apply w-full h-64 object-cover transition-transform duration-500;
}

/* 滚动条隐藏 */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 响应式优化 */
@media (max-width: 640px) {
    .masonry-grid {
        column-count: 1;
    }
}