/* #c4bfc0 */

:root {
  --border-grey: 1px solid #c4bfc0;
  --border-gold: 1px solid #cfb991;
}

/* HOME PAGE *******************************************/

/*******************************************************/

/* STUDENT PAGE AND HOME INTRO *************************/
.testimonials section.st-intro h2 {
  margin: 0 0 15px;
  padding-bottom: 15px;
  text-align: center;
}

.testimonials section:nth-child(2n),
.student section:nth-child(2n) {
  background-color: #eeeeee;
}

.testimonials section,
.student section {
  padding: 30px 0;
}

.st-intro .st-card {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 30px;
}

.testimonials .st-intro .st-card .st-content {
  display: flex;
  flex-flow: column nowrap;
}

.st-intro .st-card .st-portrait {
  margin: 0 auto;
  max-width: 300px;
}

.st-intro .st-card .st-portrait img {
  height: auto;
  max-width: 300px;
}

.st-intro .st-card .st-content {
  width: 100%;
}

.st-intro .st-card .st-content .st-button {
  text-align: center;
  margin-top: 30px;
}

.st-intro .st-card .st-content .st-button a {
  background-color: #cfb991;
  padding: 10px 50px;
  color: black;
}

.st-intro .st-card .st-content .st-button a:hover {
  background-color: #c4bfc0;
  text-decoration: none;
}

.st-intro .st-card .st-content .st-name {
  margin: 0;
  text-align: center;
}

.st-intro .st-card .st-content .st-subtitle {
  font-style: italic;
  text-align: center;
}

.st-intro .st-card .st-content .st-body {
  border-top: var(--border-gold);
  padding-top: 15px;
  width: 100%;
}

@media (min-width: 1200px) {
  .st-intro .st-card .st-portrait {
    margin: 0;
  }

  .st-intro .st-card .st-content {
    width: 70%;
  }

  .st-intro .st-card .st-content .st-name,
  .st-intro .st-card .st-content .st-subtitle,
  .st-intro .st-card .st-content .st-button {
    text-align: left;
  }
}

/* STUDENT PAGE *********************************************/
/* QA */
.qa-item {
  margin-bottom: 30px;
  border: 1px solid #adadad;
  border-radius: 5px;
  padding: 10px;
  background-color: white;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}

.qa-item .qa-question {
  font-weight: bold;
  margin-bottom: 15px;
}

.qa-item .qa-answer {
  flex-wrap: nowrap;
}

.qa-item .qa-question.row,
.qa-item .qa-answer.row {
  flex-flow: row nowrap;
}

.qa-item .qa-label-container {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}

.qa-item .qa-label-container .qa-label {
  padding: 2px 10px 5px;
  border-radius: 5px;
  border: 0.5px solid #adadad;
  width: 35px;
  margin: 0;
  text-align: center;
}

.qa-item .qa-label.qa-q {
  background-color: #cfb991;
  font-weight: normal;
}

.qa-item .qa-label.qa-a {
  background-color: white;
}

.qa-item .qa-question .qa-question-content,
.qa-item .qa-answer .qa-answer-content {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.student .st-photos .photos-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto;
  gap: 30px;
}

.student .st-photos .photos-container img {
  height: 100%;
  width: min-content;
  max-height: 400px;
  object-fit: contain;
}

/******************************************************************/

/* STUDENT LIST ***************************************************/
section.students {
  max-width: 1400px;
  margin: 0 auto;
}

.students .st-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 30px;
  padding: 0 15px;
}

.students .st-list .st-card {
  width: 100%;
  max-width: 300px;
  border: 1px solid #c4bfc0;
  display: flex;
  flex-flow: column nowrap;
}

.students .st-list .st-card .st-image,
.students .st-list .st-card .st-image img {
  width: 100%;
  height: auto;
}

.students .st-list .st-card .st-details {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  padding-top: 15px;
}

.students .st-list .st-card .st-details * {
  margin: 0;
  padding: 0;
}

.students .st-list .st-card .st-details p {
  padding: 0 15px;
}

.students .st-list .st-card .st-details p.st-name {
  font-size: 19px;
  font-weight: 600;
}

.students .st-list .st-card .st-details p.st-major {
  font-style: italic;
}

.students .st-list .st-card .st-details p.st-preview {
  padding: 10px 0 0 0;
  border-top: 1px solid #cfb991;
  margin: 10px 15px;

  /* ellipsis after 2 lines of text! */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.students .st-list .st-card .st-details a.st-button {
  background-color: #cfb991;
  color: black;
  width: 100%;
  padding: 10px;
  text-align: center;
  margin-top: 15px;
}

.students .st-list .st-card .st-details a.st-button:hover {
  background-color: #c4bfc0;
  text-decoration: none;
}

@media (min-width: 768px) {
  .students .st-list .st-card {
    flex-flow: row nowrap;
    width: calc(100% - 30px);
    max-width: revert;
    min-width: 500px;
  }

  .students .st-list .st-card .st-image,
  .students .st-list .st-card .st-image img {
    width: 200px;
    height: 200px;
  }

  .students .st-list .st-card .st-details {
    width: calc(100% - 200px);
  }

  .students .st-list .st-card .st-details p.st-preview {
    -webkit-line-clamp: 2;
  }

  .students .st-list .st-card .st-details a.st-button {
    margin-top: auto;
  }
}

@media (min-width: 1200px) {
  .students .st-list .st-card {
    width: calc(50% - 30px);
  }

  .students .st-list .st-card .st-details p.st-preview {
    -webkit-line-clamp: 1;
  }
}

@media (min-width: 1440px) {
  .students .st-list .st-card .st-details p.st-preview {
    -webkit-line-clamp: 2;
  }
}

/******************************************************************/