/* ==========================================================================
   Leadership
   --------------------------------------------------------------------------
   Leadership wears the Contact composition, and everything it needs is already
   in contact.css. This sheet exists for one case that Contact itself never
   meets: the stage with no picture in it.

   On Contact the details sit at the top of the row and the address crosses its
   middle, and the two cannot collide because the portrait makes that row tall
   enough to hold them apart. Leadership ships with no image chosen, so the row
   collapses to its own minimum, the middle column resolves to 0px, and the
   large line - which is centred in that row - rises into the details beside it
   and strikes through them.

   The line is meant to cross a picture. With no picture there is nothing to
   cross, so rather than force the two to share a row, the stage becomes a
   single column and they are given a row each. The moment an image is chosen
   in wp-admin, is-typeonly goes and the Contact geometry returns untouched.

   Every rule is scoped to .nsn-is-leadership, so none of this can reach the
   Contact page.
   ========================================================================== */

.nsn-is-leadership .nsn-contact__stage.is-typeonly {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;

	/*
	 * Wide enough that the two rows cannot touch. The line is set very large,
	 * so its line box carries a lot of leading above the glyphs - a gap that
	 * looks generous in the source still measures as a near miss against the
	 * details above it, which is why this is set from the viewport rather than
	 * from a fixed step.
	 */
	row-gap: clamp(2.5rem, 6vw, 5rem);

	/* The height came from holding a picture. There is none, so let the
	   content set it rather than reserving a void underneath. */
	min-height: 0;
}

.nsn-is-leadership .nsn-contact__stage.is-typeonly .nsn-contact__aside--start,
.nsn-is-leadership .nsn-contact__stage.is-typeonly .nsn-contact__aside--end {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	text-align: left;
}

/*
 * The line gets its own row, full width, and is centred in it. Separated
 * vertically from the details, so it stays clear of them however long either
 * one runs - the same guarantee contact.css relies on, arrived at by rows
 * instead of by the height of a picture.
 */
.nsn-is-leadership .nsn-contact__stage.is-typeonly .nsn-contact__email-wrap {
	grid-column: 1;
	grid-row: 2;
	justify-self: center;

	/* The line is set very large and may be wider than the column. Allow it to
	   shrink rather than push the page sideways. */
	max-width: 100%;
}

/*
 * Set as a paragraph rather than a link when no destination has been given, so
 * it needs the anchor's own display and cursor removed - it is type here, and
 * nothing happens when it is clicked.
 */
.nsn-is-leadership p.nsn-contact__email {
	margin: 0;
	cursor: default;
}

/*
 * The line, in flow.
 *
 * contact.css centres the line absolutely inside the wrapper - top: 50% with a
 * -50% translate - because there the wrapper is the picture's box and the line
 * is meant to overhang it on both sides. With no picture the wrapper has no
 * height, so "centred on it" means the line spills as far above that point as
 * below, and it reaches back up into the row above however wide the gap is
 * made. Widening the gap treats the symptom; the line is simply not in flow.
 *
 * Here it is put back into flow, so its row is as tall as the line really is
 * and the gap above it means what it says. The roll is untouched: contact.js
 * animates the two faces inside this element, never the element itself.
 */
.nsn-is-leadership .nsn-contact__stage.is-typeonly .nsn-contact__email {
	position: static;
	transform: none;
	max-width: 100%;
}