/* ==========================================================
   歆爱AI - 个人主页 移动端专属样式 V1 (profile-mobile.css)
   ========================================================== */

/* 默认状态下隐藏移动端容器 */
.mobile-profile-container {
    display: none;
}

/* ★★★ 核心逻辑：媒体查询 ★★★ 
当屏幕宽度小于或等于 780px 时，应用以下所有样式 */
@media (max-width: 780px) {

    /* --- 1. 结构显隐控制 --- */
    
    /* 隐藏PC端的个人信息区 */
    .desktop-profile-container {
        display: none;
    }

    /* 显示移动端的个人信息区 */
    .mobile-profile-container {
        display: flex; /* 使用flex布局 */
        flex-direction: column; /* 垂直排列 */
        gap: 20px; /* 各部分之间的间距 */
        padding: 0 5px;  /* 稍微左右留白 */
    }

    /* 同时修改一下顶部导航栏在移动端的样式 */
    .profile-header-nav {
      /* 我们把按钮从"返回首页"改成汉堡菜单图标 */
      /* 注意: 这个需要JS来配合实现点击展开功能, 我们先改样式 */
      .nav-btn.back-to-main-btn {
          /* 此处可以暂时通过JS修改其innerHTML, 此处仅做样式准备 */
      }
    }


    /* --- 2. 用户卡片区(头像和信息) --- */
    .mobile-user-card {
        display: flex;
        align-items: center; /* 垂直居中对齐 */
        gap: 15px; /* 头像和信息间的距离 */
    }

    .avatar-round-container {
        position: relative;
        flex-shrink: 0; /* 防止头像被压缩 */
    }

    .avatar-round {
        width: 80px;
        height: 80px;
        background-color: #333;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.5);
    }
    
    .edit-avatar-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--primary-glow-color);
        color: white;
        border: 2px solid #05061a; /* 用背景色做边框，产生切割感 */
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
    }
    
    .mobile-user-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .mobile-user-name {
        font-size: 20px;
        font-weight: bold;
        color: var(--text-color-light);
    }
    
    .mobile-user-id {
        font-size: 13px;
        color: var(--text-color-muted);
    }
    

    /* --- 3. 个人简介区 --- */
    .mobile-bio-section {
        font-size: 14px;
        color: #888;
        cursor: pointer;
        padding-left: 5px; /* 和其他内容轻微对齐 */
    }


    /* --- 4. 统计与操作区 --- */
    .mobile-stats-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }
    
    .mobile-user-stats {
        display: flex;
        gap: 20px; /* 三个统计项间的距离 */
    }
    
    .mobile-user-stats .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    
    .mobile-user-stats .stat-value {
        font-size: 18px;
        font-weight: bold;
        color: var(--text-color-light);
    }
    
    .mobile-user-stats .stat-label {
        font-size: 13px;
        color: var(--text-color-muted);
    }

    .mobile-edit-actions {
        display: flex;
        gap: 10px;
    }

    .mobile-edit-btn {
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        color: var(--text-color);
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 14px;
        cursor: pointer;
    }
    
    .mobile-settings-btn {
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        color: var(--text-color);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
    }


    /* --- 5. 工具卡片网格 --- */
    .mobile-tools-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 两列等宽 */
        gap: 12px;
    }
    .tool-card {
        background-color: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }   
    .tool-card h3 {
        font-size: 15px;
        color: var(--text-color-light);
    }
    .tool-card h3 i {
        margin-right: 8px;
        color: var(--secondary-glow-color);
    }
    .tool-card p {
        font-size: 12px;
        color: var(--text-color-muted);
    }

    /* --- 6. 作品集区域适配 --- */    
    .works-header {
      padding: 10px 0; /* 给作品集的页签上下留点空间 */
    }

    .works-list {
      /* 修改为两列瀑布流布局 */
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    /* 修改作品卡片的样式 */
    .work-list-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }
    .work-list-item:hover {
        transform: none;
        box-shadow: none;
    }

/* ★ 关键部分：用伪元素创建一个背景来放图片 */
.work-list-item::before {
    content: '';
    display: block;
    padding-top: 130%;
    width: 100%;
    
    /* ▼▼▼ 老师批注：我们将 background-color 改成 background-image，并使用变量 ▼▼▼ */
    background-image: var(--work-item-bg, url("/frontend/assets/images/default-work-bg.png"));
    /* ▲▲▲ 
      这里 var() 函数的第二个参数是备用值，
      意思是如果JS没有提供 --work-item-bg 变量，就再次使用默认图，双重保险！
    ▲▲▲ */

    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease; /* 加个平滑的过渡效果 */
}

/* ★★★ 新增一个鼠标悬浮效果，让图片会动 ★★★ */
.work-list-item:hover::before {
    transform: scale(1.05); /* 图片稍微放大 */
}

    /* 定位原来的info和actions */
    .work-list-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    }
    
    .work-list-actions {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    
    /* 修改内部元素样式 */
    .work-list-title {
       font-size: 14px;
       color: white;
       text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    }

    /* 隐藏日期和字数统计，在小卡片上太挤了 */
    .work-list-meta{
      display: none;
    }

        #loginModal .login-illustration {
        display: none;
    }

    /* 既然图片没了，可以给表单部分稍微大一点的左右内边距，让它看起来不那么挤 */
    #loginModal .modal-body {
        padding-left: 30px;
        padding-right: 30px;
    }
}