/* ---------------------------- Course Cards start ---------------------------- */

.course-card-view {
  .view-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .course-card {
    border: 1px solid var(--uc-light-blue);
    border-radius: 6px;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .course-card:hover {
    transform: translateY(-3px);
  }

  .course-card-header,
  .course-photo {
    position: relative;
  }

  .course-photo {
    width: 100%;
    overflow: hidden;
  }

  .course-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .course-header {
    position: absolute;
    bottom: 0;
    background: rgba(18, 149, 216, 0.8);
    width: 100%;
    overflow: hidden;
  }

  .course-title {
    color: var(--white);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 900;
    line-height: 1.43;
    text-transform: capitalize;
    padding: 0.9rem 0.9rem 0;
  }

  .course-program {
    font-size: clamp(0.6rem, 2vw, 0.8rem);
    color: var(--white);
    font-weight: 400;
    line-height: 1.43;
    padding: 0 0.9rem;
  }

  .course-details {
    padding: clamp(0.1rem, 2vw, 0.6rem);
    display: flex;
    flex-direction: column;
  }

  .course-meta-wrapper {
    margin-bottom: clamp(1.5rem, 3vw, 4rem);
    padding: 0.5em;

    display: flex;
    gap: 1rem;
  }

  .course-left-items, .course-right-items{
    flex: 1;
  }

  .course-item {
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
  }

  .name {
    display: flex;
    font-size: clamp(0.675rem, 1.8vw, 0.8rem);
    font-weight: 600;
    color: var(--black);
    margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
    line-height: 1.43;
  }

  .name::before {
    content: ">";
    color: var(--orange);
    margin-right: clamp(0.25rem, 1vw, 0.5rem);
    font-weight: 900;
  }

  .field-value {
    margin-left: clamp(0.75rem, 3vw, 1rem);
    font-size: clamp(0.675rem, 2.2vw, 0.8rem);
    color: var(--uc-dark-gray);
    font-weight: 400;
    line-height: 1.43;
  }

  a {
    color: var(--orange);
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
    line-height: 1.43;
    display: block;
    padding: 0 0.2rem;
    text-decoration: none;
  }

  a:hover {
    opacity: 0.7;
  }

  @media (max-width: 1024px) {
    .view-content {
      grid-template-columns: repeat(2, 1fr);
    }

    .course-card {
      height: 90%;
    }
  }

  @media (max-width: 576px) {
    .view-content {
      grid-template-columns: 1fr;
    }

    .course-card {
      height: 80%;
    }
  }
}

/* ---------------------------- Views Pager / Buttons ---------------------------- */

.view-course-catalog {
  .pager-show-more {
    padding: 0;
    max-width: 50%;
    margin: 1rem auto;

    a {
      padding: 1rem;
      color: var(--orange);
      border: 1px solid var(--orange);
      border-radius: 6px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: clamp(0.5rem, 2vw, 0.8rem);
      align-items: center;
    }
  }

  .pager-show-more a:hover {
    background-color: var(--orange);
    color: var(--white);
  }
}

/* ---------------------------- Nodes Styling ---------------------------- */
.page-node-type-course {
  .page-title {
    display: none;
  }

  & .field__label {
    margin-top: 1rem;
    font-size: clamp(1.8rem, 2vw, 2rem);
    font-weight: 500;
    color: var(--uc-light-blue);
  }

  .field--name-title{
    color: var(--uc-dark-blue);
  }

  h2, h3 {
    color: var(--uc-light-blue);
  }

  a {
    text-decoration: none;
  }

  .field--name-body {
    & p {
      margin-top: 0;
    }
  }
}

.field--name-field-course-instructor-referenc {
  margin-top: 4rem;

  a {
    text-decoration: none;
  }

  .node__content {
    display: flex;
    gap: 2rem;
  }

  .field--name-field-instructor-photo img {
    border-radius: 50%;
    height: auto;
  }

  @media (max-width: 768px) {
    .node__content {
      flex-direction: column;
    }
  }
}

/* ---------------------------- Form css course card $ course catelog---------------------------- */
.course-card-view {
  .form--inline {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  .form-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  label {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .form-select {
    cursor: pointer;
    padding: 0.225rem;
    width: 100%;
  }

  .form-actions {
    margin-top: 2.7rem;
  }

  @media screen and (max-width: 365px) {
    .form-actions {
      margin-top: 0;
    }
  }

  .form-submit {
    padding: 0.325rem;
    margin-right: 0;
    margin-left: 0;
    background-color: var(--white);
    cursor: pointer;
  }

  .form-submit:hover {
    text-decoration: underline;
  }
}

.course-table-view {
  .view-filters {
    width: 20%;
  }

  .form-item {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0.5rem;
    width: 90%;
  }

  .course-filters-wrapper {
    width: 100%;
  }

  .course-filters-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--uc-dark-blue);
    color: var(--white);
    font-weight: 700;
    font-size: clamp(0.8rem, 2vw, 1.1rem);
    padding: 1rem;
    cursor: pointer;
  }

  .course-filters-arrow {
    transition: transform 0.2s ease;
  }

  .course-filters-arrow::after {
    content: "▾";
    display: inline-block;
  }

  .course-filters-wrapper[data-collapsed="true"] .course-filters-arrow {
    transform: rotate(180deg);
  }

  .course-filters-body {
    background: var(--white);
    padding: 0.5rem;
  }

  .course-filter-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .form-text,
  .form-select {
    width: 100%;
  }

  input[type="text"],
  input[type="search"],
  select {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--uc-dark-blue);
    border-radius: 4px;
    font-size: 0.8rem;
    background-color: var(--white);
  }

  label {
    color: var(--black);
    font-weight: 600;
    font-size: clamp(0.8rem, 1vw, 1rem);
    margin-bottom: 0.25rem;
  }

  .form-actions {
    padding: 0.9375rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .form-actions input[type="submit"],
  .form-actions input[type="reset"] {
    color: var(--white);
    background: var(--uc-dark-blue);
    padding: 0.225rem 1.5rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
  }

  .form-actions input[type="submit"]:hover,
  .form-actions input[type="reset"]:hover {
    transform: translateY(-1px);
    background-color: var(--orange);
  }
}

/* ---------------------------- course table page css start  ---------------------------- */
.block-views-blockcourse-catalog-block-2 {
  h2 {
    margin-left: 0.3rem;
  }
}

.course-table-view {
  display: flex;
  gap: 1.1rem;
  margin: 0 .3rem;

  table {
    border-collapse: collapse;
    font-size: 1rem;
    width: 100%;
    overflow-x: auto;
  }

  table tbody tr:nth-child(even) {
    background-color: var(--white);
  }

  table tbody tr:nth-child(odd) {
    background-color: var(--light-gray);
  }

  thead {
    background: var(--uc-dark-blue);
    color: var(--white);
    font-weight: 700;
  }

  thead a {
    color: var(--white);
    text-decoration: none;
  }
  td.is-active {
    background-color: unset;
  }

  tbody {
    color: var(--orange);
  }

  th,
  td {
    padding: 0.85rem 0.825rem;
    border: 1px solid var(--black);
  }

  th {
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.3rem);
  }

  td {
    font-weight: 400;
    font-size: clamp(0.8rem, 2vw, 1rem);
  }

  td a {
    color: var(--orange);
  }
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 768px) {
  .course-table-view {
    flex-direction: column;

    .view-filters {
      width: 100%;
    }

    .views-exposed-form {
      padding: 0.625rem;
    }

    .js-form-item input[type="text"],
    .js-form-item select,
    .form-item input[type="text"],
    .form-item select {
      padding: 7px 8px;
      font-size: 0.75rem;
    }

    .form-actions input {
      width: 100%;
    }

    table {
      font-size: 0.625rem;
      display: block;
      overflow-x: auto;
    }

    th,
    td {
      padding: 0.275rem 0.2rem;
      font-size: 0.625rem;
    }

    th {
      white-space: normal;
      min-width: 5rem;
    }
  }
}

/* ---------------------------- End of Course CSS ---------------------------- */