/**
 * spaces: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- A room on the campus map ------------------------------------- *
 *
 * Mappedin, in the page, for the ten spaces that carry a location id. The
 * frame is 16:10 because the viewer puts its own controls down the side and
 * a squarer box leaves the room itself the size of a postage stamp.
 * ------------------------------------------------------------------------- */

.cong-space-map {
	margin: var(--wp--preset--spacing--40) 0 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sky-mid) 55%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
}

.cong-space-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
}

@media (max-width: 34rem) {
	.cong-space-map iframe {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Rooms and spaces --------------------------------------------- *
 *
 * A directory, not a gallery. None of the twenty-six spaces has a photograph,
 * so the tiles this replaces were identical rectangles and the name on each
 * was the only thing doing any work. Here the name is the whole row.
 * ------------------------------------------------------------------------- */

.cong-spaces {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 52rem) {
	.cong-spaces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.cong-spaces__building {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--lg);
}

.cong-spaces__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-spaces__item + .cong-spaces__item {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--sky-mid) 45%, transparent);
}

.cong-spaces__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.65rem 0.5rem 0.65rem 0;
	border-radius: var(--wp--custom--radius--sm, 6px);
	color: inherit;
	text-decoration: none;
}

.cong-spaces__link:hover,
.cong-spaces__link:focus-visible {
	color: var(--wp--preset--color--leaf);
}

.cong-spaces__name {
	flex: 1 1 auto;
	font-weight: 600;
}

.cong-spaces__meta {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Quiet: it marks the ten rooms the map can find, and must not read as a
   fault on the other sixteen. */
.cong-spaces__map {
	flex: 0 0 auto;
	padding: 0.1rem 0.5rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}