/* ==========================================================
 * 合作伙伴友情链接页面专属样式 (Notion 极简风格)
 * 支持纯LOGO模式 (144*90) 与带标题的友情链接模式 (144*120)
 * ========================================================== */

.links-page {
    background-color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #37352f !important;
    line-height: 1.6 !important;
    padding-bottom: 80px !important;
}

.links-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ----------------------------------------------------------
 * 1. 头部 Hero 区域
 * ---------------------------------------------------------- */
.links-hero {
    padding: 80px 0 48px !important;
    text-align: center !important;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    border-bottom: 1px solid #f1f1ef !important;
}

.hero-emoji {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
    animation: wave-animation 2.5s infinite ease-in-out !important;
    transform-origin: 70% 70% !important;
}

@keyframes wave-animation {
    0%, 100% { transform: rotate( 0.0deg) }
    50% { transform: rotate(10.0deg) }
}

.links-hero .page-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #37352f !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.025em !important;
}

.links-hero .page-subtitle {
    font-size: 16px !important;
    color: #787774 !important;
}

/* ----------------------------------------------------------
 * 2. 链接列表区
 * ---------------------------------------------------------- */
.links-main {
    padding-top: 48px !important;
}

.links-section {
    margin-bottom: 64px !important;
}

.section-header {
    margin-bottom: 28px !important;
    border-bottom: 1px solid #f1f1ef !important;
    padding-bottom: 12px !important;
}

.section-header h2 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #37352f !important;
    margin-bottom: 6px !important;
}

.section-description {
    font-size: 14px !important;
    color: #787774 !important;
}

/* ----------------------------------------------------------
 * 3. 极简 LOGO 网格与卡片样式 (.links-page-grid)
 * ---------------------------------------------------------- */

.links-page .links-page-grid {
    display: grid !important;
    /* 每一列固定宽度锁定为 144px，在不同宽度的屏幕下自动换行 */
    grid-template-columns: repeat(auto-fill, 144px) !important;
    /* 核心要求：确保 Logo 的外边框之间，保持至少 10px 的间距 */
    gap: 10px !important; 
    margin-top: 30px !important;
    max-width: 100% !important;
    justify-content: start !important; /* 默认左对齐 */
}

/* 每一个极简卡片容器（锁定为 144px * 90px 尺寸） */
.links-page .links-page-item {
    display: flex !important;
    flex-direction: column !important; /* 改为垂直排列，以支持整体中心对齐 */
    align-items: center !important;    /* 保证卡片内容水平绝对居中对齐 */
    justify-content: center !important;  /* 保证卡片内容垂直绝对居中对齐 */
    width: 144px !important;  /* 强力限制容器宽度 */
    height: 90px !important;  /* 默认高度 90px（合作伙伴无标题） */
    background: #ffffff !important;
    border: 1px solid #e9e9e6 !important; /* 卡片的外边框 */
    border-radius: 6px !important;
    text-decoration: none !important;
    padding: 12px !important; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    /* 边框变绿、位移以及阴影随动动画 */
    transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
    overflow: hidden !important;
    box-sizing: border-box !important; /* 确保 padding 包含在 144x90 尺寸内 */
}

/* 针对有标题的友情链接卡片，调整布局和高度 */
.links-page .links-page-item.has-title {
    height: 120px !important; 
    justify-content: space-between !important; /* 头尾分布：Logo居中，文字底对齐 */
    padding: 10px 10px 8px !important; /* 缩减底边内间距，为文字匀出像素 */
}

/* 卡片鼠标悬停响应 */
.links-page .links-page-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 150, 94, 0.08) !important;
    border-color: #00965e !important;
    background-color: #fcfcfc !important;
}

/* ==========================================================
 * 核心对齐升级（对齐舱设计）：
 * 这是一个隐形的、高度完全统一的 Logo 对齐容器。
 * 它能够将高度、比例各异的 Logo 图片包裹，并强力执行水平垂直居中。
 * 从而保证了不同友链卡片之间 Logo 的中心点或轴线能够做到 100% 对齐。
 * ========================================================== */
.links-page .card-logo-box {
    display: flex !important;
    align-items: center !important;      /* 确保图片垂直对齐 */
    justify-content: center !important;   /* 确保图片水平对齐 */
    width: 100% !important;
    height: 64px !important;             /* 无论卡片高矮，Logo 盒子高度统一为 64px */
    overflow: hidden !important;
    margin: 0 auto !important;
    background-color: transparent !important;
}

/* 无标题卡片（合作伙伴）的 Logo 盒子高度微调，保证无字模式下的纯粹居中 */
.links-page .links-page-item:not(.has-title) .card-logo-box {
    height: 66px !important; /* 几乎充满容器内部的高 */
}

/* LOGO图片默认置灰滤镜 */
.links-page .links-page-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important; /* 保证原比例不拉伸 */
    filter: grayscale(100%) opacity(0.7) !important;
    transition: all 0.2s ease !important;
}

/* 悬停时还原彩色 */
.links-page .links-page-item:hover .links-page-img {
    filter: grayscale(0%) opacity(1) !important;
}

/* ----------------------------------------------------------
 * 3.1 友情链接标题样式 (.links-item-title)
 * ---------------------------------------------------------- */
.links-page .links-item-title {
    font-size: 12px !important; /* 稍微精简为 12px，使汉字排列更为紧致高级 */
    font-weight: 600 !important;
    color: #4b4a45 !important;
    margin-top: 4px !important;
    text-align: center !important;
    width: 100% !important;
    /* 汉字防溢出，自动切断为省略号 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.2s ease !important;
    line-height: 1.2 !important;
}

/* 悬停卡片时，文字标题优雅地变绿 */
.links-page .links-page-item:hover .links-item-title {
    color: #00965e !important;
}

/* ----------------------------------------------------------
 * 4. 申请指南区域 (Notion Callout 变体风格)
 * ---------------------------------------------------------- */
.links-apply-section {
    margin-top: 80px !important;
}

.apply-card {
    display: flex !important;
    background-color: #fafafa !important;
    border: 1px solid #e9e9e6 !important;
    border-radius: 12px !important;
    padding: 32px !important;
    gap: 32px !important;
}

.apply-info {
    flex: 3 !important;
}

.apply-info h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #37352f !important;
    margin-bottom: 14px !important;
}

.apply-info p {
    font-size: 14px !important;
    color: #37352f !important;
    margin-bottom: 12px !important;
}

/* 申请规范列表 */
.apply-rules {
    padding-left: 20px !important;
    margin-bottom: 24px !important;
}

.apply-rules li {
    font-size: 13.5px !important;
    color: #787774 !important;
    margin-bottom: 8px !important;
}

/* 自己的信息展示卡 */
.site-my-info {
    background-color: #ffffff !important;
    border: 1px solid #e9e9e6 !important;
    border-radius: 8px !important;
    padding: 16px !important;
}

.site-my-info p {
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.site-my-info ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-my-info ul li {
    font-size: 13px !important;
    color: #787774 !important;
    margin-bottom: 6px !important;
}

/* 微信动作栏 */
.apply-action {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.contact-qr {
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #e9e9e6 !important;
    padding: 18px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

.contact-qr img {
    width: 140px !important;
    height: 140px !important;
    display: block !important;
    margin-bottom: 12px !important;
    border-radius: 4px !important;
}

.contact-qr p {
    font-size: 12px !important;
    color: #787774 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ----------------------------------------------------------
 * 5. 移动端与不同视口的响应式适配
 * ---------------------------------------------------------- */
@media (max-width: 768px) {
    .links-hero {
        padding: 60px 0 36px !important;
    }
    
    .links-hero .page-title {
        font-size: 28px !important;
    }
    
    .apply-card {
        flex-direction: column !important;
        padding: 24px !important;
        gap: 24px !important;
    }
    
    .apply-action {
        width: 100% !important;
    }
    
    .contact-qr img {
        width: 160px !important;
        height: 160px !important;
        margin: 0 auto 12px !important;
    }
}

@media (max-width: 480px) {
    .links-page .links-page-grid {
        justify-content: center !important; /* 手机端让两列卡片水平居中 */
    }
}