/**
 * THN 分類牆樣式
 * 桌機（>1024px）：CSS Grid 多欄網格，Swiper 不 init
 * 平板手機（<=1024px）：Swiper 橫向輪播
 */

/* ===== 共用容器 ===== */
.thn-cw {
    position: relative;
    width: 100%;
}

/* 卡片 */
.thn-cw__card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 縮圖框：兩張圖疊放的定位基準 */
.thn-cw__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* 正方形，兩張圖尺寸不一時仍對齊，可依需求調整 */
}

/* 圖片 */
.thn-cw__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease;
}

/* hover 圖疊在預設圖上、預設隱藏 */
.thn-cw__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}

/* 滑過整張卡片時切換兩圖 */
.thn-cw__card:hover .thn-cw__img--default {
    opacity: 0;
}
.thn-cw__card:hover .thn-cw__img--hover {
    opacity: 1;
}

/* 分類名稱：預設白色 */
.thn-cw__name {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-family: "Noto Serif TC", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    color: #ffffff;
    transition: color .35s ease;
}

/* 滑過卡片時，名稱改為金色漸層文字 */
.thn-cw__card:hover .thn-cw__name {
    background: linear-gradient(180deg, #B67B19 0%, #D1A64F 50%, #A96F14 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* 備援：確保不顯示白色 */
}

/* ===== 桌機（>1024px）：網格排列，Swiper 不作用 ===== */
@media (min-width: 1025px) {
    .thn-cw__grid {
        display: grid;
        /* 欄數由 shortcode 的 --thn-cw-cols 帶入，預設 5 */
        grid-template-columns: repeat(var(--thn-cw-cols, 5), 1fr);
        gap: 24px;
        /* 保險：桌機不 init Swiper，避免任何殘留位移 */
        transform: none !important;
    }
    /* 桌機隱藏輪播分頁點 */
    .thn-cw__pagination {
        display: none;
    }
}

/* ===== 平板手機（<=1024px）：交給 Swiper ===== */
@media (max-width: 1024px) {
    .thn-cw__grid {
        display: flex;
    }
    .thn-cw__card {
        flex-shrink: 0;
        height: auto;
    }
    /* 分頁點與輪播間距 */
    .thn-cw__pagination {
        position: static;
        margin-top: 16px;
        text-align: center;
    }
}