/* ==================================================================
   styles.css — small visual tweaks on top of the theme
   ==================================================================
   You rarely need to touch this file. Colours and fonts live in
   _brand.yml. This file only adjusts a few details.
   ================================================================== */


/* ---- People page: one profile per person ------------------------ */

/* Space between one person and the next.
   (".grid.person" means: a grid block that is marked "person") */
.grid.person {
  margin-bottom: 2.5rem;
}

/* The name sits level with the top of the photo */
.person h3 {
  margin-top: 0;
}

/* Every photo is cropped to the same rounded square, whatever the
   shape of the original photo. On phones it is kept to 220px wide. */
.person-photo img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;   /* square                          */
  object-fit: cover;     /* crop to fit, never stretch      */
  border-radius: 12px;   /* rounded corners                 */
}

/* No extra space under the photo (matters on phones, where the
   name sits just below it) */
.person-photo p {
  margin: 0;
}


/* ---- Home page: full-screen banner with the eyecatch picture ------ */

/* The banner (title, subtitle and welcome message) fills the screen
   below the menu bar. The text sits on the left, on the lab's blue;
   on the right, the blue fades into the eyecatch picture. On phones
   the picture sits at the bottom and the blue fades into it from the
   top. This only applies to the Home page: index.qmd has the line
   "body-classes: home-hero". */
.home-hero .quarto-title-banner {
  position: relative;
  isolation: isolate;                /* keeps the picture behind the text */
  align-content: center;             /* text in the middle, top to bottom */
  /* Screen height minus the space above the banner (the menu bar).
     The menu bar's height differs a little between screens, so a
     small script in index.qmd measures it and fills in --banner-top. */
  min-height: calc(100svh - var(--banner-top, 58px));
  margin-bottom: 0;
  overflow: hidden;
}

/* The picture: the right part of the banner, as tall as the banner.
   Its left part fades out into the blue (the "mask"). The fade
   starts and ends gently (an S-shaped curve rather than a straight
   ramp), so there is no visible line where it begins or ends.
     --fade-length: how much of the picture the fade takes up
     --fade-direction: which way it fades (changed for phones below) */
.home-hero .quarto-title-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  background: white url(images/home/eyecatch.jpg) right center / cover no-repeat;
  --fade-direction: to right;
  --fade-length: 60%;
  --fade: linear-gradient(var(--fade-direction),
    rgb(0 0 0 / 0)     0%,
    rgb(0 0 0 / 0.024) calc(var(--fade-length) * 0.1),
    rgb(0 0 0 / 0.095) calc(var(--fade-length) * 0.2),
    rgb(0 0 0 / 0.206) calc(var(--fade-length) * 0.3),
    rgb(0 0 0 / 0.345) calc(var(--fade-length) * 0.4),
    rgb(0 0 0 / 0.5)   calc(var(--fade-length) * 0.5),
    rgb(0 0 0 / 0.655) calc(var(--fade-length) * 0.6),
    rgb(0 0 0 / 0.794) calc(var(--fade-length) * 0.7),
    rgb(0 0 0 / 0.905) calc(var(--fade-length) * 0.8),
    rgb(0 0 0 / 0.976) calc(var(--fade-length) * 0.9),
    rgb(0 0 0 / 1)     var(--fade-length));
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade);
}

/* The text: on large screens it starts further left and stops before
   the picture */
.home-hero .quarto-title {
  max-width: 31rem;
}
@media (min-width: 992px) {
  .home-hero .quarto-title-banner .quarto-title {
    grid-column: page-start / body-end;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .home-hero .quarto-title-banner .quarto-title {
    max-width: 27rem;      /* small laptops: a little narrower...      */
    padding-left: 1rem;    /* ...and not so close to the edge          */
  }
}
.home-hero .quarto-title h1.title {
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);   /* bigger title */
}
.home-hero .quarto-title .subtitle {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}
.home-hero .quarto-title .description {
  margin-top: 1.75rem;
  font-size: 1.1rem;
  line-height: 1.65;
}
.home-hero .quarto-title .description p {
  margin: 0;
}

/* The arrow at the bottom of the banner (added in index.qmd). It bobs
   gently up and down. With "circle" added to its class in index.qmd,
   it gets a faint ring around it. */
.scroll-hint {
  display: none;               /* hidden until it is moved into the banner */
}
.quarto-title-banner .scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  margin-inline: auto;         /* centred */
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: inherit;              /* same light colour as the title */
  font-size: 1.6rem;
  -webkit-text-stroke: 0.5px currentColor;   /* a slightly bolder arrow */
  text-decoration: none;
  opacity: 0.8;
  animation: scroll-hint-bob 2s ease-in-out infinite;
}
.quarto-title-banner .scroll-hint:hover {
  opacity: 1;
}
.quarto-title-banner .scroll-hint i {
  position: relative;
  top: 0.1rem;                 /* the arrow looks centred */
}
.quarto-title-banner .scroll-hint.circle {
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: 1.25rem;
}
/* Phones and upright tablets: the arrow sits over the picture, so it
   is drawn in the banner's blue instead */
@media (max-width: 991.98px) {
  .quarto-title-banner .scroll-hint {
    color: var(--bs-primary);
  }
}
@keyframes scroll-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .quarto-title-banner .scroll-hint { animation: none; }
}

/* Phones and tablets held upright: text at the top, picture at the
   bottom */
@media (max-width: 991.98px) {
  .home-hero .quarto-title-banner {
    align-content: start;
    padding-top: 2.5rem;
    padding-bottom: 82vw;            /* room for the picture below the text */
  }
  .home-hero .quarto-title-banner::after {
    top: auto;
    left: 0;
    width: 100%;
    aspect-ratio: 2312 / 2440;       /* the picture's own shape */
    background-position: center bottom;
    --fade-direction: to bottom;
    --fade-length: 50%;
  }
  .home-hero .quarto-title .description {
    font-size: 1rem;
  }
}


/* ---- Home page: the three research picture cards ----------------- */

/* The card: the picture on top, the text panel underneath */
.theme-card {
  display: flex;
  flex-direction: column;                     /* stack picture and text   */
  position: relative;                         /* lets the link cover it   */
  border: 1px solid var(--bs-border-color);   /* thin grey outline        */
  border-radius: 10px;                        /* rounded corners          */
  overflow: hidden;                           /* trim to the corners      */
  background: white;
  transition: box-shadow 0.15s;               /* smooth hover shadow      */
}

/* The picture frame. The WHOLE picture is always shown (never
   cropped); any spare space is white, so it blends into figures
   that have a white background. */
.theme-card > p {
  margin: 0;
  height: 220px;          /* frame height: bigger number = bigger figures */
  padding: 0.75rem;       /* white margin around the figure               */
}
.theme-card > p > img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* shrink to fit, keep the whole figure         */
}

/* The text panel, in the lab's main colour. "flex-grow" makes the
   panels in a row stretch to the same height. */
.theme-text {
  flex-grow: 1;
  padding: 1rem 1.25rem;
  color: white;
  background: var(--bs-primary);
}

.theme-text h3 {
  color: white;
  font-size: 1.25rem;
  margin: 0;
}

/* Each heading is a link to its section on the Research page. The
   link is stretched over the whole card (picture included) by an
   invisible layer, so clicking anywhere on the card follows it. */
.theme-text h3 a {
  color: white;
  font-weight: inherit;   /* stay bold like the heading */
  text-decoration: none;
}
.theme-text h3 a::after {
  content: "";
  position: absolute;
  inset: 0;               /* cover the card from edge to edge */
}

/* When the mouse is over a card: a soft shadow, heading underlined */
.theme-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.theme-card:hover .theme-text h3 a {
  text-decoration: underline;
}

/* Hide the small "#" link Quarto puts next to headings: on a card
   it would only get in the way of the card's own link */
.theme-text .anchorjs-link {
  display: none;
}

/* A little space between the boxes and the "Read more" link */
.grid {
  margin-bottom: 1rem;
}


/* ---- Home page: funder logos -------------------------------------- */

/* Put the logos in a centred row that wraps onto a new line when
   it runs out of space (e.g. 2 per row on phones) */
.funder-logos p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centre the row(s)                    */
  align-items: center;       /* line logos up along their middles    */
  gap: 1.5rem 2.5rem;        /* space between rows / between logos   */
  margin: 1.5rem 0;
}

/* Every logo gets the same invisible box, and shrinks to fit inside
   it without changing shape. So wide and square logos end up a
   similar size. Change these two numbers to make all logos bigger
   or smaller. */
.funder-logos img {
  width: 160px;
  height: 70px;
  object-fit: contain;
}


/* ---- Home page: latest posts (X and Bluesky) ---------------------- */

/* The two boxes: the same height, with a thin grey outline and
   rounded corners like the picture cards. The posts scroll inside.
   Change "height" to make the boxes taller or shorter: the first one
   is for phones, the second for larger screens. */
.timeline {
  display: flex;
  flex-direction: column;
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  background: white;
}
@media (min-width: 768px) {
  .timeline {
    height: 600px;
  }
}
.timeline > p {
  margin: 0;
}
/* The plain link shown while loading, or if X or Bluesky can't be
   reached */
.timeline > p > a,
.bluesky-timeline > p > a {
  display: block;
  padding: 1rem;
}

/* The top of each box: picture, name and a Follow button. On
   Bluesky the posts scroll underneath it. */
.bluesky-timeline {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.timeline-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.bsky-feed {
  flex: 1;
  overflow-y: auto;
}
.timeline-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.timeline-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.timeline-name span,
.bsky-date,
.bsky-note {
  color: #6b7785;
  font-size: 0.85em;
}
.timeline-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-follow {
  margin-left: auto;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--bs-primary);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.timeline-follow:hover {
  color: white;
  opacity: 0.85;
}

/* X: the chosen post(s) scroll under the header. On phones the box
   is as tall as its posts. */
.x-logo {                    /* the X logo, in a black circle */
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  color: white;
}
.x-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.x-more {
  margin: 0.5rem 0 0;
  text-align: center;
}
@media (max-width: 767.98px) {
  .timeline.x-posts {
    height: auto;
  }
}

/* One post */
.bsky-post {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.9rem;
  cursor: pointer;
}
.bsky-post:hover {
  background: #f6f8fa;
}
.bsky-note {
  margin-bottom: 0.4rem;
}
.bsky-post-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.bsky-post-head .timeline-avatar {
  width: 32px;
  height: 32px;
}
.bsky-date {
  margin-left: auto;
  white-space: nowrap;
  text-decoration: none;
}
.bsky-text {
  margin: 0 0 0.5rem;
  white-space: pre-wrap;      /* keep the post's line breaks */
  overflow-wrap: anywhere;    /* break very long links */
}

/* Pictures in a post: one large, or several in a grid of squares */
.bsky-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  overflow: hidden;
}
.bsky-images img {
  display: block;
  width: 100%;
  max-height: 260px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* A single picture is shown whole (never cropped) */
.bsky-images.n1 {
  display: block;
  border-radius: 0;
}
.bsky-images.n1 img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 360px;
  aspect-ratio: auto;
  border-radius: 8px;
}
.bsky-images.n3 img:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
}
/* A play button over a video's preview picture */
.bsky-images.bsky-video {
  display: inline-block;
  position: relative;
}
.bsky-video::after {
  content: "▶";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.8rem 0.5rem 0.95rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: white;
}

/* Link previews and quoted posts: a small box with a grey outline */
.bsky-card,
.bsky-quote {
  display: block;
  margin-bottom: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.bsky-card img {
  display: block;
  width: 100%;
  max-height: 240px;
  aspect-ratio: 1.91 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--bs-border-color);
}
.bsky-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
}
.bsky-card-text span {
  display: -webkit-box;          /* at most two lines of description */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bsky-card-text span,
.bsky-card-text small {
  color: #6b7785;
}
.bsky-card:hover strong,
.bsky-quote:hover strong {
  text-decoration: underline;
}
.bsky-quote {
  padding: 0.5rem 0.75rem;
  white-space: pre-wrap;
}
.bsky-quote strong {
  display: block;
  margin-bottom: 0.2rem;
}


/* ---- Research page: theme figures --------------------------------- */

/* Each figure fills its column (left side on large screens), but is
   never taller than 400px. The whole figure is always shown, and its
   top lines up with the first line of text. Visitors can click it
   to see it full-size. */
.research-figure {
  display: block;
  margin: 0.3rem auto 1rem;
  width: auto;
  max-width: 100%;
  max-height: 400px;   /* bigger number = bigger figures (on phones) */
}


/* ---- Publications page ------------------------------------------ */

/* Space between papers. Make the number bigger for more space. */
.publication-list li {
  margin-bottom: 0.9rem;
}

/* Each paper has three lines: title, authors, journal */

/* Line 1: the title, in bold. It is a link to the paper, with no
   underline until the mouse is over it. ("a" means "link") */
.pub-title,
.pub-title a {
  font-weight: 600;
}
.pub-title a {
  text-decoration: none;
}
.pub-title a:hover {
  text-decoration: underline;
}

/* Line 3: the journal, in a softer grey */
.pub-journal {
  color: #6b7785;
}


/* ---- Contact page: the map ---------------------------------------- */

/* The map fills the width of the page, with a thin grey outline and
   rounded corners like the picture cards on the Home page.
   Change "height" to make the map taller or shorter. */
.map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  margin: 1.5rem 0 1rem;
}


/* ---- All pages: links to a section of a page ---------------------- */

/* When a link opens a page at a particular section (like the picture
   cards on the Home page do), stop just below the menu bar, so the
   section's heading is not hidden behind it. */
html {
  scroll-padding-top: 70px;   /* a little more than the menu bar height */
}

/* Glide to the section smoothly. (This also stops Quarto moving the
   page a second time.) Skipped for visitors whose computer is set to
   reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* ---- All pages: the menu on phones ----------------------------------- */

/* On phones the menu folds into the ☰ button. Inside it, show the
   email, X and Bluesky icons side by side on one row, rather than
   one per row. */
@media (max-width: 991.98px) {
  #navbarCollapse .navbar-nav.ms-auto {
    flex-direction: row;
    gap: 1.25rem;
  }
}