/**
* View "All content"
*/
.view-all-content .view-content {
  margin-top: 6rem;
}

.view-all-content .views-row {
  margin: 4rem;
}

.view-all-content .view-filters {
  margin-top: 1rem;
}

.view-all-content fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.view-all-content .form-radios {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.view-all-content .form-type-radio {
  display: flex;
  margin: 0;
}

.view-all-content .form-type-radio input {
  display: none;
}

.view-all-content .form-type-radio label {
  color: var(--text-color);
  border: 1px solid var(--text-color);
  border-radius: .25rem;
  padding: .25rem .5rem;
}

.view-all-content .form-type-radio input:checked~label {
  background: var(--text-color);
  color: var(--background-color);
}

.view-all-content .form-type-radio label:hover {
  cursor: pointer;
  background: var(--main-color-faded);
}

/**
* Article
*/
.field--name-field-tags .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.field--name-field-tags .field__item,
.field--name-field-date,
.field--name-field-source {
  font-size: 0.75rem;
}

.field--name-field-tags .field__item {
  padding: 0 0.5rem;
  background: var(--text-color);
  color: var(--background-color);
}

.field--name-field-tags .field__item:last-child {
  margin-right: 0;
}

/**
* Teaser mode
*/
.view-all-content .views-row {
  margin-top: 4rem;
}

.node--view-mode-teaser {
  position: relative;
}

.node--view-mode-teaser>a {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
}

.node--view-mode-teaser>a:hover,
.field--name-field-related-content .node--view-mode-teaser>a:hover {
  background: var(--main-color-faded);
  width: calc(100% + 4rem);
  height: calc(100% + 2rem);
  margin: -1rem -2rem;
}

.node--view-mode-teaser .node__content {
  display: grid;
  grid-row-gap: 0.75rem;
  grid-column-gap: 1rem;
  grid-template-areas:
    "tags tags"
    "title title"
    "images text"
    "images date"
    "images source";
  grid-template-columns: 1fr 2fr;
}

.views-row:nth-child(2n) .node--view-mode-teaser .node__content {
  grid-template-areas:
    "tags tags"
    "title title"
    "text images"
    "date images"
    "source images";
  grid-template-columns: 2fr 1fr;
}

.node--view-mode-teaser .field--name-field-tags {
  grid-area: tags;
}

.views-row:nth-child(2n) .node--view-mode-teaser .field--name-field-tags {
  justify-self: right;
}

.node--view-mode-teaser h2 {
  grid-area: title;
  margin: 0;
}

.views-row:nth-child(2n) .node--view-mode-teaser h2,
.views-row:nth-child(2n) .node--view-mode-teaser .field--name-body,
.views-row:nth-child(2n) .node--view-mode-teaser .field--name-field-date {
  text-align: right;
}

.node--view-mode-teaser .field--name-field-image {
  grid-area: images;
}

.node--view-mode-teaser .field--name-field-image .field__item {
  display: none;
  border: 1px solid var(--text-color);
  width: fit-content;
  height: fit-content;
}

.node--view-mode-teaser .field--name-field-image .field__item:nth-child(1) {
  display: flex;
  grid-row: 1 / 3;
}

.node--view-mode-teaser img {
  box-shadow: none;
  background-color: white;
}

.node--view-mode-teaser .field--name-field-date {
  grid-area: date;
  height: fit-content;
  align-self: end;
  padding: 0 0.5rem;
  background: var(--text-color);
  color: var(--background-color);
}

.node--view-mode-teaser .field--name-field-source {
  grid-area: source;
  white-space: nowrap;
  padding: 0 0.5rem;
}

.views-row:nth-child(2n) .node--view-mode-teaser .field--name-field-source {
  justify-self: end;
}

@media (min-width: 600px) {
  .view-all-content .views-row {
    width: calc(100% + 6rem);
    margin-left: -6rem;
  }

  .node--view-mode-teaser .node__content {
    grid-column-gap: 2rem;
  }
}

@media (min-width: 800px) {

  .view-all-content::before,
  .view-all-content::after {
    display: block;
    content: "";
    position: fixed;
    height: 100vh;
    width: 2rem;
    top: 0;
    z-index: 1;
  }

  .view-all-content::before {
    left: 0;
    background: linear-gradient(90deg, var(--background-color) 10%, transparent);
  }

  .view-all-content::after {
    right: 0;
    background: linear-gradient(-90deg, var(--background-color) 10%, transparent);
  }

  .view-all-content .views-row {
    width: 100%;
    margin-left: 0;
  }

  .node--view-mode-teaser>a:hover {
    background: var(--main-color-faded);
    width: calc(100% + 15rem);
    height: calc(100% + 2rem);
    margin: -1rem -13rem;
  }

  .views-row:nth-child(2n) .node--view-mode-teaser>a:hover {
    margin: -1rem -2rem;
  }

  .node--view-mode-teaser .node__content {
    display: grid;
    grid-row-gap: 1.5rem;
    grid-column-gap: 2rem;
    grid-template-areas:
      "tags tags ."
      "title title date"
      "images text date"
      "images source .";
    grid-template-columns: 15rem 1fr 1.5rem;
    grid-template-rows: min-content min-content min-content 1fr;
  }

  .views-row:nth-child(2n) .node--view-mode-teaser .node__content {
    grid-template-areas:
      ". tags tags"
      "date title title"
      "date text images"
      ". source images";
    grid-template-columns: 1.5rem 1fr 15rem;
  }

  .node--view-mode-teaser .field--name-field-image .field__items {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 10rem 15rem;
    margin: 0 0 0 -11rem;
    justify-items: end;
    grid-template-rows: auto 1fr;
  }

  .views-row:nth-child(2n) .node--view-mode-teaser .field--name-field-image .field__items {
    grid-template-columns: 15rem 10rem;
    margin: 0 -15rem 0 0;
    justify-items: start;
  }

  .node--view-mode-teaser .field--name-field-image .field__item {
    display: flex;
  }

  .field--name-field-related-content .field--name-field-image .field__item {
    display: none;
  }

  .views-row:nth-child(2n+1) .node--view-mode-teaser .field__item:nth-child(1) {
    grid-column: 2;
  }

  .node--view-mode-teaser .field--name-body {
    grid-area: text;
  }

  .views-row:nth-child(2n) .node--view-mode-teaser h2,
  .views-row:nth-child(2n) .node--view-mode-teaser .field--name-body {
    text-align: right;
  }

  .node--view-mode-teaser .field--name-field-date {
    grid-area: date;
    writing-mode: vertical-rl;
    text-align: right;
    background-color: var(--text-color);
    height: 100%;
    margin: 0 auto;
    padding: 0 0 0.25rem 0;
    font-size: 0.75rem;
    color: var(--background-color);
  }

  .node--view-mode-teaser .field--name-field-source {
    padding: 0;
  }
}

/**
* Full mode
*/
.banner-tags-date {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.25rem;
}

.source-date {
  display: flex;
  gap: 0.25rem;
  border: 1px solid var(--text-color);
  white-space: nowrap;
  padding: 0 0.5rem;
}

.source-date .field--name-field-source {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.source-date .field--name-field-source::after {
  content: "";
  display: block;
  height: 0.125rem;
  width: 0.125rem;
  background: var(--text-color);
}

.source-date .field--name-field-date {
  background: none;
  color: var(--text-color);
  width: fit-content;
  white-space: nowrap;
}

.node--view-mode-full p>img {
  box-shadow: var(--main-color-faded) 0 0.125rem .5rem 0.125rem;
}

.field--name-body p:last-child {
  margin-bottom: 0;
}

.field--name-field-media {
  margin: 4rem 0;
}

.field--name-field-related-content {
  margin-top: 4rem;
}

.field--name-field-related-content .field__label {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.field--name-field-related-content>.field__items {
  border: 1px solid;
  padding: 2rem;
}

.field--name-field-related-content>.field__items>.field__item {
  margin-bottom: 4rem;
}

.field--name-field-related-content>.field__items>.field__item:last-child {
  margin-bottom: 0;
}

.field--name-field-related-content .field--name-field-image .field__items {
  display: flex;
  margin: 0;
}

/**
* Teaser mode for Research
*/
/* .node--type-research.node--view-mode-teaser .node__content {
 grid-template-areas: "image body" "image tags";
 grid-template-columns: 9rem 1fr;
} */

/**
* Reseach
*/
.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.three-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

/**
* Block: Media block
*/
.block-block-content-media-block .field--name-field-media {
  margin-top: 0;
}

.block-block-content-media-block .field--name-body {
  margin: 0;
}

.block-block-content-media-block .field__label {
  display: none;
}

/**
* About: intro
*/
.about-intro {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(30ch, 1fr);
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
}

.about-intro p {
  margin: 0;
}

.about-intro>img {
  grid-row: 1 / span 2;
}

.social-media {
  display: flex;
}

.social-media img {
  height: 2rem;
  margin: 0.5rem 1rem 0.5rem 0;
  transition: 0.2s ease-in-out;
  width: auto;
  box-shadow: none;
}

.social-media a:hover {
  background: none;
}

.social-media a:hover img,
.play>img:hover {
  height: 3rem;
  margin: 0 1rem 0 0;
  cursor: pointer;
}

.play {
  position: relative;
}

.play>img {
  display: block;
  height: 2rem;
  width: auto;
  color: transparent;
  border: 0;
  padding: 0;
  margin: 0.5rem 0;
}

.tooltip {
  visibility: hidden;
  background: var(--text-color);
  color: var(--background-color);
  padding: .25rem .5rem;
  width: 12rem;
  display: block;
  text-align: center;
  border-radius: .25rem;
  position: absolute;
  z-index: 1;
  left: -5rem;
  top: calc(100% + 0.75rem);
  font-size: 0.75rem;
  line-height: 1.25;
}

.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 100%;
  border: 0.5rem solid;
  border-color: transparent transparent var(--text-color) transparent;
  margin-left: -6rem;
}

.play:hover .tooltip {
  visibility: visible;
}

.social-media .media--type-audio {
  display: none;
}

/* Scale embedded videos automatically: https://css-tricks.com/fluid-width-video/ */
.field--name-field-media-oembed-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.field--name-field-media-oembed-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
* About: research interests
*/
.images-research-interest {
  display: grid;
  grid-template-columns: 5fr 1fr 2fr 4fr 1fr 4fr 1fr 4fr 4fr 2fr;
  grid-template-rows: 2fr 4fr 4fr 1fr 3fr 3fr 4fr 4fr 2fr;
  max-height: 30rem;
  margin: 2rem 0 4rem;
}

.images-research-interest img {
  background: white;
  box-shadow: var(--main-color-faded) 0 0.125rem .5rem 0.125rem;
}

.bdg {
  grid-column: 1 / span 3;
  grid-row: 3 / span 5;
}

.web {
  grid-column: 2 / span 4;
  grid-row: 6 / span 3;
  z-index: 1;
}

.diagram-dialogue {
  grid-column: 3 / span 4;
  grid-row: 1 / span 4;
  z-index: 3;
  border: 5px solid white;
}

.table {
  grid-column: 5 / span 4;
  grid-row: 4 / span 4;
  z-index: 2;
}

.transcripts {
  grid-column: 8 / span 2;
  grid-row: 2 / span 4;
}

.wires {
  grid-column: 7 / span 4;
  grid-row: 7 / span 3;
  z-index: 3;
  border: 10px solid white;
}

/**
* Outreach
*/

.outreach-part {
  margin: 4rem 0;
}

.outreach-part .button {
  margin: 0;
}

.outreach-presentations .links {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto auto auto 1fr;
  gap: .5rem 0;
}

.outreach-presentations .links a {
  grid-column: 1;
  height: fit-content;
  width: fit-content;
  padding: 0.25rem 0.5rem;
}

.outreach-presentations .links a:nth-of-type(4) {
  align-self: end;
  text-align: left;
  margin: 2rem 0 0;
  text-wrap: nowrap;
}

.outreach-presentations .links img {
  grid-row: 1 / span 4;
  grid-column: 2;
  align-self: end;
  justify-self: end;
}

.outreach-press .links {
  grid-template-rows: 1fr;
  display: grid;
  gap: 0.5rem 0;
}

.outreach-press .links {
  grid-template-rows: 1fr;
  display: grid;
  gap: 0.5rem 0;
}

@media (min-width: 400px) {
  .outreach-header {
    margin-bottom: 3rem;
  }

  .outreach-presentations .links {
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
  }

  .outreach-presentations .links a {
    text-align: right;
  }

  .outreach-presentations .links a:nth-of-type(1) {
    transform: rotate(10deg);
  }

  .outreach-presentations .links a:nth-of-type(2) {
    transform: rotate(3deg) translateX(-1rem);
  }

  .outreach-presentations .links a:nth-of-type(3) {
    transform: rotate(-4deg) translateX(-0.5rem);
  }

  .outreach-presentations img {
    max-width: 100%;
  }
}

/**
* Presentations
*/
.field--name-field-event p {
  margin-bottom: 0;
}

.field--name-field-event p::before {
  content: "📍";
}

.field--name-field-slides {
  margin: 2rem 0 4rem;
}