/* ============================================================
   字体日记网 - fonts/index.html 免费可商用字体总览页专用样式
   与全站同一设计语言：深灰#333底 / 黄#fff12f强调 / 1206px版心
   ============================================================ */

/* ---------- Banner：左右布局（左文字/右SVG描边数字装饰），PC固定高 270~300px ---------- */
.hero-home {
    padding: 20px 20px 20px; /* 压缩顶部留白，配合固定高度 */
}
.hero-home .hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    height: 258px; /* hero总高 = 20 + 258 + 20 ≈ 298px */
    padding: 0 10px;
}
/* 左列：面包屑/短横线/标题/副标题 纵向排列 */
.hero-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
    position: relative;
    margin-top: 0; /* 默认0；仅PC大屏（>900px）上移-28px，见下方媒体查询 */
}
/* PC大屏时左列上移28px，配合右侧装饰底部对齐；平板/手机恢复0 */
@media (min-width: 901px) {
    .hero-left {
        margin-top: -28px;
    }
}
.hero-left .breadcrumb {
    margin-bottom: 0;
}
/* 面包屑与标题之间的短横线装饰分割（真实HTML元素）PC端上40px下10px，平板/手机端上下20px */
.hero-divider {
    width: 56px;
    height: 3px;
    margin: 40px 0 10px; /* PC端拉开面包屑与标题的间距 */
    border-radius: 2px;
    background: linear-gradient(90deg, #fff12f 0%, rgba(255,241,47,0) 100%);
    flex-shrink: 0;
}
.hero-home .hero-title {
    font-size: 44px;
    margin: 0;
}
.hero-home .hero-subtitle {
    max-width: 780px; /* 扩大宽度，副标题尽量一行不换行 */
    margin: 0;
}

/* 右侧装饰：SVG描边大数字492 + 说明文字 + 悬浮「持续更新」标签 */
.hero-deco {
    grid-area: deco;
    position: relative;
    top: 2px; /* 与左列内容（含短横线）高度平衡后，装饰底部与副标题底部对齐 */
    width: 260px;
    height: 178px;
    margin: 0 auto;
    align-self: center;
}
.deco-svg {
    display: block;
    width: 240px;
    height: 140px;
    margin: 0 auto;
}
.deco-svg text {
    font-family: "Georgia", "Times New Roman", serif; /* 与详情页编号同款衬线数字 */
    font-size: 118px;
    font-weight: 900; /* 字重加大，笔画更粗更有力 */
    fill: rgba(253, 224, 71, .08); /* 极淡同色填充，避免交叉处发黑粘连 */
    stroke: rgba(253, 224, 71, .92);
    stroke-width: 1.2px; /* 描边减细，防止笔画交叉处描边重叠粘连 */
    letter-spacing: 4px; /* 数字间距略拉开，避免相邻数字描边粘连 */
    paint-order: stroke;
}
.deco-caption {
    width: 240px; /* 与SVG同宽，与svg元素右侧对齐 */
    margin: 2px auto 0;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    color: #dbeafe;
    letter-spacing: .08em;
}
.deco-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    background: #fff12f;
    color: #333;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(255, 241, 47, .4);
    animation: deco-badge-float 2.4s ease-in-out infinite;
}
@keyframes deco-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ---------- 四模块特性条（编号加大、装饰感强；每模块右上角巨型「优势」底纹） ---------- */
.features {
    max-width: 1226px;
    margin: 0 auto;
    padding: 34px 10px 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.feature-item {
    position: relative;
    overflow: hidden;
    display: flex;          /* 编号+标题横向排布 */
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    padding: 20px 20px 18px;
    transition: border-color .25s, transform .25s;
}
.feature-item:hover {
    border-color: rgba(255,241,47,.55);
    transform: translateY(-2px);
}
/* 每个模块右上角独立的巨型「优势」描边字底纹 */
.feature-item::after {
    content: '优势';
    position: absolute;
    top: 0px;
    right: -1px;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC",sans-serif;
    font-size: 47px;
    font-weight: 100;
    line-height: 1;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .06);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
/* 内容置于底纹之上 */
.feature-item > * {
    position: relative;
    z-index: 1;
}
.feature-no {
    font-family: "Georgia", "Times New Roman", serif; /* 与详情页编号同款 */
    font-size: 30px;
    font-weight: 400;
    color: #fff12f;
    letter-spacing: .02em;
    line-height: 1;
    margin-bottom: 0; /* 横向布局不再需要下边距 */
    position: relative;
    padding-bottom: 8px;
}
.feature-no::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #fff12f 0%, rgba(255,241,47,0) 100%);
}
.feature-title {
    margin: 0; /* 语义化为h3后重置默认外边距 */
    font-size: 19px;
    font-weight: 800;
    color: #f5f5f5;
    margin-bottom: 0; /* 与编号同行，去掉下边距 */
    letter-spacing: .02em;
}
.feature-desc {
    flex-basis: 100%; /* 描述独占一行，位于编号+标题下方 */
    font-size: 14px;
    line-height: 1.7;
    color: #9a9a9a;
    margin: 0;
}

/* ---------- 分类介绍区（浅色卡片） ---------- */
.cat-section {
    max-width: 1226px;
    margin: 0 auto;
    padding: 20px 10px 0; /* 底部0，主体→版权间距由 footer_top 的 margin-top:50px 提供，与首页一致 */
}
.cat-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 10px 0 18px; /* 上边距10px、下边距18px */
}
.cat-head h2 {
    font-size: 24px;
    font-weight: 900;
    color: #f5f5f5;
    margin: 0;
}
.cat-head h2 em {
    font-style: normal;
    color: #fff12f;
}
.cat-head .cat-head-sub {
    font-size: 13px;
    color: #888;
}

.cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cat-card {
    background: #ffffff;
    border: 1px solid #e6e8ee;
    border-radius: 14px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
/* 6种浅色背景循环分配 */
.cat-card:nth-child(6n+1) { background: #edfbfb; }
.cat-card:nth-child(6n+2) { background: #fff3f7; }
.cat-card:nth-child(6n+3) { background: #fcfae1; }
.cat-card:nth-child(6n+4) { background: #f9f5ef; }
.cat-card:nth-child(6n+5) { background: #eff1f9; }
.cat-card:nth-child(6n+6) { background: #ffffff; }
.cat-card:hover {
    border-color: rgba(255, 209, 0, .75);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

/* 头部：编号 + 分类名（大字号，视觉焦点）+ 数量 */
.cat-card-top {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}
.cat-no {
    font-family: "Georgia", "Times New Roman", serif; /* 与详情页编号同款 */
    font-size: 68px; /* 翻倍，视觉焦点 */
    font-weight: 400;
    color: #1f2937;
    letter-spacing: .02em;
    line-height: 1;
    position: relative;
}
/* 编号左侧品牌黄点缀，保持全站黄色基因 */
.cat-no::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #fff12f;
    margin-right: 12px;
    transform: rotate(45deg);
    vertical-align: 10px;
}
.cat-name {
    margin: 0; /* 语义化为h3后重置默认外边距 */
    font-size: 44px; /* 翻倍，视觉焦点 */
    font-weight: 800;
    color: #111827;
    letter-spacing: .04em;
    line-height: 1;
}
.cat-count {
    margin-left: auto;
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}
.cat-count b {
    color: #e0a800;
    font-weight: 800;
    font-size: 15px;
}

/* 特征文案 */
.cat-desc {
    font-size: 16px;
    line-height: 1.75;
    color: #4b5563;
    margin: 0 0 16px;
}

/* 代表字体标签（刷新随机6个，3列×2行等宽对齐，点击跳详情页） */
.cat-font-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.cat-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.cat-tag i {
    font-style: normal;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; /* 与详情页等宽标签同款 */
    font-size: 12.5px;
    font-weight: 400;
    color: #9ca3af;
    transition: color .2s;
    flex-shrink: 0;
}
.cat-tag:hover {
    border-color: rgba(255, 209, 0, .8);
    color: #111827;
    background: #ffffff;
    transform: translateY(-1px);
}
.cat-tag:hover i {
    color: #e0a800;
}

/* 查看全部按钮（浅底上改实心黄底深字，对比更清晰） */
.cat-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 13.5px;
    font-weight: 800;
    color: #333;
    text-decoration: none;
    padding: 9px 20px;
    background: #fff12f;
    border: 1px solid rgba(255, 209, 0, .6);
    border-radius: 999px;
    transition: background .25s, transform .25s, box-shadow .25s;
    box-shadow: 0 3px 10px rgba(224, 168, 0, .22);
}
.cat-more:hover {
    background: #ffe600;
    transform: translateX(2px);
    box-shadow: 0 5px 16px rgba(224, 168, 0, .32);
}
.cat-more .arr {
    transition: transform .25s;
}
.cat-more:hover .arr {
    transform: translateX(3px);
}

/* ---------- 响应式（断点体系：1080 / 900 / 768 / 640 / 480，从宽到窄逐级收紧） ---------- */

/* ≤1080px：中等屏，四模块降为2列 */
@media (max-width: 1080px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ≤900px：平板，banner改单列自适应高度、隐藏右侧装饰、短横线纯黄左对齐 */
@media (max-width: 900px) {
    .hero-home .hero-inner {
        height: auto; /* banner高度自适应内容 */
        padding: 6px 4px 14px;
    }
    .hero-deco {
        display: none;
    }
    .hero-divider {
        margin: 20px 0;
        background: #fff12f;
    }
}

/* ≤768px：手机端，短横线居中显示 */
@media (max-width: 768px) {
    .hero-divider {
        margin: 10px auto;
        width: 20px;
    }
    /* 移动端去掉"优势"字底纹 */
    .feature-item::after {
        content: none;
    }
}

/* ≤640px：小屏手机，分类单列、代表字体标签2列、标题缩小、四模块保持2列 */
@media (max-width: 640px) {
    .feature-item{
        padding: 14px;
    }
    .feature-desc{
        font-size: 12px;
    }
    .cat-grid {
        grid-template-columns: 1fr;
    }
    .cat-font-tags {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-home .hero-title {
        font-size: 26px;
    }
    .features {
        grid-template-columns: 1fr 1fr;
        padding-top: 24px;
    }
    .cat-card {
        padding: 18px 16px 16px;
    }
    .cat-no {
        font-size: 44px;
    }
    .cat-name {
        font-size: 26px;
    }
    .cat-desc {
        font-size: 14px;
    }
    .cat-tag {
        font-size: 13px;
        padding: 6px 6px;
    }
}

/* ≤480px：超小屏手机，四模块保持一行2列；分类标题区标题与说明纵向居中 */
@media (max-width: 480px) {
    .features {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .cat-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }
}