/**
 * Centre page — laboratory grid and timetables.
 *
 * Loaded only on the pages listed in inc/legacy-centre.php, on top of
 * legacy-shared.css, which carries the sections, prose, file lists and
 * contact card this page shares with the laboratory and contacts pages.
 *
 * The page is a directory, not an article: almost everything on it is a link to
 * a PDF, a laboratory or a timetable. So the rules below spend their weight on
 * making rows and cards obviously tappable, and keep the prose quiet.
 */

/* -------------------------------------------------------------------------
 * 1. Laboratories
 * ---------------------------------------------------------------------- */

.imz-ctr__labs {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.imz-ctr__labs li {
	margin: 0;
}

/* Two columns so the arrow sits beside the name rather than being pushed to
   the foot of the card, which left a hand's width of nothing in every one. */
.imz-ctr__lab {
	align-content: start;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	column-gap: var(--wp--preset--spacing--20);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	transition: border-color var(--mui-transition), box-shadow var(--mui-transition),
		transform var(--mui-transition);
}

.imz-ctr__lab:hover {
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.imz-ctr__lab-kind {
	color: var(--wp--preset--color--contrast-secondary);
	grid-column: 1 / -1;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.imz-ctr__lab-name {
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.imz-ctr__lab:hover .imz-ctr__lab-name {
	color: var(--wp--preset--color--primary-dark);
}

.imz-ctr__arrow {
	align-self: center;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	border-right: 2px solid var(--wp--preset--color--primary);
	height: 8px;
	transform: rotate(-45deg);
	transition: transform var(--mui-transition);
	width: 8px;
}

.imz-ctr__lab:hover .imz-ctr__arrow {
	transform: rotate(-45deg) translate(2px, 2px);
}

/* -------------------------------------------------------------------------
 * 2. Timetables
 * ---------------------------------------------------------------------- */

.imz-ctr__schedules {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.imz-ctr__schedules li {
	margin: 0;
}

.imz-ctr__schedule {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--mui-divider);
	border-radius: var(--mui-radius);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	transition: border-color var(--mui-transition), box-shadow var(--mui-transition);
}

.imz-ctr__schedule:hover {
	border-color: var(--wp--preset--color--primary-light);
	box-shadow: var(--wp--preset--shadow--card);
}

/* The QR code is for a phone camera pointed at the screen; a reader already on
   the page follows the link instead, so it is sized as a supporting mark. */
.imz-ctr__qr {
	/* The one literal colour here: a QR code has to stay dark-on-white to be
	   readable, including under the dark style variation. */
	background-color: #fff;
	border-radius: var(--mui-radius-sm);
	flex: 0 0 auto;
	line-height: 0;
	padding: 6px;
}

.imz-ctr__qr-img {
	display: block;
	height: auto;
	width: 96px;
}

.imz-ctr__schedule-lab {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.imz-ctr__schedule-cta {
	color: var(--wp--preset--color--primary-dark);
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 500;
	margin-top: 8px;
}

.imz-ctr__schedule-cta::after {
	content: " →";
	transition: opacity var(--mui-transition);
}

/* -------------------------------------------------------------------------
 * 3. Narrow screens
 * ---------------------------------------------------------------------- */

@media (max-width: 782px) {
}

@media (prefers-reduced-motion: reduce) {
	.imz-ctr__lab,
	.imz-ctr__lab:hover,
	.imz-ctr__lab:hover .imz-ctr__arrow {
		transform: none;
	}
}