/*
	custom.css — additions to the Massively template for Ethan's portfolio.
	Kept separate from main.css so the template can be updated without losing changes.
*/

/* ---------- About Me ---------- */

	#main .about .image.left {
		max-width: 12rem;
		margin: 0 2rem 1rem 0;
	}

	#main .about::after {
		content: "";
		display: block;
		clear: both;
	}

/* ---------- Project write-ups ---------- */

	#main .project .summary {
		margin-top: 2rem;
	}

	#main .project .summary p {
		margin-bottom: 1rem;
	}

	#main .project .tags {
		list-style: none;
		padding: 0;
		margin: 0 0 2rem 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	#main .project .tags li {
		padding: 0.15rem 0.75rem;
		border: solid 2px #eeeeee;
		border-radius: 2rem;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.05rem;
		color: #212931;
	}

/* ---------- Image carousel ----------
	Without JavaScript every slide is shown stacked (still readable).
	carousel.js adds .is-ready, which turns it into a one-at-a-time slider. */

	.carousel {
		position: relative;
		margin: 0 0 2rem 0;
	}

	.carousel .slide {
		margin: 0 0 2rem 0;
	}

	.carousel .slide a {
		display: block;
		border-bottom: 0;
		background: #f5f5f5;
	}

	.carousel .slide img {
		display: block;
		width: 100%;
		height: auto;
	}

	.carousel .slide figcaption {
		padding: 1rem 0 0 0;
		font-size: 0.9rem;
		line-height: 1.6;
		color: #717981;
	}

	.carousel .slide figcaption strong {
		display: block;
		color: #212931;
		margin-bottom: 0.25rem;
	}

	/* Slider mode */

	.carousel.is-ready .slide {
		display: none;
		margin: 0;
	}

	.carousel.is-ready .slide.is-active {
		display: block;
	}

	.carousel.is-ready .slide a {
		aspect-ratio: 4 / 3;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.carousel.is-ready .slide img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.carousel .controls {
		display: none;
	}

	.carousel.is-ready .controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		margin-top: 1rem;
	}

	#main .carousel .controls button {
		box-shadow: inset 0 0 0 2px #212931;
		background: transparent;
		color: #212931 !important;
		height: 2.5rem;
		line-height: 2.5rem;
		width: 2.5rem;
		padding: 0;
		font-size: 1rem;
		letter-spacing: 0;
		border-radius: 50%;
	}

	#main .carousel .controls button:hover {
		box-shadow: inset 0 0 0 2px #18bfef;
		color: #18bfef !important;
	}

	#main .carousel .controls button:focus-visible {
		outline: 2px solid #18bfef;
		outline-offset: 2px;
	}

	.carousel .counter {
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.075rem;
		color: #717981;
		min-width: 4rem;
		text-align: center;
	}

/* ---------- Footer: resume button ---------- */

	#footer .split.contact .resume .button {
		margin-top: 0.5rem;
	}

	@media (prefers-reduced-motion: reduce) {
		* {
			scroll-behavior: auto !important;
		}
	}