/* ============================================================================
   07  PROJECT DETAIL PAGES

   The older single-project pages: greatwolf, exhibition, informalgamers,
   stickers, unmundolibre, oscarsballots2025. (bookmarkapp migrated in
   October 2026 and uses nothing in this file.)
   New case studies use the template in section 09 instead.
   ============================================================================ */

@layer pages {

/* The six remaining pages are closed off for launch (October 2026): no page
   links to them, they carry noindex, and they are out of sitemap.xml. They
   still build and still answer at their URLs. Their "My Work" grids link to
   one another, which only matters to someone who already has a URL. */

.projectDetailPage {
	color: var(--color-text-1);
	padding: calc(var(--nav-height) + var(--space-l)) 0 var(--space-2xl);
	background-color: var(--color-surface);

	/* body elements share .partialSiteWidth (see section 03) but on a
	   narrower measure */
	& h1, & h2, & h3, & p,
	.roleTagsContainer,
	.statsContainer,
	.scrollWithMaxWidth {
		width: 66%;
		max-width: 800px;

		@media only screen and (max-width: 767px) { width: 90%; }
	}
	.scrollWithMaxWidth {
		@media only screen and (max-width: 767px) {
			width: 100%;
			padding-left: 5%;
			padding-right: 5%;
		}
	}

	& h1 {
		font-size: var(--step-4);
		font-weight: 700;
	}
	& h2 {
		font-size: var(--step-2);
		font-weight: 400;
		font-style: italic;
		margin-bottom: 20px;
	}
	& h3 {
		font-size: var(--step-2);
		margin: 2em auto 1em;
		font-weight: 700;
		opacity: 0.8;
	}
	& p {
		font-size: var(--step-1);
		margin: 1em auto;
	}

	/* --- Role tags --- */
	.roleTagsContainer {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--space-xs);
		margin: 0.5em auto;
	}
	.roleTag {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		color: var(--color-text-2);
		background-color: var(--color-surface-2);
		text-align: center;
		font-size: var(--step--1);
		font-family: var(--font);
		font-style: normal;
		font-weight: 600;
		letter-spacing: var(--letter-spacing-loose);
		padding: var(--space-2xs) var(--space-s);
		border-radius: 100px;
		position: relative;
		width: max-content;
		flex-shrink: 0;

		&:not(.inactive) svg {
			fill: var(--color-text-2);
			width: 10px;
			flex-shrink: 0;
		}
		&.inactive {
			opacity: 0.5;
			font-weight: 500;

			& svg { display: none; }
		}
	}

	/* --- Stats --- */
	.statsContainer {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: var(--space-xs);
		align-items: center;
		justify-content: center;
	}
	.stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		background-color: var(--color-surface-2);
		color: var(--color-text-2);
		padding: var(--space-m) var(--space-l);
		border-radius: var(--radius-md);
		line-height: 1;
		align-self: stretch;

		@media only screen and (max-width: 767px) {
			padding: var(--space-m) var(--space-xs);
			flex: 1;
			min-width: 0;
		}

		& h4 {
			font-size: var(--step-5);
			font-weight: 800;
			margin: 0;

			@media only screen and (max-width: 767px) { font-size: var(--step-4); }
		}
		& span {
			font-size: var(--step-1);
			font-weight: 400;
			margin: 0;
			font-family: var(--font);
			text-align: center;

			@media only screen and (max-width: 767px) { font-size: var(--step-0); }
		}
	}

	/* --- Image blocks --- */
	.detailPopout {
		margin: 2em auto;
		max-width: 900px;
		width: 76%;
		text-align: center;
		position: relative;

		@media only screen and (max-width: 767px) { width: 93.75%; }

		&.withBackground {
			background: white;
			padding: var(--space-l);
			border-radius: var(--radius-md);
		}
		&.withHeading { margin: 1em auto 2em; }

		& img + img { margin-top: 1em; }

		.informalGamersLogo {
			max-width: 300px;
			background: white;
			padding: var(--space-l);
			border-radius: var(--radius-md);
		}
	}

	.rowImages {
		justify-content: space-between;
		display: flex;
		flex-wrap: nowrap;
		margin: 2em auto;
		max-width: 900px;
		width: 76%;
		text-align: center;

		@media only screen and (max-width: 767px) { width: 100%; }

		& div {
			padding: 5px;
			margin: auto;

			& img {
				margin: auto;
				display: block;
				border-radius: var(--radius-sm);
			}
		}
	}

	.scrollingCarousel {
		overflow-x: auto;
		padding: 0 3.125%;
		margin: 1em auto 2em;
		display: flex;
		flex-direction: row;
		gap: 1em;

		@media only screen and (min-width: 1025px) {
			padding: 20px;
			border: 1px solid var(--color-rule);
			border-radius: 28px;
			box-shadow: inset 0 2px 12px rgba(0, 0, 0, .1);
			background: var(--color-surface-2);
			max-width: 900px;
			width: 76%;
		}

		& img, & video {
			max-height: 480px;
			max-width: 480px;
			margin: auto;
		}

		/* phones fanned out at an angle */
		&.phoneScreenContent {
			padding: 5% 1% 46px 8%;
			margin: auto;
			gap: 0;

			@media only screen and (min-width: 1025px) {
				padding-top: 1em;
				padding-bottom: 46px;
				border: none;
				box-shadow: none;
				background: none;
				max-width: none;
				width: 100%;
			}

			& img, & video {
				border-radius: 28px;
				transform: rotate(-5deg);
				box-shadow: -12px 18px 24px rgba(0, 0, 0, 0.12);
			}
			& img + img, & video + video { margin-left: -2%; }
		}

		&.label img {
			max-width: 320px;
			border: 1px solid #eee;
		}
	}

	& video {
		box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.25);
		border: 1px solid #eee;
		border-radius: var(--radius-sm);
	}

	.pageStyling { border: 1px solid var(--color-rule); }

	.posterStyling {
		border: 10px solid black;
		box-shadow:
			-1px 1px 0px #333,
			-2px 2px 0px #333,
			-3px 3px 0px #333,
			-4px 4px 0px #333,
			-5px 5px 0px #333,
			-6px 6px 0px #333;
	}

	/* folded-corner effect */
	.threeDCorners::before,
	.threeDCorners::after {
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border: 3px solid #333;
	}
	.threeDCorners::before {
		border-left-color: transparent;
		border-top-color: transparent;
		top: 0;
		left: -6px;
	}
	.threeDCorners::after {
		border-right-color: transparent;
		border-bottom-color: transparent;
		right: 0;
		bottom: 0;
	}
}

/* The legacy main paints its own surface, exactly as .page does in 07-shell.
   It never did, and nothing noticed while <body> underneath it painted the
   same colour. The nav's ground is what made the gap visible: the bar
   measures the first full-width thing that paints, and .landingSection — the
   "more work" band at the foot of these pages — paints nothing, so the answer
   was coming from two elements further out than it should. Consistency with
   .page is reason enough on its own. */
main.detailPage { background: var(--color-surface); }

.detailPage .myWorkSection { padding-bottom: 126px; }

} /* @layer pages */