/* TOPICS LIST */
.view-display-id-block_2.view-topics .topics-list ol::before { display: none; }
.view-display-id-block_2.view-topics .topics-list ol { padding: 0; }
.view-display-id-block_2.view-topics .topics-list ol li.views-row::before { display: none; }

.view-display-id-block_2.view-topics .topics-list ol li.views-row { margin: 1rem 0; }

.view-display-id-block_2.view-topics .topics-list ol li.views-row a {
  padding: 1.5rem 3rem;
  color: var(--text_color);
  background-color: var(--light_gray);
  font-size: 20px;
  display: block;
  width: 100%;
  font-weight: 500;
  background-image: url(../../assets/icons/icon_arrow_down.svg);
  background-position: calc(100% - 1rem) center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}
.section-hecap .view-display-id-block_2.view-topics .topics-list ol li.views-row a:hover { color: var(--hecap); }
.section-cmsp .view-display-id-block_2.view-topics .topics-list ol li.views-row a:hover { color: var(--cmsp); }
.section-math .view-display-id-block_2.view-topics .topics-list ol li.views-row a:hover { color: var(--math); }
.section-esp .view-display-id-block_2.view-topics .topics-list ol li.views-row a:hover { color: var(--esp); }
.section-sti .view-display-id-block_2.view-topics .topics-list ol li.views-row a:hover { color: var(--sti); }
.section-qls .view-display-id-block_2.view-topics .topics-list ol li.views-row a:hover { color: var(--qls); }


.view-display-id-block_1.view-topics.view-display-id-block_1 { 
  margin-top: 3rem;
  margin-bottom: 0;
}
.view-display-id-block_2.view-projects { margin-top: 5rem; }

.view-display-id-block_2.view-projects .topic-grouping {
  background-color: var(--light_gray);
  position: relative;
  padding: 0 0 3rem 0;
  margin: 0 0 4rem 0;
  max-height: 500px;
  min-height: 430px;
  overflow: hidden;
}
.view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members,
.view-display-id-block_2.view-projects .topic-grouping .view-projects.view-display-id-block_1 { display: none; }

.view-display-id-block_2.view-projects .external-wrapper { 
  scroll-margin-top: 120px; 
  position: relative;
}
.view-display-id-block_2.view-projects .external-wrapper::before {
  content: '';
  width: 100vw;
  height: calc(100% + 2rem);
  position: absolute;
  top: -2rem;
  left: -1rem;
  background-color: var(--light_gray);
}


/* ------------ ------------ topic accordion buttons ------------ ------------ */
.view-display-id-block_2.view-projects .topic-grouping .topic-accordion {
  width: 100%;
  height: 3rem;
  background-image: url(../../assets/icons/icon_accordion_down.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-color: var(--light_gray);
  border: none;
  border-radius: 0;
  font-size: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
.view-display-id-block_2.view-projects .topic-grouping .topic-accordion::before {
  content: '';
  width: 100%;
  height: 4rem;
  background: linear-gradient(to top, var(--light_gray) 0%, transparent 100%);
  position: absolute;
  bottom: 3rem;
  left: 0;
}


/* ------------ ------------ OPEN TOPIC ACCORDION ------------ ------------ */
.view-display-id-block_2.view-projects .topic-grouping.open {
  max-height: unset;
  overflow: visible;
}

.view-display-id-block_2.view-projects .topic-grouping.open .views-field-field-ref-members,
.view-display-id-block_2.view-projects .topic-grouping.open .view-projects.view-display-id-block_1 { 
  display: block; 
  position: relative;
}

.view-display-id-block_2.view-projects .topic-grouping.open .topic-accordion {
  background-image: url(../../assets/icons/icon_accordion_down.svg);
  transform: scaleY(-1);
}

.view-display-id-block_2.view-projects .topic-grouping.open .topic-accordion::before { display: none; }

.view-display-id-block_2.view-projects .topic-grouping h2 {
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  color: var(--main_blue);
}
.view-display-id-block_2.view-projects .topic-grouping .topic-info .field--name-body { grid-area: tt; }
.view-display-id-block_2.view-projects .topic-grouping .topic-info p {
  font-size: 16px;
  line-height: 1.5em;
  margin-bottom: 0;
}

.view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-image { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-image .field-content {
  width: 100%;
  height: 100%;
  text-align: right;
}
.view-display-id-block_2.view-projects .topic-grouping > .topic-info .views-field-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  border-radius: 50%;
}

.view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-ref-members {
  margin: 2rem 0; 
}
.view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-ref-members .field-content {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 1rem;
}
.view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-ref-members article .node__content {
  margin: 0;
  max-width: unset;
}

.view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--main_blue); }
.section-hecap .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--hecap); }
.section-cmsp .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--cmsp); }
.section-math .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--math); }
.section-sti .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--sti); }
.section-qls .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--qls); }
.section-esp .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members article .field--name-field-job-title { color: var(--esp); }


.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.last h3  { padding: 1rem 0 0 0; }

/* categoriy wrapper */
.view-display-id-block_2.view-projects .topic-grouping .view-projects.view-display-id-block_1 .view-content {
  display: flex;
  flex-direction: column;
}
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.with-content { order: 1; }
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.last { order: 99; }

.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.with-content {
  border-bottom: 1px solid var(--border_gray);
  position: relative;
}
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.with-content .collapse-projects {
  max-height: 0;
  transition: all 800ms ease;
  overflow: hidden;
}
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.with-content.open .collapse-projects {
  max-height: 10000px;
  transition: all 800ms ease;
}

/* category title */
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.with-content h3 {
  font-size: 24px;
  font-weight: 500;
  padding: 1rem 5rem 0 0;
  margin: 1rem 0 0 0;
  min-height: 3rem;
  color: var(--text_color);
}

.view-display-id-block_2.view-projects .topic-grouping .category-wrapper .subtitle {
  font-size: 16px;
  font-weight: 300;
  min-height: 3rem;
  padding: 0 0 1rem 0;
}

/* category accordion button */
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper .row-collapse {
  position: absolute;
  right: 1rem;
  top: 1.25rem;
  /* transform: translateY(-50%); */
  font-size: 0;
  width: 2rem;
  height: 2rem;
  background-image: url(../../assets/icons/icon_accordion_down.svg);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--border_gray);
}
.view-display-id-block_2.view-projects .topic-grouping .open .row-collapse {
  background-image: url(../../assets/icons/icon_accordion_up.svg);
}

.view-display-id-block_2.view-projects .topic-grouping .category-wrapper.with-content > .row-collapse { top: 1rem; }


/* single project row */
.view-display-id-block_2.view-projects .topic-grouping .views-row {
  padding: 1.5rem 1rem;
  margin: 1rem 0;
  background-color: #FFF;
  pointer-events: none;
}
.view-display-id-block_2.view-projects .topic-grouping .views-row:first-child { margin: 0 0 1rem 0; }

/* .view-display-id-block_2.view-projects .topic-grouping .category-wrapper .views-row:nth-child(4) { margin-top: 0; } */

.view-display-id-block_2.view-projects .topic-grouping .row-accordion { position: relative; }

.view-display-id-block_2.view-projects .topic-grouping .views-row.no-category { margin: 1rem 0; }

.view-display-id-block_2.view-projects .topic-grouping .views-row.no-category .views-field-title { 
  padding-right: 2.5rem; 
  width: 100%;
  display: block;
}

.view-display-id-block_2.view-projects .topic-grouping .views-row .views-field-title a {
  font-size: 20px;
  /* display: block; */
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--text_color);
  text-decoration: none;
}

.view-display-id-block_2.view-projects .topic-grouping .row-accordion .views-row.no-category .views-field-field-ref-collaborations,
.view-display-id-block_2.view-projects .topic-grouping .row-accordion .views-row.no-category .views-field-body {
  max-height: 0;
  overflow: hidden;
}
.view-display-id-block_2.view-projects .topic-grouping .row-accordion.open .views-row.no-category .views-field-field-ref-collaborations,
.view-display-id-block_2.view-projects .topic-grouping .row-accordion.open .views-row.no-category .views-field-body {
  max-height: unset;
  overflow: visible;
}

.view-display-id-block_2.view-projects .topic-grouping.views-row .views-field-body p {
  font-size: 16px;
  line-height: 1.5em;
}

.view-display-id-block_2.view-projects .topic-grouping.views-row .topic-info > .views-field-body {
  min-height: 3rem;
}


/* collaborations logos */
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper .views-row .view-collaboration {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
}
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper .views-row .view-collaboration article {
  background-color: #FFF;
  padding: 0;
  pointer-events: none;
}
.view-display-id-block_2.view-projects .topic-grouping .category-wrapper .views-row .view-collaboration article * {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
}

@media (min-width: 768px) {
  .view-display-id-block_2.view-projects .topic-grouping { padding: 2rem; }
  .view-display-id-block_2.view-projects .external-wrapper::before { display: none; }
  .view-display-id-block_2.view-topics .topics-list ol li.views-row a { 
    padding: 1.5rem 7rem; 
    background-position: calc(100% - 4rem) center;
  }
}

@media (min-width: 1024px) {
  .view-display-id-block_2.view-projects .topic-grouping .topic-accordion { display: none; }

  .view-display-id-block_2.view-projects .topic-grouping {
    background-color: var(--light_gray);
    position: relative;
    padding: 2rem;
    max-height: unset;
    overflow: visible;
  }
  .view-display-id-block_2.view-projects .topic-grouping .views-field-field-ref-members,
  .view-display-id-block_2.view-projects .topic-grouping .view-projects.view-display-id-block_1 { display: block; }

  .view-display-id-block_2.view-projects .topic-grouping h4 { margin: 2.5rem 0 0 0; }

  .view-display-id-block_2.view-projects .topic-grouping .views-row { padding: 2rem 4rem 2rem 2rem; }
  
  .view-display-id-block_2.view-projects .topic-grouping .topic-info {
    display: grid;
    grid-template-areas: 
      'title img'
      'tt img'
      'members members'
      'projects projects'
      'nocat nocat';
    grid-template-columns: 4fr 1fr;
    gap: .5rem 2rem;
    padding: 0;
  }

  .view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-image { grid-area: img; }
  .view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-title { grid-area: title; }
  .view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-ref-members { grid-area: members; }
  .view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-body { grid-area: tt; }
  .view-display-id-block_2.view-projects .topic-grouping .topic-info .views-element-container { grid-area: projects; }
  .view-display-id-block_2.view-projects .topic-grouping .topic-info .category-wrapper.last { grid-area: nocat; }

  .view-display-id-block_2.view-projects .topic-grouping .topic-info > .views-field-field-image img {
    width: 180px;
    height: 180px;
  }

  .view-display-id-block_2.view-projects .topic-grouping .topic-info p { margin-bottom: 1rem; }

  .view-display-id-block_2.view-projects .topic-grouping .topic-info h2 { 
    font-size: 40px;
    margin-bottom: 1rem;
    text-align: left;
  }

  .view-display-id-block_2.view-projects .topic-grouping .views-row .views-field-title a {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 2rem;
  }

  .view-display-id-block_2.view-projects .topic-grouping .views-row.no-category { margin: 2rem 0 1rem 0; }
  .view-display-id-block_2.view-projects .topic-grouping .category-wrapper .row-collapse { 
    top: 1.75rem; 
    right: 2rem;
  }

  .view-display-id-block_2.view-projects .topic-grouping .views-row.no-category .views-field-title { padding-right: 0; }

  .view-display-id-block_2.view-projects .topic-grouping .row-accordion.open .views-field-title {  margin-bottom: 2rem; }
}


@media (min-width: 1200px) {
  .view-display-id-block_2.view-projects .topic-grouping { padding: 2rem 4rem; }
}

@media (min-width: 1400px) {
  .view-display-id-block_2.view-projects .topic-grouping .topic-info .views-field-field-ref-members .field-content {
    grid-template-columns: 1fr 1fr;
  }
}


@media (min-width: 1700px) {
  .view-display-id-block_2.view-projects .topic-grouping .topic-info {
    display: grid;
    grid-template-areas: 
      'title img'
      'tt img'
      'members members'
      'projects empty'
      'nocat empty';
    grid-template-columns: 4fr 1fr;
    gap: .5rem 2rem;
    padding: 0;
  }
}