/*
 * The Installations landing page and the installation pages.
 *
 * Loaded only by template-installations-landing.php and
 * template-installation.php, so nothing here can reach the existing
 * Installations page. Every value is built from the theme's own tokens
 * (--u, --ink, --graphite, --accent, --ease and the --fp-* type settings),
 * so the Customizer colour and font controls still drive it.
 *
 * The sculpture grid holds every piece to one 5:4 frame, contained and set
 * on a common bottom line, because a row of them should read as a shelf.
 * An installation is a place rather than an object, and there are only
 * three, so they are given the opposite treatment: one wide band each,
 * alternating left and right, each photograph at its own natural shape.
 */

/* ==========================================================================
   1. Landing page
   ========================================================================== */

.page-body--inst-landing {
	padding-top: calc(120 * var(--u));
}

/* The page opens straight on the first installation, with no heading over it.
   The h1 is kept in the markup and clipped rather than deleted, so it is
   still the page's one heading for a screen reader and for a search result -
   the same treatment, and the same reason, as the Gallery template's title
   in section 7b of style.css. Delete this rule to put the heading back. */
.page-body--inst-landing .page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The rule under that heading goes with it. */
.page-body--inst-landing .page-rule {
	display: none;
}

.page-body--inst-landing .inst-landing__intro > * {
	max-width: calc(760 * var(--u));
	margin-left: 0;
	margin-right: auto;
}

.inst-landing__intro {
	margin-top: calc(28 * var(--u));
}

.fp-installs {
	display: flex;
	flex-direction: column;
	gap: calc(112 * var(--u));
	max-width: calc(1180 * var(--u));
	/* No top margin: with the heading and its rule taken off the page, the
	   only air above the first band is the section's own padding-top. */
	margin: 0 auto;
	padding-bottom: calc(40 * var(--u));
}

.fp-install {
	margin: 0;
}

/* A hairline above every band but the first, so the set reads as a list of
   three rather than three loose blocks. */
.fp-install + .fp-install {
	padding-top: calc(112 * var(--u));
	border-top: 1px solid rgba(11, 13, 33, 0.11);
}

/* A wide photograph takes the larger share of the band, because width is the
   only way it can carry any height. */
.fp-install__link {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
	align-items: center;
	column-gap: clamp(30px, calc(74 * var(--u)), 92px);
	color: inherit;
	text-decoration: none;
}

/* An upright photograph is tall enough to hold the band on its own, so it is
   given less width and the story more - otherwise it would tower over the
   two landscape bands either side of it. */
.fp-install--portrait .fp-install__link {
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
}

/* Alternate sides. Both children are placed on row 1 explicitly, so the flip
   is a change of column and nothing reflows.

   The column widths have to be mirrored along with them: the templates above
   put the photograph's share first, so on a flipped band - where the picture
   sits in column 2 - the same two values are written the other way round.
   Without this the picture inherits the column meant for the story and a
   flipped band comes out visibly smaller than the ones either side of it. */
.fp-install:nth-child(even) .fp-install__link {
	grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
}

.fp-install--portrait:nth-child(even) .fp-install__link {
	grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
}

.fp-install:nth-child(even) .fp-install__frame {
	grid-column: 2;
	grid-row: 1;
}

.fp-install:nth-child(even) .fp-install__body {
	grid-column: 1;
	grid-row: 1;
}

/* --- the photograph ------------------------------------------------------ */

/* No overflow:hidden here. It was needed only while the photograph moved on
   hover; with a shadow instead, clipping the frame clips the shadow away
   entirely - the glow is painted outside the picture's own edges, so the
   frame has to let it out. */
.fp-install__frame {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* The photograph fills its column and keeps its own shape - no fixed frame
   with object-fit:cover, because the three run from 1070x1842 to 1868x1226
   and a single crop would take the head off the upright ones.

   The shared height budget is applied as a *width* cap worked back from the
   picture's own ratio, which the template hands over as --fp-ar. The obvious
   alternative - max-height with object-fit:contain - keeps the element box
   full width and letterboxes the picture inside it, and because the hover
   glow is drawn around the element box rather than around the visible
   photograph, those empty side bars lit up as pale vertical bands beside an
   upright picture. Capping the width instead means the box is always exactly
   the photograph, so the glow traces its real edges. */
.fp-install__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: calc(560 * var(--u) * var(--fp-ar, 10));
	margin: 0 auto;
	transition: box-shadow 0.25s var(--ease);
}

/* The photograph does not move on hover - it lifts instead. Close in kind to
   the shadow the sculpture grid uses on its pieces (.fp-piece a in
   style.css), just carried a little further, since a band here is a much
   larger picture than a tile in the grid and the grid's shadow all but
   disappeared under one. The alpha values are the dial: 0.16 on its own is
   the grid's, and raising them deepens the lift. */
.fp-install__link:hover .fp-install__img,
.fp-install__link:focus-visible .fp-install__img {
	box-shadow:
		0 18px 44px rgba(11, 13, 33, 0.28),
		0 4px 12px rgba(11, 13, 33, 0.18);
}

/* --- the story ----------------------------------------------------------- */

.fp-install__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Scoped through .fp-install so it outranks the theme's own .page-body h2,
   which would otherwise put its 1.8em top margin on the title and push the
   story out of line with the photograph beside it. */
.fp-install .fp-install__title {
	margin: 0;
	font-family: var(--fp-title-font);
	font-size: calc(clamp(24px, calc(34 * var(--u)), 40px) * var(--fp-title-scale));
	font-weight: var(--fp-title-weight);
	letter-spacing: 0.02em;
	line-height: 1.15;
	color: var(--ink);
	transition: color 260ms var(--ease);
}

.fp-install__link:hover .fp-install__title,
.fp-install__link:focus-visible .fp-install__title {
	color: var(--accent);
}

.fp-install__meta {
	display: block;
	margin-top: calc(10 * var(--u));
	font-family: var(--fp-gdetails-font);
	font-size: calc(clamp(15px, calc(17 * var(--u)), 19px) * var(--fp-gdetails-scale));
	font-style: italic;
	font-weight: var(--fp-gdetails-weight);
	color: var(--graphite);
}

/* A short accent rule that draws itself out when the band is pointed at -
   the one moving part, standing in for the shadow the sculpture grid uses. */
.fp-install__stroke {
	display: block;
	width: calc(46 * var(--u));
	height: 1px;
	margin: calc(24 * var(--u)) 0;
	background: var(--accent);
	transition: width 460ms var(--ease);
}

.fp-install__link:hover .fp-install__stroke,
.fp-install__link:focus-visible .fp-install__stroke {
	width: calc(104 * var(--u));
}

/* An upright photograph is given a narrow column, which leaves the story a
   wide one - wider than this cap, so the text stopped short and the whole
   band sat over to the left while the two landscape bands ran the full width
   of the page. On those bands the cap is what keeps a comfortable line
   length; on an upright one the column is already the limit, so the cap is
   lifted and the band reaches the right-hand edge like its neighbours. */
.fp-install--portrait .fp-install__teaser {
	max-width: none;
}

.fp-install__teaser {
	max-width: calc(460 * var(--u));
	margin: 0;
	font-family: var(--fp-body-font);
	font-size: calc(clamp(15px, calc(16 * var(--u)), 18px) * var(--fp-body-scale));
	font-weight: var(--fp-body-weight);
	line-height: 1.7;
	color: var(--graphite);
}

/* The band is one link, so the focus ring belongs to the whole band. */
.fp-install__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: calc(14 * var(--u));
}

.fp-installs__empty {
	max-width: calc(760 * var(--u));
	margin: calc(60 * var(--u)) auto;
	color: var(--graphite);
}

/* ==========================================================================
   2. One installation
   ========================================================================== */

.page-body--installation {
	padding-top: calc(96 * var(--u));
}

.installation-hero {
	max-width: calc(1040 * var(--u));
	margin: 0 auto calc(44 * var(--u));
	text-align: center;
}

/* An upright monument does not need the full band width - held to a narrower
   column instead, so the Ashurbanipal and Culinary Arts pages open at about
   the same size on screen rather than one filling the window. */
.installation-hero--portrait {
	max-width: calc(660 * var(--u));
}

/* --- a row of photographs across the top --------------------------------- */

/* Held to the same 760u measure as the title, the rule and the paragraphs, so
   the outer edge of the left photograph and the outer edge of the right one
   land exactly on the text margins below them. */
.installation-hero--row {
	max-width: calc(760 * var(--u));
	margin: 0 auto calc(46 * var(--u));
	text-align: left;
}

.installation-hero--row .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* The two upright photographs are within about 2% of each other in shape.
	   Rather than crop them to an identical frame, they hang from a shared
	   bottom line and are allowed to differ by that much at the top. */
	align-items: end;
	/* No gap: the two photographs sit edge to edge, touching. */
	gap: 0;
	margin: 0;
}

.installation-hero--row .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	flex: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	/* Stated on the item as well as on the container: the figure is sized by
	   its picture, and this is what actually drops the shorter of the two
	   onto the taller one's bottom line. */
	align-self: end;
	/* Without this the figure keeps a line-box under the picture - about 9px
	   of inline leading - which is enough to throw the two bottoms out of
	   line even once they are aligned. */
	line-height: 0;
}

.installation-hero--row .wp-block-gallery.has-nested-images figure.wp-block-image a {
	display: block;
	width: 100%;
}

/* One frame for the whole row, its shape taken from the most upright of the
   photographs in it (--fp-row-ar, worked out by the template). Equal widths
   and one shared ratio means equal heights, so the bottoms line up by
   construction - align-items/align-self alone would not do it here. The two
   Ashurbanipal photographs are 0.669 and 0.681, so the wider of them gives
   up under 2% off its left and right edges and nothing is cropped off the
   top of the monument. */
.installation-hero--row .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--fp-row-ar, auto);
	object-fit: cover;
	object-position: center;
}

/* --- a single photograph hoisted to the top ------------------------------ */

/* Same width as the featured-image hero it stands in for, so a page that
   opens with one picture looks exactly as it did before that picture moved
   into the content. Listed after --row so it wins the width back. */
.installation-hero--single {
	max-width: calc(1040 * var(--u));
	text-align: center;
}

.installation-hero--single.installation-hero--portrait {
	max-width: calc(660 * var(--u));
}

.installation-hero--single figure.wp-block-image {
	margin: 0;
}

.installation-hero--single figure.wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(620 * var(--u));
	margin: 0 auto;
	/* No shared frame when there is nothing to share it with. */
	aspect-ratio: auto;
	object-fit: contain;
}

.installation-hero a {
	display: inline-block;
	max-width: 100%;
	transition: box-shadow 320ms var(--ease);
}

.installation-hero a:hover,
.installation-hero a:focus-visible {
	box-shadow: 0 14px 38px rgba(11, 13, 33, 0.18);
}

.installation-hero__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(620 * var(--u));
	margin: 0 auto;
}

.installation-head {
	max-width: calc(760 * var(--u));
	margin: 0 auto calc(18 * var(--u));
}

.page-body--installation .page-title {
	margin-bottom: calc(8 * var(--u));
}

.installation-head__meta {
	margin: 0 0 calc(20 * var(--u));
	font-family: var(--fp-gdetails-font);
	font-size: calc(clamp(16px, calc(18 * var(--u)), 20px) * var(--fp-gdetails-scale));
	font-style: italic;
	font-weight: var(--fp-gdetails-weight);
	color: var(--graphite);
}

.page-body--installation .page-rule {
	max-width: calc(760 * var(--u));
	margin: 0 auto;
}

.installation-body {
	padding-top: calc(38 * var(--u));
}

/* The same reading measure the Installations page uses, so a paragraph is
   the same length here as it is there. */
.installation-body > * {
	max-width: calc(760 * var(--u));
	margin-left: auto;
	margin-right: auto;
}

/* Set to the same size as the prose on the About page, which carries the same
   kind of long-form writing. Both are the theme's body text scaled by the
   Customizer's "Body text - size", but About states a larger base of its own
   (see .page-body--about .entry-content p in style.css) - without this the
   story here would read about a fifth smaller than the one over there. */
.installation-body p {
	font-size: calc(clamp(19px, calc(21 * var(--u)), 25px) * var(--fp-body-scale));
	line-height: 1.65;
}

/* The place/date line is already printed in the header above, from this same
   paragraph - taken off the page here rather than deleted from the content,
   so the block stays where an editor expects to find it. */
.installation-body > .installation-meta {
	display: none;
}

.installation-body > .alignwide {
	max-width: calc(1040 * var(--u));
}

.installation-body > .alignfull {
	max-width: none;
}

/* --- photographs in the body --------------------------------------------- */

/* WordPress lays a nested-images gallery out with flex and sizes the figures
   from its own block stylesheet, which is not sizing them here - they come
   out full width and wrap one to a row. Rather than patch that, the gallery
   is laid out directly as a grid, which is also what makes a shared frame
   possible below. */
.installation-body .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(34 * var(--u));
}

.installation-body .wp-block-gallery.has-nested-images.columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

/* :not(#individual-image) is not a typo and matches nothing - it is the trick
   WordPress itself uses on this exact selector to give the gallery figure an
   id's worth of specificity. Without the same guard here, the block
   stylesheet's own width: calc(50% - gap/2) wins and each photograph comes
   out at half its grid cell. */
.installation-body .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	flex: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Left to themselves these run to whatever height their own proportions ask
   for - the maquette is 775x1618 and would come out twice the height of the
   street view beside it. They are given one shared frame instead, contained
   rather than cropped and set on its bottom edge, which is the same
   arrangement the sculpture grid uses to stand a row of pieces on one line. */
.installation-body .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	object-position: bottom center;
}

/* A lone photograph is centred in the text column.

   It has to be done here, on the figure, rather than with auto margins on the
   image: the link wrapping the picture is an inline-block shrink-wrapped to
   it, so the image has no spare width inside that link and its auto margins
   resolve to zero. The figure's text-align is what actually places the link. */
.installation-body > .wp-block-image {
	text-align: center;
}

/* A lone photograph has no row to line up with, so it only wants a ceiling.

   Same id-strength guard as the gallery above: without it the block
   stylesheet's width:100% survives, the max-height clamps the box anyway,
   and the picture is stretched to fit - a 1015x925 photograph came out at
   1077x649. object-fit is set as well so that even if some later rule does
   win the width, the photograph is fitted inside the box rather than
   distorted to fill it. */
.installation-body > .wp-block-image img:not(#individual-image) {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: calc(600 * var(--u));
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* --- prev / next --------------------------------------------------------- */

.installation-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(30 * var(--u));
	max-width: calc(760 * var(--u));
	margin: calc(84 * var(--u)) auto 0;
	padding-top: calc(30 * var(--u));
	border-top: 1px solid rgba(11, 13, 33, 0.11);
}

.installation-pager__link {
	display: flex;
	flex-direction: column;
	gap: calc(7 * var(--u));
	color: inherit;
	text-decoration: none;
}

.installation-pager__link--next {
	text-align: right;
}

.installation-pager__label {
	font-family: var(--fp-gtitle-font);
	font-size: calc(clamp(10px, calc(11 * var(--u)), 12px) * var(--fp-gtitle-scale));
	font-weight: var(--fp-gtitle-weight);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}

.installation-pager__title {
	font-family: var(--fp-title-font);
	font-size: calc(clamp(15px, calc(18 * var(--u)), 21px) * var(--fp-title-scale));
	font-weight: var(--fp-title-weight);
	line-height: 1.25;
	color: var(--ink);
	transition: color 240ms var(--ease);
}

.installation-pager__link:hover .installation-pager__title,
.installation-pager__link:focus-visible .installation-pager__title {
	color: var(--accent);
}

/* ==========================================================================
   3. Narrower screens
   ========================================================================== */

@media (max-width: 900px) {
	/* The two flipped-band selectors are listed as well: they carry a higher
	   specificity than the plain ones, so leaving them out would let a
	   two-column template survive into the stacked layout. */
	.fp-install__link,
	.fp-install--portrait .fp-install__link,
	.fp-install:nth-child(even) .fp-install__link,
	.fp-install--portrait:nth-child(even) .fp-install__link {
		grid-template-columns: minmax(0, 1fr);
		row-gap: calc(30 * var(--u));
	}

	/* Stacked, the photograph goes above the story on every band - the
	   alternation has nothing left to alternate across. */
	.fp-install:nth-child(even) .fp-install__frame,
	.fp-install:nth-child(even) .fp-install__body {
		grid-column: 1;
		grid-row: auto;
	}

	.fp-install__img {
		max-height: calc(520 * var(--u));
	}

	.fp-install__teaser {
		max-width: none;
	}

	.fp-installs {
		gap: calc(72 * var(--u));
	}

	.fp-install + .fp-install {
		padding-top: calc(72 * var(--u));
	}
}

@media (max-width: 560px) {
	.installation-body .wp-block-gallery.has-nested-images,
	.installation-hero--row .wp-block-gallery.has-nested-images {
		grid-template-columns: minmax(0, 1fr);
	}

	.installation-pager {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(26 * var(--u));
	}

	.installation-pager__link--next {
		text-align: left;
	}
}

/* The photograph's hover shadow is left alone here: it is a change of colour,
   not of position, so it is not the kind of effect this setting asks about.
   The things that actually travel - the stroke drawing out, the two arrows
   sliding - simply arrive at their end state instead. */
@media (prefers-reduced-motion: reduce) {
	.fp-install__stroke,
	.fp-install__arrow,
	.installation-back__arrow {
		transition: none;
	}
}