@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --clr-primary-400: #ffffff;
  --clr-secondary-400: #48556a;
  --clr-secondary-500: #19212e;
  --clr-neutral-100: #ffffff;
  --clr-neutral-200: #ffffff;
  --clr-neutral-300: #cfcfcf;
  --clr-blackish: #000000;
  --person-photo-bot-space: 7rem;

  --ff-primary: "Roboto", sans-serif;

  --fw-400: 500;
  --fw-700: 600;

  --fs-300: 0.6875rem;
  --fs-400: 0.8125rem;
  --fs-500: 1.25rem;
  --person_photo_factor: 10vw;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;

  font-family: var(--ff-primary);
  font-weight: var(--fw-400);

  background-color: var(--clr-neutral-200);
}

h1,
h2,
h3 {
  font-weight: var(--fw-700);
}

/* utilities */
.flex {
  display: flex;
  gap: var(--gap, 1rem);
  justify-content: center;

  /*align-items: center; removed to align pics to the names on top*/
}

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}

.bg-primary-400 {
  background: var(--clr-primary-400);
}
.bg-secondary-400 {
  background: var(--clr-secondary-400);
}
.bg-secondary-500 {
  background: var(--clr-secondary-500);
}

.bg-neutral-100 {
  background: var(--clr-neutral-100);
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}
.text-secondary-400 {
  color: var(--clr-secondary-400);
}
.text-blackish {
  color: var(--clr-blackish);
}
.border-primary-400 {
  border: 2px solid #a775f1;
}

.text-white {
  color: white;
  /*font-family: "Lato", sans-serif;*/
  font-family: "Roboto", sans-serif;
}
.text-black {
  color: black;
  /*font-family: "Lato", sans-serif;*/
  font-family: "Roboto", sans-serif;
}
.uppercase {
  text-transform: uppercase;
}
/* components */
.testimonial-grid {
  display: grid;
  gap: 1.5vw;
  grid-auto-columns: 1fr;

  grid-template-areas:
    "one"
    "two"
    "three"
    "four"
    "five"
    "six"
    "seven"
    "eight"
    "nine"
    "ten"
    "eleven"
    "twelve"
    "thirteen"
    "fourteen"
    "fifteen"
    "sixteen"
    "seventeen";

  padding-block: 1rem;
  width: min(90%, 80rem);
  margin-inline: auto;
}

.testimonial {
  font-size: var(--fs-400);

  padding-left: 1rem;

  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem (var(--clr-secondary-400) / 0.25);
}

.testimonial:nth-child(1) {
  grid-area: one;
}
.testimonial:nth-child(2) {
  grid-area: two;
}
.testimonial:nth-child(3) {
  grid-area: three;
}
.testimonial:nth-child(4) {
  grid-area: four;
}
.testimonial:nth-child(5) {
  grid-area: five;
}
.testimonial:nth-child(6) {
  grid-area: six;
}
.testimonial:nth-child(7) {
  grid-area: seven;
}
.testimonial:nth-child(8) {
  grid-area: eight;
}
.testimonial:nth-child(9) {
  grid-area: nine;
}
.testimonial:nth-child(10) {
  grid-area: ten;
}
.testimonial:nth-child(11) {
  grid-area: eleven;
}
.testimonial:nth-child(12) {
  grid-area: twelve;
}
.testimonial:nth-child(13) {
  grid-area: thirteen;
}
.testimonial:nth-child(14) {
  grid-area: fourteen;
}
.testimonial:nth-child(15) {
  grid-area: fifteen;
}
.testimonial:nth-child(16) {
  grid-area: sixteen;
}
.testimonial:nth-child(17) {
  grid-area: seventeen;
}
.testimonial:nth-child(18) {
  grid-area: eighteen;
}
.testimonial:nth-child(19) {
  grid-area: nineteen;
}

@media screen and (min-width: 33em) {
  .testimonial-grid {
    grid-template-areas:
      "one one"
      "two two"
      "three three"
      "four four"
      "five five"
      "six six "
      "seven seven"
      "eight eight"
      "nine nine"
      "ten ten "
      "eleven eleven"
      "twelve twelve "
      "thirteen thirteen"
      "fourteen fourteen"
      "fifteen fifteen"
      "sixteen sixteen "
      "seventeen seventeen";
  }
}

@media screen and (min-width: 38em) {
  .testimonial-grid {
    grid-template-areas:
      "one one"
      "two two"
      "three three"
      "four four"
      "five five"
      "six six "
      "seven seven"
      "eight eight"
      "nine nine"
      "ten ten "
      "eleven eleven"
      "twelve twelve "
      "thirteen thirteen"
      "fourteen fourteen"
      "fifteen fifteen"
      "sixteen sixteen "
      "seventeen seventeen";
  }
}

@media screen and (min-width: 54em) {
  .testimonial-grid {
    grid-template-areas:
      "one one one"
      " two two two "
      "three three three"
      "four four four"
      "five five five"
      "six six six"
      "seven seven seven"
      "eight eight eight"
      "nine nine nine"
      "ten ten ten"
      "eleven eleven eleven"
      "twelve twelve twelve"
      "thirteen thirteen thirteen"
      "fourteen fourteen fourteen"
      "fifteen fifteen fifteen"
      "sixteen sixteen sixteen"
      "seventeen seventeen seventeen";
  }
}

@media screen and (min-width: 75em) {
  .testimonial-grid {
    grid-template-areas:
      "one one one million"
      "two two three three"
      "four four five five"
      "six six seven seven"
      "eight eight nine nine"
      "ten ten eleven eleven"
      "twelve twelve thirteen thirteen"
      "fourteen fourteen fifteen fifteen"
      "sixteen sixteen seventeen seventeen";
  }
}

.testimonial.quote {
  background-image: url("./images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: top right 10%;
}

.testimonial .name {
  font-family: "Roboto Bold", sans-serif;
  font-size: calc(1rem + 0.7vw);
  font-weight: 600;
  line-height: 1;
}

.testimonial .position {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 100;
  opacity: 0.9;
}

.testimonial > p:first-of-type {
  font-size: var(--fs-500);
  line-height: 1.2;
}

.testimonial > p:last-of-type {
  opacity: 0.7;
}

.container-grid {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 2px 2px;
}

.gridPhoto {
  grid-area: 0.5 / 1 / 1 / 1;
  align-self: flex-start;
}

.gridTitle {
  grid-area: 1 / 2 / 2 / 2;
  align-self: center;
  text-align: left;
}

.gridText {
  grid-area: 1 / 2 / 2 / 2;
  text-align: justify;
  text-justify: inter-word;
}

.flex-item {
  min-width: min(25vw, 12rem);
}

.grid-col-span-3 {
  grid-column: span 3;
}
.grid-col-span-3 {
  grid-column: span 2;
}

.person__container {
  background: #ff6adf00;
  aspect-ratio: 1 / 1.4;
  display: grid;
  align-items: end;
  border-radius: 100vw 100vw 100vw 100vw;
  overflow: hidden;
}

.person__circle {
  grid-area: 1 / 1 / 1 / 1;
  position: relative;
  inset: auto 0 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;

  transform: scale(1);
  background: linear-gradient(
    0deg,
    rgb(18, 18, 18) 12%,
    rgba(0, 0, 0, 0.258) 40%,
    rgba(237, 238, 234, 0.638) 50%,
    rgba(237, 238, 234, 0.379) 99%
  );
}
.person__img {
  grid-area: 1 / 1 / 1 / 1;
  position: relative;
  left: -0.5rem;
  bottom: min(3rem, 5vw);
  z-index: 2;
  transform: scale(1.2);
}

.person {
  max-width: 25rem;
  margin-inline: auto;
  position: relative;
}

.redim_pcontainer {
  transform: scale(0.9);
}
.redim_photo_18 {
  transform: scale(1.8);
}
.redim_photo_17 {
  transform: scale(1.7);
}
.redim_photo_16 {
  transform: scale(1.6);
}
.redim_photo_15 {
  transform: scale(1.5);
}
.redim_photo_14 {
  transform: scale(1.4);
}
.redim_photo_12 {
  transform: scale(1.2);
}
.redim_photo_09 {
  transform: scale(0.9);
}

.pull_img_down {
  translate: 0% 15%;
}

.top {
  position: relative;
  top: 5vh;
  padding-top: 50px;
  margin-top: 10vh;
  z-index: 0;
}
.heading-dummy {
  /*this is strictly to push the grid down, because I'm a noob and don't know how to do it in a simpler way*/

  margin: 5px;
  color: rgb(14, 13, 13);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #7a7a7a;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
}

.team-container {
  top: 10vh;
  position: relative;
}

.group-photos {
  position: relative;
  padding: 10px;
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.group-photos h1 {
  padding: 30px;
}
.group-photos .group-photo1 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 60%; /* limit the maximum width */
}

.alumni-container {
  top: 10vh;
  position: relative;
  padding-bottom: 500px;
}
.column-container {
  padding-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;

  text-align: left;
  max-width: max(60%, 40rem);
  margin: 0 auto;
}
.column-container .column {
  padding-left: 50px;
  flex: 1;
  width: max(35%, 20rem);
  max-width: 35%;
}
.highlight {
  /*background: rgb(255, 255, 255);*/
  color: rgb(255, 111, 0);
}
.column p.person:before {
  content: "";
  width: 7px;
  height: 7px;
  border-width: 4px;
  border-style: solid;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: relative;
  left: -25px;
  top: 17px;
  display: flex;
  visibility: visible;
  z-index: 1;
  color: #a2a2a2;
}

@media (max-width: 768px) {
  .column-container {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  .column {
    left: 0;
    width: max(80%, 20rem);
    max-width: 80%;
  }
}

/* ── Collaboration map ──────────────────────────────────────────────── */
.collab-section {
  position: relative;
  max-width: 1280px;
  margin: 4rem auto 0;
  padding: 0 1.5rem 2rem;
}

.collab-header {
  max-width: 62rem;
  margin: 0 auto 1.8rem;
  text-align: center;
}

.collab-sub {
  color: #5d5d5d;
  font-size: 1rem;
  line-height: 1.65;
}

.collab-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(22rem, 0.95fr);
  gap: 1.25rem;
  align-items: start;
}

.collab-stage,
.collab-selection,
.collab-table-wrap {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 1.35rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px);
}

.collab-stage {
  padding: 1rem;
}

.collab-svg {
  display: block;
  width: 100%;
  min-height: 34rem;
}

.collab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: center;
  justify-content: center;
  padding-top: 0.6rem;
  color: #4d4d4d;
  font-size: 0.92rem;
}

.legend-dot {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  margin-right: 0.45rem;
  border: 1px solid rgba(17, 17, 17, 0.7);
  vertical-align: middle;
}

.legend-pi {
  background: #111111;
}

.legend-current {
  background: #666666;
}

.legend-external {
  background: #cfcfcf;
}

.collab-legend-note {
  color: #777777;
}

.collab-side {
  display: grid;
  gap: 1rem;
}

.collab-selection {
  padding: 1rem 1rem 0.95rem;
}

.collab-selection-card h3 {
  margin: 0 0 0.4rem;
  color: #141414;
  font-size: 1.2rem;
}

.collab-selection-card p {
  margin: 0 0 0.55rem;
  color: #4e4e4e;
  line-height: 1.55;
}

.collab-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: #ff8a2a !important;
}

.collab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.collab-clear,
.collab-open-pubs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: rgba(17, 17, 17, 0.04);
  color: #141414;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.collab-clear:hover,
.collab-clear:focus-visible,
.collab-open-pubs:hover,
.collab-open-pubs:focus-visible {
  background: rgba(17, 17, 17, 0.08);
  outline: none;
}

.collab-table-wrap {
  overflow: auto;
  max-height: 42rem;
}

.collab-papers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.collab-papers-table thead th {
  position: sticky;
  top: 0;
  background: rgba(245, 245, 245, 0.96);
  color: #2a2a2a;
  font-weight: 600;
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.collab-papers-table tbody td {
  padding: 0.85rem 0.9rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  color: #333333;
  line-height: 1.45;
}

.collab-papers-table td.year {
  white-space: nowrap;
  color: #ff8a2a;
  font-weight: 600;
}

.collab-empty {
  text-align: center;
  color: #777777;
}

.collab-edge {
  stroke-linecap: round;
}

.collab-ring-guide {
  pointer-events: none;
}

.collab-label {
  font-family: "Roboto", sans-serif;
  font-size: 0.84rem;
  user-select: none;
}

.collab-dot,
.collab-hit {
  pointer-events: all;
}

@media (max-width: 1080px) {
  .collab-shell {
    grid-template-columns: 1fr;
  }

  .collab-table-wrap {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .collab-section {
    padding: 0 0.85rem 1rem;
  }

  .collab-stage,
  .collab-selection,
  .collab-table-wrap {
    border-radius: 1rem;
  }

  .collab-svg {
    min-height: 28rem;
  }

  .collab-papers-table,
  .collab-papers-table thead,
  .collab-papers-table tbody,
  .collab-papers-table tr,
  .collab-papers-table th,
  .collab-papers-table td {
    display: block;
  }

  .collab-papers-table thead {
    display: none;
  }

  .collab-papers-table tbody tr {
    padding: 0.8rem 0.8rem 0.2rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  }

  .collab-papers-table tbody td {
    padding: 0 0 0.6rem;
    border-bottom: 0;
  }
}