/* 
CSS written by: Mathijs Nijhoff

Most selectors you’ll need are here. Feel free to add as many as you need.
*/

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	@media (prefers-reduced-motion: no-preference) {
		transition: all var(--animation-duration) ease;
	}
}

html {
	--font-size-display: clamp(4rem, 11.409vw - 4.691rem, 9rem);
	--font-size-xl: 10rem;
	--font-size-l: 2rem;

	--spacing-l: 3rem;
	--spacing-m: 2rem;
	--spacing-s: 1rem;

	--color-primary-background: #F0EFED;
	--color-secondary-background: var(--color-border);
	--color-primary-action: #6E6F1A;
	--color-border: #DCDCCD;

	--border-style: 1px solid var(--color-border);

	--animation-duration: 0.3s;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--color-primary-background);
}

a {
	text-decoration: none;
	color: var(--color-primary-action);
	text-transform: uppercase;

	&::before {
		content: "[[";
	}

	&::after {
		content: "]]";
	}
}

li {
	list-style: none;
}

a:hover, a:focus-visible {
	background-color: var(--color-secondary-background);
	outline: 0;

}

header {
	text-align: center;
	margin-block: var(--spacing-l);

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: var(--spacing-s);

	border-bottom: var(--border-style);

	p:nth-of-type(1) {
		width: 15rem;
		text-align: justify;

		time {
			font-weight: bold;
			display: inline-block;

			&::before {
				content: "((";
			}

			&::after {
				content: "))";
			}
		}
	}
}

h2,
h3,
h4 {
	font-size: var(--font-size-l);
	max-width: 30rem;
	margin-left: var(--spacing-s);
	line-height: 95%;

	&::before {
		content: "//";
	}
}

h1 {
	font-size: var(--font-size-display);
	line-height: 80%;

	text-transform: uppercase;

	span:nth-of-type(3)::before {
		content: "✹";
		color: var(--color-primary-action);
	}
}

p {
	max-width: 37rem;
	padding-inline: var(--spacing-s);
	margin-block: var(--spacing-s);
}

main {

	@media (width > 682px) {

		display: grid;
		grid-template-columns: 20rem 1fr;

		>h2 {
			text-align: start;
			justify-self: end;
		}

		>p {
			margin: 0;
		}

		>p:nth-of-type(2) {
			grid-column: 2/3;
		}
	}

	@media (width > 1080px) {
		grid-template-columns: 1fr 1fr;

		>h2 {
			text-align: end;

		}
	}
}

section {
	grid-column: span 2;

	&#active-participants {
		grid-column: 2/3;

		padding-block: var(--spacing-m);
	}

	&#sessions {

		margin-block: var(--spacing-l);
		padding-block: var(--spacing-m);
		border-block: var(--border-style);

		@media (width > 682px) {

			display: grid;
			grid-template-columns: 20rem 1fr;

			>h3 {
				text-align: start;
				justify-self: start;
			}

			>p {
				margin: 0;
			}

			>p:nth-of-type(2) {
				grid-column: 2/3;
			}
		}

		@media (width > 1080px) {
			grid-template-columns: repeat(2, 1fr);

			>h3 {
				grid-column: 1/2;
				text-align: end;
				justify-self: end;
			}
		}

		ul {
			grid-column: span 2;
			justify-self: center;

			li {
				overflow: hidden;
				margin-block: var(--spacing-m);
				text-align: center;

				display: flex;
				flex-direction: column-reverse;
				justify-content: center;

				@media (prefers-reduced-motion: no-preference) {
					animation: --session-animation linear;
					animation-timeline: view();
					animation-range-start: -10dvh;
					animation-range-end: 80vh;
				}

				@media (width > 682px) {
					width: 80vw;
				}

				@media (width > 1080px) {
					width: 100%;
				}

				img {
					width: 100%;
					object-fit: cover;
				}

				a {
					align-self: center;
					margin-top: var(--spacing-s);

					@media (width > 682px) {
						align-self: start;
					}
				}
			}
		}
	}
}

@supports (animation-timeline: scroll()) {
	#sessions {
		@media (width > 682px) and (prefers-reduced-motion: no-preference) {
			
			&::before {
				grid-column: span 2;
				content: "✹";
				font-size: var(--font-size-xl);
				position: fixed;

				top: 40dvh;
				left: 0;
				right: 0;
				justify-self: center;
				color: var(--color-primary-action);
				z-index: -1;

				opacity: 0.1;

				margin-bottom: var(--spacing-l);
	
				animation: --star-animation linear;
				animation-timeline: scroll();
			}
		}
	}
}

aside {
	padding-block: var(--spacing-l);

	@media (width > 682px) {
		display: grid;
		grid-template-columns: 20rem 1fr;
	}

	@media (width > 1080px) {
		display: grid;
		grid-template-columns: 1fr 1fr;

		>h2 {
			justify-self: end;
		}

		>p {
			margin: 0;
		}
	}

	abbr {
		text-decoration: none;
	}


	details {
		margin: var(--spacing-s);
		border-radius: 12px;

		grid-column: 2/3;

		&[open] {

			border: var(--border-style);
			margin-bottom: var(--spacing-s);
			padding: var(--spacing-s);

			summary {

				&::before {
					content: "- ";
					color: var(--color-primary-action);
				}
			}
		}

		summary {
			list-style-type: "";
			max-width: 35rem;

			&::before {
				content: "+ ";
				color: var(--color-primary-action);
			}

			&:hover {
				cursor: pointer;
			}
		}

		summary::-webkit-details-marker {
			display: none;
		}
	}

}

footer {

	@media (width > 682px) {
		display: grid;
		grid-template-columns: 20rem 1fr;
	}

	@media (width > 1080px) {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	h2,
	p {
		@media (width > 682px) {
			grid-column: 2/3;
		}

	}

	ul {
		padding-inline: var(--spacing-s);
		grid-column: 2/3;

		@media (width > 682px) {

			display: flex;
			flex-wrap: wrap;
			gap: var(--spacing-s);
		}

		li {
			margin-block: var(--spacing-s);

		}
	}

	h3 {
		grid-column: 2/3;
	}
}

@keyframes --session-animation {
	0% {
		transform: translateY(60vh);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes --star-animation {
	0% {
		transform: rotate(0);
		opacity: 0;
	}

	 5% {
		opacity: 0.1;
	}

	100% {
		transform: rotate(1turn);
	}
}