/* ================================================================
   工具卡片墙（首页「常用工具」与语文 / 英语 / 数学栏目页共用）
   ----------------------------------------------------------------
   用法：容器内放一个 .grid，网格里放若干张卡片：

     <div class="grid">
       <a class="card card-en" href="/english/dictionary/">
         <span class="icon-tile" aria-hidden="true"><svg …></svg></span>
         <h3 class="card-title">英汉词典</h3>
         <p class="card-desc">英汉、汉英双向查询…</p>
         <div class="card-foot">
           <span class="tag tag-en">英语 · 在线查询</span>
           <svg class="arrow" …></svg>
         </div>
       </a>
     </div>

   卡片内部为栅格布局：第一行「.icon-tile 图标 + .card-title 标题」左右并排（同一行，
  严格下方是整行的 .card-desc 说明与 .card-foot 底部标签行），因此改标题文字长度不会
  把图标挤到另一行；窄屏下标题在图标右侧换行。

  class 仍按学科取 card-en / card-zh / card-math 与
   tag-en / tag-zh / tag-math，但三者颜色已统一为语文的橙（2026-09 起，见
   design.md）：英语走 --en（取值等于 --zh），数学卡片直接取 --zh；
   --math 的青绿只留给数学工具页的成功 / 判定色，不用于卡片。
   相关令牌（--en / --zh / --math、--card-bg、--radius-*、--shadow-*）
   统一定义在 /css/style.css 的 :root。

   断点遵循整站规范（见 design.md（项目根目录））：
     L（≥1024）三列 / M（768–1023）两列 / S（<768）两列紧凑
   ================================================================ */

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    /* 栅格布局：第一行「图标 + 标题」并排（图标左、标题右），
       说明与底部标签行整行铺满；说明占 1fr，底部标签行始终贴卡片底 */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 14px 12px;
    padding: 22px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    /* 整张卡片就是一个 <a>，必须在这里显式去掉链接默认样式：
       Bootstrap 的 reboot 会给 a 加 text-decoration: underline，而栏目页没有首页
       那套页面级 reset，缺了这两条卡片标题与说明就会被画上下划线。 */
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-3px);
        border-color: #E0D2BC;
        box-shadow: var(--shadow-card-hover);
    }
}

/* 图标：第一行第一列，与右侧标题垂直居中对齐 */
.card .icon-tile {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card .icon-tile svg {
    width: 24px;
    height: 24px;
}

.card-en .icon-tile {
    background: var(--en-soft);
}

.card-en .icon-tile svg {
    color: var(--en);
}

.card-zh .icon-tile {
    background: var(--zh-soft);
}

.card-zh .icon-tile svg {
    color: var(--zh);
}

/* 数学卡片与语文 / 英语卡片同色（统一用语文的橙）；
   --math / --math-soft 青绿保留给数学工具页，不在这里用。 */
.card-math .icon-tile {
    background: var(--zh-soft);
}

.card-math .icon-tile svg {
    color: var(--zh);
}

/* 标题：第一行第二列（图标右侧），长标题在列内换行 */
.card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.005em;
}

/* 说明：第二行整行铺满，撑满剩余高度把底部标签行压到卡片底部 */
.card-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-3);
    margin: 0;
}

.card-foot {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tag {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-en {
    color: var(--en-ink);
}

.tag-zh {
    color: var(--zh-ink);
}

/* 标签色同样统一为语文的橙（--math-ink 青绿不用于卡片） */
.tag-math {
    color: var(--zh-ink);
}

.card .arrow {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex: none;
}

@media (max-width: 1023.98px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .card {
        padding: 14px;
        gap: 10px;
        border-radius: 16px;
    }

    .card .icon-tile {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .card .icon-tile svg {
        width: 20px;
        height: 20px;
    }

    .card-title {
        font-size: 15px;
    }

    .card-desc {
        font-size: 12.5px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .tag {
        font-size: 11px;
    }

    .card .arrow {
        display: none;
    }
}