/*
 * 前台與編輯器共用的版面樣式。
 * 數值是在瀏覽器裡實際量測原 Google Sites 頁面得到的；斷點與原站相同（767px / 479px）。
 */

:root {
	/*
	 * 內容區左右留白。原站內容寬 = (min(1280px, 視窗寬) - 96px) × 0.975，
	 * 1280px 寬時為 1154.4px（左右各 62.8px）。
	 */
	--msc-gutter: calc(46.8px + 1.25%);
}

@media (max-width: 767px) {
	:root { --msc-gutter: max(16px, calc((100vw - 507px) / 2)); }
}

@media (max-width: 479px) {
	:root { --msc-gutter: 19px; }
}

/* ---------- 區段 ---------- */

/* 頁面最外層的區塊彼此不留間距，間距由各區段自己的上下留白決定（同 Google Sites）。 */
.wp-block-post-content > *,
.is-root-container > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.msc-section {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* 文字方塊上下各有 14px 內距；圖片、輪播沒有。 */
.msc-section > :first-child:not(.wp-block-columns),
.msc-section .wp-block-column > :first-child:not(.wp-block-image):not(.wp-block-gallery) {
	margin-block-start: 14px;
}

.msc-hero + .msc-section > :first-child:not(.wp-block-columns) {
	margin-block-start: 8px;
}

.msc-section > :last-child:not(.wp-block-columns),
.msc-section .wp-block-column > :last-child:not(.wp-block-image):not(.wp-block-gallery) {
	margin-block-end: 14px;
}

/* 文字比圖片、分隔線內縮 8px（原站文字方塊的內距）。 */
.msc-section > :not(.wp-block-columns),
.msc-section .wp-block-column > :not(.wp-block-image):not(.wp-block-gallery),
.msc-footer > * {
	padding-left: 8px;
	padding-right: 8px;
	box-sizing: border-box;
}

.msc-section h1 + *,
.msc-section h2 + * {
	margin-block-start: 28px;
}

/*
 * 欄位：重現原站 12 欄格線。欄間距是格線寬的 2.5%，每欄寬 = 格線寬 × n/12 − 間距。
 * 作法是容器向右多延伸一個間距，每欄再用右內距把間距留出來。
 */
@media (min-width: 768px) {
	/* 要蓋過 constrained 版面對子元素強制的 margin: auto !important 與 max-width。 */
	.msc-section .wp-block-columns.is-layout-flex {
		gap: 0;
		margin-right: -2.564% !important;
		max-width: none;
	}

	.msc-section .wp-block-columns > .wp-block-column {
		padding-right: 2.5%;
		box-sizing: border-box;
	}
}

/* 原站 768px 起就是並排；WordPress 核心要到 782px，中間這段把並排補回來。 */
@media (min-width: 768px) and (max-width: 781px) {
	.msc-section .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
	}
	.msc-section .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
	.msc-section .wp-block-columns > .wp-block-column[style*="flex-basis:33.33%"] { flex-basis: 33.33% !important; flex-grow: 0; }
	.msc-section .wp-block-columns > .wp-block-column[style*="flex-basis:66.67%"] { flex-basis: 66.67% !important; flex-grow: 0; }
	.msc-section .wp-block-columns > .wp-block-column[style*="flex-basis:50%"] { flex-basis: 50% !important; flex-grow: 0; }
}

@media (max-width: 767px) {
	.msc-section .wp-block-columns.is-layout-flex {
		gap: 24px;
	}
}

/* 原站在平板寬度把 4 欄的成員列排成一列 2 張 */
@media (min-width: 480px) and (max-width: 767px) {
	.msc-section .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
		flex-wrap: wrap !important;
	}
	.msc-section .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0;
	}
}

/* 手機寬度的成員卡片不佔滿整行 */
@media (max-width: 479px) {
	.msc-section .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
		flex-basis: 72% !important;
		flex-grow: 0;
		margin-left: auto;
		margin-right: auto;
	}
}

/* 區段分隔線 */
hr.wp-block-separator.msc-divider {
	border: none;
	border-top: 3px solid rgba(0, 0, 0, 0.15);
	opacity: 1;
	margin-top: 8px;
	margin-bottom: 4px;
	width: 100%;
	height: 0;
}

/* ---------- 頁面橫幅 ---------- */

.wp-block-cover.msc-hero {
	min-height: 360px;
	padding: 1em var(--msc-gutter);
}

.wp-block-cover.msc-hero--home {
	min-height: 540px;
}

/* 標題外的白框：首頁佔格線 10/12，其他頁 8/12。 */
.msc-hero .wp-block-cover__inner-container {
	width: calc(min(1154.4px, 100%) * 0.658);
	max-width: none;
	border: 2px solid #fff;
	padding: 44px 56px;
	box-sizing: border-box;
}

.msc-hero--home .wp-block-cover__inner-container {
	width: calc(min(1154.4px, 100%) * 0.829);
}

.msc-hero h1 {
	color: #fff;
	font-family: var(--wp--preset--font-family--lora);
	font-size: 54pt;
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.11;
	margin: 0;
	text-align: center;
}

.msc-hero--home h1 {
	font-size: 45pt;
}

/* ---------- 內容 ---------- */

/* WordPress 7 起核心不再提供這個 class 的樣式，舊內容仍會用到。 */
.has-text-align-justify {
	text-align: justify;
}

h1,
h2 {
	margin-top: 0;
}

.wp-block-column .wp-block-image img {
	width: 100%;
	height: auto;
}

.wp-block-image {
	margin-bottom: 0;
}

/* 原站這些行的行高是以 29pt 標題字級 × 1.2 撐開的，與實際字級無關。 */
.msc-tight {
	line-height: 46.4px;
}

/* 首頁橫幅標題字級 45pt，但行高沿用 54pt 標題的行高。 */
.msc-hero--home h1 {
	line-height: 79.92px;
}

.msc-info p {
	line-height: 1.656;
}

/* 論文列表（原站每行實際高 23px，條目間距 19px） */
.msc-section ol.msc-pubs {
	color: #000;
	font-size: 12pt;
	line-height: 23px;
	margin-left: 0;
	padding-left: 28px;
}

ol.msc-pubs > li {
	margin-bottom: 19px;
	padding-left: 0;
}

.msc-pubs + p {
	font-size: 12pt;
	line-height: 1.38;
}

/* 頁尾 Contact Us */
.msc-footer {
	padding-top: 32px;
	padding-bottom: 24px;
}

.msc-footer .msc-contact-title {
	line-height: 1.38;
	margin-top: 16px;
	margin-bottom: 16px;
}

.msc-footer .msc-contact-body {
	font-size: 12pt;
	line-height: 1.8;
	margin-top: 16px;
}

/* ---------- 響應式（同原站斷點） ---------- */

@media (max-width: 767px) {
	h1 { font-size: 26pt; }
	h2 { font-size: 18pt; }
	.wp-block-cover.msc-hero { min-height: 320px; }
	.wp-block-cover.msc-hero--home { min-height: 540px; }
	.msc-hero .wp-block-cover__inner-container,
	.msc-hero--home .wp-block-cover__inner-container {
		width: 100%;
		padding: 30px 56px;
	}
	.msc-hero h1 { font-size: 46pt; }
	.msc-hero--home h1 { font-size: 39pt; line-height: 68.08px; }
	.msc-tight { line-height: 41.6px; }
}

@media (max-width: 479px) {
	h1 { font-size: 21pt; }
	h2 { font-size: 16pt; }
	.wp-block-cover.msc-hero { min-height: 250px; }
	.wp-block-cover.msc-hero--home { min-height: 400px; }
	.msc-hero .wp-block-cover__inner-container,
	.msc-hero--home .wp-block-cover__inner-container {
		padding: 20px 10px;
	}
	.msc-hero h1 { font-size: 35pt; }
	.msc-hero--home h1 { font-size: 32pt; line-height: 51.8px; }
	.msc-tight { line-height: 33.6px; }
}