.grave-offices,
.grave-about-offices {
	--grave-location-card-radius: var(--wp--custom--radius--md);
	--grave-location-card-background: var(--wp--preset--color--surface);
	--grave-location-selected-background: var(--wp--preset--color--primary);
	--grave-location-selected-color: var(--wp--preset--color--primary-dark);
	--grave-location-map-radius: var(--wp--custom--radius--md);
	--grave-location-control-color: var(--wp--preset--color--fg);
	--grave-location-control-background: var(--wp--preset--color--primary-soft);
	--grave-location-control-active-color: var(--wp--preset--color--primary-dark-contrast);
	--grave-location-control-active-background: var(--wp--preset--color--primary-dark);
	--grave-location-control-radius: var(--wp--custom--radius--sm);
	--grave-location-pin-background: var(--wp--preset--color--primary);
	--grave-location-pin-border: var(--wp--preset--color--surface);
}

.grave-offices,
.grave-about-offices__locations {
	container-name: offices;
}

.grave-offices .grave-location-map .leaflet-control-zoom,
.grave-about-offices .grave-location-map .leaflet-control-zoom {
	overflow: hidden;
}

.grave-offices .grave-location-map .leaflet-top.leaflet-left,
.grave-about-offices .grave-location-map .leaflet-top.leaflet-left {
	top: auto;
	bottom: 0;
}

.grave-offices .grave-location-map .leaflet-top .leaflet-control,
.grave-about-offices .grave-location-map .leaflet-top .leaflet-control {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

.grave-offices .grave-locations__columns,
.grave-about-offices__locations .grave-locations__columns {
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
}

.grave-offices__map-column,
.grave-about-offices__map-column {
	order: 2;
}

.grave-offices__cards-column,
.grave-about-offices__cards-column {
	order: 1;
}

.grave-office-card {
	cursor: pointer;
}

.grave-office-card .grave-location__select {
	position: absolute;
	inline-size: 0.0625rem;
	block-size: 0.0625rem;
	min-block-size: 0;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.grave-offices .grave-locations__cards,
.grave-about-offices .grave-locations__cards {
	--grave-carousel-bleed-start: var(--wp--preset--spacing--20);
	--grave-carousel-bleed-end: var(--wp--preset--spacing--20);
}

.grave-office-card.is-selected,
.grave-office-card.is-selected .wp-block-heading {
	color: var(--wp--preset--color--primary-contrast);
}

/* Core emits preset text colours with !important. */
.grave-office-card.is-selected .has-text-color {
	color: var(--wp--preset--color--primary-contrast) !important;
}

.grave-office-card .grave-office-card__icon {
	flex: 0 0 auto;
	padding: var(--wp--preset--spacing--25);
}

.grave-office-card .grave-location__address {
	margin-block-start: var(--wp--preset--spacing--20);
	margin-block-end: 0;
}

.grave-office-card:focus-within {
	outline-color: var(--wp--preset--color--primary-dark);
}

@container (min-width: 40.001rem) {
	.grave-offices__map-column > .grave-location-map,
	.grave-offices__map-column .grave-location-map__canvas,
	.grave-about-offices__map-column > .grave-location-map,
	.grave-about-offices__map-column .grave-location-map__canvas {
		height: 100%;
	}
}

@container offices (max-width: 40rem) {
	/* Core cancels alignfull inside Columns, so the carousel must offset the leading gutter. */
	.grave-offices .grave-locations__columns > .grave-offices__cards-column,
	.grave-about-offices .grave-locations__columns > .grave-about-offices__cards-column {
		inline-size: calc(100% + var(--wp--custom--gutter));
	}

	.grave-offices .grave-locations__cards,
	.grave-about-offices .grave-locations__cards {
		margin-inline-start: calc(-1 * var(--wp--custom--gutter));
		inline-size: calc(100% + var(--wp--custom--gutter));
		--grave-carousel-bleed-start: var(--wp--custom--gutter);
		--grave-carousel-bleed-end: 0;
	}

	/* The widened track triggers Core's wide Locations query, which resets mobile basis and snapping. */
	.grave-offices .grave-locations__track > *,
	.grave-about-offices .grave-locations__track > * {
		--grave-carousel-visible: calc(1 + var(--grave-carousel-mobile-peek));
		--grave-carousel-gutters: var(--grave-carousel-gap);

		flex-basis: calc(
			(100% - var(--grave-carousel-gutters)) / var(--grave-carousel-visible)
		);
		scroll-snap-align: start;
	}

	.grave-offices__map-column,
	.grave-about-offices__map-column {
		--wp--custom--map--height: var(--wp--custom--map--mobile-height);
	}

	.grave-offices__map-column,
	.grave-offices__cards-column,
	.grave-about-offices__map-column,
	.grave-about-offices__cards-column {
		order: initial;
	}
}