/* ==========================================================================
   標準四欄資料表格樣式 (預設桌機版)
   ========================================================================== */
.forum_data_table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    box-sizing: border-box;
    text-align: left;
}

/* 頂端欄位名稱列 (thead) */
.forum_data_table thead tr {
    border-bottom: 2px solid #333333;
}

.forum_data_table th {
    font-size: clamp(0.938rem, 0.88rem + 0.14vw, 1rem);
    font-weight: 600;
    color: #222227;
    padding: 1rem 0.75rem;
}

/* 重新精算四欄桌機版寬度比例 */
.th_date    { width: 15%; }
.th_time    { width: 15%; }
.th_subject { width: 45%; }
.th_speaker { width: 25%; }

/* 資料列 (tbody) */
.forum_data_table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
}

.forum_data_table tbody tr:nth-of-type(even){
    background-color: #fafafa;
}

.forum_data_table tbody tr:hover {
    background-color: #f9fafb; /* 滑鼠懸浮微變色 */
}

.forum_data_table td {
    padding: clamp(1rem, 0.78rem + 0.36vw, 1.25rem) 0.75rem;
    font-size: clamp(1rem, 0.867rem + 0.22vw, 1.125rem);
    color: #4b5563;
    vertical-align: top; /* 頂端切齊 */
    line-height: 1.6;
}

/* 日期與時間欄位樣式 */
.td_date, .td_time {
    font-weight: 500;
    color: #1f2937;
}

/* 論壇主題超連結 */
.td_subject a {
    font-size: clamp(1rem, 0.867rem + 0.22vw, 1.125rem);
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    transition: color 0.2s ease;
}

.td_subject a:hover {
    color: var(--primary_color); /* 懸浮轉折識別色 */
}

/* 主講人欄位樣式 */
.td_speaker {
    color: #4b5563;
    font-weight: 400;
}


/* ==========================================================================
   RWD 響應式斷點設定（螢幕小於 768px 自動轉卡片）
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. 隱藏橫向桌機 thead */
    .forum_data_table thead {
        display: none;
    }

    /* 2. 強制瓦解表格元素，全面轉為 Block */
    .forum_data_table, 
    .forum_data_table tbody, 
    .forum_data_table tr, 
    .forum_data_table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3. 將每列 tr 獨立改造成高質感的立體字型卡片 */
    .forum_data_table tbody tr {
        margin-bottom: 1.5rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.25rem 1rem 1rem 1rem; /* 微微調整內距 */
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .forum_detail_table tbody tr:nth-of-type(even){
        background-color: #6d6363;
    }

    /* 4. 手機版基礎儲存格排版 */
    .forum_data_table td {
        border: none;
        box-sizing: border-box;
    }

    /* 5. 核心視覺：將「論壇主題」移至卡片最頂端，維持大氣滿版 */
    .td_subject {
        display: block;
        padding: 0 0 0.75rem 0;
        /* margin-bottom: 0.75rem; */
        border-bottom: 1px dashed #edf2f7; /* 標題與下方資訊的細虛線 */
    }

    /* 6. 日期與時間：維持精緻的側邊輕量級灰字小標籤 */
    .td_date, 
    .td_time {
        display: flex;
        align-items: center;
        padding: 0.35rem 0;
    }

    .td_date::before, 
    .td_time::before,
    .td_speaker::before {
        content: attr(data-label);
        display: inline-block;
        min-width: clamp(3.188rem, 2.921rem + 0.43vw, 3.438rem);
        font-size: clamp(1rem, 0.867rem + 0.22vw, 1.125rem);
        color: #5b5b5b;
        font-weight: 500;
        margin-right: .625rem;
    }

    /* 7. 主講人欄位：在手機版單獨升級為「膠囊標籤型態」 */
    .td_speaker {
        display: flex;
        flex-direction: column; /* 讓標籤與長名字上下堆疊 */
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.5rem 0 0 0;
        margin-top: 0.25rem;
    }

    .td_speaker::before {
        /* content: attr(data-label);
        display: inline-block;
        color: #555;
        font-size: clamp(1rem, 0.867rem + 0.22vw, 1.125rem);
        font-weight: 500;
        border-radius: 4px;
        letter-spacing: 0.5px; */
    }
}