/**
 * Components shared by the rebuilt legacy pages.
 *
 * Loaded on the centre page and the five laboratory pages, alongside whichever
 * of centre.css / labs.css that page needs. The markup comes from
 * inc/class-imz-material-legacy-ui.php.
 *
 * Every colour resolves through a --wp--preset--* or --mui-* property, so the
 * dark and Material Design 2 style variations restyle it for free.
 */

.imz-legacy {
	--imz-measure: 42rem;
}

/* The theme does not set a global border-box, and the cards on these pages are
   padded boxes that have to fill a grid cell exactly. Without this they each
   stand 50px taller than their row and lap over whatever follows. */
.imz-legacy *,
.imz-legacy *::before,
.imz-legacy *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 1. Sections
 * ---------------------------------------------------------------------- */

/* Whatever precedes a section — another section, the centre page's contact
   card, a laboratory page's opening paragraph — is held off at the same
   distance, so the rhythm down the page does not depend on what is above. */
.imz-legacy > * + .imz-sec {
	margin-top: var(--wp--preset--spacing--60);
}

.imz-sec__title {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	position: relative;
}

/* A short rule rather than a full divider: it marks the start of a section
   without drawing a line across the whole measure for each one. */
.imz-sec__title::before {
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 28px;
}

/* -------------------------------------------------------------------------
 * 2. Prose and passed-through markup
 * ---------------------------------------------------------------------- */

.imz-prose {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--30);
	max-width: var(--imz-measure);
}

.imz-prose p {
	margin: 0 0 0.75em;
}

.imz-prose p:last-child {
	margin-bottom: 0;
}

/* Anything the filters did not recognise is passed through untouched, so it is
   given a scroller of its own rather than being allowed to widen the page. */
.imz-table {
	margin-bottom: var(--wp--preset--spacing--30);
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
 * 3. People
 * ---------------------------------------------------------------------- */

/* The contacts page is five of these; the centre page is one, wider. */
.imz-people {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.imz-person {
	align-content: start;
	align-items: start;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius-lg);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 104px minmax(0, 1fr);
	height: 100%;
	padding: var(--wp--preset--spacing--30);
}

/* On its own, with a whole column to fill, the card can afford a larger
   portrait and more room around it. */
.imz-person--lead {
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 148px minmax(0, 1fr);
	padding: var(--wp--preset--spacing--40);
}

/*
 * The three children place themselves: portrait and text fill the first row,
 * the contact list drops to the second. Nothing is pinned to column 2, because
 * on a phone the grid is one column wide and a pinned child would open an
 * implicit second one — squeezing the real column, and the addresses in it,
 * down to a single character per line.
 */
.imz-person__portrait {
	border-radius: var(--mui-radius);
	overflow: hidden;
}

.imz-person__body {
	min-width: 0;
}

/* A card with no photograph gives its text the whole width. */
.imz-person__body:first-child {
	grid-column: 1 / -1;
}

/* The portraits were uploaded at 150×194 and 150×200, and the centre page's at
   856×1280. One ratio and a top-anchored crop line the faces up across a row,
   which is what the Адміністрація grid does too. */
.imz-person__photo {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

.imz-person__name {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 0;
}

.imz-person--lead .imz-person__name {
	font-size: var(--wp--preset--font-size--x-large);
}

.imz-person__role {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin: 6px 0 0;
}

.imz-person__detail {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin: 4px 0 0;
}

/* Spanning both columns, so an address has the width of the card rather than
   the width of the text beside the portrait. */
.imz-person__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nested in the text column rather than laid out by the card's grid, so it
   needs its own space above it. */
.imz-person__body > .imz-person__contacts {
	margin-top: var(--wp--preset--spacing--30);
}

.imz-person__contacts li {
	margin: 0;
}

/* The number and the address are what a visitor came for, so they are given
   the size of a control rather than left as underlined text. */
.imz-person__contact {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	display: block;
	padding: 8px 14px;
	text-decoration: none;
	transition: border-color var(--mui-transition), background-color var(--mui-transition);
}

.imz-person__contact:hover {
	background-color: var(--mui-hover-tint);
	border-color: var(--wp--preset--color--primary-light);
}

.imz-person__contact-label {
	color: var(--wp--preset--color--contrast-secondary);
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.imz-person__contact-value {
	color: var(--wp--preset--color--primary-dark);
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	/* Keeps a long address inside the card instead of widening it. */
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * 4. File lists
 * ---------------------------------------------------------------------- */

.imz-files {
	border-block: 1px solid var(--mui-divider);
	list-style: none;
	margin: 0;
	padding: 0;
}

.imz-files li {
	margin: 0;
}

.imz-files li + li {
	border-top: 1px solid var(--mui-divider);
}

.imz-file {
	align-items: baseline;
	color: var(--wp--preset--color--contrast);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	padding: 14px 12px;
	text-decoration: none;
	transition: background-color var(--mui-transition), color var(--mui-transition);
}

.imz-file:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

.imz-file__text {
	/* Lets a long document title wrap instead of pushing the badge onto a line
	   of its own. */
	min-width: 0;
}

.imz-file__name {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	max-width: var(--imz-measure);
}

/* On the centre page five of the seven request forms go to the same laboratory.
   Saying so on its own line is what makes that visible at a glance. */
.imz-file__meta {
	color: var(--wp--preset--color--contrast-secondary);
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	margin-top: 3px;
}

.imz-file:hover .imz-file__meta {
	color: var(--wp--preset--color--contrast-secondary);
}

.imz-file__type {
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius-sm);
	color: var(--wp--preset--color--contrast-secondary);
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	padding: 1px 6px;
}

.imz-file:hover .imz-file__type {
	border-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
}

/* -------------------------------------------------------------------------
 * 5. Narrow screens
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.imz-sec__title {
		font-size: var(--wp--preset--font-size--large);
	}

	.imz-person,
	.imz-person--lead {
		gap: var(--wp--preset--spacing--30);
		grid-template-columns: minmax(0, 1fr);
		padding: var(--wp--preset--spacing--30);
	}

	/* On one column the portrait would run the full width of the card, which is
	   far more of it than a head-and-shoulders photograph is worth. */
	.imz-person__portrait {
		max-width: 120px;
	}

	.imz-person__name,
	.imz-person--lead .imz-person__name {
		font-size: var(--wp--preset--font-size--large);
	}

	/* Stacked, the two pills should be one width rather than two ragged ones. */
	.imz-person__contacts li {
		width: 100%;
	}

	.imz-file {
		padding: 12px 8px;
	}
}