/* RWD 樣式，僅透過 #page-index-m 前綴 scope，不影響其他頁面 */

#page-index-m .site-wrapper {
	max-width: 995px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: left;
}

#page-index-m-header {
	position: relative;
	background-image: url(images/head.gif);
	/* 避免行動瀏覽器在直橫向切換時自動放大/縮小文字，導致 header 字級跑掉 */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* header.jsp 內層 table 原生固定 width=995，螢幕小於此值時改為流體 100% 避免橫向捲軸 */
#page-index-m-header table {
	width: 100%;
	max-width: 995px;
}

/* 手機版導覽選單：預設隱藏，僅於窄螢幕由 JS 組裝 topheader/facebook/日EN 連結後顯示 */
#mobileNavToggle {
	display: none;
	position: absolute;
	top: 3px;
	right: 2px;
	z-index: 20;
	width: 36px;
	height: 25px;
	background: #676767;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	padding: 0;
}
#mobileNavToggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	margin: 4px auto;
}

#mobileNav {
	display: none;
}
@media (max-width: 768px) {
	#mobileNav.open {
		display: block;
	}
}
#mobileNav .mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 4px 8px;
	position: absolute;
	top: 42px;
	right: 8px;
	left: 8px;
	z-index: 20;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#mobileNav .mobile-nav-list li {
	padding: 8px 4px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
}
#mobileNav .mobile-nav-list li:last-child {
	border-bottom: 0;
}
#mobileNav .mobile-nav-fb img {
	width: 20px;
	height: 20px;
}

#page-index-m .site-content {
	box-sizing: border-box;
	padding: 0 8px;
}

#page-index-m img {
	max-width: 100%;
	height: auto;
}

#page-index-m .site-grid {
	display: grid;
	grid-template-columns: 190px 1fr 190px;
	grid-template-areas:
		"author search icons"
		"author bib    journal"
		"author news   notify";
	gap: 8px;
	margin-top: 8px;
	box-sizing: border-box;
}

#page-index-m .grid-author  { grid-area: author; min-width: 0; }
#page-index-m .grid-search  { grid-area: search; min-width: 0; }
#page-index-m .grid-icons   { grid-area: icons; min-width: 0; }
#page-index-m .grid-bib     { grid-area: bib; min-width: 0; }
#page-index-m .grid-journal { grid-area: journal; min-width: 0; }
#page-index-m .grid-news    { grid-area: news; min-width: 0; }
#page-index-m .grid-notify  { grid-area: notify; min-width: 0; }

/* 分頁 tab 容器改用最外層那張 table 做定位，其 auto table layout 在直向轉橫向時column寬度不易正確重算，故直接改為 block 排版避免此類 reflow 問題 */
#page-index-m .grid-author-panel > table,
#page-index-m .grid-search > table,
#page-index-m .grid-bib > table,
#page-index-m .grid-news > table {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
#page-index-m .grid-author-panel > table > tbody,
#page-index-m .grid-search > table > tbody,
#page-index-m .grid-bib > table > tbody,
#page-index-m .grid-news > table > tbody,
#page-index-m .grid-author-panel > table > tbody > tr,
#page-index-m .grid-search > table > tbody > tr,
#page-index-m .grid-bib > table > tbody > tr,
#page-index-m .grid-news > table > tbody > tr,
#page-index-m .grid-author-panel > table > tbody > tr > td,
#page-index-m .grid-search > table > tbody > tr > td,
#page-index-m .grid-bib > table > tbody > tr > td,
#page-index-m .grid-news > table > tbody > tr > td {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* 桌機預設：折疊按鈕與關閉鈕隱藏、內容面板常顕 */
#page-index-m .grid-author-toggle,
#page-index-m .grid-author-close {
	display: none;
}
#page-index-m .grid-author-panel {
	display: block;
}

/* Tab 選單改為橫向可滑動，避免多 tab（如最新消息10個）在窄螢幕破版 */
/* width:0 讓此容器不將 ul 的 max-content 寬度回報給外層 table 版面計算，min-width:100% 再撐滿實際可用寬度 */
#page-index-m .grid-author .TabStyle_60,
#page-index-m .grid-search .TabStyle_60,
#page-index-m .grid-bib .TabStyle_60,
#page-index-m .grid-news .TabStyle_60 {
	overflow-x: auto;
	overflow-y: hidden;
	width: 0;
	min-width: 100%;
	box-sizing: border-box;
}
#page-index-m .grid-author ul.TabStyle_60,
#page-index-m .grid-search ul.TabStyle_60,
#page-index-m .grid-bib ul.TabStyle_60,
#page-index-m .grid-news ul.TabStyle_60 {
	width: max-content;
	min-width: 100%;
}

#page-index-m-footer {
	background-image: url(images/bg_footer.gif);
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}

/* 語言切換(日/EN)+上一頁欄位全尺寸移除，保留原本實體以免影響 table 版面 */
#page-index-m-header > div > table > tbody > tr:nth-child(2) > td:nth-child(3) {
	visibility: hidden;
}

@media (max-width: 768px) {
	#page-index-m-header {
		background-image: url(images/head-rwd.gif);
		background-repeat: no-repeat;
		background-position: 0px 30px;
		background-size: 100% auto;
	}
	#page-index-m-header > div > table {
		height: auto;
	}
	#page-index-m .site-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"author"
			"search"
			"bib"
			"news";
	}

	/* index.jsp 的最外層仍是傳統 3 欄 table(非 index_m.jsp 的 div)，改為堆疊排版並隱藏左右裝飾欄 */
	#page-index-m table.MainPanel {
		width: 100%;
	}
	#page-index-m table.MainPanel > tbody,
	#page-index-m table.MainPanel > tbody > tr,
	#page-index-m table.MainPanel > tbody > tr > td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	#page-index-m td.MainPanelHeader {
		height: auto;
		background-image: none;
	}
	#page-index-m .MainPanelLeft,
	#page-index-m .MainPanelRight {
		display: none;
	}

	/* 各檢索表單的輸入框/下拉選單/按鈕多為行內固定 px 寬度，窄螢幕會撐破版面 */
	#page-index-m input[type="text"],
	#page-index-m select,
	#page-index-m input[type="submit"],
	#page-index-m input[type="reset"] {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 連結文字超出容器寬度時以省略號截斷；僅套用在欄寬已固定(table-layout:fixed)的清單型 table，
	   避免 white-space:nowrap 在寬度不定的 auto-layout table 中把欄位撐爆。
	   Panel_News 與 Panel_Bibliography 系列面板因欄位本身有大於手機寬度的固定 px 值(如 width=490)，
	   改用 table-layout:fixed 反而會強制撐開，故不套用，維持原生自動換行。 */
	#page-index-m .grid-announce table:nth-of-type(1),
	#page-index-m .grid-notify > table {
		table-layout: fixed;
	}
	#page-index-m .grid-announce table:nth-of-type(1) td,
	#page-index-m .grid-notify > table td {
		overflow: hidden;
	}
	#page-index-m .grid-announce a,
	#page-index-m .grid-notify a.extendsearch,
	#page-index-m #mobileNav a {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 佛學著者規範排名改為頁面側邊浮動標籤，點擊後從左側滑出面板 */
	#page-index-m .grid-author-toggle {
		display: block;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		writing-mode: vertical-rl;
		text-orientation: mixed;
		background: #676767;
		color: #fff;
		border: 0;
		padding: 12px 6px;
		border-radius: 0 6px 6px 0;
		box-shadow: 2px 0 6px rgba(0,0,0,0.3);
		z-index: 30;
		cursor: pointer;
	}
	/* 面板展開時標籤隨面板邊緣移動，仍可點擊以收合 */
	#page-index-m .grid-author:has(.grid-author-panel.open) .grid-author-toggle {
		left: min(80%, 320px);
	}
	#page-index-m .grid-author-panel {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: min(80%, 320px);
		height: 100%;
		overflow-y: auto;
		background: #fff;
		box-shadow: 2px 0 10px rgba(0,0,0,0.3);
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 31;
		padding: 12px;
		box-sizing: border-box;
	}
	#page-index-m .grid-author-panel.open {
		transform: translateX(0);
	}
	#page-index-m .grid-author-close {
		display: block;
		margin-left: auto;
		background: none;
		border: 0;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
	}

	/* 四小功能 banner/期刊全文 banner/系統公告於行動版隱藏 */
	#page-index-m .grid-icons,
	#page-index-m .grid-journal,
	#page-index-m .grid-notify {
		display: none;
	}

	/* 佛圖介紹列的統計文字欄位(第二個table的td[2])於行動版隱藏 */
	#page-index-m .grid-announce table:nth-of-type(2) td:nth-child(2) {
		display: none;
	}

	/* header.jsp 為共用檔案不便修改，改用堆疊排版覆寫其固定寬度 table */
	#page-index-m-header table,
	#page-index-m-header table > tbody,
	#page-index-m-header table tr,
	#page-index-m-header table td {
		display: block;
		width: 100% !important;
	}

	/* 導覽連結/facebook/日EN切換已改組進 #mobileNav，隱藏原本位置的版本 */
	#mobileNavToggle {
		display: block;
	}
	#page-index-m-header > div > table > tbody > tr:first-child {
		display: none;
	}
	/* 搜尋框欄位(tr2/td2)與導覽選單列(tr3/td)於手機版隐藏 */
	#page-index-m-header > div > table > tbody > tr:nth-child(2) > td:nth-child(2),
	#page-index-m-header > div > table > tbody > tr:nth-child(3) > td,
	#page-index-m-header > div > table > tbody > tr:nth-child(4) {
		display: none;
	}
}

@media (max-width: 480px) {
	#page-index-m .site-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"author"
			"search"
			"bib"
			"news";
	}

	#page-index-m .grid-announce font[size="3"] {
		font-size: 14px;
	}
}