/*
 * Category pages (sports, news, microdrama). Tokens and components come from
 * tokens.css and site.css; section layouts shared with the homepage come from
 * home.css. Only what these pages add lives here.
 */

/* Hero: copy beside a real-output 3D scene */
.page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-7);
	align-items: center;
}
/* the headline lives in the copy column, so it steps down from --t-hero */
.page-hero .hero__title {
	font-size: var(--t-h1);
}
.page-hero .hero__copy .lead {
	font-size: 1.125rem;
	max-width: 32em;
}
.page-hero .phones {
	padding-top: 0;
}

/* Pairs: a 16:9 source and its 9:16 beside it, the same seconds, same height */
.pairs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-7) var(--s-6);
}
.pair {
	margin: 0;
	display: grid;
	align-content: start;
	gap: var(--s-3);
}
.pair__screens {
	display: grid;
	grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
	gap: var(--s-3);
	align-items: end;
}
.pair__wide {
	aspect-ratio: 16 / 9;
}
.pair__tall {
	aspect-ratio: 9 / 16;
}
.pair .monitor__label {
	top: 10px;
	left: 10px;
	padding: 3px 6px;
	font-size: 9.5px;
}
.pair .monitor__marks {
	inset: 6px;
	--len: 10px;
}
.pair--feature .pair__screens {
	grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
}

/* Stills: scenes from one episode, 9:16 like everything microdrama */
.stills {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-4);
	max-width: 960px;
}
.still {
	margin: 0;
	aspect-ratio: 9 / 16;
}

/* A full-page product screenshot: copy on top, the shot across the whole container so its text stays legible */
.feature--shot .feature__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-7);
}
.feature--shot .feature__copy {
	max-width: 46rem;
}
/* the source is named in a caption under the shot: a label inside would sit on its posters */
.shot {
	margin: 0;
	display: grid;
	gap: var(--s-3);
}
.shot > .monitor {
	aspect-ratio: 1512 / 747;
}

@media (max-width: 960px) {
	.page-hero__grid,
	.pairs,
	.feature--shot .feature__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.stills {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pair .monitor__label {
		top: 6px;
		left: 6px;
		font-size: 8px;
	}
}