/* Layout fixes for the English copy. Task 9 adds rules here after visual QA. */

/* Problem: the site font stack starts with Chinese font names and then falls back to Verdana,
   a very wide Latin font, on computers without Microsoft YaHei. English text then takes much
   more space than needed. Keep YaHei first (same look as the Chinese site on Windows), then
   use narrower Latin fonts before Verdana. Page: all. Selector: body (style/sty.css). */
body {
  font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}

/* Problem: English menu labels are longer than the Chinese labels, so the main menu wraps
   to a second line at 1440 px. The labels have an inline font-size of 18px, so !important is
   necessary. Page: all. Selector: .toplfr li, .toplfr li a (header menu). */
.toplfr li {
  padding: 0 10px;
}
.toplfr li a {
  font-size: 16px !important;
}

/* Problem: the English lab introduction on the home page is about 2 times longer than the
   Chinese text, so it goes out of its 340px box and covers the "Research Projects" title.
   Show the first 9 lines (9 x 35px fits in the box) and end with "...". The full text is
   on sysgk.htm (the block is a link to it). Page: index.html. Selector: .xuyjszwrr p. */
.xuyjszwrr p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}

/* Problem: the English research project titles and summaries are longer than the Chinese
   text, so they go out of the grey 250px card and cover the next row. Keep the title to
   2 lines and the summary to 5 lines, the same as the Chinese cards.
   Page: index.html. Selector: .leyclfa h3, .leyclfa p (Research Projects cards). */
.leyclfa h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0;  /* the hidden lines show in the padding, so use margin for the same space */
  margin: 5px 0;
}
.leyclfa p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  padding: 0;
  margin: 25px 0 20px;
}

/* Problem: the English media coverage titles take 3-4 lines of 40px, so the summary is cut
   off at the bottom of the card. Keep the title on 1 line with "..." (the Chinese titles are
   1 line) and the summary to 3 lines. Page: index.html. Selector: .kk330tb h3, .kk330tb p. */
.kk330tb h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk330tb p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Problem: the English academic news titles take 2 lines, the Chinese titles take 1 line,
   so the cards are not aligned with the Chinese layout. Keep the title on 1 line with "...".
   Page: index.html. Selector: .yxsstlf h3 (Academic News cards). */
.yxsstlf h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Problem: "National Archives Administration of China" does not fit on one line in its
   link-bar cell at 18px, so it wraps and the second line falls below the 80px bar.
   Page: all pages with the footer link bar. Selector: .f-outer>div. */
.f-outer > div {
  font-size: 16px;
}

/* Problem: long English member titles (for example "Director of the Academic Committee")
   do not fit on one line in the 38px blue label, so the second line goes out of the label.
   Use 2 lines of 19px (same 38px height) and center 1-line titles vertically.
   Page: syscy.htm and the syscy/ lists. Selector: .people-desc. */
.people-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 19px;
  font-size: 14px;
}

/* Problem: the English "You are here:" breadcrumb is longer than the Chinese one. At 390 px
   it wraps to a second line, which goes out of the fixed-height bar and covers the first
   list item. Keep it on 1 line and end with "..." when it does not fit.
   Page: all list and article pages. Selector: .bah .menu-outer. */
.bah .menu-outer {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Problem: the English article info line ("Published: ... Posted by: ... Views:") is longer
   than the Chinese line. At 390 px it takes 3 lines in a 30px-high box, so it covers the
   first lines of the article text. Let the box grow with its text (1 line stays 30px).
   Page: all article pages (info/). Selector: .sjkk. */
.sjkk {
  height: auto;
  min-height: 30px;
}