/* ==========================================================================
   GD 文章／新聞列表樣式
   --------------------------------------------------------------------------
   版面結構參照 gdcometrue.com 的最新消息模組（純文字清單 + 橫向分類列），
   但字體、色彩、間距一律走 Sneat 設計系統變數，讓全球站與康築站的
   視覺語言保持區隔（會議記錄：小江建議兩站視覺應有所區別）。

   所有樣式都收斂在 .gd-news 底下，不污染其他頁面。
   ========================================================================== */

/* ---------- 區塊標題 ---------- */
.gd-news .gd-news-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.gd-news .gd-news-heading h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: .75rem;
}

/* 標題底下的裝飾線（取代參考站的圖片式底線） */
.gd-news .gd-news-heading .gd-news-rule {
    width: 64px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
    background: linear-gradient(90deg,
                var(--bs-primary) 0%,
                rgba(var(--bs-primary-rgb), .25) 100%);
}

/* ---------- 橫向分類列 ---------- */
.gd-news .gd-news-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 2.5rem;
}

.gd-news .gd-news-cats a {
    display: inline-block;
    padding: .45rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gd-news .gd-news-cats a:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.gd-news .gd-news-cats a.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* 手機版改用原生 select，避免分類多時把版面撐爆 */
.gd-news .gd-news-cats-select {
    margin-bottom: 2rem;
}

/* ---------- 文章清單 ---------- */
.gd-news .gd-news-list {
    border-top: 1px solid var(--bs-border-color);
}

.gd-news .gd-news-item {
    display: block;
    padding: 1.75rem .25rem;
    border-bottom: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

.gd-news .gd-news-item:hover {
    background-color: rgba(var(--bs-primary-rgb), .04);
}

.gd-news .gd-news-item .gd-news-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.55;
    margin-bottom: .5rem;
    color: var(--bs-heading-color, var(--bs-body-color));
    transition: color .15s ease;
}

.gd-news .gd-news-item:hover .gd-news-title {
    color: var(--bs-primary);
}

.gd-news .gd-news-item .gd-news-date {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #8592a3);
    margin-bottom: .625rem;
}

.gd-news .gd-news-item .gd-news-excerpt {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--bs-secondary-color, #8592a3);
    margin-bottom: .75rem;

    /* 最多三行，超出以 … 收尾 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 「繼續閱讀 ›」：整列可點，這裡只是視覺提示，靠右對齊 */
.gd-news .gd-news-item .gd-news-more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-primary);
}

.gd-news .gd-news-item .gd-news-more i {
    transition: transform .15s ease;
}

.gd-news .gd-news-item:hover .gd-news-more i {
    transform: translateX(3px);
}

/* 分類徽章（沿用 Sneat 的 label 配色） */
.gd-news .gd-news-item .gd-news-cat {
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 50rem;
    margin-left: .5rem;
    vertical-align: middle;
}

/* ---------- 縮圖版（有 cover_image 時可選用，預設不啟用） ---------- */
.gd-news .gd-news-item .gd-news-thumb {
    width: 160px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: .5rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .gd-news .gd-news-item {
        padding: 1.25rem .25rem;
    }
    .gd-news .gd-news-item .gd-news-title {
        font-size: 1rem;
    }
    .gd-news .gd-news-item .gd-news-thumb {
        width: 96px;
    }
}

/* ---------- 分頁器 ---------- */
.gd-news .gd-news-pager {
    margin-top: 2.5rem;
}

.gd-news .gd-news-pager .pagination {
    justify-content: center;
    margin-bottom: 0;
}

/* ==========================================================================
   GGCB 品牌覆蓋（scoped 在 body.gd-kit 下）
   將原本 Sneat --bs-primary（紫）換成 GD 綠，讓 /news 融入 gd-kit 風格。
   ========================================================================== */
body.gd-kit .gd-news .gd-news-heading .gd-news-rule {
    background: linear-gradient(90deg,
        var(--gd-kit-green) 0%,
        rgba(121, 189, 40, .25) 100%);
}
body.gd-kit .gd-news .gd-news-cats a:hover {
    border-color: var(--gd-kit-green);
    color: var(--gd-kit-green);
}
body.gd-kit .gd-news .gd-news-cats a.active {
    background-color: var(--gd-kit-green);
    border-color: var(--gd-kit-green);
    color: #fff;
}
body.gd-kit .gd-news .gd-news-item:hover {
    background-color: rgba(121, 189, 40, .06);
}
body.gd-kit .gd-news .gd-news-item:hover .gd-news-title {
    color: var(--gd-kit-deep);
}
body.gd-kit .gd-news .gd-news-item .gd-news-more {
    color: var(--gd-kit-green);
    font-weight: 700;
}
body.gd-kit .gd-news .gd-news-item .gd-news-cat {
    background: var(--gd-kit-pale);
    color: var(--gd-kit-deep);
}
body.gd-kit .gd-news .btn-outline-primary {
    color: var(--gd-kit-green);
    border-color: var(--gd-kit-green);
}
body.gd-kit .gd-news .btn-outline-primary:hover {
    background: var(--gd-kit-green);
    color: #fff;
}
body.gd-kit .gd-news .gd-news-pager .page-item.active .page-link {
    background: var(--gd-kit-green);
    border-color: var(--gd-kit-green);
}
body.gd-kit .gd-news .gd-news-pager .page-link {
    color: var(--gd-kit-deep);
}
body.gd-kit .gd-news .gd-news-pager .page-link:hover {
    color: var(--gd-kit-green);
}
/* 麵包屑連結色 */
body.gd-kit .gd-news .breadcrumb a {
    color: var(--gd-kit-green);
}

/* ==========================================================================
   GGCB v2.1 · 卡片式重排（提升辨識度）
   把每筆從無邊界清單改成白底卡片，帶左側綠色 accent + hover 立體感。
   ========================================================================== */

/* 清掉原本清單頂部橫線，改成無邊 */
body.gd-kit .gd-news .gd-news-list {
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 每筆變成卡片 */
body.gd-kit .gd-news .gd-news-item {
    position: relative;
    padding: 1.5rem 1.75rem 1.5rem 2rem;
    background: #fff;
    border: 1px solid var(--gd-kit-line, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: all .2s ease;
}

/* 左側綠色 accent bar */
body.gd-kit .gd-news .gd-news-item::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 4px;
    background: var(--gd-kit-green);
    border-radius: 0 4px 4px 0;
    opacity: .5;
    transition: opacity .2s ease, top .2s ease, bottom .2s ease;
}

body.gd-kit .gd-news .gd-news-item:hover {
    background: #fff;
    border-color: var(--gd-kit-green);
    box-shadow: 0 8px 24px rgba(121,189,40,.15);
    transform: translateY(-2px);
}
body.gd-kit .gd-news .gd-news-item:hover::before {
    opacity: 1;
    top: 8%; bottom: 8%;
}

/* 標題強制深色（不吃 Sneat 紫） */
body.gd-kit .gd-news .gd-news-item .gd-news-title {
    color: var(--gd-kit-ink, #1a1f2b) !important;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: .5rem;
}
body.gd-kit .gd-news .gd-news-item:hover .gd-news-title {
    color: var(--gd-kit-deep) !important;
}

/* 日期加點視覺份量 */
body.gd-kit .gd-news .gd-news-item .gd-news-date {
    color: var(--gd-kit-muted, #6b7280);
    font-size: .85rem;
    margin-bottom: .5rem;
}

/* 摘要換灰階（不吃紫） */
body.gd-kit .gd-news .gd-news-item .gd-news-excerpt {
    color: var(--gd-kit-muted, #4b5563);
    font-size: .95rem;
}

/* 繼續閱讀 → 強制綠 */
body.gd-kit .gd-news .gd-news-item .gd-news-more {
    color: var(--gd-kit-green) !important;
    font-weight: 700;
}

/* 分類徽章：紫 → 淡綠底 + 深綠字 */
body.gd-kit .gd-news .gd-news-cat.badge,
body.gd-kit .gd-news .badge.bg-label-primary {
    background: var(--gd-kit-pale) !important;
    color: var(--gd-kit-deep) !important;
    font-weight: 600;
}

/* 「全部」active pill 補強：拉高 specificity 蓋掉 Sneat 預設 */
body.gd-kit .gd-news .gd-news-cats a.active,
body.gd-kit .gd-news nav.gd-news-cats a.active {
    background-color: var(--gd-kit-green) !important;
    border-color: var(--gd-kit-green) !important;
    color: #fff !important;
}

/* 搜尋按鈕 outline */
body.gd-kit .gd-news .btn-outline-primary {
    color: var(--gd-kit-green) !important;
    border-color: var(--gd-kit-green) !important;
}
body.gd-kit .gd-news .btn-outline-primary:hover {
    background: var(--gd-kit-green) !important;
    color: #fff !important;
}