/*************************
 * GRID SCHEDULE LAYOUT
 *************************/
@media screen and (min-width:1200px) {
	.schedule {
		display: grid;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
			[time-01] auto
			[time-02] auto
			[time-03] auto
			[time-04] auto
			[time-05] auto
			[time-06] auto
			[time-07] auto
			[time-08] auto
			[time-09] auto
			[time-10] auto
			[time-11] auto
			[time-12] auto;
			/* 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] 5em
			[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];
	}
}

.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:1000px) {
		.track-slot {
			display: block;
			padding: 5px 5px 5px;
			position: sticky;
			top: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,.9);
		}
	}
}

/* Small-screen & fallback styles */
.session {
	margin-bottom:  1em;
}

@supports( display:grid ) {
	@media screen and (min-width: 1200px) {
		.session {
			margin: 0;
		}	
	}
}

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

.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-track,
.session-presenter {
	display: block;
}
.session-time {
	font-size: 12px;
	display: block;

}

.session-title,
.time-slot {
	margin: 0;
	font-size: 1em;
}

.session-title a {
	color: #000000;
	text-decoration-style: dotted;
	
	&:hover {
		font-style: italic;
	}
	
	&:focus {
		outline: 2px dotted rgba(255,255,255,.8);
	}
}

.track-slot {
 	font-weight: bold;
	font-size:1em;
}
.time-slot {
	font-weight: bold;
	font-size:0.7em;
overflow-wrap: break-word;
}

.track-1 {
	background-color: #e3e7f7;
	color: #000000;
}

.track-2 {
	background-color: #91c1f7;
	color: #000000;
}

.track-3 {
	background-color: #c6ebf9;
	color: #000000;
}

.track-4 {
	background-color: #ffffff;
	color: #000000;
}
.track-5 {
	background-color: #edf8f9;
	color: #000000;
}

.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;
}

.meta {
	color: #555;
	font-style: italic;
}

.meta a {
	color: #555;
}

hr {
	margin: 40px 0;
}
.tentative {
	padding: 5px;
}
.tentative:after {
        content: "* tentative";
}

/*
     FILE ARCHIVED ON 12:21:40 Jul 04, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 15:08:58 Oct 04, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  capture_cache.get: 0.237
  captures_list: 0.342
  exclusion.robots: 0.036
  exclusion.robots.policy: 0.029
  esindex: 0.007
  cdx.remote: 64.166
  LoadShardBlock: 152.454 (3)
  PetaboxLoader3.datanode: 712.646 (5)
  PetaboxLoader3.resolve: 75.953 (2)
  load_resource: 652.214
  loaddict: 27.346
*/