/* ─── Main Content Grid ─── */

header h1 {
	max-inline-size: 100%;
}

header hgroup .subtitle {
	font-size: 1rem;
}

main {
	margin-inline: auto;
	max-inline-size: 1200px;
	section:first-of-type {
		h2 {
			padding-block: var(--space-md);
			text-align: center;
			font-family: var(--font);
			font-size: 1rem;
		}
	}

	ul.projects {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(0.5rem, 2vw, 1rem);

		li {
			display: flex;
			flex-direction: column;
			background-color: var(--color-surface);
			border-radius: var(--radius);
			border: var(--border-width) solid var(--color-border);
			cursor: pointer;
			position: relative;

			figure {
				margin: 0;
				padding: 0;
			}

			h2,
			p,
			a {
				padding-inline: 0.8rem;
			}

			h2 {
				font-size: var(--type-subheading-lg);
				font-weight: 600;
				margin: 0;
				font-family: var(--font);
				letter-spacing: 0.02em;
				padding-block-start: clamp(1rem, 4vw, 2rem);
			}

			a {
				padding-block-end: clamp(1rem, 4vw, 2rem);
				text-decoration: none;
				display: block;
			}

			p {
				margin: 0;
				padding-block: var(--space-sm);
				font-size: 1.1rem;
				max-inline-size: 100%;
			}

			figure {
				display: flex;
				gap: var(--space-sm);
				overflow: hidden;
				margin: 0;
				padding: var(--space-sm);
				border-radius: var(--radius);
				align-items: center;
				justify-content: center;

				img {
					flex: 1;
					object-fit: contain;
					max-inline-size: 100%;
					max-block-size: 22rem;
					inline-size: auto;
					block-size: auto;
				}
			}
		}
	}
}

/* ─── Tablet & Responsive ─── */

@media (width > 35.95rem) {
	main ul.projects {
		grid-template-columns: 1fr 1fr;
	}

	main li {
		padding: var(--space-md);
	}

	main li figure {
		padding: var(--space-md);
		margin-block-end: var(--space-sm);
	}
}

/* ─── Custom Cursor Blob ─── */

.cursor-blob {
	position: fixed;
	pointer-events: none;
	background: #111;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	padding: 10px 18px;
	border-radius: 100px;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 9999;
	letter-spacing: 0.01em;
}

.cursor-blob.visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}