/**
 * hero.css
 * ================================================
 * 游戏英雄区域样式定义文件
 * ------------------------------------------------
 * 功能说明：
 * 1. 定义游戏详情页右侧英雄区域样式
 * 2. 实现游戏预览图片和视频的交互效果
 * 3. 设计游戏标题、副标题和描述文本样式
 * 4. 优化内容溢出处理和滚动体验
 * 
 * 样式组织：
 * - 英雄容器 (.game-hero)
 * - 标题样式 (.game-hero h1, .game-hero h2)
 * - 描述文本 (.game-hero p)
 * - 预览图片 (.game-hero-image, .game-preview-label)
 * - 媒体交互 (img/video hover效果)
 * 
 * 设计特点：
 * - 与游戏容器高度保持一致
 * - 灵活的内容布局和防挤压设计
 * - 鼠标悬停时图片切换为视频
 * - 响应式内容滚动处理
 * 
 * 布局策略：
 * - Flexbox垂直布局
 * - 固定高度防止变形
 * - 内容溢出时自动滚动
 * 
 * 版本: 1.0.4
 * 最后更新: 2025-01-XX
 */

.game-hero {
    background-color: rgba(45, 45, 45, 1);
    backdrop-filter: blur(8px);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    /* height: 55vh; */
    /* min-height: 480px; */
    /* max-height: 580px; */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem; /* 与games-sidebar保持间距 */
    overflow: hidden; /* 防止整体溢出 */
    /* 突破左侧列宽度限制，与How to Play等区域保持一致 */
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

/* 确保Hero区域在flex容器中占据全宽 */
.flex.flex-col.md\:flex-row .md\:w-2\/3 .game-hero {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

/* 响应式调整 */
@media (min-width: 768px) {
    .game-hero {
        /* 在桌面端，Hero区域应该与How to Play等区域保持一致的宽度 */
        width: 100% !important;
        max-width: none !important;
    }
}

.game-hero h1 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.7rem;
    color: #f5f5f7;
    line-height: 1.2;
    font-weight: 800;
    margin: 0.5rem 0 1rem 0; /* 上右下左的间距：top-right-bottom-left，底部添加1rem间距 */
    flex-shrink: 0; /* 防止被挤压 */
    /* H1占据全宽 */
    width: 100%;
}

/* 创建内容容器，包含H2、P和图片的两列布局 */
.game-hero-content {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    /* flex: 1; */
    min-height: 0; /* 允许flex子元素收缩 */
}

/* 左侧文本区域 */
.game-hero-text {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    min-width: 0; /* 允许文本区域收缩 */
    max-width: 55%; /* 限制文本区域最大宽度 */
}

.game-hero h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    color: #d6fe51;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 0.75rem 0; /* 调整间距 */
    flex-shrink: 0; /* 防止被挤压 */
}

.game-hero p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem;
    line-height: 1.5;
    color: #a0aec0;
    margin: 0 0 0.5rem 0; /* 调整间距 */
    font-weight: 400;
    /* overflow-y: auto; */
    padding-right: 0.5rem; /* 为滚动条留出空间 */
    /* flex: 1; */
}

/* 右侧图片区域 */
.game-hero-image {
    position: relative;
    width: 45%; /* 使用百分比宽度，占据更多空间 */
    height: 210px; /* 设置固定高度 */
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0; /* 防止被挤压 */
    margin: 0; /* 移除原有margin */
}

.game-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.game-hero-image video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-hero-image:hover img {
    opacity: 0;
}

.game-hero-image:hover video {
    opacity: 1;
}

.game-preview-label {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    color: #f5f5f7;
    font-size: 1rem;
    font-weight: bold;
    background: rgba(0,0,0,0.3);
    padding: 4px 12px;
    border-radius: 6px;
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .game-hero-content {
        flex-direction: column; /* 在移动端改为垂直布局 */
    }
    
    .game-hero-image {
        width: 100%; /* 在移动端占满宽度 */
        height: 200px;
    }
    
    .game-hero-text {
        order: 1; /* 文本在上方 */
    }
    
    .game-hero-image {
        order: 2; /* 图片在下方 */
    }
}