/* custom-design.css - 追加和更新欄目頁面樣式 */

/* === 全局圖片和嵌入內容響應式設置 (重要!) === */
/* 確保所有圖片和嵌入內容不會超出其父容器，並保持比例 */
img,
video,
iframe {
    max-width: 100%; /* 確保最大寬度為其父容器的100% */
    height: auto;    /* 保持原始比例 */
    display: block;  /* 移除圖片底部可能存在的額外間隙 */
}

/* === 文章內容中的圖片圓角樣式 (新增!) === */
.article-content img {
    border-radius: 12px; /* 設置圖片的圓角半徑 */
    margin-bottom: 1em; /* 在圖片下方添加一些間距，讓排版更舒適 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 可選：為圖片添加輕微陰影 */
}

/* === 全局和共享樣式 (与首页保持一致) === */
body.custom-bg-purple {
    background-color: #2D2D49; /* 深紫色背景 */
    color: #E0E0E0; /* 默认文本顏色，淺灰色 */
    font-family: Arial, sans-serif; /* 常用字體 */
}

/* 头部區域的通用樣式，確保導航欄和 Logo 的顏色與背景協調 */
/* 您需要根據 head.htm 的具體內容調整此部分 */
.navbar {
    background-color: #2D2D49; /* 確保導航欄與 body 背景色一致 */
    padding: 15px 0;
    position: relative;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand img {
    height: 40px; /* Logo 大小 */
    /* 上面已添加全局 img 規則，這裡可移除 width 或 max-width 避免衝突 */
}

.navbar-links a {
    color: #A0A0C0; /* 導航鏈接顏色 */
    text-decoration: none;
    margin-left: 30px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.navbar-links a:hover,
.navbar-links a.active {
    color: #6EE4C0; /* 懸停和激活狀態的顏色 */
}

.navbar-cta .btn-outline-primary {
    border-color: #6EE4C0;
    color: #6EE4C0;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-cta .btn-outline-primary:hover {
    background-color: #6EE4C0;
    color: #2D2D49;
}

/* Hero Section (主視覺區) - 首页和欄目頁共用基礎樣式 */
.hero-section {
    position: relative;
    padding: 120px 0; /* 調整上下內邊距 */
    text-align: center;
    overflow: hidden; /* 確保背景電路板圖案不會溢出 */
    background-color: #2D2D49; /* 與 body 背景色一致 */
    border-bottom: 2px solid rgba(110, 228, 192, 0.2); /* 底部淺綠色分割線 */
}

/* Hero Section 背景圖 - 電路板紋理 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/style/images/circuit-board-bg.png'); /* 請確保您有這個圖片文件 */
    background-size: cover; /* 覆蓋整個區域 */
    background-position: center;
    opacity: 0.3; /* 調整透明度使其不那麼突兀 */
    z-index: 0; /* 確保在內容之下 */
}

.hero-content {
    position: relative;
    z-index: 1; /* 確保內容在背景之上 */
    background-color: rgba(45, 45, 73, 0.7); /* 半透明背景，讓內容更突出 */
    border-radius: 15px; /* 圓角 */
    padding: 40px 60px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 陰影效果 */
}

.hero-content h1 {
    font-size: 2.5em; /* 調整字體大小 */
    color: #E0E0E0;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: bold;
}

.hero-content p {
    font-size: 1.2em;
    color: #A0A0C0;
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-content .btn-main {
    display: inline-block;
    background-color: #6EE4C0; /* 青綠色按鈕 */
    color: #2D2D49; /* 按鈕文字顏色 */
    padding: 15px 40px;
    border-radius: 30px; /* 圓角按鈕 */
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(110, 228, 192, 0.4);
}

.hero-content .btn-main:hover {
    background-color: #55C2A4; /* 懸停時顏色變深 */
    transform: translateY(-2px); /* 懸停時輕微上浮 */
}

/* 主要內容區域 */
.content-section {
    padding: 35px 0;
    background-color: #2D2D49; /* 與 body 背景色一致 */
}

.section-title { /* 首页的標題 */
    font-size: 2.5em;
    color: #E0E0E0;
    text-align: center;
    margin-bottom: 50px;
    font-weight: bold;
}

/* 首页新聞卡片樣式 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 響應式網格佈局 */
    gap: 30px; /* 卡片間距 */
    margin-bottom: 60px;
    /* 確保網格項目可以根據內容調整高度，而不是統一對齊 */
    align-items: start; /* 這是關鍵，讓項目從頂部開始，高度由內容決定 */
}

.news-card {
    background-color: #3B3B60; /* 卡片背景色 */
    border-radius: 15px; /* **重點：卡片圓角** */
    /* 移除此處的 overflow: hidden; 因為它可能會導致文本截斷 */
    /* overflow: hidden; */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* 卡片陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* 將 news-card 設置為 flex 容器 */
    flex-direction: column; /* 讓內容垂直堆疊 */
    /* === 新增：確保新聞卡片能夠自適應內容高度 === */
    min-height: 1px; /* 確保在某些佈局中不會被壓縮 */
}

.news-card:hover {
    transform: translateY(-8px); /* 懸停上浮效果 */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.news-card a {
    text-decoration: none;
    color: inherit;
    display: flex; /* 使整個卡片區域的 a 標籤也是 flex 容器 */
    flex-direction: column; /* 讓圖片和內容垂直堆疊 */
    flex-grow: 1; /* 讓 a 標籤盡可能佔滿 news-card 的空間 */
    /* === 新增：確保 a 標籤內的內容能夠正常流動 === */
    min-height: 1px; /* 確保在某些佈局中不會被壓縮 */
}

.news-card .card-img {
    width: 100%; /* 已有 max-width: 100%; 可以保持 width: 100% */
    height: 180px; /* 固定圖片高度 */
    object-fit: cover; /* 裁剪圖片以填充，保持比例 */
    border-top-left-radius: 15px; /* 圖片頂部圓角 */
    border-top-right-radius: 15px; /* 圖片頂部圓角 */
    /* 確保圖片本身不會導致 overflow */
    overflow: hidden; 
}

.news-card .card-content {
    padding: 20px;
    flex-grow: 1; /* 讓內容區域盡可能佔據剩餘垂直空間 */
    display: flex; /* 設置為 flex 容器 */
    flex-direction: column; /* 讓標題和描述垂直堆疊 */
    /* === 新增：確保 card-content 能夠自適應內容高度 === */
    min-height: 1px; /* 確保在某些佈局中不會被壓縮 */
}

/* === 首頁新聞卡片標題 - 強制完整顯示 === */
.news-card .card-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #E0E0E0;
    margin-bottom: 10px;
    line-height: 1.4;
    height: auto !important; /* 強制移除固定高度 */
    max-height: none !important; /* 強制移除最大高度限制 */
    overflow: visible !important; /* 強制內容可見 */
    white-space: normal !important; /* 強制文本換行 */
    text-overflow: unset !important; /* 強制移除文本截斷 */
    -webkit-line-clamp: unset !important; /* 強制移除多行文本截斷 */
    display: block !important; /* 確保作為塊級元素 */
    padding-bottom: 5px; /* 確保標題下方有足夠空間，避免與描述重疊，尤其是在多行標題時 */
    word-break: break-word; /* 允許長單詞在必要時斷開 */
    flex-shrink: 0; /* 確保標題在 flex 容器中不會被壓縮 */
}

/* === 首頁新聞卡片描述 - 強制完整顯示（如果也有截斷問題） === */
.news-card .card-description {
    font-size: 0.95em;
    color: #A0A0C0;
    line-height: 1.5;
    margin-bottom: 15px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    word-break: break-word; /* 允許長單詞在必要時斷開 */
    flex-shrink: 0; /* 確保描述在 flex 容器中不會被壓縮 */
}

/* 特色標籤 */
.news-card .card-tag {
    display: inline-block;
    background-color: #6EE4C0;
    color: #2D2D49;
    font-size: 0.8em;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: bold;
    margin-top: auto; /* 讓標籤推到底部，確保內容有空間展開 */
    flex-shrink: 0; /* 確保標籤在 flex 容器中不會被壓縮 */
}

/* 底部區域 */
.custom-footer {
    background-color: #6EE4C0; /* 青綠色背景 */
    color: #2D2D49; /* 文字顏色 */
    padding: 30px 0;
    text-align: center;
    font-size: 0.95em;
    position: relative;
    border-top: 2px solid rgba(45, 45, 73, 0.1); /* 頂部淺色分割線 */
}

.custom-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-slogan {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
}

.copyright {
    margin-bottom: 10px;
}

.social-links {
    display: flex; /* 確保社交圖標是水平排列的 */
    gap: 15px; /* 社交圖標之間的間距 */
}

.social-links a {
    color: #2D2D49; /* 社交媒體圖標顏色 */
    font-size: 1.5em;
    text-decoration: none; /* 移除下劃線 */
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-links a:hover {
    color: #1A1A30; /* 懸停時顏色變深 */
    transform: translateY(-3px);
}


/* === 欄目頁特有樣式 === */

.category-hero-section {
    padding: 80px 0; /* 欄目頁 Banner 可以稍微小一點 */
}

.category-hero-section .hero-content h1 {
    font-size: 3em; /* 欄目頁標題 */
}

.category-hero-section .hero-content p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

/* 內容區域的標題 */
.section-subtitle {
    font-size: 2em;
    color: #E0E0E0;
    margin-bottom: 30px;
    font-weight: bold;
}

/* 新聞列表容器 */
.news-list-cards {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-card-item {
    background-color: #3B3B60; /* 卡片背景色 */
    border-radius: 15px;
    margin-bottom: 30px; /* 卡片間距 */
    overflow: hidden; /* 這裡保留 overflow: hidden; 因為圖片和內容都控制在內部 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}

.news-card-item a {
    display: flex; /* 使用 flex 佈局 */
    text-decoration: none;
    color: inherit;
    padding: 20px; /* 內部留白 */
}

.news-card-img-wrap {
    flex-shrink: 0; /* 圖片不縮小 */
    width: 200px; /* 固定圖片寬度 */
    height: 130px; /* 固定圖片高度 */
    margin-right: 20px; /* 圖片與內容間距 */
    border-radius: 10px; /* 圖片圓角 */
    overflow: hidden; /* 確保圖片圓角生效 */
}

.news-card-img-wrap img {
    width: 100%; /* 已有 max-width: 100%; 可以保持 width: 100% */
    height: 100%; /* 已有 height: auto; 但這裡保持 100% 以符合父容器高度 */
    object-fit: cover; /* 裁剪圖片以填充 */
    transition: transform 0.3s ease;
}

.news-card-item:hover .news-card-img-wrap img {
    transform: scale(1.05); /* 懸停時圖片輕微放大 */
}


.news-card-content {
    flex-grow: 1; /* 內容佔據剩餘空間 */
    display: flex;
    flex-direction: column;
}

.news-card-title {
    font-size: 1.4em;
    font-weight: bold;
    color: #E0E0E0;
    margin-bottom: 8px;
    line-height: 1.3;
    word-break: break-word; /* 允許長單詞在必要時斷開 */
}

.news-card-time {
    font-size: 0.9em;
    color: #A0A0C0;
    margin-bottom: 10px;
}

.news-card-time i {
    margin-right: 5px;
}

.news-card-description {
    font-size: 1em;
    color: #C0C0D0;
    line-height: 1.6;
    word-break: break-word; /* 允許長單詞在必要時斷開 */
}

/* 分頁導航樣式 */
.custom-pagination .page-item .page-link {
    background-color: #3B3B60; /* 按鈕背景 */
    border: 1px solid rgba(110, 228, 192, 0.3); /* 邊框 */
    color: #E0E0E0; /* 文字顏色 */
    margin: 0 5px;
    border-radius: 8px; /* 圓角 */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.custom-pagination .page-item.active .page-link {
    background-color: #6EE4C0; /* 激活背景 */
    border-color: #6EE4C0;
    color: #2D2D49; /* 激活文字顏色 */
    font-weight: bold;
}

.custom-pagination .page-item .page-link:hover {
    background-color: #55C2A4; /* 懸停背景 */
    border-color: #55C2A4;
    color: #2D2D49;
}

.custom-pagination .page-item.disabled .page-link {
    background-color: #3B3B60;
    border-color: rgba(110, 228, 192, 0.1);
    color: #606080;
    cursor: not-allowed;
}

/* 側邊欄樣式 */
.custom-sidebar .sidebar-block {
    background-color: #3B3B60;
    border-radius: 15px;
    padding: 30px; /* 增加整體內邊距 */
    margin-bottom: 30px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.custom-sidebar .sidebar-title {
    font-size: 1.5em;
    color: #6EE4C0; /* 標題顏色 */
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 2px solid rgba(110, 228, 192, 0.3);
    padding-bottom: 10px;
}

/* === 社交分享按鈕樣式 (新增或更新) === */
.social-share-buttons {
    display: flex; /* 使用 flex 佈局使按鈕水平排列 */
    flex-direction: column; /* 讓按鈕垂直堆疊 */
    gap: 10px; /* 按鈕之間的間距 */
    margin-bottom: 20px;
}

.social-share-buttons .btn-social {
    display: flex; /* 內部使用 flex 讓圖標和文字對齊 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 10px 15px;
    border-radius: 8px; /* 圓角按鈕 */
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none; /* 移除默認邊框 */
}

.social-share-buttons .btn-social i {
    margin-right: 8px; /* 圖標與文字的間距 */
    font-size: 1.2em;
}

/* Twitter 按鈕 */
.social-share-buttons .btn-twitter {
    background-color: #1DA1F2; /* Twitter 品牌藍色 */
    color: #FFFFFF;
}
.social-share-buttons .btn-twitter:hover {
    background-color: #0c85d0; /* 懸停時顏色變深 */
    transform: translateY(-2px);
}

/* Facebook 按鈕 */
.social-share-buttons .btn-facebook {
    background-color: #3B5998; /* Facebook 品牌藍色 */
    color: #FFFFFF;
}
.social-share-buttons .btn-facebook:hover {
    background-color: #2b4372; /* 懸停時顏色變深 */
    transform: translateY(-2px);
}

/* LinkedIn 按鈕 */
.social-share-buttons .btn-linkedin {
    background-color: #0077B5; /* LinkedIn 品牌藍色 */
    color: #FFFFFF;
}
.social-share-buttons .btn-linkedin:hover {
    background-color: #005f91; /* 懸停時顏色變深 */
    transform: translateY(-2px);
}
/* === 社交分享按鈕樣式結束 === */

.popular-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.popular-news-list li {
    margin-bottom: 15px;
}

.popular-news-list li a {
    color: #E0E0E0;
    text-decoration: none;
    font-size: 1.1em;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.popular-news-list li a:hover {
    color: #6EE4C0;
}

/* === 訂閱表單樣式優化 (最終調整) === */

/* 針對訂閱區塊內的 p 標籤調整間距 */
.custom-sidebar .sidebar-block p.text-muted {
    margin-bottom: 25px; /* 增加描述下方的間距 */
    line-height: 1.6;
    font-size: 1.05em;
    color: #C0C0D0;
}

/* 訂閱表單本身 - 讓 Bootstrap 的 input-group 正常工作 */
.subscribe-form .input-group {
    /* 這裡不再手動設置 display 或 margin-bottom，讓 Bootstrap 預設行為生效 */
    margin-bottom: 0; /* 確保沒有額外的底部間距 */
}

/* 輸入框樣式 */
.subscribe-form .form-control {
    background-color: #2D2D49;
    border: 1px solid rgba(110, 228, 192, 0.3);
    color: #E0E0E0;
    border-radius: 8px; /* 恢復圓角 */
    padding: 12px 18px; /* 調整內邊距 */
    font-size: 1em;
    height: auto; /* 讓高度根據 padding 自適應 */
    flex: 1 1 auto; /* 讓輸入框在 flex 容器中自動伸展 */
}

.subscribe-form .form-control::placeholder {
    color: #A0A0C0;
    opacity: 0.7;
}

/* 按鈕樣式 */
.subscribe-form .btn-primary {
    background-color: #6EE4C0;
    border-color: #6EE4C0;
    color: #2D2D49;
    font-weight: bold;
    border-radius: 8px; /* 恢復圓角 */
    padding: 12px 22px; /* 調整內邊距 */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap; /* 防止文字換行 */
    font-size: 1em;
    height: auto; /* 讓高度根據 padding 自適應 */
}

.subscribe-form .btn-primary:hover {
    background-color: #55C2A4;
    border-color: #55C2A4;
}

/* 覆寫 Bootstrap 的 input-group 圓角規則，確保兩者都有完整的圓角，且之間沒有空白 */
.subscribe-form .input-group > .form-control:not(:last-child):not(.dropdown-toggle),
.subscribe-form .input-group > .form-control:not(:first-child) {
    border-radius: 8px; /* 確保所有的 form-control 都有圓角 */
}
/* 特別處理 input-group 中緊鄰的 form-control 和按鈕的圓角，確保它們看起來是獨立的圓角元素 */
.subscribe-form .input-group > .form-control + .btn-primary {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.subscribe-form .input-group > .btn-primary + .form-control {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* 讓輸入框和按鈕之間稍微有一些間距，而不是完全黏在一起 */
.subscribe-form .input-group > .form-control {
    margin-right: 10px; /* 輸入框和按鈕之間留出一些空間 */
}

/* === 響應式調整 (再次精簡訂閱表單部分) === */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 2.8em;
    }
    .hero-content p {
        font-size: 1.1em;
    }
    .hero-content {
        padding: 30px 40px;
    }
    .section-title, .section-subtitle {
        font-size: 2em;
        margin-bottom: 40px;
    }
    .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        align-items: start; /* 確保網格項目可以根據內容調整高度 */
    }
    .news-card .card-img {
        height: 160px;
    }
    /* 欄目列表卡片在小屏幕上的佈局 */
    .news-card-item a {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .news-card-img-wrap {
        width: 100%;
        height: 200px;
        margin-right: 0;
        margin-bottom: 15px;
    }
    .news-card-title {
        font-size: 1.2em;
    }
    /* 這裡不再隱藏 news-card-description，因為我們希望它完整顯示 */
    .news-card-description {
        font-size: 0.9em;
    }


    /* 響應式調整訂閱表單在中等屏幕上的行為 */
    .subscribe-form .input-group {
        display: flex; /* 確保 input 和 button 保持 flex 佈局 */
        flex-wrap: wrap; /* 允許元素換行 */
        justify-content: center; /* 如果換行後，讓它們居中 */
    }
    .subscribe-form .input-group > .form-control {
        flex-basis: 100%; /* 輸入框先佔滿一行 */
        margin-right: 0; /* 移除右側間距 */
        margin-bottom: 10px; /* 輸入框下方增加間距 */
    }
    .subscribe-form .input-group > .btn-primary {
        width: 100%; /* 按鈕也佔滿一行 */
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 80px 0;
    }
    .hero-content h1 {
        font-size: 2.2em;
    }
    .hero-content p {
        font-size: 1em;
    }
    .hero-content .btn-main {
        padding: 12px 30px;
        font-size: 1em;
    }
    .content-section {
        padding: 20px 0;
    }
    .section-title, .section-subtitle {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .news-grid {
        grid-template-columns: 1fr; /* 在小屏幕上單列顯示 */
        align-items: start; /* 確保網格項目可以根據內容調整高度 */
    }
    .news-card .card-img {
        height: 200px; /* 在單列時圖片可以高一點 */
    }
    .custom-footer .container {
        padding: 0 20px;
    }
    /* 欄目頁卡片佈局在更小屏幕上 */
    .news-card-item a {
        padding: 15px;
    }
    .news-card-img-wrap {
        height: 150px;
    }
    .news-card-title {
        font-size: 1.1em;
    }
    /* 在手機上不再隱藏描述，而是讓它完整顯示 */
    .news-card-description {
        font-size: 0.9em;
    }
    /* 重新調整側邊欄塊的 padding */
    .custom-sidebar .sidebar-block {
        padding: 25px; /* 在小屏幕上稍微減少 padding */
    }
    .custom-sidebar .sidebar-title {
        font-size: 1.3em;
    }
    .custom-sidebar .sidebar-block p.text-muted {
        margin-bottom: 20px;
    }

    /* 確保在小屏幕上輸入框和按鈕始終堆疊 */
    .subscribe-form .input-group {
        display: block; /* 讓 input-group 變成塊級元素，其內部元素會自然堆疊 */
    }
    .subscribe-form .input-group > .form-control,
    .subscribe-form .input-group > .btn-primary {
        width: 100%; /* 佔滿可用寬度 */
        margin-right: 0; /* 移除右側間距 */
        margin-bottom: 10px; /* 堆疊時元素之間有間距 */
        border-radius: 8px; /* 確保圓角 */
    }
    .subscribe-form .input-group > .btn-primary {
        margin-bottom: 0; /* 最後一個元素不需要底部間距 */
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.8em;
    }
    .hero-content {
        padding: 25px;
    }
}
/* 為無圖片的文章列表定義基礎佈局 */
.news-list-text-only {
    margin-top: 20px;
}

/* 無圖片文章項目樣式 */
.news-item-text {
    background-color: #fff; /* 白色背景 */
    border-radius: 8px; /* 圓角邊框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 輕微陰影 */
    margin-bottom: 20px; /* 項目之間間距 */
    padding: 20px; /* 內邊距 */
    transition: box-shadow 0.3s ease;
}

.news-item-text:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 鼠標懸停時陰影加深 */
}

.news-item-text a {
    text-decoration: none; /* 移除下劃線 */
    color: inherit; /* 繼承父元素顏色 */
    display: block; /* 讓整個區域可點擊 */
}

/* 標題樣式 */
.news-item-text .item-title {
    font-size: 1.4rem; /* 標題字體大小 */
    font-weight: bold;
    color: #333; /* 標題顏色 */
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 標題最多顯示兩行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 內容摘要樣式 */
.news-item-text .item-description {
    font-size: 1rem;
    color: #666; /* 描述顏色 */
    margin-bottom: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 描述最多顯示三行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 時間樣式 */
.news-item-text .item-date {
    font-size: 0.9rem;
    color: #999; /* 時間顏色 */
    display: block; /* 讓時間單獨佔一行 */
}

/* 響應式調整 */
@media (max-width: 768px) {
    .news-item-text .item-title {
        font-size: 1.2rem;
    }
    .news-item-text .item-description {
        font-size: 0.95rem;
    }
}