/*************************
 * GRID SCHEDULE LAYOUT
 ************************

 @media screen and (min-width: 700px) {
    .schedule {
      display: grid;
      width: 65%;
      margin-left: auto;
      margin-right: auto;
      grid-gap: 1em;
      grid-template-rows: 
        [days] auto
        [time-0900] 1fr
        [time-0910] 1fr
        [time-0920] 1fr
        [time-0930] 1fr
        [time-0940] 1fr
        [time-0950] 1fr
        [time-1000] 1fr
        [time-1010] 1fr
        [time-1020] 1fr
        [time-1030] 1fr
        [time-1040] 1fr
        [time-1050] 1fr
        [time-1100] 1fr
        [time-1110] 1fr
        [time-1120] 1fr
        [time-1130] 1fr
        [time-1140] 1fr
        [time-1150] 1fr
        [time-1200] 1fr
        [time-1210] 1fr
        [time-1220] 1fr
        [time-1230] 1fr
        [time-1240] 1fr
        [time-1250] 1fr
        [time-1300] 1fr
        [time-1310] 1fr
        [time-1320] 1fr
        [time-1330] 1fr
        [time-1340] 1fr
        [time-1350] 1fr
        [time-1400] 1fr
        [time-1410] 1fr
        [time-1420] 1fr
        [time-1430] 1fr
        [time-1440] 1fr
        [time-1450] 1fr
        [time-1500] 1fr
        [time-1510] 1fr
        [time-1520] 1fr
        [time-1530] 1fr
        [time-1540] 1fr
        [time-1550] 1fr
        [time-1600] 1fr
        [time-1610] 1fr
        [time-1620] 1fr
        [time-1630] 1fr
        [time-1640] 1fr
        [time-1650] 1fr
        [time-1700] 1fr
        [time-1710] 1fr
        [time-1720] 1fr
        [time-1730] 1fr
        [time-1740] 1fr
        [time-1750] 1fr
        [time-1800] 1fr
        [time-1810] 1fr
        [time-1820] 1fr
        [time-1830] 1fr
        [time-1840] 1fr
        [time-1850] 1fr;
      Note 1:
      Use 24hr time for gridline names for simplicity
  
      Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
      Try 0.5fr for more compact equal rows. I don't quite understand how that works :)
      
      grid-template-columns: [times] 4em [day-1-start] 1fr [day-1-end day-2-start] 1fr [day-2-end];
    }
  }
  .time-slot {
    grid-column: times;
  }
  
  .day-slot {
    display: none;
     hidden on small screens and browsers without grid support 
  }
  
  @supports (display: grid) {
    @media screen and (min-width: 700px) {
      .day-slot {
        display: block;
        padding: 10px 5px 5px;
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.9);
      }
    }
  }
   Small-screen & fallback styles 
  .session {
    margin-bottom: 1em;
  }
  
  @supports (display: grid) {
    @media screen and (min-width: 700px) {
      .session {
        margin: 0;
      }
    }
  }
  ************************
   * VISUAL STYLES
   * Design-y stuff ot particularly important to the demo
   ************************
  
  .session {
    padding: 0.5em;
    border-radius: 10px;
    font-size: 14px;
  }
  
  .session-title,
  .session-time,
  .session-day,
  .session-presenter {
    display: block;
  }

  .session-day {
    display: none;
  }
  
  .session-title,
  .time-slot {
    margin: 0;
    font-size: 1em;
  }
  
  .session-title a {
    color: #fff;
    -webkit-text-decoration-style: dotted;
            text-decoration-style: dotted;
  }
  .session-title a:hover {
    font-style: italic;
  }
  .session-title a:focus {
    outline: 2px dotted rgba(255, 255, 255, 0.8);
  }
  
  .day-slot,
  .time-slot {
    font-weight: bold;
    font-size: 0.75em;
  }
  
  .day-1 {
    background-color: #1259B2;
    color: #fff;
  }
  
  .day-2 {
    background-color: #687f00;
    color: #fff;
  }
  
  .day-all {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ccc;
    color: #000;
    box-shadow: none;
  }
*/



/*#day1 {
    background-color: rgba(238, 255, 0, 0.5);
}
#day2 {
    background-color: rgba(255, 145, 0, 0.5);
}
#day3 {
    background-color: rgba(255, 0, 0, 0.5);
}*/


#schedule {
    position: relative;
    --time-stamp-width: 200px;
    --event-width: 25%;
    --minute-height: 2.5px;
    --hour-height: calc(60 * var(--minute-height));
}

#schedule-grid {
    display: none;
}

#schedule-grid .schedule-hour {
    box-sizing: border-box;
    height: var(--hour-height);
    background-color: white;
    border-top: 1px solid grey;
    color: grey;
    font-size: 0.8em;
}

.day {
    margin-bottom: 20px;
}

.day:last-of-type {
    margin-bottom: 0;
}

.day .date {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
}

.talks {
    width: 100%;
    height: 100%;
}

.event {
    display: block;
    margin-bottom: 10px;
}

@media (max-width: 799px) {
    .event {
        height: auto !important;
    }
}

.event:last-of-type {
    margin-bottom: 0;
}

.event .event-info {
    display: block;
}

.event .event-info.event-title {
    font-weight: 600;
}

.event .event-info.event-speaker {
    font-style: italic;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    padding-top: 3px;
    padding-bottom: 2px;
}

.event .event-info.event-time {
    font-size: 0.85em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
}

a.event:hover .event-title {
    font-style: italic;
}

.event-container {
    box-sizing: border-box;
    background-color: rgb(131, 198, 236);
    border-left: 4px solid rgb(93, 168, 211);
    border-radius: 4px;
    color: white;
    font-size: 0.9em;
    padding: 5px;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}

/* Style for entries with popups - blue color */
.has-popup .event-container {
    cursor: pointer;
    background-color: #0357ba;
    border-left: 4px solid #023d84;
}

/* Style for lightning talks - orange/amber color */
.lightning-talk .event-container {
    cursor: pointer;
    background-color: #ff8800;
    border-left: 4px solid #cc6600;
}

/* Regular entries shouldn't have cursor:pointer */
.schedule-event:not(.has-popup) .event-container {
    cursor: default;
}

/* Hover effects by entry type */
.event-container:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Default hover */
.schedule-event:not(.has-popup):not(.lightning-talk) .event-container:hover {
    background-color: rgb(93, 168, 211);
}

/* Popup hover */
.has-popup:not(.lightning-talk) .event-container:hover {
    background-color: #0465d6;
}

/* Lightning hover */
.lightning-talk .event-container:hover {
    background-color: #ff9900;
}

@media (min-width: 800px) {
    .schedule {
        margin-top: 75px;
    }
    
    #schedule-grid {
        display: block;
    }
    
    #schedule #events {
        position: absolute;
        inset: 0 0 0 100px;
        display: flex;
        justify-content: space-around;
    }
    
    .day {
        flex-grow: 1;
        position: relative;
        height: 100%;
        margin-bottom: 0;
    }
    
    .day .date {
        position: absolute;
        padding: 10px;
        text-align: center;
        bottom: 100%;
    }
    
    #schedule .event {
        position: absolute;
        margin-bottom: 0;
        width: 100%;
        /*top: 0; Depends on the talk */
        /*height: calc(60 * var(--minute-height)); Depends on the talk */
        height: auto;
        padding: 2px 3px;
        box-sizing: border-box;
    }
    
    .event-container .event-speaker.speaker-link {
        cursor: pointer;
        text-decoration: underline;
    }
    
    .event-container .event-speaker.speaker-link:hover {
        color: #0357ba;
    }
}