/* Local additions for my_webpage only.
   style_1.css is kept byte-identical to the original codebase; this file
   holds the few layout rules added on top of it. Typography, colors and
   sizes are all inherited unchanged from style_1.css. */

/* Lay each entry out as icon + text column, vertically centred on each other.
   This also keeps every line of the text in one column instead of letting long
   titles/author lists wrap back under the icon. */
.entry {
  display: flex;
  align-items: center;
  padding-bottom: 2.2em;
}

/* Give every icon the same 175 x --icon-h box, so entries share one vertical
   rhythm no matter what shape the source image is. `cover` fills the box
   completely (identical drawn size for every figure) by scaling to the larger
   dimension and centre-cropping the overflow. Change --icon-h to resize them
   all at once; tune object-position per figure below to shift what survives
   the crop. */
.entry .projecticon {
  float: none;
  flex: none;
  height: var(--icon-h, 110px);
  object-fit: cover;
  object-position: center;
}

/* Per-figure crop anchors. The survey icon is a paper's first page, so anchor
   it to the top to keep the title block rather than centre-cropping into the
   body text. Add one line like this for any figure whose crop needs shifting;
   values are the usual `left/center/right top/center/bottom` or percentages. */
.entry .projecticon[src$="survey.png"] {
  object-position: top;
}

/* Anchor the 3DGS clip to its right edge so the colour-editing panel stays in
   frame instead of being trimmed by the centre crop. */
.entry .projecticon[src$="color3dgs_web.mp4"] {
  object-position: right;
}

.entry .entrytext {
  flex: 1 1 auto;
  min-width: 0;
}

/* Trim the leading/trailing paragraph margins so the gap between entries is
   the same whether the icon or the text is the taller of the two. */
.entry .entrytext > p.small_2:first-child {
  margin-top: 0;
}

.entry .entrytext > p:last-child {
  margin-bottom: 0;
}

/* Flush right edge on the prose paragraphs. */
p.justify {
  text-align: justify;
}

/* Job-market note. */
p.jobmarket {
  color: #E2645A;
}

p.jobmarket a:link,
p.jobmarket a:visited {
  color: #E2645A;
  text-decoration: underline;
}

p.jobmarket a:hover {
  background: #E2645A;
  color: #FFFFFF;
}