@charset "utf-8";
/* ==========================================================================
   Mobile / small-screen fixes  (2026-10)
   Loaded LAST on every page, after the shared and page-specific stylesheets,
   so these rules win without touching the original cascade.
   Only the widths that were verified broken are overridden; desktop layout is
   untouched (991px / 767px / 575px / 480px / 400px breakpoints).

   Root causes fixed here:
   1. Bootstrap 4 `.row{margin:-15px}` was never reset on small screens, so any
      `.row`-based block (home slider, research block, footer, member area)
      rendered wider than the viewport and got clipped at the right edge.
   2. `.member_category` had a fixed height plus 60px side padding, so the long
      "Special-Appointment Associate Researcher" heading wrapped, spilled out of
      its 40px box and overlapped the member card below it.
   3. `.content` kept `margin: 20px` while being set to `width: 100%`.
   4. Long unbreakable strings (journal names, DOI-style citations) and the
      non-wrapping author line forced horizontal overflow inside flex items.
   5. The home slider used `background-size: 90% auto`, which letterboxed the
      photos and let the caption overlap the news panel on phones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global safety net + long-word wrapping (all widths)
   -------------------------------------------------------------------------- */

/* media never overflow the viewport */
img,
iframe,
video {
	max-width: 100%;
}

/* the enlarged lightbox image must be allowed to exceed its 100% context */
.lightbox_img {
	max-width: 96vw;
	max-height: 92vh;
}

/* long journal names / DOIs / unbreakable citation tokens */
.pubs_item_text,
.pubs_item_title,
.pubs_link,
.pubs_header,
.pubs-year,
.pubs-year a,
.pubs_year,
.pubs_previous,
.member_name,
.member_email,
.member_category,
.profile_entry,
.contact_detail,
.contact_cn,
.news_content li,
.research_content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* let flex children shrink instead of forcing the row wider */
.pubs_item_text,
.pubs_item_img,
.member_content,
.member_image,
.pubs_item {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   1. Reset the Bootstrap negative grid margins (<= 991px)
   The container keeps its own 15px padding; removing only the row margins
   brings every .row-based block back inside the viewport.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 991px)
{
	.container > .row,
	.container-fluid > .row,
	.container1 > .row,
	.container2 > .row,
	.container3 > .row,
	.container4 > .row {
		margin-left: 0;
		margin-right: 0;
	}
	.research_container,
	.research_content,
	.research_header,
	.pics_container,
	.pics_container .container,
	.member_container .container {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   2. Members page (<= 575px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 575px)
{
	/* the 40px fixed height + 60px side padding made this heading overlap the
	   member card underneath; let it size to its content instead */
	.member_category {
		height: auto;
		min-height: 40px;
		line-height: 1.3;
		padding: 8px 12px;
		font-size: 18px;
		display: flex;
		align-items: center;
		margin: 16px 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* width:100% with a leftover 20px margin pushed this 40px past the edge */
	.content {
		width: 100%;
		margin: 0;
	}

	/* `margin-left: 5px` on top of width:100% overflowed by 5px */
	.member {
		margin-left: 0;
		margin-right: 0;
	}

	/* two floats at 40% + auto left a gap and let the name run off the edge;
	   a real flex row keeps the photo and the text in one contained row */
	.member {
		display: flex;
		align-items: flex-start;
	}

	.member_image {
		float: none;
		flex: 0 0 40%;
		width: 40%;
		max-width: 40%;
		height: auto;
		min-height: 0;
		margin: 10px 10px 10px 0;
	}

	.member_image img {
		width: 100%;
		height: auto;
		border-radius: 8px;
	}

	.member_content {
		float: none;
		flex: 1 1 auto;
		min-width: 0;
		margin-right: 0;
		padding: 10px 0 10px 4px;
	}

	/* name + Chinese name were running together; give the CJK part room */
	.member_name {
		padding-top: 0;
		line-height: 1.35;
	}

	.member_tag {
		line-height: 1.35;
		padding-top: 4px;
	}
}

/* --------------------------------------------------------------------------
   3. Publications page (<= 767px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px)
{
	.pubs_item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "text" "img";
		row-gap: 12px;
		margin-left: 0;
		margin-right: 0;
		padding: 14px 0 16px;
	}

	.pubs_item_img {
		justify-self: start;
		width: auto;
		max-width: 260px;
		margin: 0;
	}

	.pubs_item_text {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.pubs_year,
	.pubs_header {
		padding-left: 4px;
		padding-right: 4px;
	}

	/* the citation is a normal inline flow: let it wrap like running text */
	.pubs_item_text,
	.pubs_link {
		word-break: normal;
	}
}

/* --------------------------------------------------------------------------
   4. Home page (<= 575px): slider crop + caption overlap
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 575px)
{
	/* `90% auto` letterboxed the photo and left the caption floating over the
	   news panel; `cover` fills the 300px band edge to edge */
	.home_slider_background {
		background-size: cover;
		background-position: center center;
	}

	/* the slider band is absolutely positioned; make sure the panel below it
	   gets a clean gap instead of sitting under the caption */
	.home_slider_container {
		margin-bottom: 12px;
	}

	.news_scroller {
		margin-top: 12px;
	}
}

/* --------------------------------------------------------------------------
   4b. Site header on phones
   The 70px logo + 24px group name + hamburger needed ~386px inside a 360px
   row, so the group name ran under the menu button on every page.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 575px)
{
	.header_content {
		height: 64px;
	}

	.header.scrolled .header_content {
		height: 56px;
	}

	.nav_icon img {
		height: 44px;
		width: 44px;
	}

	.group_name {
		margin: 0 8px;
		line-height: 1.15;
	}

	.group_name a,
	.header.scrolled .group_name a {
		font-size: 17px;
		line-height: 1.15;
		margin-top: 0;
		text-shadow: 1px 1px 0.5px #abc;
		overflow-wrap: break-word;
	}

	.group_name2,
	.group_name2 a,
	.header.scrolled .group_name2 a {
		margin-left: 0;
		margin-bottom: 0;
		font-size: 11px;
		line-height: 1.2;
		white-space: normal;
	}

	.hamburger {
		margin-left: 4px;
		margin-right: 0;
		flex: 0 0 auto;
	}

	.hamburger i {
		font-size: 26px;
	}
}

/* --------------------------------------------------------------------------
   4c. Pictures / album page
   main_styles.css gives every album photo a hard `width: 430px` while the row
   is `display:flex; flex-wrap:nowrap`, so a year with two or more photos always
   computed wider than its container (the row measured 1534px inside a 1140px
   column) and `overflow:hidden` silently cropped the outside photos.
   On phones `responsive.css` additionally forces width:100%, which stacked
   full-width photos side by side and ran ~3x past the viewport.
   Fix both: photos share their row on wide screens, stack on narrow ones.
   -------------------------------------------------------------------------- */

/* wide screens: let each photo shrink into its share of the row */
.box-image img,
.box-image img[style] {
	width: 100%;
	max-width: 430px;
	min-width: 0;
	height: auto;
}

/* narrow screens: one photo per line */
@media only screen and (max-width: 700px)
{
	.box-image {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
	}

	/* the markup carries an inline `flex: 1` meant for the desktop side-by-side
	   row; in a column it lets each photo grow vertically and leaves a big gap,
	   so neutralise it and let the photo keep its own aspect ratio */
	.box-image img,
	.box-image img[style] {
		width: 100%;
		max-width: 100%;
		height: auto;
		flex: 0 0 auto !important;
		align-self: stretch;
	}

	.box-area {
		overflow: hidden;
	}
}

/* --------------------------------------------------------------------------
   5. Publications page: phone year chips
   The page is ~300 lines in one file. On phones the fixed years menu is hidden
   (same as the Group page), so a compact chip row at the top of the list takes
   its place; the desktop years menu lives in styles/pubs_year_nav.css.
   Only years are listed — the two "previous work" sections keep their ids and
   can still be linked to directly.
   -------------------------------------------------------------------------- */

.pubs_nav--bar {
	display: none;
	margin: 4px 0 16px;
	padding: 8px 10px;
	background: #f6f6f6;
	border-left: 5px solid var(--color-primary);
	border-radius: 4px;
}

.pubs_nav--bar .pubs_nav_links {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pubs_nav--bar .pubs_nav_links::-webkit-scrollbar {
	display: none;
}

.pubs_nav--bar .pubs_nav_links a {
	flex: 0 0 auto;
	padding: 5px 13px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-primary);
	background: #ffffff;
	border: 1px solid #d9d9d9;
	border-radius: 999px;
	text-decoration: none;
	-webkit-transition: all 150ms ease;
	transition: all 150ms ease;
}

.pubs_nav--bar .pubs_nav_links a:hover,
.pubs_nav--bar .pubs_nav_links a:focus {
	color: #ffffff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.pubs_nav--bar .pubs_nav_links a.is_active {
	color: #ffffff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}

/* the fixed header is 120px tall, or 60px once scrolled; a heading must not
   land underneath it after a jump (js/site.js also corrects the offset) */
.pubs_year,
.pubs_header {
	scroll-margin-top: 80px;
}

/* the fixed years menu is not used below this width */
@media only screen and (max-width: 1100px)
{
	.pubs_container > .container {
		margin-left: 0;
	}
}

@media only screen and (max-width: 1100px)
{
	.pubs_nav--bar {
		display: block;
	}

	.pubs_year,
	.pubs_header {
		scroll-margin-top: 74px;
	}
}

/* --------------------------------------------------------------------------
   6. Very narrow phones (<= 400px)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 400px)
{
	.member_image {
		flex: 0 0 44%;
		width: 44%;
		max-width: 44%;
	}
}


/* --------------------------------------------------------------------------
   7. Accessibility (2026-10): skip link, screen-reader text, focus, lightbox
   -------------------------------------------------------------------------- */

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -64px;
	z-index: 10000;
	padding: 10px 16px;
	background: var(--color-primary);
	color: #ffffff;
	border-radius: 0 0 4px 4px;
	-webkit-transition: top 150ms ease;
	transition: top 150ms ease;
}

.skip-link:focus {
	top: 0;
	color: #ffffff;
}

/* the off-screen slide-in menu must not hold invisible focus targets */
.menu {
	visibility: hidden;
}

.menu.active {
	visibility: visible;
}

.hamburger:focus-visible,
.menu_close:focus-visible,
.home_slider_custom_dot:focus-visible,
.thumbimg:focus-visible,
.member_thumb:focus-visible,
.lightbox_close:focus-visible {
	outline: 3px solid #ffb000;
	outline-offset: 2px;
}

/* lightbox close button */
.lightbox_close {
	position: fixed;
	top: 18px;
	right: 22px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #111111;
	font-size: 30px;
	line-height: 42px;
	text-align: center;
	cursor: pointer;
	z-index: 10001;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.lightbox_close:hover {
	background: #eeeeee;
}

/* publications page intro + star legend */
.pubs_intro {
	margin: 18px 0 10px;
}

.pubs_intro_title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	color: #000000;
}



/* member tag links must stay inline (group.css sets a{display:block}) */
.member_tag a {
	display: inline;
	color: var(--color-primary);
	text-decoration: underline;
}

/* contact map fallback link */
.map_fallback {
	margin: 10px 0 0;
	font-size: 14px;
	color: #333333;
}

.map_fallback a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: underline;
}
/* 8. Header: switch to the hamburger menu earlier than 991px.
   At 992–1199px the six desktop nav items plus the group name wrap onto two
   lines; hiding the nav and showing the hamburger keeps the header on one row. */
@media only screen and (max-width: 1199px)
{
	.main_nav {
		display: none !important;
	}
	.hamburger {
		display: inline-block !important;
	}
}


/* --------------------------------------------------------------------------
   9. Contact page: hero + overlapping content card
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 991px)
{
	.contact_home {
		padding-top: 80px;
	}

	.contact_hero {
		height: 340px;
	}

	.contact_hero_inner {
		padding: 0 22px 80px;
	}

	.contact_hero_title {
		font-size: 32px;
	}

	.contact_content {
		margin-top: -72px;
	}

	.contact_content .container .row {
		padding: 28px 24px 32px;
	}

	.sitemap iframe {
		height: 380px;
		flex: none;
	}
}

@media only screen and (max-width: 767px)
{
	.contact_hero {
		height: 280px;
	}

	.contact_hero_inner {
		padding: 0 18px 64px;
	}

	.contact_hero_title {
		font-size: 27px;
	}

	.contact_content {
		margin-top: -52px;
		padding-bottom: 70px;
	}

	.contact_content .container .row {
		padding: 22px 18px 26px;
		border-radius: 10px;
	}

	.contact_detail {
		font-size: 16px;
		line-height: 1.75;
		align-self: stretch;
	}

	.contact_detail h3 {
		font-size: 23px;
	}

	.contact_cn {
		font-size: 15px;
		margin-top: 20px;
		padding-top: 18px;
	}

	.contact_cn h3 {
		font-size: 20px;
	}

	.sitemap {
		margin-top: 24px;
		display: block;
		height: auto;
	}

	.sitemap iframe {
		height: 300px;
		flex: none;
	}

	.map_info {
		flex: none;
	}
}

@media only screen and (max-width: 575px)
{
	.contact_home {
		padding-top: 70px;
	}

	.contact_hero {
		height: 240px;
	}

	.contact_hero_title {
		font-size: 24px;
	}
}


/* --------------------------------------------------------------------------
   10. Home slider on phones: show the photo fully and put the caption below
   The old overlay caption covered ~226px of the 300px slider on a 390px
   portrait screen, leaving only the top of the group photo visible.
   Below 768px the overlay is removed and a compact caption card is rendered
   under the image by js/site.js (it follows the active Owl slide).
   -------------------------------------------------------------------------- */

.home_slider_mobile_caption {
	display: none;
}

@media only screen and (max-width: 767px)
{
	.home_slider_content_container {
		display: none !important;
	}

	.home_slider_container {
		height: 320px;
		margin-bottom: 0;
	}

	.home_slider_mobile_caption {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		min-height: 190px;
		box-sizing: border-box;
		margin: 0 0 16px;
		padding: 15px 18px 17px;
		background: #f6f6f6;
		border-left: 4px solid var(--color-primary);
		border-radius: 0 0 8px 8px;
	}

	.home_slider_mobile_caption[hidden] {
		display: none;
	}

	.home_slider_mobile_title {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.3;
		color: #111111;
	}

	.home_slider_mobile_sub {
		margin-top: 4px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.5;
		color: #555555;
	}

	.home_slider_mobile_link {
		margin-top: 10px;
	}

	.home_slider_mobile_link a {
		display: inline-block;
		padding: 8px 16px;
		background: var(--color-primary);
		color: #ffffff;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 500;
	}

	.home_slider_mobile_link a:hover,
	.home_slider_mobile_link a:focus {
		background: var(--color-primary);
		color: #ffffff;
	}
}