/*******************************************************************************
 * Additions on top of the theme stylesheet.
 ******************************************************************************/

/* Publication previews that cross-fade to a second image on hover. The overlay
   ignores pointer events so clicks still reach the zoomable base image. */
.preview-swap {
  position: relative;
}

.preview-swap .preview-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.preview-swap:hover .preview-hover {
  opacity: 1;
}

/* The news table keeps its own left column width, so stop the date cells from
   wrapping mid-label. */
.news th {
  white-space: nowrap;
}

/* The source portrait is 2:3, so at the theme's default 30% column it renders
   taller than the bio beside it. Narrow the column instead, which scales the
   whole photo down without cropping any of it. */
@media (min-width: 576px) {
  .profile {
    width: 22%;
  }
}

/* Below that breakpoint the theme gives the column the full width, which makes
   a 2:3 photo fill most of the first screen. Hold the image back instead. */
@media (max-width: 575.98px) {
  .profile img {
    max-width: 60%;
  }
}

/* The contact lines share the narrowed column, so ease the monospace size to
   keep them off a third line. */
.profile .more-info {
  font-size: 0.85rem;
}

/* Publication titles are links here rather than plain text, so keep them the
   body colour and let them pick up the accent on hover. */
.publications ol.bibliography li .title a {
  color: var(--global-text-color);
}

.publications ol.bibliography li .title a:hover {
  color: var(--global-theme-color);
  text-decoration: none;
}