/* design-single-default.css  */

/* SINGLE COURSE LAYOUT */
/************************/

#ka .details .course-grid{
    grid-template-areas:
      "courselist nextcourse";
  }
  #ka .course-information .course-grid{
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "content course-image"
      "content aside"
      "footer footer";
  }
  #ka .course-information .content { grid-area: content;}
  #ka .course-information .course-image { grid-area: course-image;}
  #ka .course-information .aside { grid-area: aside;}
  #ka .course-information .footer { grid-area: footer; }
  #ka .details .courselist { grid-area: courselist; }
  #ka .details .nextcourse { grid-area: nextcourse; }
  
  @media screen and (max-width: 768px){
    #ka .course-container .details {
        padding: 1.5em;
    }
    #ka .course-grid{
      grid-template-columns: 1fr;
      gap: 0;
    }
    #ka .details .course-grid{
      grid-template-columns: 1fr;
      grid-template-areas:
      "nextcourse"  
      "courselist";
      grid-auto-flow:dense;
      gap: 2em;
    }
    #ka .details .course-grid.col-1-1{
        gap: .5em;
      } 
    #ka .course-information .course-grid{
      grid-template-rows: auto;
      grid-template-areas:
        "course-image"
        "content"
        "aside"
        "footer";
        gap: 2em;
    }
    
  }

/* SINGLE COURSE STYLES */
/************************/

/* Course header*/
/****************/
    #ka .course-container .ka-header{
        min-height: 50vh;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: start;
        overflow: hidden;
    }
    #ka .course-container .ka-header .background-blur {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;;
        background-size: cover;
        background-position: center;
        filter: blur(1px);
        z-index: 1;
    }
    #ka .course-container .ka-header .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
        z-index: 2;
    }
    #ka .course-container .header-content{
        z-index: 3;
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: .5em;
    }
    #ka .course-container .header-content *{
        color: white;
        flex-wrap: wrap;
    }
    #ka .header-content .iconlist.horizontal {
        column-gap: 3em;
        font-size: var(--ka-font-s-plus);
    }
    #ka .course-container .header-content i.ka-icon{
        background-color: var(--ka-color-light);
    }
    #ka .course-container .header-content h1{
        font-size: 32px;
        margin: 1.5em 0 .5em;
        padding: 0;
    }
    #ka .course-container .header-content .course-buttons {
        display: flex;
        margin-top: 4em;
    }
    #ka .course-container .header-content .course-buttons .button{
        margin-right: .5em;
        font-size: var(--ka-font-base);
    }
    @media screen and (max-width: 768px) {
        #ka .course-container .header-content h1,
        #ka .course-container .header-content h2{
            text-align: center;
        }
        #ka .course-container .header-content {
            row-gap: 2em;
        }
        .taxonomy-list.horizontal {
            display: flex;
            flex-wrap: wrap;
            row-gap: .3em;
        }
        #ka .course-container .header-content .course-buttons {
            display: flex;
            justify-content: center;
            margin-top: .5em;
            gap: .8em;
        }
        
    }
      
/* Course details */
/******************/
    #ka .course-container .details {
        background-color: var(--ka-alt-background);
        padding-bottom: 2em;
    }
    #ka .course-container .details .iconlist > div{
        align-items: center;
    }

/* -- courselist */

    #ka .courselist-item {
        background-color: #ffffffd1;
        border-bottom: 1px solid #eee;
    }
    #ka .courselist-item:hover {
        background-color: #ffffff;
    }
    #ka .courselist-item:last-child {
        border-bottom: none;
    }

    #ka .courselist-main .text-area {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
    }
    #ka .courselist-main .links-area{
        flex-direction: row;
      }
    #ka .courselist-main .links-area a{
        color: #68c46b;
        text-transform: uppercase;
        background: transparent;
        font-size: 1em;
        margin-left: 1em;
      }
      #ka .courselist-main .links-area a:hover{
        color: #3e8041;
        background: transparent;
        box-shadow: none;
      }
      #ka span.course-available {
        width: 10px;
        display: inline-block;
        overflow: hidden;
        height: 13px;
    }
    #ka .full .courselist-main .content-area  {
        color: #989898;
    }

    #ka .course-locations-list {
        margin: 20px 0;
    }
    
    #ka .location-tabs {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    #ka .location-tabs li {
        margin: 0;
    }

    /* Next course */
    #ka .nextcourse .iconlist{
        row-gap: .7em;
    }
    #ka-main .nextcourse .iconlist i.ka-icon {
        width: var(--ka-font-md);
        height: var(--ka-font-md);
    }
    #ka .nextcourse .iconlist .signup-link i.ka-icon {
        height: var(--ka-font-xs);
    }
    #ka .nextcourse .iconlist .signup-link {
        margin-top: .5em;
    }
    
        /*#ka .location-tabs li a {
        padding: 0.1em 0.8em;
        margin: 0.2em;
        color: var(--ka-color-filter);
        border-radius: 5px;
        font-size: var(--ka-filter-font-size);
        cursor: pointer;
    }
    
    #ka .location-tabs li.active a {
        background: var(--ka-color);
        color: white;
    }
    
    #ka .location-tabs li a:hover {
        color: var(--ka-color);
    }
    #ka .location-tabs li.active a:hover {
        color: white;
    }*/

    @media screen and (max-width: 768px) {
        #ka .courselist-main{
            flex-direction: column;
            align-items: flex-start;
            row-gap: 1em;
          }
          #ka .courselist-main .text-area {
            flex-wrap: wrap;
        }
        #ka .courselist-main .links-area {
            width: 100%;
            margin-left: 25px;
            column-gap: 1em;
        }
    }

  
/* Course information */
/**********************/
    #ka .course-information {
        padding-top: 3em;
    }
    #ka .course-information .excerpt {
        font-size: 1.2em;
    }

    #ka picture.course-image { aspect-ratio: 4/3; display: block; max-width: 100%; overflow: hidden; }
    #ka picture.course-image img{ width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center; border-radius: 10px; }

    @media screen and (max-width: 768px){
        #ka picture.course-image.mobile { margin-bottom: 1em; }
    }

/* Course footer */
/****************/
    #ka .course-container .ka-footer {
    background-color: var(--ka-alt-background);
    padding: 2em 4vw;
    }