/*
 * templates.css — the front page, the tiles, a project, About, archives.
 *
 * Read off the old site's templates and measured in the as-live copy at
 * each band (C:\Dev\wp-joemorgan\inventory\measure). Where live's numbers
 * differ between templates for the same thing — the space after the
 * scissors, chiefly — the difference is kept, and said so.
 */

/* --- Vimeo background loops (assets/js/video.js) --- */

/*
 * A box the size of its host with the player covering it, as the old
 * site's background video did: centred, cropped, never letterboxed.
 */
.jm-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
	pointer-events: none;
}

.jm-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	border: 0;
	transform: translate(-50%, -50%);
}

/* --- The showreel --- */

/*
 * A letterbox, 384:161 (the old site's sizing of the 16:9 loop), at the
 * page's side padding with 50px under it; edge to edge from 1024px, and
 * never shorter than 30% of the screen there.
 */
.jm-hero {
	padding: 0 var(--jm-pad) 50px;
}

.jm-hero__frame {
	position: relative;
	overflow: hidden;
	/* An explicit width, or the 30vh floor below turns into a minimum width
	   through the aspect ratio and the frame overflows a phone. */
	width: 100%;
	aspect-ratio: 384 / 161;
	background: var(--wp--preset--color--foreground);
}

.jm-hero__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jm-hero__frame .jm-video {
	opacity: 0;
	transition: opacity 0.3s;
}

.jm-hero__frame.is-playing .jm-video {
	opacity: 1;
}

@media (max-width: 1024px) {
	.jm-hero {
		padding: 0 0 30px;
	}

	.jm-hero__frame {
		min-height: 30vh;
	}
}

@media (max-width: 767px) {
	.jm-hero {
		padding-bottom: 20px;
	}
}

/* --- Bands: a titled section of the page --- */

.jm-band {
	padding: 50px var(--jm-pad) 75px;
}

.jm-band__title {
	margin: 0 0 50px;
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: 2px;
}

@media (max-width: 1024px) {
	.jm-band {
		padding-bottom: 50px;
	}
}

/*
 * Editing: the title has 25px under it and the strip, copy and grid sit
 * 20px apart (the old site's default gap).
 */
.jm-band--editing .jm-band__title {
	margin-bottom: 45px;
}

.jm-band--editing .carousel {
	margin-bottom: 20px;
}

/*
 * Joe's Studio: half the width on a desktop, 25px short from 1200px, full
 * width from 1024px. Its paragraphs keep their 20px inside it (flow-root),
 * as the old site's text block did, and the grid is 20px below that.
 */
.jm-studio {
	display: flow-root;
	margin-bottom: 20px;
	padding-right: 50%;
}

.jm-studio p {
	margin: 0 0 20px;
}

@media (max-width: 1200px) {
	.jm-studio {
		padding-right: 25px;
	}
}

@media (max-width: 1024px) {
	.jm-studio {
		padding-right: 0;
	}
}

/*
 * A project's "More Work" follows the scissors more closely than the
 * front page's bands do (live's template had its own spacing there), and
 * has 50px under its grid rather than 75.
 */
.jm-band--more {
	padding-top: 43px;
	padding-bottom: 50px;
}

@media (max-width: 1024px) {
	.jm-band--more {
		padding-top: 23px;
	}
}

@media (max-width: 767px) {
	.jm-band--more {
		padding-top: 44px;
	}

	.jm-band--more .jm-band__title {
		margin-bottom: 30px;
	}
}

/* More Work keeps three across down to 1025px: live's grid there had no
   1200px setting of its own. */
@media (min-width: 1025px) {
	.jm-band--more .jm-grid {
		--jm-cols: 3;
	}
}

/* An archive's name: Totally 40px, 3px apart, 25px under it. */
.jm-archive-title {
	margin-bottom: 75px;
	font-size: var(--wp--preset--font-size--3-xl);
	letter-spacing: 3px;
}

/* --- The project grid --- */

.jm-grid {
	display: grid;
	grid-template-columns: repeat(var(--jm-cols), minmax(0, 1fr));
	gap: var(--jm-gap);
}

@media (max-width: 1200px) and (min-width: 1025px) {
	.jm-grid {
		gap: 50px;
	}
}

/*
 * A tile: 16:9, black, the still over the loop, the title over both in
 * white and centred (Will, 2026-10-06 — live left-set it above 1200px,
 * which left a wrapped title flush left in the tile). Hovering fades the
 * title and, once the loop plays, the still. A long title in a narrow
 * tile makes the tile taller, as on live, so nothing here clips it; the
 * video box crops itself.
 */
.jm-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: var(--jm-pad);
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.jm-tile__still {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}

.jm-tile__title {
	position: relative;
	z-index: 2;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: 2px;
	text-align: center;
	transition: color 0.3s;
}

.jm-tile:hover .jm-tile__title,
.jm-tile:focus-visible .jm-tile__title {
	color: transparent;
}

.jm-tile:not([data-jm-video]):hover .jm-tile__still,
.jm-tile:not([data-jm-video]):focus-visible .jm-tile__still,
.jm-tile.is-playing:hover .jm-tile__still,
.jm-tile.is-playing:focus-visible .jm-tile__still {
	opacity: 0;
}

@media (max-width: 1024px) {
	.jm-tile {
		padding: 30px;
	}
}

@media (max-width: 767px) {
	.jm-tile {
		padding: 20px;
	}
}

/* --- Selected Credits → --- */

.jm-credits-link {
	padding: 10px var(--jm-pad) 50px;
}

.jm-credits-link p {
	margin: 0;
}

/*
 * From 1024px down live's band is 50px deeper: it held an empty second
 * column that wrapped under the link, a 50px gap above nothing.
 */
@media (max-width: 1024px) {
	.jm-credits-link {
		padding-top: 15px;
		padding-bottom: 80px;
	}
}

@media (max-width: 767px) {
	.jm-credits-link {
		padding-top: 20px;
		padding-bottom: 70px;
	}
}

/* --- A project --- */

/*
 * The film two thirds, the text a third, 50px between, foot-aligned. The
 * shares are of the row less the gap, as the old site's flex shrink left
 * them (834 and 411 at 1440). From 1024px the film runs edge to edge and
 * the text follows it.
 */
.jm-project__row {
	display: flex;
	gap: 50px;
	padding: 0 var(--jm-pad) 50px;
}

.jm-project__media {
	flex: 0 0 calc((100% - 50px) * 0.67);
	min-width: 0;
}

.jm-project__text {
	display: flex;
	flex: 0 0 calc((100% - 50px) * 0.33);
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}

.jm-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--foreground);
}

.jm-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.jm-project__title {
	padding: 50px 25px 25px 0;
}

.jm-project__client {
	margin: 0;
	padding: 0 50px 20px 0;
	color: var(--wp--preset--color--accent);
	font-style: italic;
}

.jm-project__content,
.jm-project__credits {
	padding-right: 25%;
}

.jm-project__credits {
	margin: 0;
}

/*
 * Live's stills sat 11px deep in the old site's carousel on a desktop (from
 * 1024px the extra overflowed and took no room); and from 1024px the row's
 * empty text column wrapped under them, a 50px gap above nothing.
 */
@media (min-width: 1025px) {
	.jm-project__row--stills .carousel {
		padding-bottom: 11px;
	}
}

@media (max-width: 1024px) {
	.jm-project__row {
		flex-wrap: wrap;
		padding: 0 0 30px;
	}

	.jm-project__row--stills {
		padding-bottom: 80px;
	}

	.jm-project__media,
	.jm-project__text {
		flex-basis: 100%;
	}

	.jm-project__text {
		justify-content: flex-start;
		padding: 0 var(--jm-pad);
	}

	.jm-project__title {
		padding: 0 0 25px;
	}

	/* The text goes full width; the credit line keeps its quarter short,
	   as live's did at every width. */
	.jm-project__content {
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.jm-project__row {
		padding-bottom: 20px;
	}

	/* On a phone live's credit line ran full width with a blank line's
	   space under it (the old site's credit-line block). */
	.jm-project__credits {
		padding-right: 0;
		padding-bottom: 27px;
	}

	.jm-project__row--stills {
		padding-bottom: 70px;
	}
}

/* --- About --- */

/*
 * The portrait two thirds and the introduction a third, as a project's
 * film and text; from 1200px both full width, stacked, 50px apart.
 */
.jm-about {
	display: flex;
	gap: 50px;
	padding: 0 var(--jm-pad) 50px;
}

.jm-about__portrait {
	flex: 0 0 calc((100% - 50px) * 0.67);
	min-width: 0;
	padding-bottom: 25px;
}

.jm-about__image {
	width: 100%;
}

.jm-about__intro {
	display: flex;
	flex: 0 0 calc((100% - 50px) * 0.33);
	flex-direction: column;
	gap: 25px;
	min-width: 0;
}

/*
 * The text takes any height the column has to spare (the old site's
 * "grow"), so on a screen wide enough for the portrait to outgrow the
 * column — above about 2,000px — Contact and the icons drop to finish
 * level with the portrait's foot. Below that, and once the column stacks
 * at 1200px, there is nothing to spare and nothing moves.
 */
.jm-about__text {
	flex-grow: 1;
	padding-right: 25%;
}

.jm-about__heading {
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: 2px;
}

.jm-social {
	display: flex;
	gap: 25px;
	margin: 0;
	padding: 0 0 25px;
	list-style: none;
}

.jm-social a {
	display: block;
	color: var(--wp--preset--color--foreground);
	line-height: 0;
}

.jm-icon {
	width: 20px;
	height: 20px;
}

/*
 * The record: Recent Credits, Training & Skills, Awards & Exhibitions in
 * three equal columns, each title 25px down and 20px over its list, the
 * lists a quarter short of their column.
 */
.jm-record {
	display: flex;
	gap: 50px;
	padding: 47px var(--jm-pad) 50px;
}

.jm-record__column {
	flex: 1 1 0;
	min-width: 0;
}

.jm-record .jm-about__heading {
	margin: 25px 0 20px;
}

.jm-credits,
.jm-record__text {
	padding-right: 25%;
}

.jm-credits {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

@media (max-width: 1200px) {
	.jm-about {
		flex-wrap: wrap;
		padding-top: 50px;
	}

	.jm-about__portrait,
	.jm-about__intro {
		flex-basis: 100%;
	}

	.jm-record {
		flex-direction: column;
	}
}

/* From 1024px the credits list runs full width with 25px under it;
   Training and Awards keep their quarter. */
@media (max-width: 1024px) {
	.jm-about {
		padding-bottom: 30px;
	}

	.jm-credits {
		padding-right: 0;
		padding-bottom: 25px;
	}

	.jm-record {
		padding-top: 75px;
		padding-bottom: 30px;
	}
}

/* On a phone the portrait and the introduction each carry 25px more
   under them, 25px apart. */
@media (max-width: 767px) {
	.jm-about {
		gap: 25px;
		padding-bottom: 20px;
	}

	.jm-about__portrait {
		padding-bottom: 50px;
	}

	.jm-about__intro {
		gap: 20px;
		padding-bottom: 25px;
	}

	.jm-social {
		gap: 10px;
	}

	/* The record's columns 25px apart, their titles with no space above. */
	.jm-record {
		gap: 25px;
		padding-bottom: 20px;
	}

	.jm-record .jm-about__heading {
		margin-top: 0;
	}
}

/* --- A plain page, nothing found --- */

.jm-page .jm-prose {
	max-width: var(--jm-measure);
}

.jm-not-found {
	padding: 0 var(--jm-pad) 25px;
}