/* ==========================================================================
   山风 (ShanFeng) 独立页面 (Page) 专属样式 (同步修复版)
   ========================================================================== */

/* ==========================================
   1. 少数派风格：全屏横向 Hero 头部区域
   ========================================== */
.sf-page-hero-full {
    position: relative;
    width: 100%;
    min-height: 350px;         
    display: flex;
    align-items: center;
    background-color: #fcfaf7; 

    /* 【终极优化】：消除阴影，回归纯粹的少数派纸张质感 */
    /* 1. 使用 1px 的绝对实线，不再使用百分比渐变，从而彻底消除阴影错觉 */
    /* 2. 透明度降到极低的 0.04，让它在白色背景上若隐若现 */
    /* 3. 间距保持在 8px，这是大标题背景下最舒适的比例 */
   
    background-size: 100% 5px; 
    
    overflow: hidden;
    margin-top: -30px;         
}

.hero-bg-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; }
.hero-full-img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

.hero-content-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--sf-container-width, 1040px); 
    margin: 0 auto;
    padding: 0 30px;
}

/* ==========================================
   2. 左右分栏核心布局 (将内容严紧地一分为二)
   ========================================== */
.sf-split-layout {
    display: flex;
    align-items: center; /* 确保左右两侧整体居中对齐 */
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

/* --- 左侧文字区 --- */
.sf-page-hero-left {
    flex: 1;
    max-width: 500px;
    z-index: 2;
}

/* 修复：标题与箭头的完美对齐 */
.sf-page-hero-header {
    display: flex;
    align-items: center; /* 让标题和图片在垂直方向绝对居中 */
    justify-content: flex-start;
    gap: 15px; 
    margin-bottom: 20px; 
}

.sf-page-hero-title {
    font-size: 48px;
    font-weight: 800;
    color: #1d1d1f !important; 
    margin: 0 !important; 
    letter-spacing: -1px;
    line-height: 1; /* 核心修复：收紧行高，防止把箭头顶上去 */
    text-shadow: none !important; 
}

/* 用户自定义上传的箭头图片 */
.sf-page-hero-icon-img {
    height: 50px !important;  /* 稍微收缩一点，和 48px 的字号更般配 */
    width: auto;  
    flex-shrink: 0; 
    user-select: none;
    pointer-events: none; 
    margin: 0; /* 核心修复：干掉多余的 margin，让 flexbox 自动对齐 */
    display: block; 
}

.sf-page-hero-subtitle {
    font-size: 18px;
    color: #86868b !important; 
    max-width: 600px;
    line-height: 1.6;
    margin: 0; 
}

/* --- 右侧：倾斜散落的照片墙 --- */
.sf-page-hero-right {
    flex: 1;
    position: relative;
    height: 320px;
    max-width: 50%; /* 核心修复：强行限制图片只能在右边 50% 的区域活动 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.sf-scattered-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.scatter-img {
    position: absolute;
    border-radius: 12px; 
    border: 6px solid #ffffff; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

/* 收拢图片的散落范围，防止它们跑出屏幕 */
.scatter-img.img-1 { width: 150px; height: 220px; left: 0%; bottom: 10%; transform: rotate(-15deg); z-index: 1; }
.scatter-img.img-2 { width: 180px; height: 140px; right: 0%; bottom: 20%; transform: rotate(10deg); z-index: 2; }
.scatter-img.img-3 { width: 220px; height: 220px; left: 25%; top: 5%; transform: rotate(4deg); z-index: 3; }

/* 鼠标悬停照片：摆正、放大并置顶 */
.scatter-img:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.08);
    z-index: 10 !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* ==========================================
   3. 移动端适配
   ========================================== */
@media (max-width: 768px) {
    .sf-page-hero-full { min-height: auto; padding: 40px 0; }
    .sf-split-layout { flex-direction: column; align-items: flex-start; gap: 30px; }
    .sf-page-hero-title { font-size: 32px; }
    .sf-page-hero-icon-img { height: 35px !important; }
    .sf-page-hero-subtitle { font-size: 15px; }
    .sf-page-hero-right { display: none; } /* 手机端隐藏右侧照片墙，保持简洁 */
}

/* ==========================================
   4. 正文单栏纯净模式修正
   ========================================== */
.sf-reading-container-no-sidebar {
    max-width: 800px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 25px;
}

/* 1. 评论区大底：褪去灰底，融入页面纯白背景 */
.sf-comments-area { 
    background: transparent; 
    border-radius: 0; 
    padding: 0px 0px 0 0px; /* 左右不再需要内边距，完全和正文左对齐 */
    margin-top: 50px; 
    border-top: 0px solid #EFEFEF; /* 用一条极浅的线和正文内容隔开 */
}