/* hybrid--2024-flex-block.css */

/* @todo 
 * 1. Check if being matched anywhere in the codebase (use Site Improve) and remove if not needed: body.hybrid.hybridCourse, , 
 * 1. reduce the number of selectors used - specificity is too high. 
 * 2. use fr and gap rules instead of calc for grid spacing 
*/

.flex--block {
  display: grid !important;
  grid-template-columns: calc((100% * 1 / 3) - 2rem) calc(100% * 2 / 3);
  gap: var(--lt-layout-gap);
}

.flex--block .flex--title {
  height: 100%;
}

.flex--block .flex--title .flex--title-container {
  position: sticky;
  top: 200px;
}

.flex--block .flex--title .flex--title-container h2 {
  position: unset;
  top: auto;
}

.flex--block .flex--title h2 {
  padding-right: 2.75rem;
  font-size: 3rem !important;
  font-weight: 400 !important;
  position: sticky;
  top: 200px;
  padding-bottom: 2rem;
}

.flex--block .flex--content {
  overflow: hidden;
}

.flex--block .flex--content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.flex--block .flex--content h4 {
  margin-bottom: 2rem;
  padding-left: 0.25rem;
}

.flex--block .flex--content ul.li-two-col {
  columns: 1;
  -webkit-columns: 1;
  -moz-columns: 1;
}

.lt-flex--block {
  display: grid !important;
  grid-template-columns: calc((100% * 1 / 3) - 2rem) calc(100% * 2 / 3);
  gap: var(--lt-layout-gap);

  .lt-flex--title {
    height: 100%;
    h2 {
      padding-right: 2.75rem;
      font-size: 3rem !important;
      font-weight: 400 !important;
      position: sticky;
      top: 200px;
      padding-bottom: 2rem;
    }
    .lt-flex--title-container {
      position: sticky;
      top: 200px;
      h2 {
        position: unset;
        top: auto;
      }
    }
  }

  .lt-flex--content {
    overflow: hidden;
    h3,
    h4 {
      margin-top: 2rem;
      margin-bottom: 0.75rem;
    }
  }
}
@media (max-width: 768px) {
  .flex--block,
  .lt-flex--block {
    display: block !important;
  }
}

/* equal grids start */
.flex--content-grid-2 {
  display: grid;
  gap: var(--lt-layout-gap);
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex--content-grid-3 {
  display: grid;
  gap: var(--lt-layout-gap);
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}

.flex--content-grid-4 {
  display: grid;
  gap: var(--lt-layout-gap);
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.flex--content-grid-5 {
  display: grid;
  gap: var(--lt-layout-gap);
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* equal grids end */

/* temporarily added here for testing school pages in dev */

/* info box start */
.flex--content .info-box {
  background-color: #dcd2c1;
  color: #000;
  padding-bottom: 2rem;
  img {
    margin-bottom: 0rem !important;
  }
  .info-box__content {
    padding: 2rem;
  }
  .lt-button {
    margin-left: 2rem;
  }
}

.rose-deepred .flex--content .info-box {
  background-color: var(--lt-rose);
  color: #000;
}

@media (max-width: 768px) {
  .flex--content-grid-2,
  .flex--content-grid-3,
  .flex--content-grid-4,
  .flex--content-grid-5 {
    grid-template-columns: 1fr;
  }

  .flex--content .info-box {
    margin-bottom: 2rem;
  }
}

/* info box end */

/* extra school overrides to merge start */
section:not(:first-child) {
  margin-bottom: 3rem;
}

.flex--block .flex--content .general-content {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.general-content.two-column-hybrid:first-of-type {
  margin-top: 2rem;
}

.general-content.two-column-hybrid {
  margin-top: 0;
  margin-bottom: 0;
}

.grid--card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lt-layout-gap-sm);

  .image-container {
    max-width: 400px;
    max-height: 280px;
    vertical-align: middle;
    align-items: center;
    display: flex;
  }

  .grid__main {
    max-width: var(--lt-layout-text-width-readable);
  }
}

#peopleList td {
  vertical-align: top;
}

.lt-section-course-list-by-school {
  background-color: #dcd2c1;
  padding-top: 6rem;
  padding-bottom: 3rem;

  .ootb-tabcordion--entry-content {
    padding-left: 0;
    padding-right: 0;
  }

  .ootb-tabcordion--entry-content table.course--table thead tr {
    display: none;
  }

  .ootb-tabcordion--entry-content table.course--table td,
  #course--people--list table.course--table td {
    vertical-align: middle;
    width: 25%;
  }

  .ootb-tabcordion--entry-content table.course--table td:nth-of-type(1) {
    width: 25%;
    padding-right: 1.75rem;
  }

  .ootb-tabcordion--entry-content table.course--table td:nth-of-type(2) {
    width: 20%;
    padding-right: 1rem;
  }

  .ootb-tabcordion--entry-content table.course--table td:nth-of-type(3) {
    text-align: center;
  }

  .ootb-tabcordion--entry-content table.course--table td:nth-of-type(4),
  #course--people--list table.course--table td:nth-of-type(4) {
    text-align: right;
  }

  #course--people--list table.course--table td:nth-of-type(1) img {
    max-width: 100px;
  }

  @media (max-width: 768px) {
    .ootb-tabcordion--entry-content table.course--table td,
    #course--people--list table.course--table td {
      width: 100%;
      text-align: left !important;
    }

    #course--people--list table.course--table td:nth-of-type(1) img {
      max-width: unset !important;
      min-width: 400px !important;
    }

    .ootb-tabcordion--entry-content table.course--table td:nth-of-type(1) {
      width: 100%;
      padding-right: 0;
    }

    .ootb-tabcordion--entry-content table.course--table td:nth-of-type(2) {
      width: 100%;
      padding-right: 0;
    }

    .ootb-tabcordion--entry-content table.course--table td:nth-of-type(3),
    .ootb-tabcordion--entry-content table.course--table td:nth-of-type(4),
    #course--people--list table.course--table td:nth-of-type(4) {
      text-align: left;
    }
  }

  /* meet the team table override start - replace with lt-layout-grid class in CT layout */
  #course--people--list .dt-layout-row:first-of-type {
    display: grid;
    grid-template-columns: calc((100% * 1 / 2) - 2rem) calc(100% * 1 / 2);
    gap: var(--lt-layout-gap);
  }

  #course--people--list .dt-layout-row select,
  #course--people--list .dt-layout-row input[type="search"] {
    border-radius: 0;
    background-color: var(--lt-rose);
    border: 0.15rem solid var(--primary);
    border-color: var(--lt-rose);
  }

  #course--people--list .dt-layout-row label {
    display: inline-block;
  }

  #course--people--list .dt-layout-row .dt-search {
    text-align: right;
  }

  #course--people--list .dt-layout-row .dt-search label {
    padding-left: 0;
    padding-right: 1.5rem;
  }

  #course--people--list
    .dt-layout-row.dt-layout-table
    table#peopleList
    thead
    tr
    th {
    text-align: left;
    padding-left: 0;
  }

  #course--people--list .dt-layout-row.dt-layout-table {
    margin-bottom: 2rem;
  }

  #course--people--list .dt-layout-row #peopleList_info {
    margin-bottom: 2rem;
  }

  #course--people--list .dt-layout-row .dt-paging nav button.next {
    /* needed as there is an override from some other style on this particular one - next */
    padding: 0.6875rem 1.25rem 0.5625rem;
  }

  #course--people--list .dt-layout-row .dt-paging nav button {
    background-color: var(--lt-rose25);
  }

  #course--people--list .dt-layout-row .dt-paging nav button:hover {
    background-color: var(--lt-rose75);
  }

  #course--people--list .dt-layout-row .dt-paging nav button.current {
    background-color: var(--lt-rose);
  }
}

@media (max-width: 768px) {
  .lt-section-course-list-by-school
    #course--people--list
    .dt-layout-row:first-of-type {
    display: block;
    margin-bottom: 1rem;
  }

  .lt-section-course-list-by-school
    #course--people--list
    .dt-layout-row
    .dt-search {
    text-align: left;
  }
}

/* meet the team table override end */

/* extra school overrides to merge end */