/* css/index.css */

/* 通用設定 */
.section-title {
	font-size: 2.3rem;
	color: var(--primary-blue);
	margin: 50px 0 30px;
	position: relative;
}

.section-title::after {
	content: "";        /* 偽元素必備屬性 */
	display: block;     /* 設為區塊元素，讓它自動換行跑到文字下方 */
	
	width: 110px;       /* 寬度 */
	height: 4px;        /* 高度 */
	
	background-color: #00aba8; /* 預設顏色 (Teal) */
	
	/* 位置調整 */
	margin: 15px 0 0; /* 上方留 20px 間距，左右 auto 讓線條置中 */
	
	/* 選用：導一點點圓角，視覺會比直角更精緻 */
	border-radius: 2px; 
}

.section-title.white {
	color: var(--white);
}

.section-title.white::after {
	background-color: #ffffff; /* 覆蓋為白色 */
}

.section-subtitle{
	text-align: center;
	font-size: 1.8rem;
	color: var(--primary-blue);
	margin: 50px 0 30px;
}

.section-text{
	margin-bottom: 30px;
}

.mt-30 { margin-top: 30px; }



.text-center { text-align: center; }

section.container{
	margin:5.5rem auto;
}

/* 3. Hero Banner (Boxed Layout) */
.hero-section {
	background-color: #f0f4f8; /* 容器外的底色 */
	padding: 60px 0;
}
.hero-container {
	max-width: 1300px; /* 固定寬度 banner */
	margin: 0 auto;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.carousel {
	position: relative;
	height: 500px;
}
.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}
.slide.active { opacity: 1; }
.prev-btn, .next-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.3);
	color: #fff;
	border: none;
	padding: 15px;
	cursor: pointer;
	font-size: 24px;
}
.next-btn { right: 0; }

/* 4. News */
.news-list {
	max-width: 800px;
	margin: 0 auto 30px;
}
.news-list li {
	padding: 15px 0;
	border-bottom: 1px solid #eee;
}
.news-list .date {
	color: var(--primary-green);
	font-weight: bold;
	margin-right: 15px;
}

/* 5. Parallax Sections (視差滾動核心) */
.parallax-section {
	background-attachment: fixed; /* 關鍵 CSS */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 100px 0;
	position: relative;
}
.relative-z {
	position: relative;
	z-index: 2;
}
/* Numbers 背景 */
.numbers-section {
	background-image: url('../images/bg_numbers.jpg?v=2'); /* 請替換成您的曲線背景圖 */
}

/* Agenda 背景 */
.agenda-section {
	background-image: url('../images/bg_agenda.jpg');
}
/* 遮罩，讓文字更清楚 */
.overlay-bg {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(255,255,255,0.7); /* 淺色遮罩 */
	z-index: 1;
}
.overlay-bg-dark {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,55,100,0.8); /* 深藍遮罩 */
	z-index: 1;
}

/* 數字圈圈樣式 */
.numbers-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom:2rem;
}
.num-item.circle {
	background: rgba(255,255,255,0.9);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	border: 3px solid var(--primary-green);
}
.num-item h3 { font-size: 2.5rem; color: var(--primary-blue); }

.num-item p{
	text-align: center;
}

/* 6. Register Interactive Cards (滑入特效) */
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.hover-card {
	position: relative;
	height: 300px;
	overflow: hidden;
	border-radius: 8px;
	display: block;
}
.card-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s;
}
/* 內容容器 */
.card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
	padding: 20px;
	color: #fff;
	transform: translateY(60px); /* 預設往下藏一點，只露標題 */
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-detail {
	opacity: 0; /* 內文預設隱藏 */
	transition: opacity 0.3s;
	margin-top: 10px;
}

/* Hover 觸發動畫 */
.hover-card:hover .card-bg {
	transform: scale(1.1); /* 背景放大 */
}
.hover-card:hover .card-content {
	transform: translateY(0); /* 內容區塊往上滑 */
}
.hover-card:hover .card-detail {
	opacity: 1; /* 內文浮現 */
}

/* 7. Sponsors */
.logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 20px;
	align-items: center;
}
.logo-grid img {
	width: 100%;
	filter: grayscale(100%);
	transition: 0.3s;
}
.logo-grid img:hover {
	filter: grayscale(0%);
}

/* RWD 手機版調整 */
@media (max-width: 768px) {
	.hero-container { border-radius: 0; }
	.card-grid { grid-template-columns: 1fr; }
	.numbers-grid { gap: 15px; margin-bottom: 0;}
	.num-item.circle { width: 140px; height: 140px; }
	.num-item h3 { font-size: 1.5rem; }
	
	/* 手機版通常關閉視差滾動以提升效能 */
	.parallax-section { background-attachment: scroll; }
}


/* --- 補漏：Agenda Grid & Bubble Styles --- */

/* 格線佈局 */
.agenda-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 桌機版預設四欄 */
	gap: 30px;
	margin-top: 50px;
	justify-items: center; /* 讓氣泡在各自的格子裡置中 */
}

/* 氣泡樣式 */
.agenda-item.bubble {
	width: 220px; /* 固定寬高以形成正圓 */
	height: 220px;
	border-radius: 50%; /* 變成圓形 */
	
	/* 背景使用品牌色漸層，並帶有透明度，配合視差背景 */
	background: linear-gradient(135deg, rgba(0, 86, 179, 0.5), rgba(0, 169, 157, 0.5)); 
	
	/* 玻璃擬態效果 (Glassmorphism) */
	backdrop-filter: blur(5px); 
	border: 1px solid rgba(255, 255, 255, 0.3); /* 淡淡的白邊 */
	
	/* 文字置中設定 */
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px; /* 避免文字貼邊 */
	
	/* 文字樣式 */
	color: var(--white);
	font-size: 1.4rem;
	font-weight: 600;
	cursor: pointer;
	
	/* 動畫過渡 */
	transition: all 0.4s ease;
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 氣泡 Hover 特效 */
.agenda-item.bubble:hover {
	transform: translateY(-10px) scale(1.05); /* 上浮並稍微放大 */
	background: linear-gradient(135deg, rgba(0, 86, 179, 0.9), rgba(0, 169, 157, 0.9)); /* 顏色變實 */
	border-color: var(--white); /* 邊框變亮 */
	box-shadow: 0 0 25px rgba(0, 169, 157, 0.6); /* 發光效果 */
}

/* 跳頁選單 pagination */

.news-list { list-style: none; padding: 0; }
.news-item { margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding-bottom: 5px; }
.news-date { color: #888; font-size: 0.9em; }
.pagination { margin-top: 20px; text-align: center; }
.pagination a { 
	display: inline-block; 
	padding: .35rem; 
	margin: 0 2px; 
	/* border: 1px solid #a3afcc;  */
	text-decoration: none;
	color: #fff;
	background: #a5c0ce;
	border-radius: 3px;
	line-height:1;
	width:20px;
}
.pagination a.page-on { background-color: #006aa1; color: #fff; }

.pagination .page-item.pn a{
	background: transparent;
	color:#006aa1;
}

.container {
	max-width: 1300px; /* 限制最大寬度，避免表格過度拉伸 */
	margin: 0 auto;
	padding: 0 15px;
	flex:1;
}

.breadcrumbs {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--middle-gray-color);
}

.breadcrumbs a {
	color: var(--middle-gray-color);
	transition: color 0.3s;
}

/* --- RWD 響應式修正 (補在原本的 media query 內) --- */
@media (max-width: 1024px) {
	/* 平板轉為 2 欄 */
	.agenda-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	/* 手機版氣泡稍微縮小 */
	.agenda-item.bubble {
		width: 160px;
		height: 160px;
		font-size: 1rem;
	}
	
	/* 保持 2 欄但在極小螢幕可能變 1 欄，視需求調整 */
	.agenda-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
}