/* 基本樣式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 設定頁面全屏背景圖 */
body, html {
    height: 100%;
    font-family: Arial, sans-serif;
}

.hero-section {
    height: 100vh; /* 讓這一區塊填滿整個頁面 */
    background-image: url('../images/cryptography.png'); /* 請替換成背景圖片的路徑 */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-text {
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，讓文本更清晰 */
    padding: 20px;
    border-radius: 10px;
}

.hero-text h1 {
    font-size: 3em;
}

.hero-text p {
    font-size: 1.5em;
}


/* 學生相冊 */
.student-gallery {
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    gap: 10px; /* 項目之間的間距 */
    justify-content: center; /* 整體置中 */
    margin-top: 30px;
    margin-bottom: auto;
}

/* 每張學生卡片 */
.student-card {
    flex: 1 1 20%; /* 每張圖片的寬度 */
    height: 300px; /* 增加高度以避免重疊問題 */
    max-width: 20%; /* 確保每行最多四張圖片 */
    position: relative;
    overflow: hidden; /* 確保內容不會超出容器 */
    box-sizing: border-box;
    margin: 0 10px; /* 每張圖片的左右外邊距 */
    margin-top: 20px;
    padding-bottom: 70px; /* 增加底部填充，確保聯絡資訊不會被遮擋 */
    border: 2px solid #ddd; /* 邊框顏色和寬度，可以根據需要調整 */
    border-radius: 8px; /* 圓角邊框，與圖片圓角匹配 */
}

/* 圖片樣式 */
.student-card img {
    width: 100%;  /* 圖片自動適應容器的寬度 */
    height: 100%; /* 圖片自動適應容器的高度 */
    border-radius: 8px; /* 圓角邊框 */
    object-fit: cover; /* 保持比例，填滿容器，並裁剪超出部分 */
}

/* 學生資訊 */


.student-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32%; /* 調整高度確保容納所有文字 */
    background-color: white;
    padding: 10px;
    text-align: center;
    border-radius: 0 0 8px 8px;
    z-index: 2;
    display: flex; /* 使用 Flexbox */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: space-between; /* 讓內容均勻分布 */
}

.student-info .name {
    color: rgb(0, 0, 0); /* 這裡設定 .name 的文字顏色，例：黃色 */
    font-size: 24px; /* 這裡設定 .name 的字體大小 */
    font-weight: bold; /* 設定字體為粗體 */
}

.student-info .class {
    color: #000000; /* 這裡設定 .class 的文字顏色，例：淺灰色 */
    font-size: 16px; /* 這裡設定 .class 的字體大小 */

}

.student-info .tag {
    color: rgb(255, 255, 255); /* 這裡設定 .name 的文字顏色，例：黃色 */
    background-color: #303030;
    font-size: 14px; /* 這裡設定 .name 的字體大小 */
    padding: 5px 10px; /* 內距控制背景的大小 */
    display: inline-block; /* 讓背景能隨內容自動調整寬度 */
    border-radius: 4px; /* 圓角背景 */
    width: auto; /* 確保背景寬度隨內容調整，如果需要固定寬度可以設定具體值 */
    height: auto; /* 確保背景高度隨內容調整 */
}

/* 懸停時顯示的聯絡資訊 */
.student-contact {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 54%; /* 設定為圖片的 40% */
    background-color: rgba(0, 0, 0, 0.8); /* 深色背景 */
    color: white; /* 白色文字 */
    font-size: small; /* 字體大小 */
    padding: 10px;
    text-align: center;
    border-radius: 0 0 8px 8px; /* 圓角邊框 */
    transform: translateY(100%); /* 初始位置在下方 */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0; /* 初始隱藏 */
    z-index: 1; /* 確保在學生資訊下方 */
}

/* 懸停時顯示聯絡資訊 */
.student-card:hover .student-contact {
    transform: translateY(0); /* 滑入聯絡資訊 */
    opacity: 1; /* 顯示聯絡資訊 */
}

/* 設定主標題和博士班標題的距離 */
#phd-students {
    margin-top: 30px; /* 調整博士班標題上方的距離，根據需求調整數值 */
}

/* 設定博士班和碩士班標題的距離 */
#phd-students, #masters-students {
    margin-bottom: 20px; /* 調整博士班標題底部的距離，根據需求調整數值 */
}

/* 若要單獨控制碩士班標題距離博士班標題的距離 */
#masters-students {
    margin-top: 20px; /* 調整碩士班標題上方的距離，根據需求調整數值 */
}

/* 設定畢業校友標題的距離 */
.alumni-section {
    margin-top: 20px; /* 調整距離上方內容的距離，根據需求調整數值 */
}

/* 設定畢業校友標題的樣式 */
.alumni-section h2 {
    margin-bottom: 20px; /* 調整標題與表格之間的距離，根據需求調整數值 */
}

/* 設定博士班、碩士班標題樣式 */
.section-title {
    font-family: Arial, sans-serif; /* 字型 */
    font-size: 26px; /* 字體大小 */
    color: #000000; /* 字體顏色 */
    margin-bottom: 20px; /* 底部間距，調整標題下方的距離 */
    font-weight: bold; /* 設定字體為粗體 */
    margin-left: 30px;
}

/* 設定畢業校友標題樣式 */
.alumni-title {
    font-family: Arial, sans-serif; /* 字型 */
    font-size: 26px; /* 字體大小 */
    color: #000000; /* 字體顏色 */
    margin-top: 30px; /* 上方間距，調整標題上方的距離 */
    margin-bottom: 20px; /* 底部間距，調整標題下方的距離 */
    font-weight: bold; /* 設定字體為粗體 */
    margin-left: 30px;
}

/* 確保表格寬度與圖片對齊 */
.alumni-table-wrapper {
    max-width: 1200px; /* 或者你實際使用的寬度，確保與圖片對齊 */
    margin: 0 auto; /* 使表格置中 */
    overflow-x: auto; /* 如果表格寬度超過容器，可以滾動查看 */
}

/* 畢業校友表格 */
.alumni-table {
    width: 95%;
    border-collapse: collapse; /* 合併邊框 */
    margin-top: 30px; /* 上邊距 */
    font-size: 16px; /* 字體大小 */
    margin: auto;
}

/* 表頭行樣式 */
.alumni-table thead {
    background-color: black; /* 背景顏色 */
    color: white; /* 文字顏色 */
}

/* 表頭單元格樣式 */
.alumni-table th {
    padding: 10px; /* 內邊距 */
    border: 1px solid #ddd; /* 邊框顏色 */
    text-align: left; /* 文字左對齊 */
}

/* 表身單元格樣式 */
.alumni-table td {
    padding: 10px; /* 內邊距 */
    border: 1px solid #ddd; /* 邊框顏色 */
    text-align: left; /* 文字左對齊 */
}

/* 偶數行背景顏色 */
.alumni-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 淺灰色背景 */
}

/* 奇數行背景顏色 */
.alumni-table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 白色背景 */
}

@media (max-width: 768px) {
    .student-card {
        flex: 1 1 calc(50% - 20px); /* 在中等螢幕時顯示兩張卡片 */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .student-card {
        flex: 1 1 100%; /* 在小螢幕時顯示一張卡片 */
        max-width: 100%;
    }
}