/* ===================== DESIGN TOKENS ===================== */
:root {
	--background: #F0EFEC;
	--text: #121212;

	--accent-pdf: #111414;
	--accent-link: #2d4a3e;

	--accent-video: #1f2b26;

	--media-border: 0.5rem solid var(--background);
	--embed-scale: 1.35;

	--body-copy: 1.25rem;
	--small-copy: 1rem;
	--h2-copy: calc(var(--body-copy) * 1.5);
	--h3-copy: var(--body-copy);
	--font-body: "Syne", "Helvetica", sans-serif;
	--font-heading: "Bokor", serif;

	--gutter: calc(var(--body-copy) * 1.5);
	--padding-1: 1rem;
	--padding-2: 2rem;

	scroll-behavior: smooth;
}

/* ===================== BASE ===================== */
body {
	font-family: var(--font-body);
	background: var(--text);
	color: var(--background);
	font-size: 1rem;

	a {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 0.25rem;
	}
}

body.modal-open {
	overflow: hidden;
}

/* ===================== HEADER ===================== */
header {
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	border-bottom: 0.2rem solid var(--background);

	#logo,
	#channel-link {
		fill: var(--background);
		width: auto;
		height: 2rem;
	}
}

/* ===================== NAV ===================== */
#navigation {
	position: sticky;
	top: 0;
	z-index: 1000;

	padding: 1rem;
	margin-bottom: 2rem;
	background: var(--text);
	border-top: 0.2rem solid var(--background);
	border-bottom: 0.2rem solid var(--background);

	.filter-buttons {
		display: flex;
		justify-content: space-between;
		gap: 2rem;
	}

	button {
		flex: 1;
		cursor: pointer;

		font-family: var(--font-body);
		font-size: 1rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-align: center;

		padding: 0.45rem 0.75rem;
		border-radius: 10rem;
		border: 0.1rem solid var(--background);
		background: transparent;
		color: var(--background);
		transition: background 0.2s ease, color 0.2s ease;
	}

	button.active {
		background: var(--background);
		color: var(--text);
	}

	#filter-options li.is-selected {
		background: var(--background);
		color: var(--text);
	}
}



#filter-select {
	display: none;
}

/* Mobile */
@media (width <=768px) {
	.filter-buttons {
		display: none;
	}

	#filter-select {
		display: block;
		width: 100%;
	}
}

#filter-selected {
	border: 0.1rem solid var(--background);
	border-radius: 10rem;
	padding: 0.6rem 0.9rem;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s ease;
}

#filter-options {
	display: none;
	margin-top: 0.5rem;
	border: 0.1rem solid var(--background);
	border-radius: 1rem;
	overflow: hidden;
}

#filter-options li {
	padding: 0.8rem 1rem;
	cursor: pointer;

	.is-selected {
		background: var(--background);
		color: var(--text);
	}
}


/* ===================== TITLE ===================== */
hgroup {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

	h1 {
		margin-top: 8rem;
		padding-bottom: 10rem;
		font-family: var(--font-heading);
		font-size: 5rem;
		letter-spacing: 0.01em;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
	}
}

/* ===================== GRID ===================== */
.blocks {
	padding: 2rem 0;

	ul {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 0 0.5rem;
	}

	li {
		height: 90vh;
	}

	li.clickable {
		cursor: pointer;
	}

	li:nth-child(2n+1):hover {
		transform: rotate(-5deg);
	}
}

/* Card frame */
.blocks li {
	border: var(--media-border);
	border-radius: 1.25rem;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;

	&:hover,
	&.highlight {
		/* Mobile uses `.highlight` (IntersectionObserver), desktop uses `:hover` */
		transform: rotate(5deg) scale(0.8);
		border-color: color-mix(in srgb, var(--background) 85%, transparent);
	}

	&:nth-child(2n+1):hover,
	&:nth-child(2n+1).highlight {
		transform: rotate(-5deg) scale(0.8);
	}

	&:active {
		transform: translateY(0);
	}

	&:focus-visible {
		outline: 0.2rem solid color-mix(in srgb, var(--background) 70%, transparent);
		outline-offset: 0.25rem;
	}
}

/* ===================== MEDIA STUFF ===================== */
.media-frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.media-fill {
	width: 100%;
	height: 100%;
	display: block;
}

:is(img, video).media-fill {
	object-fit: cover;
	object-position: center;
}

#channel-blocks .media-frame.embed-wrapper {
	position: relative;
	overflow: hidden;
}

#channel-blocks .embed-wrapper .media-fill:is(iframe, video) {
	position: absolute;
	inset: 0;
	margin: auto;
	transform: scale(var(--embed-scale));
	border: 0;
}

/* ===================== AUDIO TILE ===================== */
.audio-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;

	background: var(--accent-pdf);
	color: var(--background);
	text-align: center;
	padding: 2rem;

	.audio-icon {
		font-size: 3rem;
		opacity: 0.4;
	}

	.audio-title {
		font-size: 1rem;
		font-weight: 600;
	}

	.audio-sub {
		font-size: 0.7rem;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		opacity: 0.45;
	}
}

/* ===================== TEXT TILE ===================== */
.text-block {
	.text-content {
		height: 100%;
		padding: 1.5rem;
		display: flex;
		align-items: flex-start;

		p {
			padding-top: 4rem;
			text-align: center;
			font-size: 1rem;
			line-height: 2;
		}
	}
}

.media-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	font-size: 0.85rem;
	opacity: 0.5;
}

/* ===================== FOOTER + ABOUT ===================== */
footer {
	font-size: var(--small-copy);
	margin: 1rem 1rem 2rem;
	display: flex;
	flex-direction: column;
}

.description {
	margin: 5rem auto 8rem;
	padding: 0 1rem;
	max-width: 60ch;
	text-align: center;

	h2 {
		font-family: var(--font-heading);
		font-size: var(--h2-copy);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	a:hover {
		text-decoration: underline;
	}

	.curate-tag {
		padding-top: 1rem;
	}
}

/* ===================== PDF + VIDEO PREVIEWS ===================== */

.pdf-preview {
	position: relative;

	::after {
		content: 'PDF';
		position: absolute;
		bottom: 0.75rem;
		left: 0.75rem;

		font-size: 0.6rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;

		color: var(--background);
		background: rgba(0, 0, 0, 0.55);
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		pointer-events: none;
	}
}

.media-type-tile {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem;
	text-align: center;
	color: var(--background);
}

.media-type-label {
	font-size: 0.6rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	opacity: 0.65;
	border: 0.08rem solid var(--accent-pdf);
	padding: 0.3rem 0.65rem;
	border-radius: 4px;
}

.media-type-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	line-height: 1.25;
}

.pdf-tile {
	background: var(--accent-pdf);
}

.video-tile {
	background: var(--accent-video);
}

/* ===================== MODAL ===================== */
#dialog {
	position: fixed;
	inset: 0;
	margin: auto;

	width: min(560px, 92vw);
	max-height: 90vh;
	padding: 0;

	display: none;
	flex-direction: column;
	overflow: hidden;

	background: var(--background);
	color: var(--text);
	font-family: var(--font-body);
	border-radius: 1.5rem;

	border: var(--media-border);

	transform: scale(0.95) translateY(1rem);
	opacity: 0;
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.25s ease;

	&[open] {
		display: flex;
		transform: none;
		opacity: 1;
	}

	&::backdrop {
		background: rgba(18, 18, 18, 0.55);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}

	.dialog-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 10;

		width: 2rem;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;

		background: transparent;
		border: 0;
		color: var(--text);
		cursor: pointer;
		opacity: 0.5;
		transition: opacity 0.15s ease;

		svg {
			display: block;
		}

		&:hover {
			opacity: 1;
		}
	}

	.dialog-meta {
		flex: 1 1 auto;
		min-height: 0;
		overflow: auto;

		padding: 1.75rem 1.75rem 1.25rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.dialog-title {
		font-family: var(--font-heading);
		font-size: 1.6rem;
		letter-spacing: 0.01em;
		line-height: 1.2;
		padding-right: 2rem;
	}

	.dialog-extra-meta {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		padding-bottom: 0.25rem;
	}

	.dialog-meta-row {
		display: flex;
		align-items: baseline;
		gap: 0.5rem;
		font-size: 0.72rem;
		line-height: 1.5;

		.dialog-section-label {
			font-family: var(--font-heading);
			font-size: 0.8rem;
			min-width: 7rem;
			flex-shrink: 0;
		}

		.dialog-meta-value {
			font-size: 0.8rem;
			text-align: right;
			overflow-wrap: break-word;

			a {
				color: inherit;
				text-decoration: underline;
				text-underline-offset: 0.2rem;
			}
		}
	}

	.dialog-description {
		font-size: 0.875rem;
		line-height: 1.65;
		opacity: 0.75;
	}

	.dialog-actions {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
		padding-top: 0.25rem;
	}

	.dialog-source,
	.dialog-arena-link {
		flex: 1;
		display: inline-block;

		font-size: 0.9rem;
		text-transform: uppercase;
		text-decoration: none;
		text-align: center;
		background-color: var(--text);
		color: var(--background);


		padding: 0.6rem 1rem;
		border-radius: 10rem;


		transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

		:hover {
			background: var(--text);
			color: var(--background);
			border-color: var(--text);
		}
	}

	.dialog-source[hidden] {
		display: none;
	}

	.dialog-media {
		flex: 0 0 auto;
		overflow: hidden;
		border-radius: 0 0 1.5rem 1.5rem;


		:is(img, video, iframe) {
			display: block;
			width: 100%;
			border: 0;
		}

		img,
		video {
			max-height: 60vh;
		}

		video {
			object-fit: cover;
		}

		img {
			object-fit: cover;
			object-position: center;
		}
	}

	.dialog-media {
		height: 55vh;

		:is(video, iframe) {
			height: 100%;
			max-height: none;
		}
	}


	.pdf-open-link {
		display: block;
		text-align: center;
		padding: 0.6rem;
		font-size: 0.7rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		background: var(--background);
		color: var(--text);
		text-decoration: none;
		border-top: 0.08rem solid color-mix(in srgb, var(--text) 15%, transparent);
	}
}





/* ===================== BREAKPOINTS ===================== */

@media (width > 768px) {
	body {
		font-size: 1.5rem;
	}

	.blocks {
		padding: 2rem;

		ul {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	hgroup h1 {
		font-size: 10rem;
	}

	footer {
		margin-left: 2rem;
		margin-right: 2rem;

		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

@media (width > 1200px) {
	body {
		font-size: 1.5rem;
		font-kerning: normal;
	}

	hgroup h1 {
		font-size: 18rem;
	}

	.text-block .text-content {
		padding: 2.5rem;

		p {
			font-size: 1.2rem;
			line-height: 2rem;
		}
	}
}

/* =
	 ======================================================================= */

/* --- NAV: show ONE system at a time --- */
#navigation .filter-buttons {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}

#navigation #filter-select {
	display: none;
	width: 100%;
}

/* Mobile: hide buttons, show custom dropdown */
@media (max-width: 768px) {
	#navigation .filter-buttons {
		display: none !important;
	}

	#navigation #filter-select {
		display: block !important;
	}
}

/* Desktop: show buttons, hide custom dropdown */
@media (min-width: 769px) {
	#navigation .filter-buttons {
		display: flex !important;
	}

	#navigation #filter-select {
		display: none !important;
	}
}

/* Custom dropdown: open state */
#filter-options {
	display: none;
}

#filter-select.is-open #filter-options {
	display: block;
}

#filter-options li.is-selected {
	background: var(--background);
	color: var(--text);
}