/*
 * PEAR & SEED project page
 *
 * Visual language follows the academic project-page style:
 *   - Noto Sans body
 *   - Google Sans publication title/authors
 *   - Bulma blue accent for authors
 *   - Bulma dark rounded buttons
 *   - white background / restrained academic layout
 */


body {
  font-family: 'Noto Sans', sans-serif;
}


/* ------------------------------------------------------------
   PAPER HEADER
   ------------------------------------------------------------ */

.publication-header .hero-body {
  padding-bottom: 2rem;
}


/*
 * Make the header wider than Bulma's default "is-max-desktop".
 * This gives enough horizontal space for 5 authors per row.
 */
.publication-header .container.is-max-desktop {
  max-width: 1400px !important;
}


.publication-title {
  font-family: 'Google Sans', sans-serif;

  /*
   * Keep the title narrower even though the header itself
   * is wider for the author rows.
   */
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}


.publication-venue {
  font-family: 'Google Sans', sans-serif;
  color: #363636;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem !important;
}


.publication-authors {
  font-family: 'Google Sans', sans-serif;
  line-height: 1.9;
}


/*
 * Blue author names.
 */
.publication-authors:not(.affiliations) .author-block {
  color: hsl(204, 86%, 53%);
}


.author-block {
  display: inline-block;
  margin-left: 0.72em;
  margin-right: 0.05em;
}


.author-block:first-child {
  margin-left: 0;
}


.author-block sup {
  color: #4a4a4a;
}


/* ------------------------------------------------------------
   AUTHOR ROWS
   ------------------------------------------------------------ */

/*
 * Each author-row corresponds to one line of five authors.
 */
.author-row {
  display: flex;
  justify-content: center;
  align-items: baseline;

  gap: 1.2rem;

  margin-bottom: 0.2rem;

  white-space: nowrap;
}


/*
 * We use flex gap above, so remove the old individual
 * author margins inside these rows.
 */
.author-row .author-block {
  margin-left: 0;
  margin-right: 0;
}


/* ------------------------------------------------------------
   AFFILIATIONS
   ------------------------------------------------------------ */

.affiliations {
  margin-top: 0.55rem;
  color: #4a4a4a;
  font-size: 1rem !important;
  line-height: 1.7;
}


.affiliations .author-block {
  color: #4a4a4a;
}


.equal-contribution {
  font-size: 0.9em;
  padding: 0.5em 0 0 0;
  color: #4a4a4a;
}


/* ------------------------------------------------------------
   LINKS / BUTTONS
   ------------------------------------------------------------ */

.publication-links {
  margin-top: 0.25rem;
}


.link-block a,
.link-block > span {
  margin-top: 5px;
  margin-bottom: 5px;
}


.link-block {
  display: inline-block;
  margin: 0 0.12rem;
}


/*
 * Bulma itself provides the main button styling:
 *
 *   .button
 *   .is-normal
 *   .is-rounded
 *   .is-dark
 */

.dataset-disabled {
  cursor: default;
  opacity: 0.62;
}


.soon-label {
  margin-left: 0.5em;
  font-size: 0.65em;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ------------------------------------------------------------
   VIDEO
   ------------------------------------------------------------ */

.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}


.teaser {
  font-family: 'Google Sans', sans-serif;
  padding-bottom: 3rem;
}


.local-video {
  width: 100%;
  aspect-ratio: 16 / 9;

  border-radius: 10px;
  overflow: hidden;

  background: #000;
}


.local-video video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #000;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.footer {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}


.footer-text {
  color: #4a4a4a;
  font-size: 0.9rem;
}


/* ------------------------------------------------------------
   MEDIUM-SIZE SCREENS
   ------------------------------------------------------------ */

/*
 * On narrower laptops/tablets, five long author names may no
 * longer fit comfortably. Allow wrapping instead of overflowing.
 */
@media screen and (max-width: 1150px) {

  .author-row {
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.25rem 1rem;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {

  .publication-header .hero-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }


  .publication-title {
    font-size: 1.7rem !important;
    line-height: 1.2;
  }


  .publication-venue {
    font-size: 1.35rem !important;
  }


  .publication-authors {
    font-size: 1rem !important;
    line-height: 1.75;
  }


  /*
   * Do not force 5+5 on a phone.
   * Let authors wrap naturally.
   */
  .author-row {
    flex-wrap: wrap;
    white-space: normal;

    gap: 0.2rem 0.8rem;

    margin-bottom: 0.15rem;
  }


  .author-row .author-block {
    margin-left: 0;
    margin-right: 0;
  }


  .affiliations {
    font-size: 0.88rem !important;
  }


  /*
   * This continues to apply to affiliation blocks.
   */
  .affiliations .author-block {
    margin-left: 0.35em;
  }

}