/* --- 资源页专属样式 (已适配新版排版) --- */
:root {
    --primary-dark: #1a2b4c;
    --primary-gold: #c5a059;
    --bg-color: #fdfbf7;
    --text-main: #333333;
    --text-light: #666666;
    --font-handwriting: "KaiTi", "STKaiti", serif;
}
/* --- 标题区 - 增强设计感版 --- */
.res-hero {
    text-align: center;
    padding: 42px 0 16px;
    position: relative;
}

/* 主标题：加大字号 + 加粗 + 深蓝色 + 字间距 */
.res-hero h1 {
    font-size: 34px;
    color: var(--primary-dark);
    margin-bottom: 10px;
    letter-spacing: 3px;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

/* 资源页标题去掉两侧花饰，减少装饰密度 */
.res-hero h1::before,
.res-hero h1::after {
    content: none;
}

/* 副标题：缩小 + 浅灰 + 行高宽松 */
.res-subtitle {
    font-size: 16px;
    color: #888;
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;       /* 可选：斜体增加文艺感 */
}

/* 标题下方保留更简洁的细分隔线 */
.res-hero::after {
    content: "";
    display: block;
    width: 160px;
    height: 1px;
    margin: 14px auto 0;
    background: linear-gradient(to right, transparent, var(--primary-gold), transparent);
    opacity: 0.5;
}
.divider-ornament {
    width: 100%;
    height: 48px;
    margin-top: -8px;
    margin-bottom: 26px;
    background-image: url('../images/divider-long.png');
    background-repeat: no-repeat; 
    background-position: center;  
    background-size: 55% auto;
    mix-blend-mode: multiply;
    opacity: 0.65;
}


/* 上传区域 - 仅按钮可点击，文字纯提示 */
.res-upload-simple { 
    padding: 28px 0 56px;
    text-align: center; 
}

.upload-action {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.upload-action:hover {
    transform: scale(1.08); /* 悬停时微微放大，不变色 */
}

.upload-btn-img {
    width: 160px;        /* 可根据视觉效果调整 */
    height: auto;
    display: block;
    margin: 0 auto 15px;
    
    /* 如果图片不是透明底，加这行融合白底 */
    mix-blend-mode: multiply;
    
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

/* 【关键】文字样式：深色 + 不可点击 + 无下划线 */
.upload-hint {
    font-size: 15px;
    color: var(--primary-dark);   /* 👈 改成深蓝色，更醒目 */
    /* 或者用深棕色：color: #5a4a3a; */
    margin-top: 8px;
    cursor: default;              /* 👈 鼠标变成默认箭头，表示不可点击 */
    user-select: none;            /* 👈 防止用户选中文字 */
    pointer-events: none;         /* 👈 彻底禁用点击事件 */
}
/* 上传按钮样式 - 放大 + 去背景 */
.upload-btn-img {
  mix-blend-mode: multiply;
    opacity: 0.95; /* 稍微淡化，减少白底突兀感 */
    width: 240px;        /* 【调大】从默认约100px → 140px，可根据视觉效果微调 */
    height: auto;        /* 高度自动保持比例 */
    display: block;
    margin: 0 auto 20px; /* 上下间距可调 */
    
    /* 【关键】如果图片不是透明底，加这行让白底变透明 */
    mix-blend-mode: multiply;
    
    /* 可选：加一点阴影增强立体感 */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    
    /* 可选：鼠标悬停时微微放大 */
    transition: transform 0.3s ease;
}

.upload-btn-img:hover {
    transform: scale(1.08);
}

/* 【核心新版】分类入口区 */
.res-categories { padding: 18px 0 56px; }
.res-section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 14px;
}
.res-section-kicker {
    display: inline-block;
    padding: 6px 22px;
    border: 1px solid rgba(197, 160, 89, 0.6);
    border-radius: 999px;
    background: rgba(197, 160, 89, 0.05);
    color: #967f4b;
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1.25;
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    margin-bottom: 0;
}

/* 框框统一放到文字下方后，留足呼吸感 */
.res-section-head .res-section-kicker {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
}
.category-grid {
    display: flex;
    justify-content: center;
    gap: 42px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.category-card {
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.25s ease;
}

.category-card:hover {
    transform: translateY(-3px);
}
.cat-border-box {
    position: relative;
    width: 100%;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.25s ease;
}
.cat-border-box:hover { transform: translateY(-2px); }
.cat-border-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; object-fit: contain; pointer-events: none;
}
.cat-btn-img {
    position: absolute; /* 【关键】改为绝对定位，才能精准居中 */
    top: 55%;           /* 垂直居中 */
    left: 48.5%;          /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中偏移 */
    
    z-index: 2;
    width: 170px;       /* 【调大】从 110px → 130px，可根据视觉效果微调 */
    height: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15)); /* 阴影稍强，增强立体感 */
}

.cat-info { text-align: center; margin-bottom: 15px; }
.cat-info h3 { font-size: 20px; color: var(--primary-dark); margin-bottom: 8px; font-weight: bold; letter-spacing: 1px; }
.cat-info p { font-size: 13px; color: #6f7580; line-height: 1.6; }

.cat-flower { cursor: pointer; transition: transform 0.3s; }
.cat-flower:hover { transform: scale(1.3); }
.flower-icon { width: 48px; height: 48px; }

/* 机制说明区 */
/* --- 共享机制说明区 (精细化控制版) --- */
.res-mechanisms { 
    padding: 70px 0 74px; 
    text-align: center; 
}

.res-mechanisms .res-section-head {
    margin-bottom: 8px;
}

.res-mechanisms .res-section-head h2 {
    font-size: 40px;
    line-height: 1.22;
    letter-spacing: 2px;
    color: #1f2f52;
    margin: 14px 0 12px;
    font-weight: 700;
}

.res-mechanisms .res-section-head p {
    font-size: 17px;
    line-height: 1.85;
    color: #888;
    max-width: 820px;
    margin: 0 auto;
    font-style: normal;
}

.res-mechanisms .res-section-head .res-section-kicker {
    margin-top: 18px;
}

.mech-grid { 
    display: flex; 
    justify-content: center; 
    gap: 52px;
    flex-wrap: wrap; 
    margin-top: 62px; 
}

.mech-card { 
    flex: 1; 
    min-width: 260px;   /* 【调宽】最小宽度增加，防止太窄 */
    max-width: 320px;   /* 【调宽】最大宽度增加，给内容更多空间 */
    background: transparent; 
    border: none; 
    position: relative; 
    height: 240px;      /* 【调高】卡片总高度增加，避免拥挤 */
    transition: transform 0.25s ease, filter 0.25s ease;
}

.mech-card:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 20px rgba(26, 43, 76, 0.14));
}

/* 纹理边框图 - 可自由缩放版 */
.mech-border-bg {
    position: absolute;
    top: 96%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.12); /* 👈 改这个数字控制大小！1.0=原大，1.2=放大20% */
    
    width: auto;
    height: auto;
    max-width: 90%;   /* 防止过大溢出 */
    max-height: 90%;  /* 防止过高溢出 */
    
    z-index: 1;
    object-fit: contain;
    mix-blend-mode: multiply;
    opacity: 0.62;
}

/* 内容层 */
.mech-content {
    position: relative;
    z-index: 2; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 【关键】从上往下排，不是居中！*/
    padding-top: 35px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* 民族风图标 */
.mech-icon-img {
    width: 60px;        /* 【调大】图标从50→60px，更醒目 */
    height: 60px;
    margin-bottom: 10px; /* 【调大】图标与标题间距从15→18px */
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* 加轻微阴影增强立体感 */
}

/* 标题 */
.mech-card h3 { 
    font-size: 20px;         /* 【调大】标题从18→20px，更突出 */
    color: var(--primary-dark); 
    margin-bottom: 20px;     /* 【调大】标题与描述间距从8→10px */
    font-weight: bold;
    letter-spacing: 5px;
}

/* 描述文字 */
.mech-card p { 
    font-size: 14px;         /* 【调大】描述从13→14px，更易读 */
    color: #68707a;
    line-height: 1.7;        /* 【调松】行高从1.6→1.7，呼吸感更强 */
    text-align: center;
    max-width: 200px;        /* 【限制】防止文字过宽，影响美观 */
}

/* 底部 Footer */
.site-footer {
    background-color: var(--bg-color);
    padding-top: 60px;
    border-top: 1px solid #e8e4d8;
    position: relative;
    padding-bottom: 60px;
}
.footer-content {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 40px; border-bottom: 1px solid #e0dcd0; flex-wrap: wrap; gap: 30px;
}
.footer-left h2 { font-size: 22px; color: var(--primary-dark); margin-bottom: 15px; }
.slogan { font-size: 13px; color: #888; letter-spacing: 1px; }
.footer-center { text-align: left; flex: 1; min-width: 250px; }
.contact-item { font-size: 14px; color: #555; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.contact-item .icon { font-size: 16px; }
.contact-item.small { font-size: 12px; color: #999; margin-top: 20px; }
.footer-right { text-align: right; }
.footer-right h4 { font-size: 16px; color: #555; margin-bottom: 15px; }
.social-icons { display: flex; gap: 15px; justify-content: flex-end; }
.social-btn {
    width: 36px; height: 36px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #666; cursor: pointer; transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.social-btn:hover { background: var(--primary-gold); color: #fff; }
.footer-copyright { text-align: center; font-size: 12px; color: #999; padding: 20px 0 40px 0; }
.bottom-border-decoration {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 50px; position: absolute; bottom: 0; left: 0;
}
.bottom-border-decoration .pattern-left,
.bottom-border-decoration .pattern-right {
    flex: 1; height: 100%; background-image: url('../images/top-pattern.png');
    background-repeat: repeat-x; background-size: auto 40px; mix-blend-mode: multiply; opacity: 0.9;
}
.bottom-border-decoration .pattern-left { background-position: right center; margin-left: 40px; }
.bottom-border-decoration .pattern-right { background-position: left center; margin-right: 40px; }
.bottom-border-decoration .center-nang { margin: 0 15px; z-index: 2; }
.bottom-border-decoration .center-nang img { height: 45px; width: auto; border-radius: 50%; mix-blend-mode: multiply; }
/* --- 志愿者号召区 - 设计感增强版 --- */
.volunteer-call {
    text-align: center;
    padding: 46px 0 28px;
    position: relative;
}

.call-content h2 {
    font-size: 40px;
    color: #1f2f52;
    margin-bottom: 12px;
    letter-spacing: 2px;
    line-height: 1.22;
    font-weight: bold;
    position: relative;
    display: block;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.call-content .res-section-kicker {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
}

/* 避免资源页旧 footer 样式影响首页同款 footer-info-section */
.site-footer .footer-content {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 40px; border-bottom: 1px solid #e0dcd0; flex-wrap: wrap; gap: 30px;
}
.site-footer .footer-left h2 { font-size: 22px; color: var(--primary-dark); margin-bottom: 15px; }
.site-footer .slogan { font-size: 13px; color: #888; letter-spacing: 1px; }
.site-footer .footer-center { text-align: left; flex: 1; min-width: 250px; }
.site-footer .contact-item { font-size: 14px; color: #555; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.site-footer .contact-item .icon { font-size: 16px; }
.site-footer .contact-item.small { font-size: 12px; color: #999; margin-top: 20px; }
.site-footer .footer-right { text-align: right; }
.site-footer .footer-right h4 { font-size: 16px; color: #555; margin-bottom: 15px; }
.site-footer .social-icons { display: flex; gap: 15px; justify-content: flex-end; }
.site-footer .social-btn {
    width: 36px; height: 36px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #666; cursor: pointer; transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.site-footer .social-btn:hover { background: var(--primary-gold); color: #fff; }
.site-footer .footer-copyright { text-align: center; font-size: 12px; color: #999; padding: 20px 0 40px 0; }

/* 号召区标题去掉两侧花饰，避免重复装饰 */
.call-content h2::before,
.call-content h2::after {
    content: none;
}

.call-subtitle {
    font-size: 17px;
    color: #888;
    line-height: 1.85;
    max-width: 900px;
    margin: 0 auto;
    font-style: normal;
}

/* 分隔线保留但做轻量化 */
.call-divider {
    width: 120px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(to right, transparent, var(--primary-gold), transparent);
    opacity: 0.35;
}

/* 悬停动画（可选） */
.call-content h2 {
    transition: transform 0.3s ease, color 0.3s ease;
}

.volunteer-call:hover .call-content h2 {
    transform: translateY(-2px);
    color: var(--primary-gold);
}