/**
 * FIND US — map and legend
 *
 * Measured: map 800x555 in a white card, then a two-column legend of 390x83
 * cards, 20 apart across and 12 down.
 */

@layer components {

	.findus__heading {
		margin-block: var(--space-2xs) 0;
		font-size: var(--fs-heading-lg);
		line-height: var(--lh-heading-lg);
		letter-spacing: var(--track-heading-lg);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
	}

	/* ---- Map ------------------------------------------------------------- */

	.mapview {
		position: relative;
		margin-block-start: var(--space-xl);
		background-color: var(--white);        /* the plan is drawn on white */
		border-radius: var(--radius-card);
		overflow: hidden;
	}

	.mapview__viewport {
		position: relative;
		aspect-ratio: 800 / 555;
		overflow: hidden;
		cursor: grab;
	}

	.mapview.is-zoomed .mapview__viewport:active { cursor: grabbing; }

	.mapview__viewport:focus-visible {
		outline: 2px solid var(--clr-accent);
		outline-offset: -2px;
	}

	.mapview__image {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
		/*
		 * The origin has to be the top-left corner for the clamping maths to
		 * hold — it is what makes the image span [t, t + size * scale].
		 */
		transform-origin: 0 0;
		will-change: transform;
		user-select: none;
		-webkit-user-drag: none;
	}

	/* ---- Controls --------------------------------------------------------- */

	.mapview__controls {
		position: absolute;
		inset-block-start: var(--space-s);
		inset-inline-end: var(--space-s);
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.mapview__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		background-color: rgb(0 0 0 / 0.72);
		border: 1px solid rgb(255 255 255 / 0.18);
		border-radius: 0.5rem;
		color: var(--white);
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
		transition: background-color var(--transition-fast);
	}

	.mapview__btn svg { inline-size: 1.125rem; block-size: 1.125rem; }

	.mapview__btn:hover,
	.mapview__btn:focus-visible { background-color: var(--clr-accent); }

	.mapview__hint {
		position: absolute;
		inset-block-end: var(--space-2xs);
		inset-inline-start: var(--space-s);
		margin: 0;
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--ink-600);
	}

	/* ---- Legend ----------------------------------------------------------- */

	.findus__legend {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.75rem 1.25rem;                  /* 12 down, 20 across */
		margin: var(--space-s) 0 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 30rem) {
		.findus__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	.map-key {
		display: grid;
		grid-template-columns: 2.75rem 1fr;
		gap: var(--space-s);
		align-items: start;
		min-block-size: 5.1875rem;             /* 83px */
		padding: 0.75rem;
		background-color: #0d0d0d;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-card);
	}

	/*
	 * The lounge itself. Tinted rather than merely outlined — it is the one
	 * marker the visitor is actually looking for.
	 */
	.map-key.is-lead {
		background-color: color-mix(in srgb, var(--clr-accent) 14%, var(--white));
		border-color: var(--clr-accent);
		color: var(--ink-900);
	}

	.map-key__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: 0.375rem;
		overflow: hidden;
	}

	.map-key__icon img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
	}

	.map-key__body > * { margin: 0; }

	.map-key__title {
		font-size: 1.0625rem;                  /* 17px */
		font-weight: var(--weight-semibold);
		line-height: 1.2;
	}

	.map-key__text {
		margin-block-start: 0.25rem;
		font-size: 0.9375rem;
		line-height: 1.35;
		color: var(--clr-text-inverse-subtle);
	}

	.map-key.is-lead .map-key__text { color: var(--ink-600); }
}