/*************************
 * GRID SCHEDULE LAYOUT
 *************************/
@media screen and (min-width:700px) {
  .schedule {
    display: grid;
    column-gap: 0.5em;
    row-gap:0.7em;
    grid-template-rows:
      [tracks] auto
      /*[time-0800] 0.005fr
      [time-0805] 0.005fr
      [time-0810] 0.005fr
      [time-0815] 0.005fr
      [time-0820] 0.005fr
      [time-0825] 0.005fr
      [time-0830] 0.005fr
      [time-0835] 0.005fr
      [time-0840] 0.005fr
      [time-0845] 0.005fr
      [time-0850] 0.005fr
      [time-0855] 0.005fr */
      [time-0900] 0.005fr
      [time-0905] 0.005fr
      [time-0910] 0.005fr
      [time-0915] 0.005fr
      [time-0920] 0.005fr
      [time-0925] 0.005fr
      [time-0930] 0.005fr
      [time-0935] 0.005fr
      [time-0940] 0.005fr
      [time-0945] 0.005fr
      [time-0950] 0.005fr
      [time-0955] 0.005fr
      [time-1000] 0.005fr
      [time-1005] 0.005fr
      [time-1010] 0.005fr
      [time-1015] 0.005fr
      [time-1020] 0.005fr
      [time-1025] 0.005fr
      [time-1030] 0.005fr
      [time-1035] 0.005fr
      [time-1040] 0.005fr
      [time-1045] 0.005fr
      [time-1050] 0.005fr
      [time-1055] 0.005fr
      [time-1100] 0.005fr
      [time-1105] 0.005fr
      [time-1110] 0.005fr
      [time-1115] 0.005fr
      [time-1120] 0.005fr
      [time-1125] 0.005fr
      [time-1130] 0.005fr
      [time-1135] 0.005fr
      [time-1140] 0.005fr
      [time-1145] 0.005fr
      [time-1150] 0.005fr
      [time-1155] 0.005fr
      [time-1200] 0.005fr
      [time-1205] 0.005fr
      [time-1210] 0.005fr
      [time-1215] 0.005fr
      [time-1220] 0.005fr
      [time-1225] 0.005fr
      [time-1230] 0.005fr
      [time-1235] 0.005fr
      [time-1240] 0.005fr
      [time-1245] 0.005fr
      [time-1250] 0.005fr
      [time-1255] 0.005fr
      [time-1300] 0.005fr
      [time-1305] 0.005fr
      [time-1310] 0.005fr
      [time-1315] 0.005fr
      [time-1320] 0.005fr
      [time-1325] 0.005fr
      [time-1330] 0.005fr
      [time-1335] 0.005fr
      [time-1340] 0.005fr
      [time-1345] 0.005fr
      [time-1350] 0.005fr
      [time-1355] 0.005fr
      [time-1400] 0.005fr
      [time-1405] 0.005fr
      [time-1410] 0.005fr
      [time-1415] 0.005fr
      [time-1420] 0.005fr
      [time-1425] 0.005fr
      [time-1430] 0.005fr
      [time-1435] 0.005fr
      [time-1440] 0.005fr
      [time-1445] 0.005fr
      [time-1450] 0.005fr
      [time-1455] 0.005fr
      [time-1500] 0.005fr
      [time-1505] 0.005fr
      [time-1510] 0.005fr
      [time-1515] 0.005fr
      [time-1520] 0.005fr
      [time-1525] 0.005fr
      [time-1530] 0.005fr
      [time-1535] 0.005fr
      [time-1540] 0.005fr
      [time-1545] 0.005fr
      [time-1550] 0.005fr
      [time-1555] 0.005fr
      [time-1600] 0.005fr
      [time-1605] 0.005fr
      [time-1610] 0.005fr
      [time-1615] 0.005fr
      [time-1620] 0.005fr
      [time-1625] 0.005fr
      [time-1630] 0.005fr
      [time-1635] 0.005fr
      [time-1640] 0.005fr
      [time-1645] 0.005fr
      [time-1650] 0.005fr
      [time-1655] 0.005fr
      [time-1700] 0.005fr
      [time-1705] 0.005fr
      [time-1710] 0.005fr
      [time-1715] 0.005fr
      [time-1720] 0.005fr
      [time-1725] 0.005fr
      [time-1730] 0.005fr
      [time-1735] 0.005fr
      [time-1740] 0.005fr
      [time-1745] 0.005fr
      [time-1750] 0.005fr
      [time-1755] 0.005fr;
      /* 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
      [track-1-start] 1fr
      [track-1-end track-2-start] 1fr
      [track-2-end track-3-start] 1fr
      [track-3-end track-4-start] 1fr
      [track-4-end track-5-start] 1fr
      [track-5-end track-6-start] 1fr
      [track-6-end];
  }
}
.time-slot { grid-column: times; }
.track-slot { display: none; }
 /* hidden on small screens and browsers without grid support */

@supports(display:grid ) { @media screen and(min-width:700px) { 
    .track-slot { display: block; padding: 10px 5px 5px; position: sticky; top: 0; z-index: 1000; background-color: rgba(255,255,255,.9); } } } 
/* Small-screen & fallback styles */
@supports(display:grid ) { @media screen and(min-width: 700px) { .session { margin: 0; } } }

/* VISUAL STYLES * Design-y stuff ot particularly important to the demo */

body { padding: 50px; /*max-width: 1100px;*/ margin: 0 auto; line-height: 1.5; }
.session { padding: .5em; border-radius: 2px; font-size: 14px; }

 /*  box-shadow: rgba(255,255,255,.6) 1px 1px 0, rgba(0,0,0,.3) 4px 4px 0;  */

.session-title, .session-time, .session-track, .session-presenter { display: block; }
.session-title, .time-slot { margin: 0; font-size: 1em; }
.session-title a { color: #fff; text-decoration-style: dotted; &:hover { font-style: italic; }
 &:focus { outline: 2px dotted rgba(255,255,255,.8); }
 }
.track-slot, .time-slot { font-weight: bold; font-size:.75em; }
.track-123 { background-color: #ffa8ca; color: #000; }
.track-0 { background-color: #ffa8ca; color: #000; }
.track-1 { background-color: #f3ba59; color: #fff; }
.track-2 { background-color: #e96b8f; color: #fff; }
.track-3 { background-color: #ff9ffc; color: #fff; }
.track-4 { background-color: #b4d3c0; color: #fff; }
.track-5 { background-color: #dad9ff; color: #fff; }
.track-6 { background-color: #9ccae1; color: #fff; }
.track-all { display: flex; justify-content: center; align-items: center; background: #ccc; color: #000; box-shadow: none; }
.text { max-width: 750px; font-size: 18px; margin: 0 auto 50px; }
.session h3, .session { color: #272727; }
.meta { color: #555; font-style: italic; }
.meta a { color: #555; }
.chart_timebox { color:lightgrey; border:1px solid lightgrey; padding:5px; }
.chart_time { color:#5c5b5b; font-size: 80%; }
hr { margin: 40px 0; }