/* ============================================================
   字体日记网 - 分类字体列表页（fonts/01~10.html）专属样式
   复用：index.css / font-detail.css / font-index.css
   （导航/面包屑/banner hero-home/标题 cat-head/底部版权 均在公共样式中）
   本文件仅负责：列表区容器、排序按钮、字体网格卡片
   ============================================================ */

/* ---------- 列表区容器（与 index.html 的 .cat-section 完全一致：1226 容器 / 内容 1206） ---------- */
.list-section {
    max-width: 1226px;
    margin: 0 auto;
    padding: 30px 10px 0; /* 底部0，主体→版权间距由 footer_top 的 margin-top:50px 提供，与首页一致 */
}

/* ---------- 列表标题区：右侧排序幽灵按钮（cat-head 复刻 index，仅增强布局） ---------- */
.list-section .cat-head {
    flex-wrap: wrap;
    row-gap: 10px;
}
.list-sort {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
.sort-btn {
    background: transparent;
    border: 1px solid #6b7280;
    color: #9ca3af;
    border-radius: 999px;
    padding: 5px 15px;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, color .2s, background .2s;
}
.sort-btn:hover {
    border-color: #f5f5f5;
    color: #f5f5f5;
}
.sort-btn.active {
    border-color: #fff12f;
    background: #fff12f;
    color: #111827;
    font-weight: 700;
}

/* ---------- 字体网格（4列） ---------- */
.font-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ---------- 单款字体卡片：整体白底 + 10px 内边距，仅预览图+编号区填充取色背景 ---------- */
.font-card {
    display: block;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
    transition: transform .2s, box-shadow .2s;
}
.font-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(17, 24, 39, .12);
}
.font-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 预览图区：父容器高度 = 预览图(5:1)高度的两倍（padding-top 40%），
   图片占容器上半（50% = 5:1 完整显示原图左侧，裁掉右侧黑色下载区），
   下半为同色背景留白延伸；兼容所有浏览器 */
.font-thumb {
    position: relative;
    padding-top: 40%; /* 容器高度 = 宽度×40% = 预览图(20%)的两倍 */
    overflow: hidden;
    background: var(--card-bg, #f9f5ef);
    border-radius: 8px;
}
.font-thumb img {
    position: absolute;
    top: 25%; /* 垂直居中：容器高40%，img高50%(=容器20%)，偏移=(40-20)/2=10%宽=25%容器高 */
    left: 0;
    width: 100%;
    height: 50%;
    object-fit: cover;
    object-position: left top; /* 左侧对齐裁掉右侧黑色下载区；网址水印在左29.5%内，由编号容器(34%)覆盖 */
    display: block;
}
/* 编号：与图片垂直居中位置对齐(top:25%)，高度=图片高(50%)，覆盖整张图片左侧，
   网址水印(左3.8%~29.5%)必被盖住；背景同卡片取色，醒目有装饰感 */
.font-id {
    position: absolute;
    top: 25%;
    left: 0;
    width: 34%;
    height: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 0 0 12px;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 15px;
    font-weight: 800;
    color: rgba(17, 24, 39, .72);
    letter-spacing: .03em;
    background: var(--card-bg, #f9f5ef);
    border-top-left-radius: 8px;
}

/* 文字信息区：卡片已有10px内边距，内部仅保留垂直间距 */
.font-info {
    padding: 12px 2px 2px;
}
/* 字体名：语义化为 h3（h1>banner标题 / h2>列表标题 / h3>字体名），静态流纵向排列；
   用独立类 .font-title 彻底隔离 index.css 中 .font-name 的绝对定位+黑底污染 */
.font-title {
    position: static;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin: 0;
    text-align: left;
    background: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.font-desc {
    font-size: 12px;
    line-height: 1.6;
    color: #8f8f8f;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 无详情页卡片（方案A）：不可点击 + 预览图/文字弱化，详情页生成后自动恢复正常 */
.font-card.no-detail .font-card-link { cursor: default; }
.font-card.no-detail .font-thumb,
.font-card.no-detail .font-info { opacity: .55; }

/* 免费标签：独立一行左下角，醒目（参考卡片样式） */
.font-free {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #d97706;
    background: rgba(217, 119, 6, .12);
    border-radius: 4px;
    padding: 2px 9px;
    letter-spacing: .05em;
    line-height: 1.5;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1100px) {
    .font-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .font-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .list-section { padding-top: 24px; }
}
@media (max-width: 700px) {
    .font-grid { grid-template-columns: repeat(2, 1fr); }
    .list-sort { margin-left: 0; }
}
@media (max-width: 480px) {
    /* 最小手机端保持 2 列卡片，窄卡片同步微调字号/编号/间距，水印覆盖仍为百分比自适应 */
    .font-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .font-title { font-size: 14px; }
    .font-desc { font-size: 12px; margin-top: 4px; }
    .font-free { font-size: 11px; padding: 1px 7px; margin-top: 8px; }
    .font-id { font-size: 13px; padding-left: 8px; }
    .font-info { padding-top: 8px; }
}