/* css/index.css */

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


.section-title::after {
	content: "";        /* 偽元素必備屬性 */
	display: block;     /* 設為區塊元素，讓它自動換行跑到文字下方 */
	
	width: 110px;       /* 寬度 */
	height: 4px;        /* 高度 */
	
	background-color: #00aba8; /* 預設顏色 (Teal) */
	
	/* 位置調整 */
	margin: 15px auto 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; }
.mt-50 { margin-top: 50px; }

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

section.container{
	margin:5.5rem auto;
}

/* 3. Hero Banner (Boxed Layout) */
.hero-section {
	width: 100%;
	/* 設定一個適當的高度，或者用 aspect-ratio */
	height: auto; 
	position: relative;
	background-color: #f0f4f8;
	padding: 60px 0;
}

/* 讓 Swiper 滿版 */
.hero-wrapper {
	position: relative; /* 讓絕對定位的按鈕參考這裡 */
	width: 100%;
	max-width: 1300px;  /* 限制最大寬度 */
	margin: 0 auto;     /* 置中 */
}

.hero-swiper {
	width: 100%;
}

/* 確保圖片適應容器 */
.hero-swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: auto; /* 或是 100% 搭配 object-fit: cover */
	object-fit: cover;
}

.hero-wrapper .swiper-button-prev,
.hero-wrapper .swiper-button-next {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: var(--primary-blue);
	
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100; /* 確保浮在最上層 */
	
	/* 這裡使用偽元素或 Swiper 內建圖示的樣式調整，視您的版本而定 */
}

.hero-wrapper .swiper-button-prev {
	left: -70px;  /* 貼齊 Wrapper 最左邊 */
}

.hero-wrapper .swiper-button-next {
	right: -70px; /* 貼齊 Wrapper 最右邊 */
}

.carousel {
	position: relative;
	/* 電腦版固定高度 */
	height: 500px;
	/* 確保舊版瀏覽器也能隱藏溢出 */
	overflow: hidden; 
}

/* Slide 容器設定 */
.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	/* ★ 修改：移除了 background-size 等設定，因為現在是用 img 標籤 */
}

/* ★ 新增：讓 img 標籤模擬背景圖效果 (關鍵) */
.slide img {
	width: 100%;
	height: 100%;
	display: block;        /* 消除圖片下方空隙 */
	object-fit: cover;     /* 關鍵：讓圖片填滿容器不變形，類似 background-size: cover */
	object-position: center; /* 類似 background-position: center */
}

.slide.active {
	opacity: 1;
	z-index: 1; /* 確保 active 的圖片層級較高 */
}

.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;
	z-index: 10; /* ★ 修改：確保按鈕浮在 img 上面 */
	transition: background 0.3s;
}

.prev-btn:hover, .next-btn:hover {
	background: rgba(0,0,0,0.6);
}

.next-btn {
	right: 0;
}

/* 4. News */
.news-list {
	max-width: 1000px;
	margin: 0 auto 30px;
}
.news-list li {
	padding: 15px 0;
	border-bottom: 1px solid #eee;
	transition: all .3s ease-in-out;
	background: #fff;
}

.news-list li a{
	font-size: 1.1rem;
}

.news-list li:hover{
	background: #f5f5f5;
}

.news-list .date {
	color: var(--primary-green);
	font-weight: bold;
	margin-right: 25px;
	padding-left:10px;
}

/* 5. Parallax Sections (視差滾動核心) */
.parallax-section {
	background-attachment: fixed; /* 關鍵 CSS */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 100px 0;
	position: relative;
}

.parallax-section.agenda-section{
	padding: 150px 0;
}

.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 */
.sponsor-group{
	display: flex;    
	flex-direction: column;
	align-items: center; /* 讓標題與 Grid 整體置中 */
	width: 100%;
	margin-bottom: 50px;
}

.sponsor-group h4{
	background: #b1b1b1;
	color:#fff;
	padding: .15rem 1rem;
	border-radius: 8px;
	margin-bottom:1.5rem;
}

.logo-grid {
	display: grid;
	/* 1. 改為固定 5 欄 (或依需求調整)，確保它們在同一行平均分配寬度 */
	grid-template-columns: repeat(5, 1fr); 
	
	/* 2. 設定最大寬度，避免 Logo 在超大螢幕被拉得太開 */
	width: 100%;
	max-width: 1100px; 
	
	gap: 40px; /* 增加間距，讓視覺更分散 */
	align-items: center; /* 垂直置中 */
	justify-items: center; /* 水平置中：確保 Logo 在格子內是正中間的 */
	
	margin-top: 20px;
}
.logo-grid img {
	/* 3. 改用 max-width，避免 Logo 圖片原始尺寸太小被強制拉大導致模糊 */
	max-width: 100%;
	height: auto;
	object-fit: contain; /* 確保 Logo 比例不變形 */
	transition: 0.3s;
}
/* .logo-grid img:hover {
	filter: grayscale(0%);
} */

/* 8. subscribe section */
section.subscribe-section{
	background: var(--bg-light-blue);
	padding:20px 0 50px 0;

}

section.subscribe-section a.btn{
	margin-bottom:1.5rem;
}



/* --- 補漏：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); /* 發光效果 */
}


/* --- 拉霸數字特效 CSS --- */

/* 讓數字與符號橫向排列 */
.count-num {
	display: inline-flex;
	align-items: baseline; /* 確保底部對齊 */
	justify-content: center;
	line-height: 1; /* 避免行高影響計算 */
	overflow: hidden; /* 重要 */
	font-variant-numeric: tabular-nums; /* 讓數字等寬，避免轉動時抖動 */
}

/* 轉動的容器 (遮罩) */
.digit-roller {
	position: relative;
	display: inline-block;
	overflow: hidden; /* 隱藏超出範圍的數字 */
	height: 1.2em; /* 設定一個固定高度，視您的字體大小微調 */
	line-height: 1.2em;
}

/* 實際轉動的長條 */
.digit-reel {
	transition: transform 3s cubic-bezier(0.65, 0, 0.35, 1); /* 轉動動畫曲線 */
	will-change: transform;
}

/* 轉輪內的每一個數字 */
.digit-reel span {
	display: block;
	height: 1.2em; /* 必須與 digit-roller 高度一致 */
	line-height: 1.2em;
	text-align: center;
}

/* 靜態符號 (例如 , +) */
.static-char {
	display: inline-block;
}


/* --- 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) {
	
	.swiper-button-prev,
	.swiper-button-next{
		display: none;
	}
	
	
	.logo-grid {
		grid-template-columns: repeat(2, 1fr); /* 手機改 2 欄 */
		gap: 20px;
	}
	
	.hero-section {
		padding: 0; /* 手機版通常滿版，移除上下留白看起來比較大器 (可選) */
	}
	
	.hero-swiper { border-radius: 0; }
	
	.carousel {
		width:100%;
		/* 100vw * 0.75 = 75vw */
		height: 75vw; 
	}
	
	.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-item.bubble {
		width: 160px;
		height: 160px;
		font-size: 1rem;
	}
	
	/* 保持 2 欄但在極小螢幕可能變 1 欄，視需求調整 */
	.agenda-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
}