/* r00t shared photo gallery + lightbox
   Progressive enhancement: pages keep working with JS off. */

/* ---- page background ---- */
/* path is relative to this stylesheet (archive/gallery.css) */
body.r00t-bg {
	background-color: #000;
	background-image:
		linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.88) 45%, rgba(0,0,0,.96) 100%),
		url(../images/archive-background.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left center, left center;
	background-size: cover, auto 100vh;
	background-attachment: fixed, fixed;
}
@media (max-width: 700px) {
	/* on phones the figure would sit under the centered content, so fade it back */
	body.r00t-bg {
		background-image:
			linear-gradient(to right, rgba(0,0,0,.7) 0%, rgba(0,0,0,.92) 100%),
			url(../images/archive-background.png);
		background-position: center, left top;
		background-size: cover, cover;
	}
}

/* ---- page title ---- */
.r00t-title { color: #7C7C7C; }

/* ---- archive hub: event cards + clickable preview ---- */
.r00t-preview {
	display: inline-block;
	line-height: 0;
	margin: 8px auto 4px;
}
.r00t-preview img {
	max-width: 400px;
	width: 80vw;
	height: auto;
	border: 3px solid #575757;
	border-radius: 6px;
	box-shadow: 0 0 20px #222;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.r00t-preview:hover img { border-color: #aaa; box-shadow: 0 0 28px #000; }

/* one big terminal window showing an `ls -al` directory listing */
.r00t-term {
	max-width: 780px;
	margin: 24px auto;
	padding: 16px 20px 18px;
	text-align: left;
	background:
		repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,50,0,.12) 2px 3px),
		#020402;
	border: 1px solid #1c5c2c;
	border-radius: 6px;
	box-shadow: 0 0 16px rgba(0,255,80,.13), inset 0 0 34px rgba(0,255,80,.04);
}
.r00t-ls {
	margin: 0;
	font: 13px/1.55 "Courier New", Courier, monospace;
	color: #4f4;
	text-shadow: 0 0 4px rgba(60,255,60,.25);
	white-space: pre;
	overflow-x: auto;
}
.r00t-ls .p { color: #6f6; }                 /* user prompt */
.r00t-ls .t { color: #2a7a2a; }              /* dim tool output */
.r00t-ls .ok { color: #7fff7f; font-weight: bold; text-shadow: 0 0 8px rgba(120,255,120,.7); } /* got root */
.r00t-ls .root { color: #ff5555; font-weight: bold; text-shadow: 0 0 7px rgba(255,70,70,.6); }  /* root shell prompt */
.r00t-ls a {                                  /* clickable directories */
	color: #7f7;
	font-weight: bold;
	text-decoration: none;
}
.r00t-ls a:hover { background: #2f2; color: #020402; text-shadow: none; }
.r00t-ls .cur {                               /* blinking prompt cursor */
	animation: r00t-blink 1.1s steps(1) infinite;
}
@keyframes r00t-blink { 50% { opacity: 0; } }

@media (max-width: 700px) {
	.r00t-term { margin: 16px 8px; padding: 12px; }
	.r00t-ls { font-size: 11px; line-height: 1.5; }
}

/* ---- event landing menu ---- */
.r00t-menu {
	list-style: none;
	padding: 0;
	margin: 24px auto;
}
.r00t-menu li { margin: 12px 0; }
.r00t-menu a {
	color: #7C7C7C;
	font: 16px/1 monospace;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .15s ease;
}
.r00t-menu a:hover { color: #fff; }

/* ---- back link ---- */
.r00t-back {
	display: inline-block;
	margin-top: 18px;
	color: #7C7C7C;
	font: 13px/1 monospace;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .15s ease;
}
.r00t-back:hover { color: #fff; }

/* ---- viewer: big centered image + scrollable filmstrip on the right ---- */
.r00t-viewer {
	display: flex;
	gap: 16px;
	align-items: stretch;
	max-width: 1200px;
	height: 76vh;
	margin: 0 auto;
	padding: 0 14px;
}
.r00t-stage {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.r00t-main {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: 3px solid #575757;
	border-radius: 6px;
	box-shadow: 0 0 30px #000;
	background: #000;
	cursor: zoom-in;
}
.r00t-film {
	flex: 0 0 158px;
	width: 158px;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 6px;
	scrollbar-color: #444 #111;       /* firefox */
	scrollbar-width: thin;
}
.r00t-film img {
	width: 100%;
	height: 104px;
	object-fit: cover;
	border: 2px solid #575757;
	border-radius: 4px;
	background: #111;
	cursor: pointer;
	opacity: .65;
	transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.r00t-film img:hover { opacity: 1; transform: scale(1.03); }
.r00t-film img.active {
	opacity: 1;
	border-color: #fff;
	box-shadow: 0 0 12px #000;
}
.r00t-film::-webkit-scrollbar { width: 8px; }
.r00t-film::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.r00t-film::-webkit-scrollbar-track { background: #111; }

@media (max-width: 700px) {
	/* stack: stage on top, filmstrip becomes a horizontal scroller below */
	.r00t-viewer { flex-direction: column; height: auto; }
	.r00t-stage { height: 56vh; }
	.r00t-film {
		flex: 0 0 auto;
		width: auto;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 6px 0 0;
	}
	.r00t-film img { flex: 0 0 100px; width: 100px; height: 76px; }
}

/* ---- featured / group photo ---- */
.r00t-hero {
	display: inline-block;
	line-height: 0;
	max-width: 720px;
	width: 90%;
	margin: 0 auto;
}
.r00t-hero img {
	width: 100%;
	height: auto;
	border: 3px solid #575757;
	border-radius: 6px;
	box-shadow: 0 0 28px #000;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.r00t-hero:hover img { border-color: #aaa; box-shadow: 0 0 34px #111; }

/* ---- thumbnail grid ---- */
.r00t-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 12px;
}
.r00t-grid a { line-height: 0; }
.r00t-grid img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border: 2px solid #575757;
	border-radius: 4px;
	background: #111;
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.r00t-grid a:hover img {
	transform: scale(1.04);
	border-color: #aaa;
	box-shadow: 0 0 18px #000;
}

/* ---- lightbox overlay ---- */
.r00t-lb {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.94);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	-webkit-user-select: none;
	user-select: none;
}
.r00t-lb.open { display: flex; }
.r00t-lb img.r00t-lb-img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	box-shadow: 0 0 40px #000;
	border: 1px solid #333;
}
.r00t-lb-cap {
	position: absolute;
	bottom: 14px;
	left: 0; right: 0;
	text-align: center;
	color: #ccc;
	font: 13px/1.4 monospace;
	text-shadow: 0 1px 3px #000;
	pointer-events: none;
	padding: 0 12px;
}
.r00t-lb-cap .r00t-lb-count { color: #777; }

/* controls */
.r00t-lb-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(20,20,20,.6);
	color: #fff;
	border: 1px solid #444;
	border-radius: 6px;
	font-size: 28px;
	line-height: 1;
	width: 52px;
	height: 64px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.r00t-lb-btn:hover { background: rgba(60,60,60,.85); border-color: #888; }
.r00t-lb-prev { left: 14px; }
.r00t-lb-next { right: 14px; }
.r00t-lb-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: rgba(20,20,20,.6);
	color: #fff;
	border: 1px solid #444;
	border-radius: 6px;
	font-size: 22px;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
.r00t-lb-close:hover { background: rgba(60,60,60,.85); border-color: #888; }

@media (max-width: 600px) {
	.r00t-grid img { width: 44vw; height: 44vw; }
	.r00t-lb-btn { width: 40px; height: 54px; font-size: 22px; }
}