/**
 * Laboratory pages — one card per instrument.
 *
 * Loaded only on the pages listed in inc/legacy-labs.php, on top of
 * legacy-shared.css, which carries the sections, prose and file lists these
 * pages share with the centre page.
 *
 * Each card is a specification sheet: a name, photographs of the instrument,
 * and a run of labelled blocks. The labels are the thing a reader scans for —
 * "Види досліджень" is the question almost everyone arrives with — so they get
 * the colour, and the bodies stay quiet underneath them.
 */

/* -------------------------------------------------------------------------
 * 1. Instrument cards
 * ---------------------------------------------------------------------- */

.imz-lab__unit {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius-lg);
	display: block;
	padding: var(--wp--preset--spacing--40);
}

.imz-lab__unit + .imz-lab__unit {
	margin-top: var(--wp--preset--spacing--40);
}

.imz-lab__name {
	align-items: baseline;
	color: var(--wp--preset--color--contrast);
	display: flex;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	gap: 12px;
	letter-spacing: -0.005em;
	line-height: 1.3;
	margin: 0;
}

/* The number is only drawn on pages that hold more than one instrument, where
   it says how far through the list you are. On a single-instrument page it
   would be a label reading "1 of 1". */
.imz-lab__index {
	background-color: var(--wp--preset--color--primary-surface);
	border-radius: var(--mui-radius-pill);
	color: var(--wp--preset--color--primary-dark);
	flex: 0 0 auto;
	font-feature-settings: "tnum";
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1.5;
	min-width: 1.75em;
	padding: 2px 8px;
	text-align: center;
}

.imz-lab__units:not(.imz-lab__units--numbered) .imz-lab__index {
	display: none;
}

.imz-lab__name-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 2. Photographs
 * ---------------------------------------------------------------------- */

/*
 * These were uploaded at every ratio from 259×120 to 245×397, and an
 * instrument is not a portrait — cropping one to a common box would cut the
 * stage off a microscope. So the panel is a fixed frame and the photographs
 * are centred inside it at whatever shape they came in.
 */
.imz-lab__media {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30);
}

/* A grid rather than a wrapping flex row: where a card carries two
   photographs they are wide enough to overflow the line and would drop onto a
   row each, leaving half the panel empty. In a column they scale to fit. */
.imz-lab__media--multi {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.imz-lab__figure {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	min-width: 0;
}

.imz-lab__photo {
	border-radius: var(--mui-radius-sm);
	display: block;
	height: auto;
	max-height: 17rem;
	max-width: 100%;
	width: auto;
}

/* -------------------------------------------------------------------------
 * 3. Specifications
 * ---------------------------------------------------------------------- */

.imz-lab__lede {
	margin-top: var(--wp--preset--spacing--30);
}

.imz-lab__specs {
	margin-top: var(--wp--preset--spacing--30);
}

.imz-lab__spec + .imz-lab__spec,
.imz-lab__spec + .imz-lab__group {
	margin-top: var(--wp--preset--spacing--30);
}

/* A label with nothing under it heads the labels that follow, so it is set as
   a rule across the card rather than as another entry in the run. */
.imz-lab__group {
	border-top: 1px solid var(--mui-divider);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.imz-lab__group + .imz-lab__spec {
	margin-top: var(--wp--preset--spacing--20);
}

.imz-lab__spec-label {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin: 0 0 6px;
}

.imz-lab__spec-body {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	max-width: var(--imz-measure);
}

.imz-lab__spec-body :is(ul, ol) {
	margin: 0;
	padding-left: 1.2em;
}

.imz-lab__spec-body li {
	margin: 0 0 0.3em;
}

.imz-lab__spec-body li:last-child {
	margin-bottom: 0;
}

.imz-lab__spec-body li::marker {
	color: var(--wp--preset--color--primary-light);
}

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

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

.imz-lab__spec-body a {
	color: var(--wp--preset--color--primary-dark);
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 4. Narrow screens
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.imz-lab__unit {
		border-radius: var(--mui-radius);
		padding: var(--wp--preset--spacing--30);
	}

	.imz-lab__name {
		font-size: var(--wp--preset--font-size--medium);
		gap: 8px;
	}

	.imz-lab__media {
		padding: var(--wp--preset--spacing--20);
	}

	.imz-lab__photo {
		max-height: 13rem;
	}
}