/* ==========================================================================
   酷站导航页面精修版 (极简图标 & 扎实卡片)
   ========================================================================== */

.sf-coolsite-wrapper { padding: 60px 0; background: #fff; min-height: 100vh; }

/* 头部区域收紧 */
.coolsite-header { text-align: center; margin-bottom: 50px; }
.coolsite-header h1 { font-size: 32px; font-weight: 800; color: #1d1d1f; letter-spacing: -0.5px; }
.coolsite-desc { color: #86868b; font-size: 15px; margin-top: 8px; }

.coolsite-section { margin-bottom: 60px; }

/* 👇 1. 分类标题：去掉线条，加入图标 👇 */
.coolsite-cat-title { 
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px; 
    font-weight: 700; 
    color: #1d1d1f; 
    margin-bottom: 20px; 
}
/* 利用 Remix Icon 或者 FontAwesome 为标题前置一个通用图标 */
.coolsite-cat-title::before {
    content: "\ef3a"; /* Remix Icon 的 ri-bookmark-3-fill 编码 */
    font-family: 'remixicon'; /* 确保你加载了 RemixIcon */
    color: var(--sf-accent-red, #D71A1B);
    font-size: 20px;
    font-weight: normal;
}

/* 👇 2. 链接卡片：尺寸缩小，网格加密 👇 */
.coolsite-grid {
    display: grid;
    /* 将 min-width 从 240px 缩小到 180px，每行能容纳更多卡片 */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.coolsite-card {
    display: flex; 
    align-items: center; 
    padding: 10px 12px; /* 减小内边距 */
    background: #f5f5f7; 
    border-radius: 10px;
    transition: background 0.2s ease; /* 仅保留背景变色过渡 */
    text-decoration: none; 
    border: 1px solid transparent;
}

/* 👇 3. 鼠标经过：去掉浮动(transform)和阴影(shadow) 👇 */
.coolsite-card:hover {
    background: #eeeeef; /* 仅仅变深一点点，暗示可点击 */
    transform: none;     /* 彻底禁止位移 */
    box-shadow: none;    /* 彻底禁止阴影 */
    border-color: rgba(0,0,0,0.05);
}

/* 图标缩小 */
.card-icon { width: 28px; height: 28px; margin-right: 12px; flex-shrink: 0; }
.card-icon img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }

.card-info { overflow: hidden; }
.site-name { 
    display: block; 
    font-size: 14px; 
    font-weight: 600; 
    color: #1d1d1f; 
    margin-bottom: 2px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* 如果不需要描述，可以在 page-coolsite.php 里去掉，卡片会更窄 */
.site-desc { 
    font-size: 11px; 
    color: #a1a1a6; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

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