/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 10/2025
 * ===========================
 */

:root {
  --small-font-size: 0.9rem;
  --small-line-height: 1.4;
}

h1.page-title {
  margin:0;
}
.title-block {
  background:#414171;
  &::after {
    content:"";
    background:url(/images/default-source/site-images/icons/clock-and-calendar.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:right top;
    position:absolute;
    width:calc(100% - 48px);
    max-width:1280px;
    height:calc(100% - 10rem);
    top:5rem;
    left:50%;
    transform:translate(-50%, 0);
    filter: invert(99%) sepia(65%) saturate(172%) hue-rotate(357deg) brightness(113%) contrast(100%);
    @media screen and (min-width:768px) {
      width:calc(100% - 96px);
    }
    @media screen and (min-width:960px) and (max-width:1200px) {
      height:calc(100% - 14rem);
      top:7rem;
    }
  }
  .title-block__content {
    @media screen and (min-width:960px) and (max-width:1380px) {
      max-width: 70vw;
    }
  }
}

body a.item-list__link:hover .item-list__media img,
body a.item-list__link:focus .item-list__media img {
  transform: none;
  opacity: 0.8;
}

.schedule .flag-icons {
  display:block;
  top:2px;
  right:2px;
  width:100%;
  img {
    max-width:30px;
    width:30px;
    float:right;
    margin:0 0 0 2px;
  }
}

#SearchFilter-list-container {
  ul.schedule {    
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    @media screen and (min-width:960px) {
      padding:0 0 96px;
    }
    li.item-list__item {
      margin:0;
      a.item-list__link {        
        .item-list__media {
          width:100%;
          max-width:none;
          float:none;          
        }
        .item-list__location,
        .item-list__date {
          font-size:var(--small-font-size);
          line-height:var(--small-line-height);
          color:#707070;
        }
        .item-list__datenotime {
          display:none;
        }
      }
    }
  }
}

/* Grid View */
.grid-view {
  li[data-location=online] .item-list__location {
      display:none;
  }
}

/* List View */
.list-view #List-header,
.list-view ul#SearchFilter-list li a,
.list-view ul#SearchFilter-list li a .item-text,
.list-view ul#SearchFilter-list li a .item-text .details {
  display: grid;
  align-items: stretch;
}
#List-header {
  grid-template-columns: 80px 3fr 1fr 1fr;
  align-items: center;
  grid-column-gap: 24px;
  background-color: #00447c;
  padding: 12px 24px 12px 0;
  button {
    text-align: start;
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);font-weight: 600;
    color: white;
    background:none;
    text-transform:uppercase;
    letter-spacing:1px;
    &.asc,
    &.desc {
      &::after {
        content: "\f0d7";
        font-family: "Font Awesome 6 Pro";
        margin-left: 5px;
        display: inline-block;
      }
    }
    &.desc::after {
      content: "\f0d8";
    }
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }
}
.list-view ul#SearchFilter-list {
  grid-template-columns:1fr;
  gap:0;
  li.item-list__item {
    background-color: white;
    box-shadow:none !important;
    border-radius:0;
    a.item-list__link {
      grid-template-columns: 80px auto;
      &:hover,
      &:focus {
        background-color: #f6f6f6;
        .item-list__title {
          text-decoration:underline;
        }
      }
      .education__img {
        border-radius:0;
      }
      .education-cat,
      .flag-icons {
        display:none;
      }
      .item-list__media {
        min-height: 80px;
        &::before {
          display:none;
        }
      }
      .item-list__content.education-item__content {
        display:grid;
        grid-template-columns: 3fr 1fr 1fr;
        grid-template-areas: "title location date";
        grid-column-gap: 24px;
        align-items: center;
        border-bottom: 1px solid #d4ebf5;
        padding: 0 24px;
        .item-list__date, 
        .item-list__description {
          display:none;
        }
        .item-list__datenotime {
          display:block;
        }
        .item-list__location,
        .item-list__datenotime {
          font-size:inherit;
          line-height:inherit;
          color:inherit;
        }        
        .item-list__title {
          grid-area:title;
          font-weight:600;
          color:#0072c6;
          margin:0;
        }
        .item-list__location {
          grid-area:location;
        }
        .item-list__datenotime {
          grid-area:date;
        }
      }
    }
  }
}