/* Global Styles */
:root {
    --primary-color: #115740;
    --img-border-color: hsla(160, 67%, 20%, 0.5);
    /* --img-border-color: hsla(197, 6%, 77%, 0.2); */
    --hover-color: #0d4538;
    --light-bg: #f1f5f9;
    --hover-bg: #f8f9fa;
    --white: #fff;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-dark: rgba(0, 0, 0, 0.2);
}

/* Forum Container Layout */
.forum-container {
    display: flex;
    width: 95%;
    max-width: 1400px;
    margin: auto;
    padding: 0px 2rem;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 5rem;
}

.forum-container .agenda-content .container {
    width: 95%;
    padding: 0px 0px;
}



/* Sidebar Navigation */
.sidebar {
    flex: 0 0 21%;
    position: sticky;
    /* top: 200px; */
    /* min-height: calc(100vh - 40px); */
    /* height: auto; */
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    margin-bottom: 0;
}

.sidebar-item,
.sidebar a.sidebar-item {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    font-size: 1rem;
    /* box-shadow: 0 2px 4px var(--shadow-medium); */
    display: block;
    text-decoration: none;
}

.sidebar-item:hover,
.sidebar-item.active,
.sidebar a.sidebar-item:hover,
.sidebar a.sidebar-item.active {
    background-color: var(--hover-color);
    transform: translateX(1rem);
    /* box-shadow: 0 4px 8px var(--shadow-dark); */
}

/* Content Container */
.agenda-content {
    flex: 1;
    /* min-width: 0; */
    background-color: var(--white);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px var(--shadow-medium);
}

.agenda-content .section-title,
.agenda-content .section-title-en,
.forum-content h3,
.forum-content h4,
.speaker-content h4,
.forum-section strong,
.speaker-content strong{
    color: var(--primary-color);
}


.agenda-content .section-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 0px 0 5px;
}

.agenda-content .section-title-en {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2rem;
}

/* Forum Content */
.forum-content {
    margin: 0 auto 2rem;
    background-color: var(--white);
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 0.5rem var(--shadow-light);
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.forum-content.active {
    display: block !important;
    opacity: 1;
}

.forum-content h3 {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0rem;
    border-bottom: 2px solid var(--primary-color);
}

.forum-content h4 {
    font-size: 1.25rem;
    margin: 0.5rem 0.75rem;
}

.forum-content p,
.forum-content li,
.speaker-profile p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    text-align: justify;
}

.forum-content p {
    text-indent: 2em;
}

.forum-content ul {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

/* Forum Section Styling */
.forum-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: var(--white);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    /* box-shadow: 0 2px 10px var(--shadow-light); */
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
}

.forum-section a {
    color: #115740;
    font-weight: bold;
    /* text-decoration: none; */
}

.forum-section h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.forum-section h4 {
    font-size: 1.25rem;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.forum-section p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-indent: 2em;
    line-height: 1.5;
    text-align: justify;
}

.forum-section ul,
.forum-section ol
{
    margin-bottom: 1rem;
    padding-left: 2rem;
}

/* .forum-section li {
    padding-left: 0.5rem;
    line-height: 1.5;
}


.forum-section ul {
    margin-bottom: 1rem;
    padding-left: 3rem;
} */

.committee-list .member-name {
    display: inline-block;
    /* 设置为块级元素，才能应用宽度 */
    width: 4.2rem;
    /* 根据最长的名字来调整这个宽度 */
    /* 你也可以使用 em 单位，例如 width: 8em; */
}

/* 如果名字长短不一，下面的代码可以保证名字和单位之间总是有一些间距 */
.committee-list .member-unit {
    margin-left: 0em;
    /* 可选：增加一些左边距 */
}


.forum-section li {
    margin-bottom: 8px;
    line-height: 1.5;
}
/* Table Styling */
.forum-table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.forum-table th,
.forum-table td {
    text-align: center;
    padding: 0.75rem 1rem;
}

/* [修改] 仅为 <thead> (顶部表头) 的 <th> 设置主色背景 */
.forum-table thead th {
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: bold;
}

/* [新增] 为 <tbody> (行标题，即日期列) 的 <th> 设置样式 */
.forum-table tbody th {
    border-bottom: 1px solid #ddd;
    font-weight: normal; /* 或 'normal'，取决于你的设计 */
    /* 确保它有白色背景，这样悬停时不会透色 */
    background-color: #fff; 
    /* 跨行时垂直居中更好看 */
    vertical-align: middle; 
}

.forum-table td {
    border-bottom: 1px solid #ddd;
}

/* * [核心修改] 
 * 将斑马条纹规则从 tr 改为 tr td
 * 这样它就永远不会选中 <th> 
 */
.forum-table tr:nth-child(even) td {
    background-color: var(--light-bg);
}

/* * [核心修改] 
 * 将悬停规则从 tr 改为 tr td
 */
.forum-table tr:hover:not(.special-row) td {
    background-color: var(--hover-bg);
}

.forum-table .special-row {
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: bold;
}

.image-container{
    text-align: center;
    margin-bottom: 1rem;
    width: 100%;
}

.image-container img{
    max-width: 95%;
    height: auto;
    border-radius: 0.5rem;
    border: 2px solid var(--img-border-color);
}

/* --- 基础桌面/大屏幕样式 (保持不变) --- */
.speaker-grid {
    display: grid;
    padding: 2rem;
    /* 使用 auto-fit 和 minmax 确保网格响应式 */
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); 
    gap: 1rem;
}

.speaker-grid .summit-speaker {
    background-color: var(--white);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px var(--shadow-light);
}

.speaker-grid .summit-speaker img {
    width: 100%;
    height: auto;
    /* 保持原有的高宽比 */
    aspect-ratio: 3 / 4; 
    border-radius: 0.5rem;
    border: 2px solid var(--img-border-color);
    margin-bottom: 0.5rem;
}



/* Speaker Profile */
.speaker-profile {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eaeaea;
    overflow: auto;
    /* 清除浮动 */
}

.speaker-profile p {
    text-indent: 0;
}

.speaker-image {
    float: left;
    /* 使用浮动让文字环绕 */
    width: 8.4rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    /* 添加底部间距 */
}

.speaker-image img {
    width: 8.4rem;
    height: 11.2rem;
    border-radius: 0.5rem;
    object-fit: cover;
    /* border: 2px solid var(--primary-color); */
    border: 2px solid var(--img-border-color);
    display: block;
    /* 避免图片下方出现空隙 */
}

.speaker-content {
    /* 移除 flex: 1,让内容自然环绕 */
}

.speaker-content h4 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.speaker-content p {
    text-indent: 0;
    margin-bottom: 0.5rem;
    /* 段落间距 */
}

/* Committee Member */
.committee-member {
    margin-top: auto;
    flex: 1;
}

.committee-member h4 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.committee-profile {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eaeaea;
    overflow: auto;
    /* 清除浮动 */
}

.committee-image {
    float: left;
    /* 使用浮动让文字环绕 */
    width: 8.4rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    /* 添加底部间距 */
}

.committee-image img {
    width: 8.4rem;
    height: 11.2rem;
    border-radius: 0.5rem;
    object-fit: cover;
    /* border: 2px solid var(--primary-color); */
    border: 2px solid var(--img-border-color);
    display: block;
}

.committee-profile p {
    text-indent: 0;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    /* 段落间距 */
}

.committee-profile strong{
    color: var(--primary-color);
}




.forum-section .awards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin: 2rem 0;
}

.forum-section .award-item {
    background: #f8f9fa;
    border-radius: 0.5rem;
    box-shadow: 0 2px 0.5rem rgba(17, 87, 64, 0.08);
    padding: 0;
    max-width: 12rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* 让所有award-item高度一致 */
    height: 15rem;
    overflow: hidden;
}


/* 图片区域 - 占据上半部分 */
.award-item .image-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem 0.625rem;
}

.award-item img {
    height: 8rem;
    width: 100%;
    object-fit: contain;
}

/* 文字区域 - 固定在底部 */
.award-item .award-desc {
    background: rgba(17, 87, 64, 0.05);
    padding: 1rem 0;
    color: #115740;
    border-top: 1px solid rgba(17, 87, 64, 0.1);
}

/* 奖项标题样式 */
.award-item .award-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: #115740;
}

/* 奖品名称样式 */
.award-item .award-prize {
    font-weight: 400;
    font-size: 0.875rem;
    color: #666;
    line-height: 1;
}


.forum-section .register-img{
    width: 10rem;
    height: auto;
    display: block;
    margin: 1rem auto;
}




/* Responsive Adjustments */
@media (max-width: 992px) {

    .forum-container,
    .agenda-content,
    .sidebar {
        max-width: 100%;
        flex-direction: column;
        padding: 15px;
        position: static;
        height: auto;
    }

    .agenda-content,
    .forum-content {
        padding: 1rem;
    }

    .forum-table th,
    .forum-table td {
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-title-en {
        font-size: 1rem;
    }
}


@media(max-width:430px) {
    html {
        font-size: 14px;
    }

    .forum-container {
        flex-direction: column;

        width: 100%;
        padding: 0px 0rem;
    }

    .forum-section {
        width: 100%;
        padding: 1rem 1.5rem;
    }

    .forum-section ul {
        padding-left: 1rem;
    }

    .agenda-content p {
        text-indent: 0rem;
        font-size: 1rem;
    }

    .sidebar {
        flex: 0 0 auto;
        /* 取消固定宽度 */
        width: 85%;
        font-size: 0.875rem;
        /* 占满宽度 */
        position: relative;
        /* 取消sticky定位 */
        margin: 0 auto;
        /* 居中 */
    }

    .sidebar ul {
        display: flex;
        /* 横向排列更适合手机 */
        flex-direction: column;
        align-items: center;
        /* 列表项居中 */
        padding: 0;
    }

    .sidebar li {
        width: 100%;
        /* 列表项占满宽度 */
        text-align: center;

        /* 文字居中 */
    }

    .forum-container .agenda-content .container {
        width: 100%;
        /* 手机端占满宽度 */
        padding: 0;
    }

    .sidebar {
        display: center;
        /* display: n; */
    }

    .speaker-image {
        width: 6rem;
    }

    .speaker-image img {
        width: 6rem;
        height: 8rem;

    }


    .committee-image {
        width: 6rem;
        /* 添加底部间距 */
    }

    .committee-image img {
        width: 6rem;
        height: 8rem;

    }
}

/* --- 移动端优化 (Media Query) --- */
@media (max-width: 768px) {
    .speaker-grid {
        /* 缩小整体边距 */
        padding: 1rem 0.5rem; 
        /* 增加最小尺寸，让图片在小屏上显得更大更清晰 */
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        /* 缩小网格间距 */
        gap: 0.75rem;
    }

    .speaker-grid .summit-speaker {
        /* 缩小卡片内边距 */
        padding: 0.75rem; 
    }
    
    .speaker-grid .summit-speaker img {
        /* 在小屏幕上，让图片占据更少的空间 */
        /* 通过调整 aspect-ratio 可以让它更“方”或更“扁” */
        /* 示例：如果你想让照片更小（更扁），可以试试 4/3 或 1/1 */
        aspect-ratio: 3 / 4; 
        /* 也可以限制最大宽度，但这里使用 aspect-ratio 更推荐 */
        /* max-width: 80%; 
        margin-left: auto;
        margin-right: auto; */
    }
}