/*
═══════════════════════════════════════════════════════════════
   ARTICLES — Stories + Living 共用文章列表樣式
   - .art-section 容器
   - .filter-bar（地區/分類 tabs + 排序 tabs）
   - .art-list / .art article rows
   - .articles-loadmore Load More 按鈕
═══════════════════════════════════════════════════════════════
*/

.art-section {
    position: relative;
    z-index: 2;
    max-width: var(--max, 1240px);
    margin: 0 auto;
    padding: 40px 40px 100px;
}


/* ─── Filter Bar（v0.4.24：用 Grid + display:contents 強制兩列水平對齊）─── */
.filter-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 6px;
    align-items: end;
    margin-bottom: 28px;
}
/* filter-group 變透明容器，它的 children 直接成為 grid items */
.filter-group {
    display: contents;
}
/* 左欄（分類 tabs）—— label 第 1 列、tabs 第 2 列 */
.filter-group-tabs > .filter-label { grid-column: 1; grid-row: 1; }
.filter-group-tabs > .tabs          { grid-column: 1; grid-row: 2; }
/* 右欄（排序 select）—— label 第 1 列、select 第 2 列 */
.filter-group:not(.filter-group-tabs) > .filter-label  { grid-column: 2; grid-row: 1; }
.filter-group:not(.filter-group-tabs) > .filter-select { grid-column: 2; grid-row: 2; }

.filter-bar .tabs,
.filter-bar .sort-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* v0.4.26：只有排序 filter 時（譬如 category archive 頁），整列靠右 */
.filter-bar-single {
    grid-template-columns: 1fr;
    justify-items: end;
}
.filter-bar-single .filter-group:not(.filter-group-tabs) > .filter-label,
.filter-bar-single .filter-group:not(.filter-group-tabs) > .filter-select {
    grid-column: 1;
}

/* ─── 標籤按鈕（tabs / sort 共用 .tag）────────── */
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    line-height: 1;            /* v0.4.24：強制 line-height:1 修中文字偏上 */
    box-sizing: border-box;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 14px;
    border: 1px solid var(--linen-2);
    color: var(--twilight);
    background: var(--bone);
    cursor: pointer;
    transition: all .18s;
}
.tag:hover {
    background: var(--bone-3, var(--bone-2));
}
.tag.fill {
    background: var(--twilight);
    color: var(--bone);
    border-color: var(--twilight);
}
.tag.fill:hover {
    background: var(--plum);
    border-color: var(--plum);
}
.tag.sub {
    font-size: 10px;
    height: auto;              /* v0.4.25：不繼承 .tag 的 34px，回歸 padding-driven 高度 */
    line-height: 1.4;
    padding: 4px 9px;
    color: var(--mist);
    background: transparent;
    border-color: var(--linen);
}


/* ─── Article Row 列表 ──────────────────────── */
.art-list {
    border-top: 1px solid var(--linen);
    transition: opacity .3s ease;
}
.art-list.is-switching {
    opacity: .4;
    pointer-events: none;
}

.art {
    display: grid;
    /* ⚠ v0.9.44：第二欄是縮圖，寬度必須跟 .art-photo 一致。
       v0.9.36 把 .art-photo 從 78 改成 124 卻沒改這裡，
       圖片就溢出格線蓋到標題上。 */
    grid-template-columns: 78px 124px 1fr 90px;
    gap: 24px;
    padding: 28px 6px;
    border-bottom: 1px solid var(--linen);
    align-items: start;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: padding-left .25s, background .2s;
}
.art:hover {
    padding-left: 18px;
    background: rgba(110, 70, 89, .03);
}

/* v0.9.36：列表縮圖改成 16:10 橫幅。
   原本是 78×78 正方形，而文章首圖普遍是 1200×630 的橫圖 ——
   正方形裁切會把左右各切掉三成，主體常常被切掉。
   16:10 跟 1200×630（約 1.9:1）還是有差，但已經接近很多。 */
.art-photo {
    width: 124px;
    height: 78px;
    overflow: hidden;
    background: var(--bone-3, var(--bone-2));
    position: relative;
}
.art-photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s ease;
}
.art:hover .art-photo-bg {
    transform: scale(1.08);
}

.art-date {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mist);
    padding-top: 6px;
    text-transform: uppercase;
}

.art-body {
    padding-top: 0;
    min-width: 0;
}
.art-body .art-cat {
    margin-bottom: 18px;
    display: inline-block;
}
.art-body .art-title {
    font-family: var(--ff-d);
    font-weight: 300;
    font-size: 24px;
    line-height: 1.25;
    color: var(--twilight);
    margin: 0 0 8px;
    letter-spacing: -.018em;
}
.lang-en .art-body .art-title {
    font-style: italic;
    font-weight: 300;
}
.art-body .art-excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--mist);
    font-weight: 300;
    max-width: 62ch;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.art-cta {
    justify-self: end;
    align-self: center;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--twilight);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .2s, color .2s;
}
.art:hover .art-cta {
    color: var(--plum);
    gap: 12px;
}

/* 沒封面圖時 → 3 欄 layout */
.art.no-photo {
    grid-template-columns: 84px 1fr 90px;
}


/* ─── Load More ───────────────────────────── */
.articles-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin: 64px 0 0;
}
.articles-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--ff-m);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    color: var(--twilight);
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--linen-2);
    border-radius: 999px;
    cursor: pointer;
    transition: all .25s;
}
.articles-loadmore:hover {
    background: var(--twilight);
    color: var(--bone);
    border-color: var(--twilight);
    transform: translateY(-1px);
}
.lm-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    display: none;
    animation: art-spin .8s linear infinite;
}
.articles-loadmore.is-loading .lm-spinner { display: inline-block; }
.articles-loadmore.is-loading {
    pointer-events: none;
    opacity: .7;
}
@keyframes art-spin { to { transform: rotate(360deg); } }


/* ─── 空狀態 ───────────────────────────────── */
.articles-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--mist);
    font-style: italic;
    font-size: 15px;
}


/* ─── 手機 RWD（依原版 720px breakpoint）───── */
@media (max-width: 720px) {
    .art-section {
        padding: 24px 20px 64px;
    }
    .filter-bar {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 28px;
    }
    .filter-bar .tabs,
    .filter-bar .sort-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .filter-bar .tabs::-webkit-scrollbar,
    .filter-bar .sort-tabs::-webkit-scrollbar { display: none; }
    .tag { flex: 0 0 auto; }

    .art {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 14px;
        padding: 32px 0 40px;
        border-bottom: 1px solid var(--linen);
        align-items: stretch;
    }
    .art:hover {
        padding-left: 0;
        background: transparent;
    }
    .art-date {
        order: 1;
        padding-top: 0;
        font-size: 10.5px;
        letter-spacing: .18em;
    }
    .art-body {
        order: 2;
        display: flex;
        flex-direction: column;
    }
    .art-body .art-cat { margin-bottom: 18px; }
    .art-body .art-title {
        font-family: var(--ff-d);
        font-weight: 200;
        font-size: 28px;
        line-height: 1.18;
        letter-spacing: -.022em;
        margin-bottom: 12px;
    }
    .art-body .art-excerpt {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 18px;
    }
    .art-photo {
        order: 3;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        margin-top: 4px;
    }
    .art-cta {
        order: 4;
        justify-self: flex-start;
        align-self: flex-start;
        margin-top: 14px;
        font-size: 11px;
        letter-spacing: .18em;
    }
    .art.no-photo { padding: 24px 0 32px; }
    .art.no-photo .art-body .art-title { font-size: 24px; }
}


/* ═══════════════════════════════════════════════════════════════
   v0.4.18：Filter 下拉選單（取代 button tabs）
═══════════════════════════════════════════════════════════════ */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}
/* v0.4.20：分類 tabs 用這個 group（寬度 auto，跟下拉並排） */
.filter-group-tabs {
    min-width: 0;
    flex: 1;
}
.filter-group-tabs .tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-label {
    font-family: var(--ff-m);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--mist);
    text-transform: uppercase;
    line-height: 16px;
    display: block;
}
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--linen-2);
    color: var(--twilight);
    height: 34px;
    box-sizing: border-box;
    padding: 0 36px 0 14px;
    font-family: var(--ff-m);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A8B5C9' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 11px;
    transition: border-color .2s, color .2s;
    min-width: 160px;
}
.filter-select:hover,
.filter-select:focus {
    outline: none;
    border-color: var(--plum);
    color: var(--plum);
}
.filter-select option {
    color: var(--twilight);
    background: var(--bone);
}


/* ═══════════════════════════════════════════════════════════════
   LIVING CATS · 五大分類網格
═══════════════════════════════════════════════════════════════ */
.living-cats-section {
    position: relative;
    z-index: 2;
    max-width: var(--max, 1240px);
    margin: 0 auto;
    padding: 60px 40px;
}

.lcg-head {
    max-width: calc(var(--max, 1240px) - 80px);
    margin: 0 auto 32px;
}
.lcg-eyebrow {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--mist);
    text-transform: uppercase;
    margin-bottom: 18px;
}
.lcg-title {
    font-family: var(--ff-d);
    font-weight: 300;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    color: var(--twilight);
    letter-spacing: -.01em;
    margin: 0;
}
.lang-en .lcg-title { font-style: italic; }

/* 3 欄 grid（第一排）+ 2 欄 grid（第二排） */
.living-cats,
.living-cats-2 {
    max-width: calc(var(--max, 1240px) - 80px);
    margin: 0 auto;
    display: grid;
    gap: 1px;
    background: var(--linen);
    border: 1px solid var(--linen);
}
.living-cats { grid-template-columns: repeat(3, 1fr); border-bottom: none; }
.living-cats-2 { grid-template-columns: repeat(2, 1fr); }

.lc-cell {
    background: var(--bone);
    padding: 36px 32px;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    color: inherit;
    text-decoration: none;
}
.lc-cell:hover { background: var(--bone-2); }

.lc-num {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--mist);
    text-transform: uppercase;
    font-weight: 500;
}
.lc-name {
    font-family: var(--ff-d);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.18;
    color: var(--twilight);
    letter-spacing: -.005em;
}
.lang-en .lc-name { font-style: italic; }
.lc-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--mist);
    font-weight: 300;
    flex: 1;
}
.lc-count {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--plum);
    text-transform: uppercase;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   RECENT LIST · 近期紀錄精簡列表（Living 用）
═══════════════════════════════════════════════════════════════ */
.recent-section {
    padding-top: 60px;
}
.recent-head {
    margin-bottom: 18px;
}
.recent-eyebrow {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--mist);
    text-transform: uppercase;
}

.recent-list {
    border-top: 1px solid var(--linen);
    transition: opacity .3s ease;
}
.recent-list.is-switching {
    opacity: .4;
    pointer-events: none;
}

.recent-item {
    display: grid;
    grid-template-columns: 80px 1fr 70px;
    gap: 24px;
    padding: 22px 6px;
    border-bottom: 1px solid var(--linen);
    align-items: start;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: padding-left .25s, background .2s;
}
.recent-item:hover {
    padding-left: 14px;
    background: rgba(110, 70, 89, .03);
}

.recent-date {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--mist);
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
}

.recent-body { min-width: 0; }

.recent-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.recent-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--ff-m);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--plum);
    background: var(--bone-2);
    padding: 3px 8px;
    text-transform: uppercase;
}

.recent-title {
    font-family: var(--ff-d);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.35;
    color: var(--twilight);
    letter-spacing: -.005em;
    margin: 0 0 6px;
}
.lang-en .recent-title { font-style: italic; }

.recent-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mist);
    font-weight: 300;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-cta {
    justify-self: end;
    align-self: center;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--twilight);
    text-transform: uppercase;
    transition: color .2s;
}
.recent-item:hover .recent-cta { color: var(--plum); }


/* ═══════════════════════════════════════════════════════════════
   手機 RWD — Living + Filter
   v0.4.25：filter 回到上下排列（label 上、tabs/select 下，跟 v0.4.22 一樣）
═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .filter-bar {
        /* 單欄 grid，4 列：label1, tabs, label2, select */
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 8px;
        margin-bottom: 20px;
        align-items: start;
    }
    .filter-group-tabs > .filter-label { grid-column: 1; grid-row: 1; }
    .filter-group-tabs > .tabs          { grid-column: 1; grid-row: 2; }
    .filter-group:not(.filter-group-tabs) > .filter-label  { grid-column: 1; grid-row: 3; }
    .filter-group:not(.filter-group-tabs) > .filter-select { grid-column: 1; grid-row: 4; }

    .filter-label {
        line-height: 16px;        /* 回到 desktop 同樣設定 */
        align-self: auto;
        margin: 0;
    }
    /* 排序跟分類群組之間多 12px 距離 */
    .filter-group:not(.filter-group-tabs) > .filter-label {
        margin-top: 12px;
    }
    .filter-select { width: 100%; }

    .living-cats-section { padding: 40px 20px; }
    .living-cats,
    .living-cats-2 { grid-template-columns: 1fr; }
    .living-cats { border-bottom: none; }
    .lc-cell { min-height: auto; padding: 28px 24px; }

    .recent-section { padding-top: 40px; }
    .recent-item {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 6px 14px;
        padding: 20px 6px;
    }
    .recent-item:hover { padding-left: 6px; background: transparent; }
    .recent-cta {
        grid-column: 2;
        justify-self: flex-start;
        align-self: flex-start;
        margin-top: 8px;
    }
    .recent-title { font-size: 17px; }
}


/* ═══════════════════════════════════════════════════════════════
   v0.9.40 · 搜尋結果頁
   —— 每筆之間拉開，加分隔線。原本標題和上一筆的內文黏在一起，
      掃過去看不出有幾筆結果。
   ═══════════════════════════════════════════════════════════════ */

.search-scope-note {
    margin: 0 0 8px;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--mist-soft);
}

.search-list { margin-top: 36px; }

/* 每一筆是一張卡：左側一條細線 + 內縮，
   比單純的分隔線更容易看出「這幾行是同一筆」。 */
.search-card {
    position: relative;
    padding: 26px 0 26px 22px;
    margin-bottom: 18px;
    border-left: 1px solid var(--linen-2, var(--linen));
    max-width: var(--max-prose);
    transition: border-color var(--t-hover) var(--ease-moon);
}
.search-card:hover { border-left-color: var(--plum); }
.search-card:last-child { margin-bottom: 0; }

.sc-kind {
    font-family: var(--ff-m);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--plum-hi);
    opacity: .85;
    margin-bottom: 10px;
}

.sc-title {
    font-family: var(--ff-d);
    font-weight: 300;
    font-size: clamp(20px, 2.3vw, 25px);
    line-height: 1.35;
    margin: 0 0 12px;
}
.lang-en .sc-title { font-style: italic; }

.sc-title a {
    color: var(--twilight);
    text-decoration: none;
    transition: color var(--t-hover) var(--ease-moon);
}
.sc-title a:hover { color: var(--plum-hi); }

.sc-snippet {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.85;
    font-weight: 300;
    color: var(--twilight-2);
}
/* 標亮：不用底色。底色在深色版面上會變成一塊很吵的方塊，
   而瀏覽器預設的黃底更是直接跳出整個設計。
   改成換色 + 底線。 */
.sc-snippet mark {
    background: transparent !important;
    color: var(--plum-hi);
    font-weight: 400;
    border-bottom: 1px solid var(--plum);
    padding-bottom: 1px;
}

.sc-meta {
    font-family: var(--ff-m);
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--mist-soft);
}

@media (max-width: 880px) {
    .search-list { margin-top: 28px; }
    .search-card { padding: 26px 0; }
    .sc-title    { font-size: 19px; }
    .sc-snippet  { font-size: 14px; }
}

/* ─── 搜尋結果的分類篩選 ─── */
.search-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.sf-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 15px;
    border: 1px solid var(--linen-2, var(--linen));
    border-radius: 999px;
    font-family: var(--ff-m);
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--twilight-2);
    text-decoration: none;
    transition: border-color var(--t-hover) var(--ease-moon),
                color var(--t-hover) var(--ease-moon);
}
.sf-chip:hover { border-color: var(--mist); color: var(--twilight); }

.sf-chip.is-on {
    border-color: var(--plum);
    color: var(--plum-hi);
}

.sf-n {
    font-size: 10px;
    color: var(--mist-soft);
}
.sf-chip.is-on .sf-n { color: var(--plum); }

@media (max-width: 880px) {
    .search-facets { gap: 6px; margin-top: 18px; }
    .sf-chip { padding: 6px 12px; font-size: 11px; }
}

/* 搜尋結果的子分類（白天生活 · 餐桌）*/
.sc-sub {
    color: var(--mist-soft);
    margin-left: 2px;
}