/* ==========================================================
   與會貴賓總覽頁（speakers.html）專屬樣式
   獨立檔案，不更動 kv.css / layout.css / custom.css

   頁面沿用 index.html 的 header（LOGO＋漢堡選單）與共用 CSS/JS，
   這裡只放這頁獨有的：頭部橫幅、嘉賓總覽格線卡片。
   ========================================================== */

/* ---------------------------------------------------
   1. 頭部橫幅：img/speakers-header-bg.jpg
   --------------------------------------------------- */
.speakersHeroBanner{
	position: relative;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	background: #0047c8 url('../img/speakers-header-bg.jpg') center / cover no-repeat;
	text-align: center;
}
.speakersHeroInner h1{
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 2px;
	margin-bottom: 24px;
}
.speakersHeroInner p{
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 4px;
	color: #ffffff;
}

@media (max-width: 768px){
	.speakersHeroBanner{
		height: 200px;
	}
	.speakersHeroInner h1{
		font-size: 28px;
	}
}

/* ---------------------------------------------------
   2. 嘉賓總覽格線：桌機 4 個一列、逐列往下；
   手機版單欄逐一往下展開
   --------------------------------------------------- */
.speakersListWrap{
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 24px 100px;
}
.speakersListGrid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 24px;
	justify-items: center;
}

.speakerListCard{
	width: 297px;
	max-width: 100%;
}
.speakerListPhoto{
	width: 297px;
	height: 297px;
	max-width: 100%;
	overflow: hidden;
}
.speakerListPhoto img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.speakerListInfo{
	width: 297px;
	height: 135px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 22px 20px;
	background: url('../img/a4_bg02.jpg') center / cover no-repeat;
	text-align: center;
}
.speakerListName{
	font-size: 22px !important;
	font-weight: 700;
	color: #fff !important;
	text-align: center !important;
	margin: 0 0 20px !important;
}
.speakerListTitle{
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255,255,255,.85);
	text-align: center;
}

@media (max-width: 900px){
	.speakersListGrid{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px){
	/* 手機版：單一一個往下展開 */
	.speakersListGrid{
		grid-template-columns: repeat(1, 1fr);
	}
	.speakerListCard,
	.speakerListPhoto,
	.speakerListInfo{
		width: 100%;
		max-width: 340px;
	}
	.speakerListPhoto{
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* ---------------------------------------------------
   3. 捲動後 header 出現毛玻璃效果
   （跟 https://forum.gvm.com.tw/2025/speakers.html 同樣的效果）
   實際的切換時機由 js/speakers-page.js 控制 class
   .header.is-scrolled，這裡只負責視覺樣式。

   做法改成用 ::before 偽元素疊一層毛玻璃在背後，不要直接把
   backdrop-filter 套在 .header 或 .header > .block 這些「真正
   的元素」上，原因：
   1) 偽元素不是真正的子元素，backdrop-filter 套在偽元素上
      不會讓裡面真正的漢堡圖示／選單被牽連（實測過，backdrop-filter
      直接套在 .block 上會讓選單展開後的 X 關閉圖示不見，
      拿掉 backdrop-filter 就恢復正常，改用偽元素後就不會再有
      這個問題）。
   2) 偽元素用 position:absolute + inset:0，定位基準是 .header
      的 padding box（含 .header 自己的 padding 在內），
      不會再因為 .header 本身有 padding 而讓毛玻璃跟邊框有一圈
      沒蓋到的空隙，能做到真正滿版。
   --------------------------------------------------- */
.header{
	position: relative; /* 讓 ::before 的 inset:0 有明確的定位基準 */
}
.header::before{
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
.header.is-scrolled::before{
	opacity: 1;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* ---------------------------------------------------
   4. 漢堡圖示變色：改用純 CSS class 切換，不用 JS 硬設定顏色
   （JS 硬設定容易跟其他腳本互相覆蓋、來源多了反而更難除錯）
   --------------------------------------------------- */
.header.is-scrolled .menu.navOpen .menuBtn i{
	background: #535353 !important;
}

/* ---------------------------------------------------
   5. 防呆：選單面板內部（LOGO、導覽項目）強制不要有背景色，
   避免任何來源的色塊誤跑進選單裡。
   注意：不能連 .menuBox 本身也重置，那是選單面板原本要有的
   深藍漸層底色（定義在 kv.css），只重置它裡面巢狀的 .block
   跟 LOGO 連結。
   --------------------------------------------------- */
.header .menuBox .block,
.header .menuBox .block > a{
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ---------------------------------------------------
   6. 手機版 header 背景重置
   kv.css 裡有一條專門給首頁手機版用的規則：
       @media (max-width:899px){ .header{ background:漸層色 !important; } }
   因為 kv.css 是首頁和這頁共用的檔案，這條規則也會套用到這裡，
   把手機版的毛玻璃效果蓋成跟首頁一樣的深藍漸層。
   這裡加上同樣寬度的覆蓋，把背景改回透明，讓 .header::before
   的毛玻璃效果可以正常顯示，跟桌機版一致。
   --------------------------------------------------- */
@media (max-width: 899px){
	.header{
		background: transparent !important;
	}
}