/* Page-level layout */
html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	padding: 0 1rem 1rem;
}

/* Layout for categories list + detail panel */
#list-display {
	display: flex;
	gap: 0.75rem;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

#list-display>#portfolio-list-box,
#list-display>#portfolio-detail {
	flex: 1 1 50%;
	min-width: 0;
	min-height: 0;
	overflow: auto;
	border: 1.5px solid var(--border);
	border-radius: 8px;
}

#list-display>#portfolio-list-box,
#list-display>#portfolio-detail {
	background: var(--panel);
}

#portfolio-list {
	margin: 0;
	padding: 0.8rem;
	list-style: none;
}

/* Grid style for portfolio entries */
#portfolio-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	align-items: start;
}

.grid-entry {
	background: transparent;
	padding: 0.6rem 0.8rem;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	cursor: pointer;

}

.entry-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.72rem;
	color: var(--muted);
	font-family: 'Nunito', sans-serif;
	font-style: italic;
	padding: 0;
}

.entry-time {
	font-variant-numeric: tabular-nums;
}

.draft {
	color: var(--muted);
	font-weight: 400;
	margin-left: 0.4rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.entry-title {
	font-weight: 700;
	color: var(--text);
	text-decoration: none;
	font-size: 1rem;
	letter-spacing: -0.01em;
	transition: color 0.15s;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.entry-title:hover,
.entry-title.active,
.grid-entry:hover .entry-title {
	color: var(--accent);
}

.entry-subtitle {
	color: var(--muted);
	font-size: 0.82rem;
	font-family: 'Nunito', sans-serif;
}

.grid-entry {
	background: var(--surface);
	padding: 0;
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	gap: 0;
	cursor: pointer;
	box-shadow: 2px 3px 0px rgba(240, 51, 151, 0.18);
	overflow: hidden;
	opacity: 0; /* GSAP owns this — animates in on load */
	/* transforms + hover handled by GSAP in animations.js */
}


.grid-entry:hover {
	box-shadow: 4px 6px 0px var(--accent);
	z-index: 10;
}

/* thumbnail — small, inline, pixelated */
.entry-thumb {
	width: 56px;
	height: auto;
	object-fit: fill;
	flex-shrink: 0;
	align-self: stretch;
	border-right: 1px solid var(--border);
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* card text area */
.entry-body {
	padding: 0.4rem 0.6rem 0.5rem;
	min-width: 0;
	flex: 1;
}

li::marker {
	content: none;
}

/* ===== filter tabs (all / tech / art / brand) ===== */
#portfolio-list-box>nav {
	display: flex;
	gap: 1rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--border);
}

#portfolio-list-box>nav a {
	font-family: 'Nunito', sans-serif;
	font-size: 0.78rem;
	text-decoration: none;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	transition: color 0.15s, background 0.15s;
	/* default: muted, unpicked state */
	color: var(--muted);
	background: transparent;
}

#portfolio-list-box>nav a[href="/"]:hover,
#portfolio-list-box>nav a[href="/"] {
	color: var(--accent);
	background: rgba(240, 51, 151, 0.1);
}

#portfolio-list-box>nav a[href="/tech/"] {
	color: var(--cat-tech);
	background: rgba(74, 144, 217, 0.1);
}

#portfolio-list-box>nav a[href="/art/"] {
	color: var(--cat-art);
	background: rgba(217, 74, 160, 0.1);
}

#portfolio-list-box>nav a[href="/brand/"] {
	color: var(--cat-brand);
	background: rgba(232, 136, 26, 0.1);
}

#portfolio-list-box>nav a:hover {
	filter: brightness(1.1);
}

/* ===== detail panel placeholder ===== */
.detail-placeholder {
	color: var(--muted);
	font-family: 'Nunito', sans-serif;
	font-size: 0.82rem;
	padding: 1.5rem;
}



/* Stack columns on small screens and allow normal page scrolling */
@media (max-width: 800px) {

	/* undo the locked-viewport body/main so the page can scroll normally */
	body {
		height: auto;
		overflow: visible;
	}

	main {
		overflow: visible;
	}

	#list-display {
		flex-direction: column;
		max-height: none;
		overflow: visible;
	}

	#list-display>#portfolio-list-box,
	#list-display>#portfolio-detail {
		flex: none;
		width: 100%;
		max-height: none;
		overflow: visible;
	}

	/* hide inline detail on narrow screens — links navigate to artifact pages instead */
	#portfolio-detail {
		display: none;
	}
}

#portfolio-detail {
	padding: 0 0.8rem;
}

/* Ensure images, pictures, videos and iframes inside the detail panel
   never overflow their containing segment and stay responsive. */
#portfolio-detail img,
#portfolio-detail picture,
#portfolio-detail video,
#portfolio-detail iframe,
#portfolio-detail figure,
#portfolio-detail picture img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Make iframes (YouTube embeds) scale responsively with an intrinsic ratio. */
#portfolio-detail iframe {
	width: 100%;
	aspect-ratio: 16/9;
	max-width: 100%;
	border: none;
}

/* Generic wrapper safety for embed containers */
#portfolio-detail .video-wrapper {
	width: 100%;
	max-width: 100%;
}