/* 2026-10 改版（issue #1）— application。只放這次新增／覆蓋的樣式 */
/* 2026 的 css 每頁都會載入，所以選擇器一律掛在 body#application 底下 */

/* AP-07：頁首 Banner 不再變暗
   - 原本 .application-banner-img opacity:.5 疊在 li 的黑底上 → 整張圖變暗；改成 opacity:1、拿掉黑底
   - 收合的窄條改用白色分隔線區分（每條左邊 2px 白線，第一條不用） */
body#application .application-banner-img {
	opacity: 1;
	filter: none;
}
body#application .application-banner-list {
	background-color: transparent;
	border: 0 !important;
	border-left: 2px solid #FFF !important;
}
body#application .application-banner-list:first-child {
	border-left: 0 !important;
}
body#application .application-banner-mask {
	display: none;
}

/* Banner 圖的標語在桌機被切掉一截：圖的左半是深藍文字區、右半是照片，
   展開的面板是窄長形，cover + 置中會把左邊（標語）裁掉。
   展開中的那張改成靠左對齊，整句露出來；收合的窄條維持置中，才看得到照片、分得出是哪一張。
   切換時跟著 kwicks 的展開動畫（duration 600）一起移動。
   只限桌機：手機的展開面板只有約 290px 寬，靠左也只露出標語開頭，手機 Banner 另案處理 */
@media only screen and (min-width: 1001px) {
	body#application .application-banner-img {
		transition: background-position .6s ease;
	}
	body#application .application-banner-list.kwicks-expanded .application-banner-img,
	body#application .application-banner-list.kwicks-selected:not(.kwicks-collapsed) .application-banner-img {
		background-position: left center;
	}
}

/* AP-08：五分類卡片 — 桌機五欄、每欄 20vw，從最左開始平均滿版
   原本 6 欄 (100vw / 6)，加上 JS 把 .application-class-move 往右推，只有 5 個分類時會空出一欄。
   JS 已改成依可見張數計算（application/index.php），這裡把定位歸零。 */
body#application .application-class-list {
	width: 20vw;
}
body#application .application-class-move {
	left: 0;
	right: auto;
}
body#application .application-class-box.active .application-class-move {
	right: auto;
}

/* 手機／平板（<=1000px）：舊版整區隱藏，改成依螢幕排成格狀，五個分類都看得到、可點 */
@media only screen and (max-width: 1000px) {
	body#application .application-class-box {
		display: block;
		height: auto;
		white-space: normal;
		overflow: visible;
		opacity: 1;
	}
	body#application .application-class-move {
		position: static;
		display: flex;
		flex-wrap: wrap;
		left: auto !important;
		right: auto !important;
	}
	body#application .application-class-list {
		width: 33.3333%;
		flex: 1 1 33.3333%;
		box-sizing: border-box;
		border-right: 1px solid #FFF;
		border-bottom: 1px solid #FFF;
	}
	body#application .application-class-list a,
	body#application .application-class-move.move-active .application-class-list a,
	body#application .application-class-list.past a,
	body#application .application-class-list.future a {
		height: 260px;
		transform: none;
		animation: none;
	}
	body#application .application-class-p {
		font-size: 16px;
		padding: 14px 5px;
		white-space: normal;
		box-sizing: border-box;
	}
	body#application .application-class-list:hover {
		box-shadow: none;
	}
	/* AP-02／AP-03 新文字較長，手機兩側留白避免貼邊 */
	body#application .application-narrative-box {
		padding-left: 16px;
		padding-right: 16px;
	}
}
@media only screen and (max-width: 600px) {
	body#application .application-class-list {
		width: 50%;
		flex: 1 1 50%;
	}
	body#application .application-class-list a,
	body#application .application-class-move.move-active .application-class-list a,
	body#application .application-class-list.past a,
	body#application .application-class-list.future a {
		height: 180px;
	}
	body#application .application-class-p {
		font-size: 14px;
		padding: 10px 5px;
		bottom: 12px;
		letter-spacing: 0.5px;
	}
}