/*
 * team.css — the team card: a round portrait beside the name, function and contact of one person.
 *
 * Every rule hangs off `.wi-team-card`, the class of library unit M13 `team-card` — a Divi group
 * holding one image and one text module. bin/setup-team-cards.sh wrapped the 23 people of
 * /wildislands/life-project/project-team/ into such cards; an editor adds the next one by duplicating a card or
 * inserting M13 from the library. inc/team.php loads this file on every page carrying a card.
 *
 * The 23 portraits arrive in three shapes: twelve squares of 200x200, five portraits as tall as
 * 2238x2560 and six landscapes as wide as 2560x1707. All of them are shown through the same
 * circular window, cropped by the browser rather than by us, so no source file is touched.
 */

:root {
	/*
	 * 200px is not an arbitrary round number: it is the exact size of the twelve TYPO3 crops, the
	 * smallest material on the page. Anything larger would stretch those twelve, and they are the
	 * ones with no reserve — the other eleven have between 595 and 2158 pixels on their short edge
	 * and are only ever scaled down.
	 */
	--wi-team-portrait-size: 200px;
	--wi-team-portrait-gap: 32px;

	/* Between the portrait and the text beside it: the paragraph spacing of the body copy. */
	--wi-team-text-gap: var(--wi-space-paragraph);
}

/*
 * The circular window.
 *
 * `.et_pb_image_wrap` is a span and therefore inline by default; without `display: block` the
 * width and height below would not apply at all.
 */
.wi-team-card .et_pb_image .et_pb_image_wrap {
	display: block;
	width: var(--wi-team-portrait-size);
	height: var(--wi-team-portrait-size);
	overflow: hidden;
	border-radius: 50%;

	/* Shows through only where a photograph is transparent or fails to load. */
	background-color: var(--wi-color-surface-muted);
}

/*
 * The photograph inside it.
 *
 * `object-position` sits above the middle because a portrait puts the head in the upper half:
 * centred cropping cuts foreheads on the tall images. 30% keeps the face in frame on all three
 * shapes without pushing the landscapes off their subject.
 *
 * Three declarations here undo what the markup asks for. The `width` and `height` attributes on
 * the img (200x202, 768x576, …) are what produced the unequal boxes; `height: 100%` also has to
 * beat WordPress's own `img[class*=wp-image-] { height: auto }`, which it does on specificity —
 * that rule sits inside `:where()` and counts as zero.
 */
.wi-team-card .et_pb_image .et_pb_image_wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/*
 * Cards stacked in the same column.
 *
 * Eleven of the 23 people share a column with others — the legacy page put two or three people in
 * one `col-md-6`, and the importer kept that.
 */
.wi-team-card + .wi-team-card {
	margin-top: var(--wi-team-portrait-gap);
}

/*
 * Portrait beside the text, as on the legacy site.
 *
 * The legacy page set every person as `ce-textpic ce-left ce-intext ce-nowrap`: picture on the
 * left, text beside it, no text running underneath. The importer stacked the portrait above the
 * text instead (E12), which made every card taller than the original; this takes that back.
 *
 * Two people per line stay where the legacy page had them: Divi's two half-width columns sit side
 * by side down to 981px. Below that Divi stacks the columns into one. The portrait stands beside
 * the text wherever that leaves a readable text track next to 200px, measured on the rendered
 * page:
 *
 *   from 1101px   two columns, text track 194px and more        beside
 *   981–1100px    two columns, text track down to 149px         stacked
 *   601–980px     one column, text track 259px and more         beside
 *   up to 600px   one column                                    stacked
 *
 * At 149px a function title wraps after every word and an e-mail address breaks mid-word; the
 * card grows taller than the stacked one it replaces. 1100px is a step the theme already uses.
 *
 * `align-items: start` puts the name level with the top of the portrait. The margins Divi and
 * sections.css put on the modules are dropped here; the grid gap takes their place, so the
 * spacing is set in one spot rather than layered on top.
 */
@media only screen and (min-width: 1101px), only screen and (min-width: 601px) and (max-width: 980px) {
	.wi-team-card {
		display: grid;
		grid-template-columns: var(--wi-team-portrait-size) minmax(0, 1fr);
		column-gap: var(--wi-team-text-gap);
		align-items: start;
	}

	.wi-team-card > .et_pb_module {
		margin: 0;
	}

	/* An e-mail address is one unbroken word and would otherwise push past the text track. */
	.wi-team-card > .et_pb_text {
		overflow-wrap: anywhere;
	}
}

/*
 * Portrait above the text, where the text track beside it would be too narrow (see above).
 */
@media only screen and (max-width: 600px), only screen and (min-width: 981px) and (max-width: 1100px) {
	.wi-team-card > .et_pb_image.et_pb_module {
		margin-bottom: var(--wi-space-paragraph-narrow);
	}
}