/* DownloadList 版型專屬樣式（v2.11）
 * Hero + RichContent 由既有 _PageHeader / editorial-base.css 負責
 * 此檔負責：dl-filter / dl-list / dl-item / view 切換 + 後續 RWD
 *
 * 對齊：skill-frontend-templates v2.11 / skill-infinite-scroll v1.0
 */

:root {
    --dl-ink:        var(--ink-deep, #1A1530);
    --dl-paper:      var(--paper,    #F8F4ED);
    --dl-gold:       var(--gold,     #C8A45C);
    --dl-meta-fg:    color-mix(in srgb, var(--dl-ink) 65%, transparent);
    --dl-border:     color-mix(in srgb, var(--dl-ink) 18%, transparent);
    --dl-border-hi:  color-mix(in srgb, var(--dl-gold) 70%, transparent);
}

/* ── RichContent header ───────────────────────────────────────── */
.dl-content {
    padding: 1.5rem 1rem 0;
    max-width: 920px;
}
.dl-content :first-child { margin-top: 0; }
.dl-content :last-child  { margin-bottom: 0; }

/* ── Filter bar ───────────────────────────────────────────────── */
.dl-filter {
    padding: 1.5rem 0 0.5rem;
    background: transparent;
}
.dl-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.dl-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* 取自然寬、不撐開，讓後面的搜尋框（flex:1）填滿剩餘 → 桌機呈「[篩選器][輸入框……]」 */
    flex: 0 1 auto;
}
.dl-chip {
    border: 1px solid var(--dl-border);
    background: transparent;
    color: var(--dl-ink);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.92rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dl-chip:hover  { border-color: var(--dl-border-hi); color: var(--dl-gold); }
.dl-chip.is-active {
    background: var(--dl-ink);
    color: var(--dl-paper);
    border-color: var(--dl-ink);
}
.dl-search-group {
    display: flex;
    align-items: stretch;
    /* 桌機撐滿剩餘寬（單分類時填滿整列；多分類時排在篩選器後面填滿剩餘），basis 320 為健康預設 */
    flex: 1 1 320px;
    border: 1px solid var(--dl-border);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.dl-search-group:focus-within { border-color: var(--dl-border-hi); }
.dl-search {
    flex: 1;
    border: 0;
    padding: 0.5rem 0.9rem;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
}
.dl-search-btn {
    border: 0;
    background: transparent;
    color: var(--dl-ink);
    padding: 0 0.9rem;
    cursor: pointer;
    font-size: 1.15rem;
}
.dl-search-btn:hover { color: var(--dl-gold); }
.dl-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--dl-border);
    background: transparent;
    color: var(--dl-meta-fg);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}
.dl-view-toggle:hover { color: var(--dl-gold); border-color: var(--dl-border-hi); }
.dl-view-toggle__sep { opacity: 0.5; }

/* ── List 共用 ────────────────────────────────────────────────── */
.dl-list-section { padding: 1rem 1rem 3rem; }
.dl-empty {
    color: var(--dl-meta-fg);
    text-align: center;
    padding: 3rem 0;
}
.dl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dl-item {
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--dl-border);
    transition: background 0.15s ease;
}
.dl-item:hover { background: color-mix(in srgb, var(--dl-gold) 6%, transparent); }
.dl-item-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    margin: 0;
    color: var(--dl-ink);
}
.dl-item-title .mdi { color: var(--dl-gold); font-size: 1.4rem; flex-shrink: 0; }
.dl-item-summary {
    color: var(--dl-meta-fg);
    font-size: 0.92rem;
    margin: 0.25rem 0 0;
}
.dl-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--dl-meta-fg);
    margin-top: 0.4rem;
}
.dl-item-cat::before  { content: ""; display: inline-block; width: 6px; height: 6px;
                         border-radius: 50%; background: var(--dl-gold); margin-right: 0.5rem;
                         vertical-align: middle; }
.dl-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* 閱讀（PDF）與下載鈕同一套金色外框 pill；hover 填金字白，兩鈕外觀一致 */
.dl-item-download,
.dl-item-read {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--dl-gold);
    color: var(--dl-ink);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.dl-item-download:hover,
.dl-item-read:hover {
    background: var(--dl-gold);
    color: #fff;
}

/* border-bottom 補回：editorial-base.css 的 `body.editorial a { border-bottom:1px solid transparent }`（權重 0,1,2）
   會把 <a> 按鈕下緣邊線塗透明，只剩三邊。以 `.editorial-inner-page a.<class>`（0,2,1）蓋回正常態與 hover 態。 */
.editorial-inner-page a.dl-item-download,
.editorial-inner-page a.dl-item-read,
.editorial-inner-page a.dl-item-download:hover,
.editorial-inner-page a.dl-item-read:hover {
    border-bottom: 1px solid var(--dl-gold);
}
.dl-item-cover img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ── Table view（桌機 grid 排版） ────────────────────────────── */
@media (min-width: 768px) {
    .dl-list--table .dl-item {
        display: grid;
        grid-template-columns: 1fr 140px 120px 90px auto;
        align-items: center;
        gap: 1rem;
    }
    .dl-list--table .dl-item-cover { display: none; }
    .dl-list--table .dl-item-body { min-width: 0; }
    .dl-list--table .dl-item-meta {
        display: contents;
    }
    .dl-list--table .dl-item-cat,
    .dl-list--table .dl-item-date,
    .dl-list--table .dl-item-size {
        font-size: 0.88rem;
        margin: 0;
    }
}

/* 桌機分頁器改用共用 _Pager / .st-pager（樣式在 editorial-base.css），此頁不再自訂 */

/* ── Card view（桌機 grid 三欄；mobile 強制單欄） ───────────── */
@media (min-width: 768px) {
    .dl-list--card {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        border-bottom: 0;
    }
    .dl-list--card .dl-item {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--dl-border);
        border-radius: 8px;
        padding: 0;
        overflow: hidden;
        transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .dl-list--card .dl-item:hover {
        background: transparent;
        border-color: var(--dl-border-hi);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px color-mix(in srgb, var(--dl-ink) 12%, transparent);
    }
    .dl-list--card .dl-item-cover {
        aspect-ratio: 16 / 9;
        background: color-mix(in srgb, var(--dl-ink) 5%, transparent);
        overflow: hidden;
    }
    .dl-list--card .dl-item-cover img {
        width: 100%; height: 100%; object-fit: cover; border-radius: 0;
    }
    .dl-list--card .dl-item-body {
        padding: 1rem 1rem 0.5rem;
        flex: 1 1 auto;
    }
    .dl-list--card .dl-item-actions {
        margin: 0 1rem 1rem;
        justify-content: center;
    }
}

/* ── 手機（< 768px）：強制單欄 ul/li 卡片 + 隱藏分頁器 ────── */
@media (max-width: 767.98px) {
    .dl-filter { padding-top: 1rem; }
    .dl-filter-form { gap: 0.5rem; }
    .dl-chip-group { gap: 0.35rem; }
    .dl-chip { padding: 0.3rem 0.85rem; font-size: 0.88rem; }
    .dl-search-group { flex: 1 1 100%; }

    .dl-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .dl-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px solid var(--dl-border);
        border-radius: 8px;
    }
    .dl-item:hover { background: transparent; }
    .dl-item-cover {
        aspect-ratio: 16 / 9;
        border-radius: 4px;
        overflow: hidden;
        background: color-mix(in srgb, var(--dl-ink) 5%, transparent);
    }
    .dl-item-cover img { width: 100%; height: 100%; object-fit: cover; }
    .dl-item-title { font-size: 1rem; }
    .dl-item-actions { align-self: flex-end; }
}

/* ── Infinite scroll 載入態 ──────────────────────────────────── */
.st-infinite-sentinel { height: 1px; visibility: hidden; }

.st-infinite-status {
    padding: 1.5rem;
    text-align: center;
    color: var(--dl-meta-fg);
}
.st-infinite-spinner i.mdi-spin { animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

.st-infinite-error {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #B23A2E;
}
.st-infinite-retry {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}
.st-infinite-retry:hover { background: rgba(0, 0, 0, 0.04); }

.st-infinite-ended {
    color: var(--dl-gold);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

/* >= 768px 隱藏 sentinel / status（走分頁器） */
@media (min-width: 768px) {
    .st-infinite-sentinel,
    .st-infinite-status {
        display: none;
    }
}