/* assets/css/systems/tools-index.css */

/*
 * 免費工具列表頁（pages/tools-index*.php）專屬樣式。
 * 版面、按鈕與標題字級沿用共用的 archcross-landing.css；這裡只補頁首說明與工具卡片。
 * 卡片用色塊區分，不畫框線；同一列卡片等高，按鈕對齊在底部。
 */

.tools-index-section {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.tools-index-header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tools-index .tools-index-header .ac-lead {
    max-width: 680px;
    margin: 0;
}

.tools-index .tools-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-index .tools-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
    border-radius: var(--ac-radius-lg);
    transition: translate var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-decelerate),
        box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

.tools-index .tools-card:hover {
    translate: 0 -6px;
    box-shadow: var(--md-sys-elevation-3);
}

/* 封面比例固定 16:9，與 1200×675 的封面檔一致 */
.tools-card__cover {
    aspect-ratio: 16 / 9;
    background: var(--md-sys-color-surface-container-high);
}

.tools-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tools-card__body {
    display: grid;
    flex-grow: 1;
    gap: 14px;
    align-content: start;
    padding: 24px 28px 20px;
}

.jex-archcross-landing .tools-card__body h2 {
    color: var(--ac-fg);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
}

.tools-index .tools-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-index .tools-card__tags li {
    margin: 0;
    padding: 5px 12px;
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 0.8rem;
    font-weight: 700;
}

.tools-index .tools-card__body p {
    margin: 0;
    color: var(--ac-fg-muted);
    line-height: 1.65;
}

.tools-index .tools-card .ac-card-footer {
    padding: 0 28px 24px;
}

.tools-index .tools-card .ac-card-footer .ac-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}