@import "_fonts";
@import "_colors";

#events{

  .featurePromo{
    position:relative;
    display:block;
    width:100%;
    max-width:500px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    padding:16px;
    text-align:center;
    padding-left:80px;

    background-color:#f9f9f9;
    border:1px solid #aec9cc;

    svg{
      width:40px; 
      height:40px;
      top:20px;
      left:20px;
      opacity:0.5;
      position:absolute;
    }

    a{
      font-weight:bold;
    }
  }

  .featuredLabelImage{
    display:inline-block;
    margin-right:auto;
    width:-webkit-fit-content;
    width:fit-content; 
    font-size:12px;
    background-color:$color_purple;
    color:#fff;
    border-radius:4px;
    padding:4px;
    padding-left:10px;
    padding-right:10px;
    position:absolute;
    top:10px;
    left:10px;
    z-index:999;
    line-height:12px;

    font-weight:bold; 
    text-transform:uppercase;
    margin-top:5px;


  }

  .featuredLabelHeader{
    display:block;
    margin-right:auto;
    width:100%;
    font-size:14px;
    background-color:$color_purple;
    color:#fff;
    

    padding:8px;
    text-align:center;
    z-index:999;
    line-height:14px;
    user-select:none;
    -moz-user-select:none;

    font-weight:bold; 
    text-transform:uppercase;


  }

  .eventListingContainer{

    border:1px solid #ececec;
    border-radius:20px;
    overflow:hidden;
    background-color:#fff;


    #eventListing{
      @media screen and (min-width:768px){
        font-size:18px;

        .content{
          width:750px;
        }
      }
    }
  }


  .listingOwner{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:20px;
    width:800px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
   




    .ownerText{
      text-align:center;
      display:flex;
      justify-content: center;
      align-items: center;

      .textHolder{
        display:inline-block;
      }
      .bigIcon{
        svg{
          width:50px;
          height:50px;
          display:block;
          margin-left:auto;
          margin-right:auto;
          opacity:0.3;

        }
      }

      h3{
        margin-bottom:0px;
        padding-bottom:4px;
      }

      .expires{
        display:block;
        text-align:center;
        font-size:14px;
        opacity:0.8;

        svg{
          width:20px;
          height:20px;
          vertical-align:top;
          display:inline-block;
        }
      }
    }

    ul{
      list-style:none;
      display:block;
      width:300px;
      max-width:100%;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
      li{
        list-style:none;
        margin:0px;
        padding:0px;
        border-bottom:1px solid #ececec;

        &:last-child{
          border-bottom:0px;
        }

        span{
          width:220px;
          display:block;
          margin-left:auto;
          margin-right:auto;
        }

        a{
          display:block;
          padding:10px;
          text-decoration:none;
          color:$color_purple;
          transition:all 0.3s ease-in-out;

          &:hover{
            font-weight:bold;
          }

          svg{
            display:inline-block;
            width:20px;
            height:20px;
            vertical-align:top;
            margin-right:10px;

          }
        }
      }
    }
  }

  @media screen and (max-width:600px){
    .listingOwner{
      display:block;

      .ownerText{
        display:block;
        width:fit-content;
        width:-moz-fit-content;
        width:-webkit-fit-content;
        margin-left:auto;
        margin-right:auto;
        position:relative;
        padding-left:80px;
        .bigIcon{
          position:absolute;
          left:0px;
          top:0px;

        }

        h3{
          margin-top:0px;
          padding-top:0px;
        }
      }

    }
  }

}


#eventListing{
  font-size:14px;
  line-height:1.8em;
  *{
    box-sizing:border-box;
  }

  font-family:sans-serif;

  #fromNow, .fromNow{
    background-color:$color_orange;
    color:#fff;
    border-radius:3px;
    padding:6px;
    padding-left:12px;
    padding-right:12px;
    width:-webkit-fit-content;
    width:fit-content;
    margin-right:auto;
    line-height:0.8em;
    display:inline-block;

  }

  .content{
    padding:20px;
    padding-bottom:0px;
    width:550px;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    display:block;

    h1{
      font-size:26px;
      line-height:33px;
      margin:0px;
      padding:0px;

      padding-top:5px;
      padding-bottom:5px;
    }
  }

  .eventTags{
    display:block;

    .tag{
      padding:3px;
      font-size:11px;
      color:#fff;
      background-color:$color_purple;
      border-radius:3px;
      margin-right:3px;
    }
  }

  .eventSection{
    display:block;
    padding-left:30px;
    position:relative;
    margin-top:16px;
    padding-top:4px;
    width:100%;
    padding-right:10px;
    font-size:14px;
    line-height:1.8em;
    opacity:0.8;

    a{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      display: block;
    }

    h4{
      padding:0px;
      margin:0px;
      font-size:14px;
      line-height:1.8em;

    }
    svg{
      position:absolute;
      left:0px;
      top:2px;
      
      color:#000;
      width:22px;
    }
  }

  .eventDescription{
    padding:30px;
    font-size:16px;
    line-height:1.6em;
  }

  @media screen and (max-width:600px){
    .eventDescription{
      padding:20px;
      padding-left:10px;
      padding-right:10px;
    }
  }

  .eventMap{
    width:100%;
    height:500px;
    background-color:#ececec;
  }

  table.eventTimes{
    width:100%;
    max-width:400px;
    border-collapse:collapse;
    margin:0px;
    padding:0px;

    td{
      padding:8px;
      padding-left:0px;
      padding-right:0px;
      font-size:14px;
      border-bottom:1px solid #ececec;


    }

    tr:first-child{
      td{
    //    border-top:1px solid #ececec;
      }
    }

    tr:last-child{
      td{
        border-bottom:0px;
      }
    }

  }

  .mainImage{
    background-color:#184787;
    height:400px;
    aspect-ratio:3/2;
    overflow:hidden;
    display:block;
    width:100%;
    position:relative;
    user-select:none;
    cursor:pointer;
    -moz-user-select:none;

    @media screen and (max-width:500px){
      height:300px;
    }

    .bg{
      z-index:0;
      position:absolute;
      opacity:0.8;
      left:-5%;
      top:-5%;
      width:110%;
      height:110%;
      object-fit:cover;
      object-position:center center;
      filter:blur(12px);
    }

    .full{
      display:block;
      position:relative;
      z-index:1;
      height:100%;
      max-width:100%;
      margin-left:auto;
      margin-right:auto;
      /*
      border-radius:20px;
      box-shadow:0px 3px 6px rgba(0,0,0,0.1);
      border-top:1px solid #ececec;
      border-left:1px solid #ececec;
      border-right:1px solid rgba(0,0,0,0.6);
      border-bottom:1px solid rgba(0,0,0,0.6);

      max-width:100%;
      */
      object-fit:cover;
      object-position:center center;
    }

  }
}

.eventGalleryPopup{
  position:fixed;
  top:-100%;
  left:0px;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  display:flex;
  justify-content: center;
  align-items:center;
  overflow:hidden;
  transition:top 0.4s ease-in-out;
  z-index:999999999;



  .close{
    position:fixed;
    top:10px;
    right:10px;
    display:none;
    width:30px;
    height:30px;
    text-align:center;
    font-size:25px;
    line-height:30px;
    color:#fff;
    cursor:pointer;
  }
  &.show{
    top:0px;

    .close{
      display:block;
    }
  }
  img{
    max-height:90vh;
    max-width:90vw;
    box-shadow:0px 5px 10px rgba(0,0,0,0.2);

  }
}

.eventGallery{
  ul{
    list-style:none;
    margin:0px;
    margin-bottom:20px;
    padding:0px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-row-gap:10px;
    grid-column-gap:10px;

    li{
      margin:0px;
      padding:0px;
      line-height:0px;
      list-style:none;

      img{
        width:100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        object-position: center center;
        cursor:pointer;
        transition:all 0.3s ease-in-out;
        position:relative;
        z-index:2;

        &:hover{
          transform:scale(1.1);
          z-index:3;
          box-shadow:0px 3px 6px rgba(0,0,0,0.2);
        }
      }
    }
  }
}